diff --git a/frontend/README.md b/frontend/README.md index 0bfffc7..dbfee36 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -11,9 +11,9 @@ You can modify and regenerate the page in three step. The execution of the follo ```shell cd .\frontend\ pnpm i -node .\finalize.mjs +pnpm build ``` -The `finalize.mjs` will compress and html and generate a new `WebSerialWebPage.h` in `../src` floder automatically. +The `finalize.js` will compress and html and generate a new `WebSerialWebPage.h` in `../src` floder automatically. Then you can rebuild your program, the new page ought be embedded in the firmware as expected. diff --git a/frontend/finalize.js b/frontend/finalize.js new file mode 100644 index 0000000..2eb09a0 --- /dev/null +++ b/frontend/finalize.js @@ -0,0 +1,66 @@ +let path = require('path'); +let fs = require('fs'); +const {minify} = require('html-minifier-terser'); +let gzipAsync = require('@gfx/zopfli').gzipAsync; + +const SAVE_PATH = '../src'; + +function chunkArray(myArray, chunk_size) { + let index = 0; + let arrayLength = myArray.length; + let tempArray = []; + for (index = 0; index < arrayLength; index += chunk_size) { + let myChunk = myArray.slice(index, index + chunk_size); + tempArray.push(myChunk); + } + return tempArray; +} + +function addLineBreaks(buffer) { + let data = ''; + let chunks = chunkArray(buffer, 30); + chunks.forEach((chunk, index) => { + data += chunk.join(','); + if (index + 1 !== chunks.length) { + data += ',\n'; + } + }); + return data; +} + +(async function(){ + const indexHtml = fs.readFileSync(path.resolve(__dirname, './index.html')).toString(); + const indexHtmlMinify = await minify(indexHtml, { + collapseWhitespace: true, + removeComments: true, + removeAttributeQuotes: true, + removeRedundantAttributes: true, + removeScriptTypeAttributes: true, + removeStyleLinkTypeAttributes: true, + useShortDoctype: true, + minifyCSS: true, + minifyJS: true, + sortAttributes: true, // 不会改变生成的html长度 但会优化压缩后体积 + sortClassName: true, // 不会改变生成的html长度 但会优化压缩后体积 + }); + console.log(`[finalize.js] Minified index.html | Original Size: ${(indexHtml.length / 1024).toFixed(2) }KB | Minified Size: ${(indexHtmlMinify.length / 1024).toFixed(2) }KB`); + + try{ + const GZIPPED_INDEX = await gzipAsync(indexHtmlMinify, { numiterations: 15 }); + + const FILE = +`#ifndef _webserial_webapge_h +#define _webserial_webpage_h +const uint32_t WEBSERIAL_HTML_SIZE = ${GZIPPED_INDEX.length}; +const uint8_t WEBSERIAL_HTML[] PROGMEM = { +${ addLineBreaks(GZIPPED_INDEX) } +}; +#endif +`; + + fs.writeFileSync(path.resolve(__dirname, SAVE_PATH+'/WebSerialWebPage.h'), FILE); + console.log(`[finalize.js] Compressed Bundle into WebSerialWebPage.h header file | Total Size: ${(GZIPPED_INDEX.length / 1024).toFixed(2) }KB`) + }catch(err){ + return console.error(err); + } + })(); \ No newline at end of file diff --git a/frontend/finalize.mjs b/frontend/finalize.mjs deleted file mode 100644 index 6ef929b..0000000 --- a/frontend/finalize.mjs +++ /dev/null @@ -1,57 +0,0 @@ -import { gzipAsync } from '@gfx/zopfli'; -import { readFileSync, writeFileSync } from 'fs'; -import { resolve } from 'path'; - - -import path from 'path'; -import {fileURLToPath} from 'url'; -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); - -const SAVE_PATH = '../src'; - -const BUNDLE_JS = readFileSync(resolve(__dirname, './index.html')); - -function chunkArray(myArray, chunk_size) { - let index = 0; - let arrayLength = myArray.length; - let tempArray = []; - for (index = 0; index < arrayLength; index += chunk_size) { - let myChunk = myArray.slice(index, index + chunk_size); - tempArray.push(myChunk); - } - return tempArray; -} - -function addLineBreaks(buffer) { - let data = ''; - let chunks = chunkArray(buffer, 30); - chunks.forEach((chunk, index) => { - data += chunk.join(','); - if (index + 1 !== chunks.length) { - data += ',\n'; - } - }); - return data; -} - -(async function(){ - try{ - const GZIPPED_INDEX = await gzipAsync(BUNDLE_JS, { numiterations: 15 }); - - const FILE = -`#ifndef _webserial_webapge_h -#define _webserial_webpage_h -const uint32_t WEBSERIAL_HTML_SIZE = ${GZIPPED_INDEX.length}; -const uint8_t WEBSERIAL_HTML[] PROGMEM = { -${ addLineBreaks(GZIPPED_INDEX) } -}; -#endif -`; - - writeFileSync(resolve(__dirname, SAVE_PATH+'/WebSerialWebPage.h'), FILE); - console.log(`[COMPRESS.js] Compressed Bundle into WebSerialWebPage.h header file | Total Size: ${(GZIPPED_INDEX.length / 1024).toFixed(2) }KB`) - }catch(err){ - return console.error(err); - } - })(); \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index ce3c869..f7d2068 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -87,13 +87,11 @@ flex-direction: column; justify-content: center; align-items: center; - height: 100vh; + height: 100dvh; } .main .pannel { - display: flex; - flex-direction: column; - align-items: center; + position: relative; border: #fff; border-style: solid; border-width: 0.5rem; @@ -102,7 +100,6 @@ max-width: 45rem; width: calc(100% - 1rem); font-size: medium; - margin: 0 10px 0; } .pannel button { @@ -216,7 +213,7 @@