From c997264019667da38c2a806ad7bdc77873899381 Mon Sep 17 00:00:00 2001
From: "Ilia (Elias) Motornyi" <elijah.mot@gmail.com>
Date: Fri, 10 May 2024 00:29:49 +0300
Subject: [PATCH] Token config, readme for it

---
 Readme.md  | 28 ++++++++++++++++++++++------
 comm.js    | 14 +++++++++++---
 index.html | 23 ++++++++++++++++++-----
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/Readme.md b/Readme.md
index 18abe32..587926e 100644
--- a/Readme.md
+++ b/Readme.md
@@ -17,17 +17,29 @@ Software & SaaS services
 
 * [Google Blockly](https://developers.google.com/blockly) is used to edit and run display programs online.
    * The blocks are converted to JavaScript code to be run in the browser window
-   * The blocks are converted to Python code to be run on MCU side
+   * The blocks are converted to MicroPython code to be run on MCU side
 * [GitHub pages](https://pages.github.com/) hosts the web part
 * [EMQ Free Public MQTT Broker](https://broker.emqx.io) helps to exchange data between web- and hardware- part
-* [Micropython](https://micropython.org/) is run on the ESP32 MCU and handles both the display and MQTT connection
+* [MicroPython](https://micropython.org/) is run on the ESP32 MCU and handles both the display and MQTT connection
+
+Technical details
+----
+Blocks are stored to browser's [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+Data exchange is done through unsecure public MQTT broker, instances are separated by a text token.
+
+Topics used:
+* */&lt;token&gt;/keepalive* - MCU => Web, keep alive messages every 4 seconds, message body is ignored  
+* */&lt;token&gt;/python/run* - Web =>MCU, load, store, and run new MicroPython code from message body   
+* */&lt;token&gt;/python/restart* - Web =>MCU, restart latest uploaded MicroPython code, message body is ignored   
+
 
 How2Run
 ----
 * Solder the Grove connector (shipped with the module) to M5 Stamp-C3U *Port A*
 * Connect the display module to the MCU module
-* Connect the MCU module to your computer
-* Flash latest [Micropython](https://micropython.org/download/ESP32_GENERIC_C3/) to the MCU module. 
+* Connect the MCU module to your computer with USB cable. A COM port should appear
+* Flash latest [MicroPython](https://micropython.org/download/ESP32_GENERIC_C3/) to the MCU module. 
 [JS ESPTool](https://espressif.github.io/esptool-js/) is a handy tool for it. 
 Note that *.bin* file should be flashed at address *0x0000*
 * Write your own *secrets.py* file based on the template [secrets_template.py](micropython/src/secrets_template.py).
@@ -37,5 +49,9 @@ You may use either
 [PyCharm](https://www.jetbrains.com/pycharm/) with 
 [MicroPython plugin](https://plugins.jetbrains.com/plugin/9777-micropython), 
 [Thonny](https://thonny.org/), or [mpremote](https://docs.micropython.org/en/latest/reference/mpremote.html)
-* Upload [MicroPython code](micropython) to the MCU board
-* **TBD** set token to the web part  
+* Upload [MicroPython code](micropython) to the MCU board. The tools are above
+* Open [elmot.xyz/esp32-blockly-display/](https://www.elmot.xyz/esp32-blockly-display/)
+* Click gear icon and enter your mqtt token, same as in MicroPython part
+* If everything is done correctly, WiFi sign on the web page turns to be dark green
+
+
diff --git a/comm.js b/comm.js
index 97df813..b36fcc6 100644
--- a/comm.js
+++ b/comm.js
@@ -3,12 +3,20 @@ const MqttClient = {
     CONNECTED_COLOR: "darkgreen",
     CONNECTION_ERROR_COLOR: "darkred",
     WAIT_FOR_BOARD_COLOR: "lightblue",
+
+    mqttToken: "aaa3c72f-8e9e-40a4-b937-caf1c384e15",
+    keepAliveTimeout: null,
+    pingTimeout: null,
+
     start: function () {
+        const s = window.localStorage.getItem("MQTT_TOKEN")
+        if(s != null) {
+            this.mqttToken = s;
+        }
         this.connect()
     },
-    mqttToken: "aaa3c72f-8e9e-40a4-b937-caf1c384e15b",
-    keepAliveTimeout: null,
-    pingTimeout: null,
+
+
     setConnectStatus: function (color, tooltip) {
         console.log(`MQTT: ${tooltip}`)
         const img = document.getElementById("connect-indicator");
diff --git a/index.html b/index.html
index 9ea5ad5..62ddbd1 100644
--- a/index.html
+++ b/index.html
@@ -33,19 +33,23 @@
                 border: darkslategrey 3px dashed;
                 border-radius: 1cqw;
                 padding: 2cqh;
+                display: flex;
+                align-items: center;
                 user-select: none;
             }
-
+            #connectDiv {
+                grid-gap: 0.6cqw;
+                align-items: start;
+                 *:last-child {
+                    margin-left: auto;
+                }
+            }
             img, embed {
                 height: 3cqmax;
                 width: 3cqmax;
             }
         }
 
-        #displayDiv {
-            display: flex;
-            align-items: center;
-        }
 
         #displayDiv embed {
             height: 12cqh;
@@ -196,6 +200,15 @@
         MqttClient.restartPython()
     });
 
+    document.getElementById("settings-board").addEventListener("click", function () {
+        const s = window.prompt("Please enter communication MQTT_TOKEN from secrets.py", MqttClient.mqttToken)
+        if(s !== null) {
+            window.localStorage.setItem("MQTT_TOKEN", s)
+            window.location.reload()
+        }
+
+    });
+
 
 </script>