:lipstick: Improve simulation by changing to using a svg. and some small fixes

4 files changed, 38 insertions, 53 deletions

diff --git a/NeoRuntime/Runtime/neo_runtime.py b/NeoRuntime/Runtime/neo_runtime.py
index 3057f3c..caa367e 100644
--- a/NeoRuntime/Runtime/neo_runtime.py
+++ b/NeoRuntime/Runtime/neo_runtime.py
@@ -69,7 +69,7 @@ class NeoRuntime:
         self.__module_th = exec_module(self.__module_loop)
 
         # This will run in this thread.
-        print("> Starting to listen on stdin")
+        print("> Starting IPC socket server")
         self.__s = None
         try:
             self.__bind_socket()
@@ -81,6 +81,7 @@ class NeoRuntime:
         finally:
             self.__close_socket()
 
+
     def __bind_socket(self):
         if path.exists(self.__socket_file):
             remove(self.__socket_file)
@@ -89,6 +90,7 @@ class NeoRuntime:
         self.__s.bind(self.__socket_file)
         self.__s.listen(1)
 
+
     def __socket_listener(self):
         self.__s_clients = []
         last_send = time.perf_counter()
@@ -118,7 +120,7 @@ class NeoRuntime:
                 last_send = time.perf_counter()
             
             if self.__send_strip_buffer:
-                time.sleep(0.001)
+                time.sleep(0.05)
                 buffer = [2]
                 for p in self.__strip.COLORSTATE:
                     buffer.append((p & 0x00FF0000) >> 16)
@@ -153,6 +155,7 @@ class NeoRuntime:
                         except Exception as e:
                             traceback.print_exc()
 
+
     def __close_socket(self):
         if (self.__s is None): return
         r, w, e = select.select([self.__s, *self.__s_clients], self.__s_clients, [], 0)
@@ -166,7 +169,6 @@ class NeoRuntime:
         self.__s.close()
 
 
-
     def __execute_command(self, command):
         """
         command should be of type bytes
diff --git a/NeoRuntime/builtin/fade/script.py b/NeoRuntime/builtin/fade/script.py
index 8fe902a..e7e7481 100644
--- a/NeoRuntime/builtin/fade/script.py
+++ b/NeoRuntime/builtin/fade/script.py
@@ -1,4 +1,5 @@
-from luxcena_neo import NeoBehaviour, IntegerVariable
+from luxcena_neo import NeoBehaviour, FloatVariable
+from time import perf_counter
 
 def wheel(pos):
     """Generate rainbow colors across 0-255 positions."""
@@ -14,15 +15,18 @@ def wheel(pos):
 class Main(NeoBehaviour):
 
     def declare_variables(self):
-        self.declare(IntegerVariable("speed", 2, min_val=1, max_val=50))
+        self.declare(FloatVariable("speed", 1, min_val=1, max_val=6, step=0.1))
 
     def on_start(self):
         """ Execute when mode is selected. """
         self.i = 0
+        self.last_inst = perf_counter()
 
     def each_tick(self):
-        self.i += self.var.speed
-        if self.i > 255: self.i = 0
-        for i in range(strip.num_pixels()):
-            strip.set_pixel_color(i, wheel(self.i))
-        strip.show()
+        if (perf_counter() - self.last_inst) > (6-self.var.speed):
+            self.i += 1
+            if self.i > 255: self.i = 0
+            for i in range(strip.num_pixels()):
+                strip.set_pixel_color(i, wheel(self.i))
+            strip.show()
+            self.last_inst = perf_counter()
diff --git a/src_frontend/Components/Editor/Simulation.svelte b/src_frontend/Components/Editor/Simulation.svelte
index aba5cdd..abe202c 100644
--- a/src_frontend/Components/Editor/Simulation.svelte
+++ b/src_frontend/Components/Editor/Simulation.svelte
@@ -3,80 +3,59 @@
     import { authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore";
     authorizedSocketNeeded.set(true);
 
+    let svg;
     let pixels = [];
-    let strip_buffer = [];
-
-    let gridTemplateColumns = "1fr";
-    let gridTemplateRows = "1fr";
 
     function updateMatrix(matrix) {
         if (matrix == null) { return; }
         pixels = [];
-        let columnN = 0;
-        for (let y = 0; y < matrix.length; y++) {
-            if (matrix[y].length > columnN) {
-                columnN = matrix[y].length;
-            }
-        }
 
+        let columnN = 0;
         for (let y = 0; y < matrix.length; y++) {
+            if (matrix[y].length > columnN) { columnN = matrix[y].length; }
             for (let x = 0; x < matrix[y].length; x++) {
-                pixels.push(matrix[y][x]);
-            }
-            for (let x = 0; x < (columnN - matrix[y].length); x++) {
-                pixels.push(-1);
+                pixels.push({x: x, y: y, n: matrix[y][x] });
             }
         }
-        gridTemplateColumns = `repeat(${columnN}, 1fr)`;
-        gridTemplateRows = `repeat(${matrix.length}, 1fr)`;
+        if (svg != null) {
+            svg.setAttribute("viewBox",  `0 0 ${columnN*2+2} ${matrix.length*2+2}`);
+        }
         pixels = pixels;
     }
 
     async function updateColors(colors) {
         for (let i = 0; i+2 < colors.length; i+=3) {
             try {
-            document.querySelector("#sim-pixel-"+(i/3)).style.setProperty("--color", `rgb(${colors[i]}, ${colors[i+1]}, ${colors[i+2]})`);
+            document.querySelector("#sim-pixel-"+(i/3)).style.setProperty("fill", `rgb(${colors[i]}, ${colors[i+1]}, ${colors[i+2]})`);
             } catch(e) {}
         }
     }
 
-    authorizedSocket.on("matrix", updateMatrix);
-    authorizedSocket.on("strip_buffer", updateColors);
-
     onMount(() => {
+        authorizedSocket.on("matrix", updateMatrix);
+        authorizedSocket.on("strip_buffer", updateColors);
         authorizedSocket.emit("matrix:get");
     });
-
 </script>
 
 <style>
-    .matrix {
-        display: grid;
-        width: 100%;
-        gap: 10px 10px;
-    }
-    .pixel {
-        display: inline-block;
-        width: 100%;
-        height: 5px;
-        background-color: var(--color);
-        box-shadow: 0 0 10px var(--color);
-    }
     p {
         margin: 0;
         margin-bottom: 5px;
         font-size: 10px;
         color: var(--grey-500);
     }
+    .wrapper {
+        width: 100%;
+        height: 100%;
+    }
 </style>
 
-<p>(still quite buggy, especially for very fast changing pixels, if nothing is happening, try to restart the script)</p>
-<div class="matrix" style="grid-template-columns: {gridTemplateColumns}; grid-template-rows: {gridTemplateRows};">
-    {#each pixels as pixel}
-        {#if pixel > -1}
-        <div id="sim-pixel-{pixel}" style="--color:rgb(255, 255, 255)" class="pixel"></div>
-        {:else}
-        <div style="--color:none" class="pixel"></div>
-        {/if}
-    {/each}
+<div class="wrapper">
+    <p>(still quite buggy, especially for very fast changing pixels, if nothing is happening, try to restart the script)</p>
+    <svg viewBox="0 0 0 0" preserveAspectRatio="xMaxYMax" bind:this={svg}>
+        {#each pixels as pixel}
+            <rect id="sim-pixel-{pixel.n}" x="{pixel.x*2+1}" y="{pixel.y*2+1}" width="1" height="1" style="fill:rgb(0,0,0);filter:blur(0.2px);" />
+        {/each}
+    </svg>
 </div>
\ No newline at end of file
diff --git a/src_frontend/Components/LEDConfig/LEDConfig.svelte b/src_frontend/Components/LEDConfig/LEDConfig.svelte
index 2cf9aa2..b0992f8 100644
--- a/src_frontend/Components/LEDConfig/LEDConfig.svelte
+++ b/src_frontend/Components/LEDConfig/LEDConfig.svelte
@@ -40,7 +40,7 @@
         matrix = matrix; // This is needed because svelte is weird :)  
         saveConfig();
     }
-    function removeCell() {
+    function removeCell(ev) {
         matrix[ev.target.dataset.id].pop();
         matrix = matrix; // This is needed because svelte is weird :)
         saveConfig();