Show more info for all workflows

.github/workflows/build.yaml

@@ -12,7 +12,10 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           cache: 'npm'
+      - run: rm -rf node_modules
+      - run: rm package-lock.json
+      - run: npm install
       - run: npm ci
       - run: npm run build

index.html

@@ -325,6 +325,22 @@ <h1>Select USB Host Folder</h1>
                     <td>IP Address:</td>
                     <td><a id="ip"></a></td>
                 </tr>
+                <tr>
+                    <td>Build Date:</td>
+                    <td><span id="builddate"></span></td>
+                </tr>
+                <tr>
+                    <td>MCU Name:</td>
+                    <td><span id="mcuname"></span></td>
+                </tr>
+                <tr>
+                    <td>Board ID:</td>
+                    <td><span id="boardid"></span></td>
+                </tr>
+                <tr>
+                    <td>UID:</td>
+                    <td><span id="uid"></span></td>
+                </tr>
             </tbody>
         </table>
         <h3>More network devices<i class="refresh fa-solid fa-sync-alt" title="Refresh Device List"></i></h3>
@@ -333,6 +349,45 @@ <h3>More network devices<i class="refresh fa-solid fa-sync-alt" title="Refresh D
             <button class="purple-button ok-button">Close</button>
         </div>
     </div>
+    <div class="popup-modal shadow closable" data-popup-modal="device-info">
+        <i class="fa-solid fa-2x fa-xmark text-white bg-primary p-3 popup-modal__close"></i>
+        <table class="device-info">
+            <thead>
+                <tr>
+                    <th colspan="2">Current Device Info</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Board:</td>
+                    <td><a id="board" target="_blank"></a></td>
+                </tr>
+                <tr>
+                    <td>Version:</td>
+                    <td><span id="version"></span></td>
+                </tr>
+                <tr>
+                    <td>Build Date:</td>
+                    <td><span id="builddate"></span></td>
+                </tr>
+                <tr>
+                    <td>MCU Name:</td>
+                    <td><span id="mcuname"></span></td>
+                </tr>
+                <tr>
+                    <td>Board ID:</td>
+                    <td><span id="boardid"></span></td>
+                </tr>
+                <tr>
+                    <td>UID:</td>
+                    <td><span id="uid"></span></td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="buttons centered">
+            <button class="purple-button ok-button">Close</button>
+        </div>
+    </div>
 
     <script type="module" src="/js/script.js"></script>
 </body>

js/common/ble-file-transfer.js

@@ -0,0 +1,43 @@
+import {FileTransferClient as BLEFileTransferClient} from '@adafruit/ble-file-transfer-js';
+
+// Wrapper for BLEFileTransferClient to add additional functionality
+class FileTransferClient extends BLEFileTransferClient {
+    constructor(bleDevice, bufferSize) {
+        super(bleDevice, bufferSize);
+    }
+
+    async versionInfo() {
+        // Possibly open /boot_out.txt and read the version info
+        let versionInfo = {};
+        console.log("Reading version info");
+        let bootout = await this.readFile('/boot_out.txt', false);
+        console.log(bootout);
+        if (!bootout) {
+            console.error("Unable to read boot_out.txt");
+            return null;
+        }
+        bootout += "\n";
+
+        // Add these items as they are found
+        const searchItems = {
+            version: /Adafruit CircuitPython (.*?) on/,
+            build_date: /on ([0-9]{4}-[0-9]{2}-[0-9]{2});/,
+            board_name: /; (.*?) with/,
+            mcu_name: /with (.*?)\r?\n/,
+            board_id: /Board ID:(.*?)\r?\n/,
+            uid: /UID:([0-9A-F]{12,16})\r?\n/,
+        }
+
+        for (const [key, regex] of Object.entries(searchItems)) {
+            const match = bootout.match(regex);
+
+            if (match) {
+                versionInfo[key] = match[1];
+            }
+        }
+
+        return versionInfo;
+    }
+}
+
+export {FileTransferClient};

js/common/dialogs.js

@@ -329,6 +329,10 @@ class DiscoveryModal extends GenericModal {
         let ip = this._currentModal.querySelector("#ip");
         ip.href = `http://${deviceInfo.ip + port}/code/`;
         ip.textContent = deviceInfo.ip;
+        this._currentModal.querySelector("#builddate").textContent = deviceInfo.build_date;
+        this._currentModal.querySelector("#mcuname").textContent = deviceInfo.mcu_name;
+        this._currentModal.querySelector("#boardid").textContent = deviceInfo.board_id;
+        this._currentModal.querySelector("#uid").textContent = deviceInfo.uid;
     }
 
     async _refreshDevices() {
@@ -378,11 +382,43 @@ class DiscoveryModal extends GenericModal {
     }
 }
 
+class DeviceInfoModal extends GenericModal {
+        async _getDeviceInfo() {
+        const deviceInfo = await this._showBusy(this._fileHelper.versionInfo());
+        this._currentModal.querySelector("#version").textContent = deviceInfo.version;
+        const boardLink = this._currentModal.querySelector("#board");
+        boardLink.href = `https://circuitpython.org/board/${deviceInfo.board_id}/`;
+        boardLink.textContent = deviceInfo.board_name;
+        this._currentModal.querySelector("#builddate").textContent = deviceInfo.build_date;
+        this._currentModal.querySelector("#mcuname").textContent = deviceInfo.mcu_name;
+        this._currentModal.querySelector("#boardid").textContent = deviceInfo.board_id;
+        this._currentModal.querySelector("#uid").textContent = deviceInfo.uid;
+    }
+
+    async open(workflow, documentState) {
+        this._workflow = workflow;
+        this._fileHelper = workflow.fileHelper;
+        this._showBusy = workflow.showBusy.bind(workflow);
+        this._docState = documentState;
+
+        let p = super.open();
+        const okButton = this._currentModal.querySelector("button.ok-button");
+        this._addDialogElement('okButton', okButton, 'click', this._closeModal);
+
+        const refreshIcon = this._currentModal.querySelector("i.refresh");
+        this._addDialogElement('refreshIcon', refreshIcon, 'click', this._refreshDevices);
+
+        await this._getDeviceInfo();
+        return p;
+    }
+}
+
 export {
     GenericModal,
     MessageModal,
     ButtonValueDialog,
     UnsavedDialog,
     DiscoveryModal,
-    ProgressDialog
+    ProgressDialog,
+    DeviceInfoModal
 };

js/common/file_dialog.js

@@ -42,7 +42,7 @@ const extensionMap = {
     "mp4":  {style: FA_STYLE_REGULAR, icon: "file-video", type: "bin"},
     "mpy":  {style: FA_STYLE_REGULAR, icon: "file", type: "bin"},
     "pdf":  {style: FA_STYLE_REGULAR, icon: "file-pdf", type: "bin"},
-    "py":   {style: FA_STYLE_REGULAR, icon: "file-lines", type: "text"},
+    "py":   {style: FA_STYLE_REGULAR, icon: "file-code", type: "text"},
     "toml": {style: FA_STYLE_REGULAR, icon: "file-lines", type: "text"},
     "txt":  {style: FA_STYLE_REGULAR, icon: "file-lines", type: "text"},
     "wav":  {style: FA_STYLE_REGULAR, icon: "file-audio", type: "bin"},
@@ -57,6 +57,9 @@ const FILESIZE_UNITS = ["bytes", "KB", "MB", "GB", "TB"];
 const COMPACT_UNITS = ["", "K", "M", "G", "T"];
 
 function getFileExtension(filename) {
+    if (filename === null) {
+        return null;
+    }
     let extension = filename.split('.').pop();
     if (extension !== null) {
         return String(extension).toLowerCase();
@@ -189,7 +192,7 @@ class FileDialog extends GenericModal {
             this._currentPath = path;
         }
         const currentPathLabel = this._getElement('currentPathLabel');
-        currentPathLabel.innerHTML = this._currentPath;
+        currentPathLabel.innerHTML = `<i class="${FA_STYLE_REGULAR} fa-folder-open"></i> ` + this._currentPath;
 
         if (this._currentPath != "/") {
             this._addFile({path: "..", isDir: true}, "fa-folder-open");

js/common/fsapi-file-transfer.js

@@ -325,8 +325,10 @@ class FileTransferClient {
         let bootout = await this.readFile('/boot_out.txt', false);
         console.log(bootout);
         if (!bootout) {
+            console.error("Unable to read boot_out.txt");
             return null;
         }
+        bootout += "\n";
 
         // Add these items as they are found
         const searchItems = {
@@ -335,7 +337,7 @@ class FileTransferClient {
             board_name: /; (.*?) with/,
             mcu_name: /with (.*?)\r?\n/,
             board_id: /Board ID:(.*?)\r?\n/,
-            uid: /UID:([0-9A-F]{12})\r?\n/,
+            uid: /UID:([0-9A-F]{12,16})\r?\n/,
         }
 
         for (const [key, regex] of Object.entries(searchItems)) {

js/common/repl-file-transfer.js

@@ -91,8 +91,10 @@ class FileTransferClient {
         let bootout = await this.readFile('/boot_out.txt', false);
         console.log(bootout);
         if (!bootout) {
+            console.error("Unable to read boot_out.txt");
             return null;
         }
+        bootout += "\n";
 
         // Add these items as they are found
         const searchItems = {
@@ -101,7 +103,7 @@ class FileTransferClient {
             board_name: /; (.*?) with/,
             mcu_name: /with (.*?)\r?\n/,
             board_id: /Board ID:(.*?)\r?\n/,
-            uid: /UID:([0-9A-F]{12})\r?\n/,
+            uid: /UID:([0-9A-F]{12,16})\r?\n/,
         }
 
         for (const [key, regex] of Object.entries(searchItems)) {

js/script.js

@@ -5,6 +5,7 @@ import {indentWithTab} from "@codemirror/commands"
 import { python } from "@codemirror/lang-python";
 import { syntaxHighlighting, indentUnit } from "@codemirror/language";
 import { classHighlighter } from "@lezer/highlight";
+import { getFileIcon } from "./common/file_dialog.js";
 
 import { Terminal } from '@xterm/xterm';
 import { FitAddon } from '@xterm/addon-fit';
@@ -237,7 +238,13 @@ async function checkReadOnly() {
 
 /* Update the filename and update the UI */
 function setFilename(path) {
+    // Use the extension_map to figure out the file icon
     let filename = path;
+
+    // Prepend an icon to the path
+    const [style, icon] = getFileIcon(path);
+    filename = `<i class="${style} ${icon}"></i> ` + filename;
+
     if (path === null) {
         filename = "[New Document]";
         btnSave.forEach((b) => b.style.display = 'none');

js/workflows/ble.js

@@ -2,11 +2,10 @@
  * This class will encapsulate all of the workflow functions specific to BLE
  */
 
-import {FileTransferClient} from '@adafruit/ble-file-transfer-js';
-
+import {FileTransferClient} from '../common/ble-file-transfer.js';
 import {CONNTYPE, CONNSTATE} from '../constants.js';
 import {Workflow} from './workflow.js';
-import {GenericModal} from '../common/dialogs.js';
+import {GenericModal, DeviceInfoModal} from '../common/dialogs.js';
 import {sleep, getUrlParam} from '../common/utilities.js';
 
 const bleNusServiceUUID = 'adaf0001-4369-7263-7569-74507974686e';
@@ -27,6 +26,7 @@ class BLEWorkflow extends Workflow {
         this.bleDevice = null;
         this.decoder = new TextDecoder();
         this.connectDialog = new GenericModal("ble-connect");
+        this.infoDialog = new DeviceInfoModal("device-info");
         this.partialWrites = true;
         this.type = CONNTYPE.Ble;
     }
@@ -270,6 +270,10 @@ class BLEWorkflow extends Workflow {
         return true;
     }
 
+    async showInfo(documentState) {
+        return await this.infoDialog.open(this, documentState);
+    }
+
     // Handle the different button states for various connection steps
     connectionStep(step) {
         const buttonStates = [