Restart control

index.html

@@ -30,13 +30,20 @@
             background-color: #f8f8f8;
             border: darkslategrey 3px dashed;
             border-radius: 1cqw;
+            display: flex;
+            align-items: center;
         }
 
         #displayDiv embed {
             height: 12cqh;
             width: 7cqw
         }
 
+        #displayDiv #restart img {
+            height: 3cqmax;
+            width: 3cqmax;
+        }
+
         #connect-circle {
             width: 1cqmax;
             height: 1cqmax;
@@ -62,6 +69,9 @@
 <!--    <div id="connect-circle">-->
 <!--        <div id="connect-tooltip">Connecting...</div>-->
 <!--    </div>-->
+    <button id="restart" title="Restart">
+        <img src="restart-svgrepo-com.svg">
+    </button>
     <embed type="image/svg+xml" id="digit0">
     <embed type="image/svg+xml" id="digit1">
     <embed type="image/svg+xml" id="digit2">
@@ -84,15 +94,15 @@
 
     };
     const workspace = Blockly.inject("blocklyDiv", config);
+    const CHANGE_EVENTS = new Set([Blockly.Events.BLOCK_CHANGE, Blockly.Events.BLOCK_CREATE, Blockly.Events.BLOCK_DELETE, Blockly.Events.BLOCK_MOVE])
     workspace.addChangeListener(function (event) {
-            if (event.type === Blockly.Events.BLOCK_CHANGE) {
+            if (CHANGE_EVENTS.has(event.type)) {
                 segm14StartScript()
             }
         }
     )
     //todo display stuff led
     //todo save/restore
-    //todo rerun
     document.getElementById("digit0").src = led14Svg
     document.getElementById("digit1").src = led14Svg
     document.getElementById("digit2").src = led14Svg
@@ -108,6 +118,9 @@
         MqttClient.save(button.info.file_key, JSON.stringify(state))
     })
     EXAMPLES.init(workspace)
+    document.getElementById("restart").addEventListener("click", function() {
+        segm14StartScript()
+    });
     // MqttClient.start()
 
 </script>

led_control.js

@@ -99,41 +99,43 @@ const font = {
 };
 
 
-var stopMe = false
-var runningTimeout = null
-
-function segm14Stop()
-{
-    stopMe = true
-    clearTimeout(runningTimeout)
-}
 
 function segm14StartScript() {
+    if(this!==window) {
+        segm14StartScript.call(window)
+        return
+    }
+    window.stopMe = true
+    clearTimeout(window.runningTimeout)
     const js = javascript.javascriptGenerator.workspaceToCode(workspace)
-    segm14Stop()
     segm14Text("\s\s\s\s")
-    const f = (async ()=>{}).constructor(js)
+    //Tricky stuff: here we create an async function using browser internal constructor
+    const f = (async () => {
+    }).constructor(js)
     setTimeout(() => {
-        stopMe = false
+        window.stopMe = false
         f()
-    })
+    },100)
 }
+
 // noinspection JSUnusedGlobalSymbols
 function segm14Text(text) {
-    if(stopMe) {
-        return
-    }
     for (let i = 0; i < 4; i++) {
+        if (window.stopMe) {
+            return
+        }
         const shape = font[text.charAt(i)]
         segm14Output(i, shape === undefined ? "" : shape)
     }
 }
 
 // noinspection JSUnusedGlobalSymbols
 function segm14Delay(ms) {
-    if(stopMe) {
+    if (window.stopMe) {
         return null
     }
-    return new Promise(resolve => runningTimeout = setTimeout(resolve, ms * 1000.0));
+    return new Promise(resolve => {
+        if (!window.stopMe) window.runningTimeout = setTimeout(resolve, ms * 1000.0)
+    });
 }