Add the current Beta features to Main

index.html

@@ -97,8 +97,21 @@
                 <div id="serial-bar">
                     <button class="purple-button btn-restart">Restart<i class="fa-solid fa-redo"></i></button>
                     <button class="purple-button btn-clear">Clear<i class="fa-solid fa-broom"></i></button>
+                    <button class="purple-button btn-plotter">Plotter<i class="fa-solid fa-chart-line"></i></button>
                     <div id="terminal-title"></div>
                 </div>
+                <div id="plotter" class="hidden">
+                    <label for="buffer-size">Buffer Size</label>
+                    <input type="number" id="buffer-size" value="20">
+                    <label for="plot-gridlines-select">Grid Lines</label>
+                    <select id="plot-gridlines-select">
+                        <option value="both">Both</option>
+                        <option value="x">X Only</option>
+                        <option value="y">Y Only</option>
+                        <option value="none">None</option>
+                    </select>
+                    <canvas id="plotter-canvas"></canvas>
+                </div>
                 <div id="terminal"></div>
             </div>
         </div>
@@ -199,7 +212,9 @@ <h1>Web Bluetooth not available!</h1>
                         flag. However be careful as it would be risky to browse the web with this flag turned
                         on as it enables many other experimental web platform features. Starting with Chromium
                         version 100, enable the <a href="about://flags/#enable-web-bluetooth">about://flags/#enable-web-bluetooth</a>
-                        safer flag instead.</p>
+                        safer flag instead. You can also enable Web Bluetooth Binding by enabling the
+                        <a href="about://flags/#enable-web-bluetooth-new-permissions-backend">about://flags/#enable-web-bluetooth-new-permissions-backend</a>
+                        flag instead of the experimental features if it is available.</p>
                 </div>
             </section>
             <section class="step">
@@ -325,6 +340,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 +364,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
 };