SVG refactoring, Save, Load, Quicksave every 30 sec

elmot · May 9, 2024 · 7f25aed · 7f25aed
1 parent fbfa225
commit 7f25aed
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -32,11 +32,14 @@
             border-radius: 1cqw;
             display: flex;
             align-items: center;
+            user-select: none;
         }
 
         #displayDiv embed {
             height: 12cqh;
-            width: 7cqw
+            width: 7cqw;
+            user-select: none;
+            pointer-events: none;
         }
 
         #displayDiv #restart img {
@@ -61,14 +64,20 @@
             visibility: visible;
             background-color: antiquewhite;
         }
+        .LoadButton  .blocklyFlyoutButtonBackground {
+            fill: #236123;
+        }
+        .SaveButton  .blocklyFlyoutButtonBackground {
+            fill: #682714;
+        }
     </style>
 </head>
 <body>
 <div id="blocklyDiv" style="height: 95cqh; width: 95cqw;"></div>
 <div id="displayDiv">
-<!--    <div id="connect-circle">-->
-<!--        <div id="connect-tooltip">Connecting...</div>-->
-<!--    </div>-->
+    <!--    <div id="connect-circle">-->
+    <!--        <div id="connect-tooltip">Connecting...</div>-->
+    <!--    </div>-->
     <button id="restart" title="Restart">
         <img src="restart-svgrepo-com.svg">
     </button>
@@ -97,30 +106,62 @@
     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 (CHANGE_EVENTS.has(event.type)) {
+                window.workspace_changed = true
                 segm14StartScript()
             }
         }
     )
     //todo display stuff led
-    //todo save/restore
     document.getElementById("digit0").src = led14Svg
     document.getElementById("digit1").src = led14Svg
     document.getElementById("digit2").src = led14Svg
     document.getElementById("digit3").src = led14Svg
-    workspace.registerButtonCallback("file-run", function (button) {
-        alert(button.info.file_key)
-    })
     workspace.registerButtonCallback("file-load", function (button) {
-        MqttClient.load(button.info.file_key)
+        const js = window.localStorage.getItem(`local-file:${button.info.file_key}`)
+        if (js != null) {
+            if (window.workspace_changed && confirm(`Unsaved workspace, load file ${button.info.file_key} anyway?`)) {
+                Blockly.serialization.workspaces.load(JSON.parse(js), workspace);
+                window.workspace_changed = false
+            }
+        } else {
+            alert(`Nothing saved to file ${button.info.file_key}`)
+        }
+
     })
     workspace.registerButtonCallback("file-save", function (button) {
-        const state = Blockly.serialization.workspaces.save(workspace);
-        MqttClient.save(button.info.file_key, JSON.stringify(state))
+        if (confirm(`Save to file ${button.info.file_key}?`)) {
+            const js = JSON.stringify(Blockly.serialization.workspaces.save(workspace));
+            window.localStorage.setItem(`local-file:${button.info.file_key}`, js)
+            window.workspace_changed = false
+        }
     })
     EXAMPLES.init(workspace)
-    document.getElementById("restart").addEventListener("click", function() {
+    document.getElementById("restart").addEventListener("click", function () {
         segm14StartScript()
     });
+
+    {
+        const QUICKSAVE_KEY = "local-file:quicksave"
+        const js = window.localStorage.getItem(QUICKSAVE_KEY)
+        if (js != null) {
+            setTimeout(() => {
+                try {
+                    Blockly.serialization.workspaces.load(JSON.parse(js), workspace);
+                } catch (e) {
+                    console.warn(e)
+                }
+            }, 100)
+        }
+        setInterval(() => {
+            try {
+                const js = JSON.stringify(Blockly.serialization.workspaces.save(workspace));
+                window.localStorage.setItem(QUICKSAVE_KEY, js)
+                console.info("Quick save")
+            } catch (e) {
+                console.warn(e)
+            }
+        }, 30000)
+    }
     // MqttClient.start()
 
 </script>

diff --git a/led14.svg b/led14.svg
diff --git a/led14_segment_blocks.js b/led14_segment_blocks.js
@@ -1,40 +1,4 @@
-var led14Svg = URL.createObjectURL(new Blob(['<?xml version="1.0" encoding="utf-8"?>\n' +
-'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 444" enable-background="new 0 0 329 444">\n' +
-'<g id="Layer_1">\n' +
-'    <g><polygon fill="#E0E0E0" points="109.3,30.5 91.8,12 104.2,0.5 306.8,0.5 315.3,9 288.9,31.5"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="264.6,200.9 296.5,38.3 319,16.7 328.5,28.1 295.6,197.7 277.1,215.3"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="227.6,407.8 255.5,245.2 273.1,226.7 287.5,240.2 257.6,414.7 244.1,426.3"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="22.7,443 15.3,435.5 38.7,414 218.8,413.5 237.3,432 225.8,442.5"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="0.6,416.8 33.5,245.3 53,227.7 65.5,243.1 34.6,404.7 10.1,426.3"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="42.6,198.9 72.5,28.2 84,15.7 102.5,36.2 73.6,198.7 55.1,215.3"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="72.8,237 60.2,221.6 76.7,207 140.4,207 157.7,220.4 129.4,237"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="190.7,237 172.4,221.6 197.7,207 257.3,207 268.8,219.5 249.3,237"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="140.5,200.7 99.6,88 107.4,42.1 125.6,63.3 154.5,152.1 161.4,217.8"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="160.5,150 182.5,36.2 216.5,36.2 193.6,152.8 165.4,209.2"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="207.5,138.2 257.4,69.3 287.3,43.3 279.6,88.8 201.7,197.6 169.2,215.8"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="204.5,377.8 174.5,291.9 168.6,226.2 186.6,241.3 229.5,357.1 223.7,401.8"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="115.6,405.9 134.5,293.1 162.7,231.9 167.5,285 147.6,405.9"/></g>\n' +
-'    <g><polygon fill="#E0E0E0" points="50.5,352.2 128.4,243.4 159.9,225.2 124.6,299.8 71.7,373.7 43.7,398.7"/></g>\n' +
-'    <g><circle fill="#E0E0E0" cx="296.5" cy="426.5" r="16.5"/></g>\n' +
-'</g>\n' +
-'    <g id="Layer_2">\n' +
-'        <text transform="matrix(1 0 0 1 195.5767 24.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">A</text>\n' +
-'        <text transform="matrix(1 0 0 1 288.5767 126.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">B</text>\n' +
-'        <text transform="matrix(1 0 0 1 249.5767 338.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">C</text>\n' +
-'        <text transform="matrix(1 0 0 1 117.5767 436.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">D</text>\n' +
-'        <text transform="matrix(1 0 0 1 25.5767 338.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">E</text>\n' +
-'        <text transform="matrix(1 0 0 1 63.5767 126.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">F</text>\n' +
-'        <text transform="matrix(1 0 0 1 96.5767 230.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">G</text>\n' +
-'        <text transform="matrix(1 0 0 1 211.377 230.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">H</text>\n' +
-'        <text transform="matrix(1 0 0 1 126.377 151.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">I</text>\n' +
-'        <text transform="matrix(1 0 0 1 170.377 117.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">J</text>\n' +
-'        <text transform="matrix(1 0 0 1 212.377 151.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">K</text>\n' +
-'        <text transform="matrix(1 0 0 1 180 303.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">L</text>\n' +
-'        <text transform="matrix(1 0 0 1 135 335.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">M</text>\n' +
-'        <text transform="matrix(1 0 0 1 99.5767 303.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">N</text>\n' +
-'        <text transform="matrix(1 0 0 1 290 435.2002)" font-family="\'FiraCode-Bold\'" font-size="28px">O</text>\n' +
-'</g>\n' +
-'</svg>\n'], {type : 'image/svg+xml'}));
+const led14Svg = "led14.svg"
 Blockly.Blocks["led_14_segments"] = {
     init: function () {
         this.setColour(160);

diff --git a/led_control.js b/led_control.js
@@ -105,10 +105,10 @@ function segm14StartScript() {
         segm14StartScript.call(window)
         return
     }
+    segm14Text("\s\s\s\s")
     window.stopMe = true
     clearTimeout(window.runningTimeout)
     const js = javascript.javascriptGenerator.workspaceToCode(workspace)
-    segm14Text("\s\s\s\s")
     //Tricky stuff: here we create an async function using browser internal constructor
     const f = (async () => {
     }).constructor(js)

diff --git a/toolbox.js b/toolbox.js
@@ -3,9 +3,8 @@ function fileCategory(name) {
         kind:"category",
         name:name,
         contents: [
-            {kind:"button",text:"Run",file_key:name,callbackKey: "file-run"},
-            {kind:"button",text:"Load",file_key:name,callbackKey: "file-load"},
-            {kind:"button",text:"Save",file_key:name,callbackKey: "file-save"}
+            {kind:"button",text:"Load",file_key:name,callbackKey: "file-load", "web-class":"LoadButton"},
+            {kind:"button",text:"Save",file_key:name,callbackKey: "file-save", "web-class":"SaveButton"}
         ]
     }
 }
@@ -222,10 +221,17 @@ const toolbox = {
         {
             kind: "sep"
         },
-        fileCategory("Alpha"),
-        fileCategory("Beta"),
-        fileCategory("Gamma"),
-        fileCategory("Delta"),
+        {
+            kind: "category",
+            name: "Files",
+            contents: [
+                fileCategory("Alpha"),
+                fileCategory("Beta"),
+                fileCategory("Gamma"),
+                fileCategory("Delta"),
+            ]
+
+        },
         {
             kind: "sep"
         },