cc4-embedded-system 3.1.9 → 3.1.10

package/README.md

@@ -2,19 +2,30 @@
 - This version based on [html-minifier-next](https://github.com/j9t/html-minifier-next) and rewrite [lwIP makefsdata](https://github.com/m-labs/lwip/tree/master/src/apps/httpd/makefsdata), run on localhost, default port: ```3000```.
 - This tool is deployed on [npm package](https://www.npmjs.com/package/cc4-embedded-system).
 
-![](./Screenshot/v3.1.9.png)
+## Demo
+- Select input directory
+
+![](./Screenshot/inputs.png)
+- Select output file path
+
+![](./Screenshot/output.png)
+- Result
+
+![](./Screenshot/v3.1.10.png)
 
 ## Structure
 ```text
 CC4EmbeddedSystem/
 ├── src/
 │   ├── gui.ts        // Express server & CLI entry point
-│   │   ├── utils.ts  // To get latest tool version
+│   │   └── utils.ts  // To get latest tool version
 │   └── makefsdata.ts // Core C code generation & minification logic
 ├── public/
 │   └── index.html    // Web GUI dashboard
 ├── Sereenshot/
-│   └── v3.1.9.png    // Demo image
+│   ├── inputs.png    // Demo image
+│   ├── output.png    // Demo image
+│   └── v3.1.10.png   // Demo image
 ├── node_modules/     // Required submodules during development
 ├── dist/             // Compiled JavaScript output (Auto-generated)
 ├── package.json      // Project configuration & dependencies
@@ -37,6 +48,10 @@ CC4EmbeddedSystem/
     ```bash
     cc4es --port 3002
     ```
+- Update
+  ```bash
+  npm install -g cc4-embedded-system@latest
+  ```
 ### Development
 ```bash
 # build
@@ -47,8 +62,10 @@ npm link
 cc4es
 
 # publish
+npm whoami # verify
 npm login
-# npm version patch # if increase version
-npm run build
+npm version patch --no-git-tag-version # if increase version
+npm run dev # dev mode for testing
+npm run build # build the newest
 npm publish --access public
 ```

package/dist/public/index.html

@@ -57,7 +57,7 @@
         <label>Input Directory</label>
         <div class="input-row">
             <input type="text" id="inputPath" placeholder="e.g., C:\Project\web">
-            <button type="button" class="btn-browse" onclick="handleBrowse('inputPath', 'dir')">Brows ...</button>
+            <button type="button" class="btn-browse" onclick="handleBrowse('inputPath', 'dir')">Browse ...</button>
         </div>
     </div>
 
@@ -65,7 +65,7 @@
         <label>Output File (fsdata.c)</label>
         <div class="input-row">
             <input type="text" id="outputPath" placeholder="e.g., ./fsdata.c">
-            <button type="button" class="btn-browse" onclick="handleBrowse('outputPath', 'file')">Brows ...</button>
+            <button type="button" class="btn-browse" onclick="handleBrowse('outputPath', 'file')">Browse ...</button>
         </div>
     </div>
 
@@ -94,13 +94,13 @@
         </div>
     </details>
 
-    <div id="statsPanel" class="stats-panel">
-        <div class="stats-title">📊 Compression Analysis</div>
-        <div class="stats-info">
-            <span>Compressed: <span id="compSize" style="color: #9cdcfe;">0</span> KB</span>
-            <span>Converted: <span id="convSize" style="color: #dcdcaa;">0</span> KB</span>
-            <span>Original: <span id="origSize" style="color: #ce9178;">0</span> KB</span>
-        </div>
+    <div id="statsPanel" class="stats-panel">
+        <div class="stats-title">📊 Compression Analysis</div>
+        <div class="stats-info">
+            <span>Compressed: <span id="compSize" style="color: #9cdcfe;">0</span> KB</span>
+            <span>Converted: <span id="convSize" style="color: #dcdcaa;">0</span> KB</span>
+            <span>Original: <span id="origSize" style="color: #ce9178;">0</span> KB</span>
+        </div>
         <div class="bar-container">
             <div id="barFill" class="bar-fill"></div>
             <div id="barText" class="bar-text">0% Saved</div>
@@ -262,20 +262,20 @@
                 const panel = document.getElementById('statsPanel');
                 panel.style.display = 'block';
 
-                const { originalSize, compressedSize, convertedSize } = result.stats;
-                const origKB = (originalSize / 1024).toFixed(2);
-                const compKB = (compressedSize / 1024).toFixed(2);
-                const convKB = (convertedSize / 1024).toFixed(2);
+                const { originalSize, compressedSize, convertedSize } = result.stats;
+                const origKB = (originalSize / 1024).toFixed(2);
+                const compKB = (compressedSize / 1024).toFixed(2);
+                const convKB = (convertedSize / 1024).toFixed(2);
                 
                 // ratio: the saved percentage
                 const ratio = originalSize > 0 ? (((originalSize - compressedSize) / originalSize) * 100).toFixed(1) : 0;
                 // compressedRatio: the remainings percentage
                 const compressedRatio = (100 - ratio).toFixed(1);
 
-                document.getElementById('origSize').innerText = origKB;
-                document.getElementById('compSize').innerText = compKB;
-                document.getElementById('convSize').innerText = convKB;
-                document.getElementById('barText').innerText = `${ratio}% Size Reduced`;
+                document.getElementById('origSize').innerText = origKB;
+                document.getElementById('compSize').innerText = compKB;
+                document.getElementById('convSize').innerText = convKB;
+                document.getElementById('barText').innerText = `${ratio}% Size Reduced`;
                 
                 // actual used percentage
                 setTimeout(() => {
@@ -317,4 +317,4 @@
 </div>
 
 </body>
-</html>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc4-embedded-system",
-  "version": "3.1.9",
+  "version": "3.1.10",
   "description": "A modern typescript version of makefsdata based on html-minifier-next and lwIP v1.3.1",
   "bin": {
     "cc4es": "dist/gui.js"