:boom: Introduce new UI based on svelte, and rewrite a lot of the node app and the NeoRuntime

3 files changed, 282 insertions, 0 deletions

diff --git a/src_frontend/Components/MainControls/ControlColors.svelte b/src_frontend/Components/MainControls/ControlColors.svelte
new file mode 100644
index 0000000..5d21cc0
--- /dev/null
+++ b/src_frontend/Components/MainControls/ControlColors.svelte
@@ -0,0 +1,107 @@
+<script>
+    import { writable } from 'svelte/store';
+    import { createEventDispatcher } from 'svelte';
+    import { fade } from 'svelte/transition';
+
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+    import iro from '@jaames/iro';
+    
+    const dispatch = createEventDispatcher();
+
+    let wrapperWidth = writable(0);
+
+    // This is a list of color variables that we can change
+    export let colorVariables = {
+        "Main": "#1bcf3f",
+        "Second": "#fafafa",
+        "tert": "#fafafa"
+    };
+    // These are some helper functions for the object
+    const getColorOfVar = function(name) { return colorVariables[name]; }
+    const setColorOfVar = function(name, color) { colorVariables[name] = color; }
+    // This is the identifier of the variable that currently is selected for changing
+    let currentVariable = Object.keys(colorVariables)[0];
+
+    let colorPicker;
+    function picker(node) {
+        colorPicker = new iro.ColorPicker(node, {
+            color: getColorOfVar(currentVariable),
+            width: $wrapperWidth
+        });
+        colorPicker.on('color:change', function(color) {
+            setColorOfVar(currentVariable, color.hexString);
+            dispatch("change", {name: currentVariable, value: color.hexString});
+        });
+
+        wrapperWidth.subscribe((width) => {
+            colorPicker.resize(width - 30);
+        });
+        
+        return {
+			destroy() {}
+		};
+    }
+
+    function changeColorVar(ev) {
+        currentVariable = ev.target.dataset.id;
+        colorPicker.color.hexString = getColorOfVar(currentVariable);
+    }
+
+</script>
+
+<style>
+    .wrapper {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 15px;
+    }
+    
+    .color-picker {
+        padding: 15px;
+    }
+
+    .color-options {
+        margin-top: 15px;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+    .color-options > * {
+        margin: auto;
+        width: 100%;
+        text-align: center;
+        padding: 15px;
+        box-sizing: border-box;
+        border-top: 2px solid;
+    }
+    .color-options > *:first-child {
+        border-bottom-left-radius: 15px;
+    }
+    .color-options > *:last-child {
+        border-bottom-right-radius: 15px;
+    }
+    .color-options .selected {
+        background-color: #eaeaea;
+    }
+    .color-options > *:hover {
+        background-color: #dcdcdc;
+    }
+    .color-options > *:active {
+        background-color: #d4d4d4;
+    }
+</style>
+
+<div transition:fade|local class="wrapper drop-shadow" bind:clientWidth={$wrapperWidth} >
+    <div class="color-picker" use:picker></div>
+    <div class="color-options">
+        {#each Object.keys(colorVariables) as colorVar}
+            <span style="border-top-color: {getColorOfVar(colorVar)}" 
+                  data-id={colorVar}
+                  on:click={changeColorVar}
+                  class:selected={colorVar == currentVariable}>
+                <PrettyVar varText={colorVar} />
+            </span>
+        {/each}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/MainControls/ControlComponents.svelte b/src_frontend/Components/MainControls/ControlComponents.svelte
new file mode 100644
index 0000000..5f6d165
--- /dev/null
+++ b/src_frontend/Components/MainControls/ControlComponents.svelte
@@ -0,0 +1,139 @@
+<script>
+    import { onMount } from "svelte";
+    import { fade } from 'svelte/transition';
+    import RoundRange from "../../ComponentLib/RoundRange.svelte";
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+    import FloatingSelect from "../../ComponentLib/FloatingSelect.svelte";
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+    import ControlColors from "./ControlColors.svelte";
+    import ControlOthers from "./ControlOthers.svelte";
+
+	import { openSocket } from "../../stores/socketStore";
+
+    let name = "-";
+    let brightness = 0;
+    let powerIsOn = false;
+
+    let modeSelect;
+    let allModes = {};
+    let activeMode = "";
+    
+    let colorVariables = {};
+
+    function togglePower() {
+        powerIsOn = !powerIsOn;
+        openSocket.emit("power:set", powerIsOn);
+    }
+    function setBrightness() {
+        if (!powerIsOn) {
+            togglePower();
+        }
+        openSocket.emit("brightness:set", Math.floor((brightness * 255) / 100));
+    }
+    function setColor(ev) {
+        openSocket.emit("var:set", ev.detail.name, ev.detail.value);
+    }
+    function setMode(el) {
+        openSocket.emit("mode:set", el.target.value, (res) => {
+            console.log(res);
+        })
+    }
+    function onVarChange(name, value) {
+        if (!name.includes("variable/")) {
+            console.log(`Change on unknown globvar "${name}".`);
+            return;
+        }
+        name = name.replace("variable/", "");
+
+        switch (value.var_type) {
+            case "COLOR":
+                if (value.value == null) {
+                    delete colorVariables[name];
+                } else {
+                    colorVariables[name] = value.value;
+                }
+                    colorVariables = colorVariables;
+                break;
+        }
+    }
+    openSocket.on("modelist", (modelist) => {
+        allModes = [];
+        for (let i = 0; i < modelist.length; i++) {
+            let modePath = modelist[i].split("/", 1)[0];
+            if (!allModes.hasOwnProperty(modePath)) { allModes[modePath] = []; }
+            allModes[modePath].push([modelist[i], modelist[i].replace(modePath + "/", "")])
+        }
+        allModes = allModes;
+    })
+    openSocket.on("name", (_name) => name = _name);
+    openSocket.on("mode", (newMode) => activeMode = newMode);
+    openSocket.on("power", (power) => powerIsOn = power);
+    openSocket.on("brightness", (value) => brightness = Math.floor((value * 100) / 255));
+    openSocket.on("var", onVarChange);
+    openSocket.on("vars", (vars) => {
+        for (const [name, value] of Object.entries(vars)) {
+            onVarChange(`variable/${name}`, value);
+        }
+    });
+
+    onMount(async () => {
+        openSocket.emit("name:get");
+        openSocket.emit("modelist:get");
+        openSocket.emit("mode:get");
+        openSocket.emit("power:get");
+        openSocket.emit("brightness:get");
+        openSocket.emit("vars:get");
+    });
+
+</script>
+
+<style>
+    .wrapper {
+        box-sizing: border-box;
+        padding-bottom: 17px;
+        text-align: center;
+    }
+    h1 {
+        color: var(--grey-600);
+        margin: 0;
+        font-size: 20px;
+        font-weight: 100;;
+    }
+    .row {
+        margin-bottom: 25px;
+        margin-left: 10%;
+        margin-right: 10%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .mode_button {
+        margin-left: 10%;
+        flex-grow: 1;
+    }
+</style>
+
+<div class="wrapper">
+    <h1>{name}</h1>
+    <RoundRange bind:enabled={powerIsOn} on:change={setBrightness} bind:value={brightness} />
+
+    <div class="row">
+        <FloatingButton label="POWER" on:click={togglePower} bind:active={powerIsOn} activeBackgroundColor="var(--yellow-500)" activeColor="black" faIcon="fa fa-power-off" />
+        <div class="mode_button">
+            <FloatingSelect label="MODE" faIcon="fas fa-sliders-h" on:change={setMode} bind:this={modeSelect} bind:value={activeMode} >
+                {#each Object.entries(allModes) as [modePath, modes]}
+                    <optgroup label={modePath}>
+                    {#each modes as mode}
+                        <option value={mode[0]}><PrettyVar varText={mode[1]} /></option>
+                    {/each}
+                    </optgroup>
+                {/each}
+            </FloatingSelect>
+        </div>
+    </div>
+
+    {#if Object.keys(colorVariables).length > 0}
+        <ControlColors on:change={setColor} bind:colorVariables={colorVariables} />
+    {/if}
+    <!-- <ControlOthers /> -->
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/MainControls/ControlOthers.svelte b/src_frontend/Components/MainControls/ControlOthers.svelte
new file mode 100644
index 0000000..862a4f5
--- /dev/null
+++ b/src_frontend/Components/MainControls/ControlOthers.svelte
@@ -0,0 +1,36 @@
+<script>
+
+    // This is a list of variables that we can change
+    let variables = [
+        {id: 1, name: "Speed", type: "range", value: 20, min: 0, max: 100},
+        {id: 2, name: "Tingle intensity", type: "range", value: 40, min: 0, max: 255},
+        {id: 3, name: "Amount of tingle", type: "range", value: 90, min: 0, max: 100},
+        {id: 4, name: "Variable of unknown type", type: "date", value: "January"}
+    ];
+
+</script>
+
+<style>
+    .wrapper {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 15px;
+        margin-top: 15px;
+        padding: 15px;
+        text-align: left;
+    }
+    input {
+        width: 100%;
+    }
+</style>
+
+<div class="wrapper drop-shadow">
+    {#each variables as variable}
+        <label for={variable.id}>{variable.name}</label>
+        {#if variable.type == "range"}
+            <input type="range" id={variable.id} min={variable.min} max={variable.max} value={variable.value}>
+        {:else}
+            <input type="text" id={variable.id} value={variable.value} />
+        {/if}
+    {/each}
+</div>
\ No newline at end of file