Github Action: Updated dist files

dist/base_installer.js

@@ -7,33 +7,6 @@ import {html, render} from 'https://unpkg.com/lit-html?module';
 import {asyncAppend} from 'https://unpkg.com/lit-html/directives/async-append?module';
 import * as esptoolPackage from "https://unpkg.com/esp-web-flasher@5.1.2/dist/web/index.js?module"
 
-// TODO: Figure out how to make the Web Serial from ESPTool and Web Serial to communicate with CircuitPython not conflict
-// I think at the very least we'll have to reuse the same port so the user doesn't need to reselct, though it's possible it
-// may change after reset. Since it's not
-//
-// For now, we'll use the following procedure for ESP32-S2 and ESP32-S3:
-// 1. Install the bin file
-// 2. Reset the board
-// (if version 8.0.0-beta.6 or later)
-// 3. Generate the settings.toml file
-// 4. Write the settings.toml to the board via the REPL
-// 5. Reset the board again
-//
-// For the esp32 and esp32c3, the procedure may be slightly different and going through the
-// REPL may be required for the settings.toml file.
-// 1. Install the bin file
-// 2. Reset the board
-// (if version 8.0.0-beta.6 or later)
-// 3. Generate the settings.toml file
-// 4. Write the settings.toml to the board via the REPL
-// 5. Reset the board again
-//
-// To run REPL code, I may need to modularize the work I did for code.circuitpython.org
-// That allows you to run code in the REPL and get the output back. I may end up creating a
-// library that uses Web Serial and allows you to run code in the REPL and get the output back
-// because it's very integrated into the serial recieve and send code.
-//
-
 export const ESP_ROM_BAUD = 115200;
 
 export class InstallButton extends HTMLButtonElement {
@@ -141,11 +114,15 @@ export class InstallButton extends HTMLButtonElement {
             if (!InstallButton.isSupported) {
                 await this.showNotSupported();
             } else {
-                await this.showMenu();
+                await this.buttonClickHandler(e);
             }
         });
     }
 
+    async buttonClickHandler(e) {
+        await this.showMenu();
+    }
+
     // Parse out the url parameters from the current url
     getUrlParams() {
         // This should look for and validate very specific values

dist/cpinstaller.js

@@ -4,11 +4,10 @@
 
 'use strict';
 import { html } from 'https://unpkg.com/lit-html?module';
+import { map } from 'https://unpkg.com/lit-html/directives/map?module';
 import * as toml from "https://unpkg.com/iarna-toml-esm@3.0.5/toml-esm.mjs"
 import * as zip from "https://cdn.jsdelivr.net/npm/@zip.js/zip.js@2.6.65/+esm";
 import * as esptoolPackage from "https://unpkg.com/esp-web-flasher@5.1.2/dist/web/index.js?module"
-
-//import * as esptoolPackage from "https://adafruit.github.io/Adafruit_WebSerial_ESPTool/js/modules/esptool.js"
 import { REPL } from 'https://cdn.jsdelivr.net/gh/adafruit/circuitpython-repl-js@1.2.1/repl.js';
 import { InstallButton, ESP_ROM_BAUD } from "./base_installer.js";
 
@@ -45,8 +44,10 @@ export class CPInstallButton extends InstallButton {
         super();
         this.releaseVersion = "[version]";
         this.boardName = "ESP32-based device";
-        this.boardId = null;
+        this.boardIds = null;
+        this.selectedBoardId = null;
         this.bootloaderUrl = null;
+        this.boardDefs = null;
         this.uf2FileUrl = null;
         this.binFileUrl = null;
         this.releaseVersion = 0;
@@ -110,66 +111,76 @@ export class CPInstallButton extends InstallButton {
 
     async connectedCallback() {
         // Required
-        this.boardId = this.getAttribute("boardid");
+        this.boardIds = this.getAttribute("boardid").split(",");
+
+        // If there is only one board id, then select it by default
+        if (this.boardIds.length === 1) {
+            this.selectedBoardId = this.boardIds[0];
+        }
 
         // If not provided, it will use the stable release if DEFAULT_RELEASE_LATEST is false
         if (this.getAttribute("version")) {
             this.releaseVersion = this.getAttribute("version");
         }
 
-        // Pull in the info from the json as the default values. These can be overwritten by the attributes.
+        // Load the Board Definitions before the button is ever clicked
         const response = await fetch(BOARD_DEFS);
-        const boardDefs = await response.json();
+        this.boardDefs = await response.json();
-        let releaseInfo = null;
-
-        if (Object.keys(boardDefs).includes(this.boardId)) {
-            const boardDef = boardDefs[this.boardId];
-            this.chipFamily = boardDef.chipfamily;
-            if (boardDef.name) {
-                this.boardName = boardDef.name;
-            }
-            if (boardDef.bootloader) {
-                this.bootloaderUrl = this.updateBinaryUrl(boardDef.bootloader);
-            }
-            const sortedReleases = this.sortReleases(boardDef.releases);
-
-            if (this.releaseVersion) {  // User specified a release
-                for (let release of sortedReleases) {
-                    if (release.version == this.releaseVersion) {
-                        releaseInfo = release;
-                        break;
-                    }
-                }
-            }
-            if (!releaseInfo) { // Release version not found or not specified
-                if (DEFAULT_RELEASE_LATEST) {
-                    releaseInfo = sortedReleases[sortedReleases.length - 1];
-                } else {
-                    releaseInfo = sortedReleases[0];
-                }
-                this.releaseVersion = releaseInfo.version;
-            }
-            if (releaseInfo.uf2file) {
-                this.uf2FileUrl = this.updateBinaryUrl(releaseInfo.uf2file);
-            }
-            if (releaseInfo.binfile) {
-                this.binFileUrl = this.updateBinaryUrl(releaseInfo.binfile);
-            }
-        }
-
-        // Nice to have for now
-        if (this.getAttribute("chipfamily")) {
-            this.chipFamily = this.getAttribute("chipfamily");
-        }
-
-        if (this.getAttribute("boardname")) {
-            this.boardName = this.getAttribute("boardname");
-        }
-        this.menuTitle = `CircuitPython Installer for ${this.boardName}`;
 
         super.connectedCallback();
     }
 
+    async loadBoard(boardId) {
+       // Pull in the info from the json as the default values. These can be overwritten by the attributes.
+       let releaseInfo = null;
+
+       if (Object.keys(this.boardDefs).includes(boardId)) {
+           const boardDef = this.boardDefs[boardId];
+           this.chipFamily = boardDef.chipfamily;
+           if (boardDef.name) {
+               this.boardName = boardDef.name;
+           }
+           if (boardDef.bootloader) {
+               this.bootloaderUrl = this.updateBinaryUrl(boardDef.bootloader);
+           }
+           const sortedReleases = this.sortReleases(boardDef.releases);
+
+           if (this.releaseVersion) {  // User specified a release
+               for (let release of sortedReleases) {
+                   if (release.version == this.releaseVersion) {
+                       releaseInfo = release;
+                       break;
+                   }
+               }
+           }
+
+           if (!releaseInfo) { // Release version not found or not specified
+               if (DEFAULT_RELEASE_LATEST) {
+                   releaseInfo = sortedReleases[sortedReleases.length - 1];
+               } else {
+                   releaseInfo = sortedReleases[0];
+               }
+               this.releaseVersion = releaseInfo.version;
+           }
+           if (releaseInfo.uf2file) {
+               this.uf2FileUrl = this.updateBinaryUrl(releaseInfo.uf2file);
+           }
+           if (releaseInfo.binfile) {
+               this.binFileUrl = this.updateBinaryUrl(releaseInfo.binfile);
+           }
+       }
+
+       // Nice to have for now
+       if (this.getAttribute("chipfamily")) {
+           this.chipFamily = this.getAttribute("chipfamily");
+       }
+
+       if (this.getAttribute("boardname")) {
+           this.boardName = this.getAttribute("boardname");
+       }
+       this.menuTitle = `CircuitPython Installer for ${this.boardName}`;
+    }
+
     attributeChangedCallback(attribute, previousValue, currentValue) {
         const classVar = attrMap[attribute];
         this[classVar] = currentValue ? this.updateBinaryUrl(currentValue) : null;
@@ -227,6 +238,25 @@ export class CPInstallButton extends InstallButton {
 
     // This is the data for the CircuitPython specific dialogs. Some are reused.
     cpDialogs = {
+        boardSelect: {
+            closeable: true,
+            template: (data) => html`
+                <p>
+                    There are multiple boards are available. Select the board you have:
+                </p>
+                <p>
+                    <select id="availableBoards">
+                        <option value="0"> - boards - </option>
+                        ${map(data.boards, (board, index) => html`<option value="${board.id}" ${board.id == data.default ? "selected" : ""}>${board.name}</option>`)}
+                    </select>
+                </p>
+            `,
+            buttons: [{
+                label: "Select Board",
+                onClick: this.selectBoardHandler,
+                isEnabled: async () => { return this.currentDialogElement.querySelector("#availableBoards").value != "0" },
+            }],
+        },
         welcome: {
             closeable: true,
             template: (data) => html`
@@ -397,6 +427,20 @@ export class CPInstallButton extends InstallButton {
         },
     }
 
+    getBoardName(boardId) {
+        if (Object.keys(this.boardDefs).includes(boardId)) {
+            return this.boardDefs[boardId].name;
+        }
+        return null;
+    }
+
+    getBoardOptions() {
+        let options = [];
+        for (let boardId of this.boardIds) {
+            options.push({id: boardId, name: this.getBoardName(boardId)});
+        }
+        return options;
+    }
 
     ////////// STEP FUNCTIONS //////////
 
@@ -726,6 +770,35 @@ export class CPInstallButton extends InstallButton {
         }
     }
 
+    async buttonClickHandler(e, skipBoardSelector = false) {
+        if (this.boardIds.length > 1 && (!this.selectedBoardId || !skipBoardSelector)) {
+            this.showDialog(this.dialogs.boardSelect, {
+                boards: this.getBoardOptions(),
+                default: this.selectedBoardId,
+            });
+
+            this.currentDialogElement.querySelector("#availableBoards").addEventListener(
+                "change", this.updateButtons.bind(this)
+            );
+
+            return;
+        }
+
+        await this.loadBoard(this.selectedBoardId);
+
+        super.buttonClickHandler(e);
+    }
+
+    async selectBoardHandler(e) {
+        const selectedValue = this.currentDialogElement.querySelector("#availableBoards").value;
+        if (Object.keys(this.boardDefs).includes(selectedValue)) {
+            this.selectedBoardId = selectedValue;
+            this.closeDialog();
+
+            this.buttonClickHandler(null, true);
+        }
+    }
+
     //////////////// FILE HELPERS ////////////////
 
     async getBootDriveName() {
@@ -1259,5 +1332,4 @@ export class CPInstallButton extends InstallButton {
     }
 }
 
-
 customElements.define('cp-install-button', CPInstallButton, {extends: "button"});