From f6d2fa6faee7ca5482711c2737170f61e8342425 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Thu, 21 Oct 2021 22:14:58 +0200
Subject: :lipstick: Improve simulation by changing to using a svg. and some
 small fixes

---
 src_frontend/Components/Editor/Simulation.svelte   | 63 ++++++++--------------
 src_frontend/Components/LEDConfig/LEDConfig.svelte |  2 +-
 2 files changed, 22 insertions(+), 43 deletions(-)

(limited to 'src_frontend/Components')

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(); 
-- 
cgit v1.2.3