final touches

MineHubCZ · Mar 20, 2023 · 52abe9d · 52abe9d
1 parent ddefb7b
commit 52abe9d
Show file tree

Hide file tree

Showing 8 changed files with 425 additions and 38 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -11,14 +11,14 @@
     let profiles;
 
     async function load() {
-        profiles = await invoke("connect");
-//        profiles = [
-//            "1;s;255;ffff00;r;255;10;",
-//            "1;s;255;ffffff;r;255;10;",
-//            "5;r;255;50;rw;255;50;",
-//            "5;r;255;50;rw;255;50;",
-//            "3;w;255;204466ff;rg;255;5",
-//        ]
+        //profiles = await invoke("connect");
+        profiles = [
+            "1;s;255;ffff00;r;255;10;",
+            "1;s;255;ffffff;r;255;10;",
+            "5;r;255;50;rw;255;50;",
+            "5;r;255;50;rw;255;50;",
+            "3;w;255;204466ff;rg;255;5",
+        ]
         component =
             profiles
             ? Main

diff --git a/src/lib/Loading.svelte b/src/lib/Loading.svelte
@@ -1,6 +1,9 @@
 <div class="flex justify-center items-center h-screen flex-col">
-    tady bude nejaky nacitani asi
-    <div class="animate-bounce">
-        <img src="logo.png" alt="penis">
+    Hledání lampičky...
+    <div class="animate-spin">
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+          <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+        </svg>
     </div>
 </div>
diff --git a/src/lib/ModesBottom/Wave.svelte b/src/lib/ModesBottom/Wave.svelte
@@ -1,12 +1,75 @@
+<script lang="ts">
+
+// pls forgive me
+
+let color1;
+let color2;
+let color3;
+let color4;
+let color5;
+
+export let color;
+
+var c = 0;
+
+export let speed;
+
+let i;
+$: {
+    clearInterval(i);
+    i = setInterval(function() {
+            if (c % 25 == 0) {
+                color1 = "#000000";
+                color2 = "#000000";
+                color3 = "#000000";
+                color4 = "#000000";
+                color5 = "#000000";
+            }
+            switch(c) {
+                case 0: 
+                    color1 = color;
+                    break;
+                case 25: 
+                    color2 = color;
+                    break;
+                case 50:
+                    color3 = color;
+                    break;
+                case 75:
+                    color3 = color;
+                    break;           
+                case 100: 
+                    color2 = color;
+                    break;
+                case 125: 
+                    c = 0;
+                    return;
+            }
+            c++;
+        }, (180/speed));
+}
+
+</script>
+<defs>
+    <linearGradient id="bottomGradient">
+        <stop offset="0%" stop-color="{color3}">
+        </stop>
+        <stop offset="50%" stop-color="{color2}">
+        </stop>
+        <stop offset="100%" stop-color="{color1}">
+        </stop>
+    </linearGradient>
+</defs>
 <g
    id="Vrstva_3"
-   transform="matrix(1.2481416,0,0,1.2481416,-114.72913,-105.16066)">
-	<g
+   transform="matrix(1.2481416,0,0,1.2481416,-114.72913,-105.16066)"
+   >
+    <g
    id="Vrstva_2_00000068674944005382951290000011903351550368725390_"
    class="st3">
 	</g>
 	<path
-   class="st2"
+   fill="url(#bottomGradient)"
    d="m 825.4,816.1 c 0,6.6 -5.4,12 -12,12 h -76.6 c -6.6,0 -12,-5.4 -12,-12 V 547.7 c 0,-6.6 -3.8,-8.2 -8.4,-3.5 L 496.5,767 c -4.6,4.7 -12.2,4.7 -16.8,0 L 351,637.5 c -4.7,-4.7 -8.4,-13.8 -8.4,-20.5 V 498 c 0,-6.6 3.8,-8.2 8.4,-3.5 L 479.6,624 c 4.7,4.7 12.2,4.7 16.8,0 L 817,298.3 c 4.6,-4.7 8.4,-3.2 8.4,3.4 z"
    id="path36" />
 </g>
diff --git a/src/lib/ModesTop/RainbowWave.svelte b/src/lib/ModesTop/RainbowWave.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+import { rainbow } from "/src/colors";
+
+// pls forgive me
+
+let color1;
+let color2;
+let color3;
+let color4;
+let color5;
+
+var red = 255; 
+var green = 0;
+var blue = 0;
+
+var c = 0;
+
+export let speed;
+
+let i;
+$: {
+    clearInterval(i);
+    i = setInterval(function() {
+            [red, green, blue] = rainbow(red, green, blue);
+            let color = `rgb(${red}, ${green}, ${blue})`;
+            if (c % 25 == 0) {
+                color1 = "#000000";
+                color2 = "#000000";
+                color3 = "#000000";
+                color4 = "#000000";
+                color5 = "#000000";
+            }
+            switch(c) {
+                case 0: 
+                    color1 = color;
+                    break;
+                case 25: 
+                    color2 = color;
+                    break;
+                case 50:
+                    color3 = color;
+                    break;
+                case 75:
+                    color4 = color;
+                    break;
+                case 100:
+                    color5 = color;
+                    break;
+                case 125:
+                    color4 = color;
+                    break;
+                case 150:
+                    color3 = color;
+                    break;           
+                case 175: 
+                    color2 = color;
+                    break;
+                case 200: 
+                    c = 0;
+                    return;
+            }
+            c++;
+        }, (180/speed));
+}
+
+</script>
+<defs>
+    <linearGradient id="gradient">
+        <stop offset="0%" stop-color="{color1}">
+        </stop>
+        <stop offset="25%" stop-color="{color2}">
+        </stop>
+        <stop offset="50%" stop-color="{color3}">
+        </stop>
+        <stop offset="75%" stop-color="{color4}">
+        </stop>
+        <stop offset="100%" stop-color="{color5}">
+        </stop>
+    </linearGradient>
+</defs>
+<g
+   id="Vrstva_2_00000068639540309316769050000003377542866050839450_"
+   transform="matrix(1.2481416,0,0,1.2481416,-114.72913,-105.16066)"   
+   >
+	<g
+   id="Vrstva_1_00000165236326566489921610000009472640422387894949_">
+	</g>
+	<path
+   fill="url(#gradient)"
+   d="m 269.6,292.3 c -4.9,-4.4 -8.9,-2.6 -8.9,4 L 260.6,794 c 0,6.6 -3.8,8.1 -8.4,3.4 l -90,-91.6 c -4.6,-4.7 -8.4,-13.9 -8.4,-20.5 V 158.2 c 0,-6.6 5.4,-12 12,-12 h 82.9 c 6.6,0 15.9,3.6 20.8,8.1 l 212.1,195 c 4.9,4.5 12.4,4.1 16.8,-0.8 L 670.2,155.2 c 4.4,-4.9 13.3,-9 19.9,-9 H 815 c 6.6,0 8.2,3.8 3.6,8.6 L 498.8,482 c -4.6,4.7 -12.4,5 -17.3,0.6 z"
+   id="path32" />
+</g>
diff --git a/src/lib/ModesTop/Wave.svelte b/src/lib/ModesTop/Wave.svelte
@@ -1,11 +1,87 @@
+<script lang="ts">
+
+// pls forgive me
+
+let color1;
+let color2;
+let color3;
+let color4;
+let color5;
+
+export let color;
+
+var c = 0;
+
+export let speed;
+
+let i;
+$: {
+    clearInterval(i);
+    i = setInterval(function() {
+            if (c % 25 == 0) {
+                color1 = "#000000";
+                color2 = "#000000";
+                color3 = "#000000";
+                color4 = "#000000";
+                color5 = "#000000";
+            }
+            switch(c) {
+                case 0: 
+                    color1 = color;
+                    break;
+                case 25: 
+                    color2 = color;
+                    break;
+                case 50:
+                    color3 = color;
+                    break;
+                case 75:
+                    color4 = color;
+                    break;
+                case 100:
+                    color5 = color;
+                    break;
+                case 125:
+                    color4 = color;
+                    break;
+                case 150:
+                    color3 = color;
+                    break;           
+                case 175: 
+                    color2 = color;
+                    break;
+                case 200: 
+                    c = 0;
+                    return;
+            }
+            c++;
+        }, (180/speed));
+}
+
+</script>
+<defs>
+    <linearGradient id="gradient">
+        <stop offset="0%" stop-color="{color1}">
+        </stop>
+        <stop offset="25%" stop-color="{color2}">
+        </stop>
+        <stop offset="50%" stop-color="{color3}">
+        </stop>
+        <stop offset="75%" stop-color="{color4}">
+        </stop>
+        <stop offset="100%" stop-color="{color5}">
+        </stop>
+    </linearGradient>
+</defs>
 <g
    id="Vrstva_2_00000068639540309316769050000003377542866050839450_"
-   transform="matrix(1.2481416,0,0,1.2481416,-114.72913,-105.16066)">
+   transform="matrix(1.2481416,0,0,1.2481416,-114.72913,-105.16066)"   
+   >
 	<g
    id="Vrstva_1_00000165236326566489921610000009472640422387894949_">
 	</g>
 	<path
-   class="st2"
+   fill="url(#gradient)"
    d="m 269.6,292.3 c -4.9,-4.4 -8.9,-2.6 -8.9,4 L 260.6,794 c 0,6.6 -3.8,8.1 -8.4,3.4 l -90,-91.6 c -4.6,-4.7 -8.4,-13.9 -8.4,-20.5 V 158.2 c 0,-6.6 5.4,-12 12,-12 h 82.9 c 6.6,0 15.9,3.6 20.8,8.1 l 212.1,195 c 4.9,4.5 12.4,4.1 16.8,-0.8 L 670.2,155.2 c 4.4,-4.9 13.3,-9 19.9,-9 H 815 c 6.6,0 8.2,3.8 3.6,8.6 L 498.8,482 c -4.6,4.7 -12.4,5 -17.3,0.6 z"
    id="path32" />
 </g>
diff --git a/src/lib/Profile.svelte b/src/lib/Profile.svelte
@@ -32,24 +32,30 @@
             "r":  ["Duhový", Rainbow],
             "rg": ["Duhový přechod", RainbowGrad],
             "w":  ["Vlna", Wave],
-            "rw": ["Duhova vlna", RainbowWave],
+            "rw": ["Duhová vlna", RainbowWave],
             "b":  ["Breathing", Breathing],
-            "rb": ["Duhovy breathing", RainbowBreathing],
+            "rb": ["Duhový breathing", RainbowBreathing],
         },
         "bottom": {
             "s":  ["Statický", StaticB],
             "r":  ["Duhový", RainbowB],
             "rg": ["Duhový přechod", RainbowGradB],
             "w":  ["Vlna", WaveB],
-            "rw": ["Duhova vlna", RainbowWaveB],
+            "rw": ["Duhová vlna", RainbowWaveB],
             "b":  ["Breathing", BreathingB],
-            "rb": ["Duhovy breathing", RainbowBreathingB],
+            "rb": ["Duhový breathing", RainbowBreathingB],
         },
     };
 
     async function upload() {
+        console.log(viceVersa(id, top, bottom));
         let result = await invoke("write", { setting: viceVersa(id, top, bottom) })
     }
+
+    function sync() {
+        bottom.speed = top.speed;
+        // todo reset
+    }
 </script>
 <div class="border-2 border-primary flex p-5 h-full gap-16 justify-center items-center">
     <div class="grid grid-cols-2 gap-4">
@@ -66,12 +72,12 @@
                 {/each}    
             </div>
             <div class="flex flex-col">
-                jas
+                Jas
                 <input type="range" class="slide" bind:value={top.brightness} min="0" max="255">
             </div>
             {#if hasSpeed(top.mode)}
                 <div class="flex flex-col">
-                    rychlost
+                    Rychlost
                     <input type="range" class="slide" bind:value={top.speed} min="1" max="255">
                 </div>
             {/if}
@@ -89,30 +95,30 @@
                 {/each}    
             </div>
             <div class="flex flex-col">
-                jas
+                Jas
                 <input type="range" class="slide" bind:value={bottom.brightness} min="0" max="255">
             </div>
             {#if hasSpeed(bottom.mode)}
                 <div class="flex flex-col">
-                    rychlost
+                    Rychlost
                     <input type="range" class="slide" bind:value={bottom.speed} min="1" max="255">
                 </div>
             {/if}
         </div>
             {#if hasSpeed(bottom.mode) && hasSpeed(top.mode)}
                 <div class="flex flex-col">
-                    <button on:click={() => bottom.speed = top.speed} class="button unselected">Synchronizovat</button>
+                    <button on:click={sync} class="button unselected">Synchronizovat</button>
                 </div>
             {/if}
     </div>
     <div class="w-3/6 xl:w-2/6"><Lamp top={modes["top"][top.mode][1]} bottom={modes["bottom"][bottom.mode][1]} topColor={top.color} bottomColor={bottom.color} topSpeed={top.speed} bottomSpeed={bottom.speed} topBrightness={top.brightness} bottomBrightness={bottom.brightness}></Lamp></div>
     <div class="gap-4 flex flex-col">
         {#if hasColor(top.mode)}
-            <ColorPicker bind:hex={top.color} label="Barva horni zony"/>
+            <ColorPicker bind:hex={top.color} label="Barva horní zóny"/>
         {/if}
         {#if hasColor(bottom.mode)}
-            <ColorPicker bind:hex={bottom.color} label="Barva spodni zony"/>
+            <ColorPicker bind:hex={bottom.color} label="Barva spodní zóny"/>
         {/if}
     </div>
-    <div class="button unselected fixed bottom-0 right-0 m-8" on:click={() => upload()}>Nahrat</div>
+    <div class="button unselected fixed bottom-0 right-0 m-8" on:click={() => upload()}>Nahrát</div>
 </div>