cc4-embedded-system 3.1.5 → 3.1.6

package/README.md

@@ -2,7 +2,7 @@
 - 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.1.png)
+![](./Screenshot/v3.1.6.png)
 
 ## Structure
 ```text
@@ -14,7 +14,7 @@ CC4EmbeddedSystem/
 ├── public/
 │   └── index.html    // Web GUI dashboard
 ├── Sereenshot/
-│   └── v3.1.1.png    // Demo image
+│   └── v3.1.6.png    // Demo image
 ├── node_modules/     // Required submodules during development
 ├── dist/             // Compiled JavaScript output (Auto-generated)
 ├── package.json      // Project configuration & dependencies
@@ -33,6 +33,10 @@ CC4EmbeddedSystem/
     ```bash
     npx cc4-embedded-system
     ```
+- Specific port set during initialization
+    ```bash
+    cc4es --port 3002
+    ```
 ### Development
 ```bash
 # build

package/dist/gui.js

@@ -83,6 +83,7 @@ if (portArgIndex !== -1 && process.argv[portArgIndex + 1]) {
     if (!isNaN(parsedPort))
         PORT = parsedPort;
 }
+let activeBrowseProcess = null;
 let server;
 let shutdownTimer = null;
 app.use(express.json());
@@ -98,6 +99,15 @@ const cancelShutdown = () => {
         // console.log('🛡️ Shutdown cancelled (keep alive)');
     }
 };
+const scheduleShutdown = () => {
+    if (!shutdownTimer) {
+        shutdownTimer = setTimeout(() => {
+            closeBrowseProcess();
+            console.log('👋 Window closed, shutting down ...');
+            process.exit(0);
+        }, 2000);
+    }
+};
 const buildPowerShellArgs = (script) => {
     const encodedCommand = Buffer.from(script, 'utf16le').toString('base64');
     return [
@@ -107,18 +117,32 @@ const buildPowerShellArgs = (script) => {
         encodedCommand
     ];
 };
+const closeBrowseProcess = () => {
+    if (activeBrowseProcess && !activeBrowseProcess.killed) {
+        try {
+            activeBrowseProcess.kill();
+        }
+        catch (e) {
+            // ignore child cleanup error
+        }
+    }
+    activeBrowseProcess = null;
+};
 const runDialogCommand = (command, args) => {
     return new Promise((resolve, reject) => {
-        execFile(command, args, {
+        const child = execFile(command, args, {
             windowsHide: false,
             maxBuffer: 1024 * 1024
         }, (error, stdout, stderr) => {
+            if (activeBrowseProcess === child)
+                activeBrowseProcess = null;
             if (error) {
                 reject(new Error(stderr.trim() || error.message));
                 return;
             }
             resolve(stdout.trim());
         });
+        activeBrowseProcess = child;
     });
 };
 const buildWindowsDialogScript = (dialogLines) => {
@@ -151,12 +175,8 @@ app.get('/api/version', (_req, res) => {
 });
 app.post('/api/shutdown', (_req, res) => {
     res.json({ success: true });
-    if (!shutdownTimer) {
-        shutdownTimer = setTimeout(() => {
-            console.log('👋 Window closed, shutting down ...');
-            process.exit(0);
-        }, 2000);
-    }
+    closeBrowseProcess();
+    scheduleShutdown();
 });
 app.post('/api/cancel-shutdown', (_req, res) => {
     cancelShutdown();
@@ -222,6 +242,12 @@ app.post('/api/change-port', (req, res) => {
 });
 app.get('/api/browse', async (req, res) => {
     cancelShutdown();
+    res.on('close', () => {
+        if (!res.writableEnded) {
+            closeBrowseProcess();
+            scheduleShutdown();
+        }
+    });
     const isDir = req.query.type === 'dir';
     const platform = os.platform();
     try {

package/dist/public/index.html

@@ -110,23 +110,99 @@
     <button onclick="startBuild()">Generate C Code</button>
 </div>
 
+<style>
+    body.browse-locked .container {
+        pointer-events: none;
+        user-select: none;
+        filter: blur(1px);
+    }
+
+    #browseOverlay {
+        position: fixed;
+        inset: 0;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.55);
+        z-index: 9999;
+    }
+
+    body.browse-locked #browseOverlay {
+        display: flex;
+    }
+
+    .browse-overlay-card {
+        background: #252526;
+        color: #d4d4d4;
+        border: 1px solid #555;
+        border-radius: 8px;
+        padding: 20px 24px;
+        width: min(420px, calc(100vw - 40px));
+        text-align: center;
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
+        font-family: 'Consolas', monospace;
+    }
+
+    .browse-overlay-title {
+        color: #9cdcfe;
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    .browse-overlay-text {
+        color: #cccccc;
+        font-size: 14px;
+        line-height: 1.6;
+    }
+</style>
+
 <script>
     let isRedirecting = false;
+    let isBrowsing = false;
+    let isBrowsePending = false;
     document.getElementById('guiPort').value = window.location.port || '80';
 
+    function setBrowseState(active) {
+        isBrowsing = active;
+        document.body.classList.toggle('browse-locked', active);
+    }
+
     async function handleBrowse(targetId, type) {
+        if (isBrowsing || isBrowsePending) return;
+
+        isBrowsePending = true;
+
         try {
             const res = await fetch(`/api/browse?type=${type}`);
             const data = await res.json();
-            if (data.success && data.path) {
-                document.getElementById(targetId).value = data.path;
-            }
+
+            if (data.success && data.path) document.getElementById(targetId).value = data.path;
         }
         catch (e) {
             console.error('Failed to open system dialog', e);
         }
+        finally {
+            isBrowsePending = false;
+            setBrowseState(false);
+        }
     }
 
+    window.addEventListener('blur', () => {
+        if (isBrowsePending) setBrowseState(true);
+    });
+
+
+    window.addEventListener('keydown', (event) => {
+        const isReloadKey = event.key === 'F5';
+        const isRefreshShortcut = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'r';
+
+        if (isBrowsing && (isReloadKey || isRefreshShortcut)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, true);
+
     window.addEventListener('DOMContentLoaded', async () => {
         await fetch('/api/cancel-shutdown', { method: 'POST' });
         try {
@@ -211,10 +287,31 @@
             alert('❌ Error: ' + result.message);
         }
     }
-    
-    window.addEventListener('beforeunload', () => {
+
+    function notifyShutdown() {
         if (! isRedirecting) navigator.sendBeacon('/api/shutdown');
+    }
+    
+    window.addEventListener('beforeunload', (event) => {
+        if (isBrowsing || isBrowsePending) {
+            event.preventDefault();
+            event.returnValue = '';
+            return '';
+        }
     });
+
+    window.addEventListener('pagehide', notifyShutdown);
+    window.addEventListener('unload', notifyShutdown);
 </script>
+<div id="browseOverlay">
+    <div class="browse-overlay-card">
+        <div class="browse-overlay-title">Browse Dialog Open</div>
+        <div class="browse-overlay-text">
+            Please finish the system browse dialog first.<br>
+            Refresh and page navigation are temporarily disabled.
+        </div>
+    </div>
+</div>
+
 </body>
 </html>

package/package.json

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