:sparkles: Make all variable-types changeable from both home and editor

8 files changed, 141 insertions, 33 deletions

diff --git a/NeoRuntime/Runtime/luxcena_neo/__init__.py b/NeoRuntime/Runtime/luxcena_neo/__init__.py
index 606f365..91fdfba 100644
--- a/NeoRuntime/Runtime/luxcena_neo/__init__.py
+++ b/NeoRuntime/Runtime/luxcena_neo/__init__.py
@@ -1,2 +1,2 @@
-from .neo_behaviour import NeoBehaviour, VariableType, ColorVariable, FloatVariable, IntegerVariable, BooleanVariable
+from .neo_behaviour import NeoBehaviour, VariableType, ColorVariable, FloatVariable, IntegerVariable, BooleanVariable, Trigger
 import luxcena_neo.color_utils as utils
diff --git a/NeoRuntime/Runtime/luxcena_neo/neo_behaviour.py b/NeoRuntime/Runtime/luxcena_neo/neo_behaviour.py
index 2eef444..d4ee9bd 100644
--- a/NeoRuntime/Runtime/luxcena_neo/neo_behaviour.py
+++ b/NeoRuntime/Runtime/luxcena_neo/neo_behaviour.py
@@ -210,7 +210,7 @@ class IntegerVariable(Variable):
     def __init__(self, name: str, default: int = 0, min_val: int = 0, max_val: int = 255, **kwargs):
         self.__min = min_val
         self.__max = max_val
-        super().__init__(name, default, VariableType.INT)
+        super().__init__(name, default, VariableType.INT, **kwargs)
     
     @Variable.value.setter
     def value(self, value):
@@ -229,10 +229,11 @@ class IntegerVariable(Variable):
 
 class FloatVariable(Variable):
 
-    def __init__(self, name: str, default: float = 0.0, min_val: float = 0.0, max_val: float = 255.0, **kwargs):
+    def __init__(self, name: str, default: float = 0.0, min_val: float = 0.0, max_val: float = 255.0, step: float = 0.5, **kwargs):
         self.__min = min_val
         self.__max = max_val
-        super().__init__(name, default, VariableType.FLOAT)
+        self.__step = step
+        super().__init__(name, default, VariableType.FLOAT, **kwargs)
     
     @Variable.value.setter
     def value(self, value):
@@ -249,19 +250,19 @@ class FloatVariable(Variable):
         return round(self.value, 2)
 
     def to_dict(self):
-        return {"name": self.name, "value": self.value, "type": self.var_type, "min": self.__min, "max": self.__max}
+        return {"name": self.name, "value": self.value, "type": self.var_type, "min": self.__min, "max": self.__max, "step": self.__step}
 
 
 
 class BooleanVariable(Variable):
 
     def __init__(self, name: str, default: bool, **kwargs):
-        super().__init__(name, default, VariableType.BOOL)
+        super().__init__(name, default, VariableType.BOOL, **kwargs)
     
     @Variable.value.setter
     def value(self, value):
         try:
-            value = bool(value)
+            value = value.lower() == "true"
             super(BooleanVariable, type(self)).value.fset(self, value)
         except:
             print("Attempted to set {} to \"{}\", which is not a valid bool...".format(self.name, value))
@@ -273,9 +274,4 @@ class Trigger(Variable):
     
     @Variable.value.setter
     def value(self, value):
-        try:
-            value = bool(value)
-            if value: value = False
-            super(BooleanVariable, type(self)).value.fset(self, value)
-        except:
-            print("Attempted to set {} to \"{}\", which is not a valid bool...".format(self.name, value)) 
+        super(Trigger, type(self)).value.fset(self, False)
diff --git a/src/SelfUpdater/index.js b/src/SelfUpdater/index.js
index 19ff4c2..cc4e298 100644
--- a/src/SelfUpdater/index.js
+++ b/src/SelfUpdater/index.js
@@ -283,11 +283,11 @@ class SelfUpdater {
                     this.remotePackageJSON = JSON.parse(body);
                     this.remoteVersionNumber = this.remotePackageJSON["version"];
                     if (this.localVersionNumber != this.remoteVersionNumber) {
-                        logger.notice("A new version is available on \"" + this.repoBranch + "\" (v" + this.version + ")");
+                        logger.notice("A new version is available on \"" + this.branch + "\" (v" + this.remoteVersionNumber + ")");
                         this.newVersion = true;
 
                     } else {
-                        logger.info(`Running newest version (${this.newestVersion})`);
+                        logger.info(`Running newest version (${this.localVersionNumber})`);
                         this.newVersion = false;
                     }
                 } else {
diff --git a/src/SocketIO/index.js b/src/SocketIO/index.js
index 15b4a13..da140bb 100644
--- a/src/SocketIO/index.js
+++ b/src/SocketIO/index.js
@@ -53,7 +53,7 @@ function createOpenSocketNamespace(io) {
             socket.emit("power", neoModules.neoRuntimeManager.mode.globvars.get().power_on);
         });
         socket.on("var:set", (name, value) => {
-            neoModules.neoRuntimeManager.mode.variables.set(name, value);
+            neoModules.neoRuntimeManager.mode.variables.set(name, value.toString());
         });
         socket.on("vars:get", () => {
             socket.emit("vars", neoModules.neoRuntimeManager.mode.variables.get());
diff --git a/src_frontend/ComponentLib/Toggle.svelte b/src_frontend/ComponentLib/Toggle.svelte
new file mode 100644
index 0000000..bd24273
--- /dev/null
+++ b/src_frontend/ComponentLib/Toggle.svelte
@@ -0,0 +1,50 @@
+<script>
+    export let checked = false;
+    export let id;
+</script>
+
+<style>
+.toggle {
+    --width: 40px;
+    --height: calc(var(--width) / 2);
+    --border-radius: calc(var(--height) / 2);
+
+    display: inline-block;
+    cursor: pointer;
+}
+.toggle__input {
+    display: none;
+}
+.toggle__fill {
+    position: relative;
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--border-radius);
+    background: #dddddd;
+    transition: background 0.2s;
+}
+.toggle__fill::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--height);
+    width: var(--height);
+    background: #ffffff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    border-radius: var(--border-radius);
+    transition: transform 0.2s;
+}
+.toggle__input:checked ~ .toggle__fill {
+    background: #009578;
+}
+
+.toggle__input:checked ~ .toggle__fill::after {
+    transform: translateX(var(--height));
+}
+</style>
+
+<label class="toggle" for="{id}">
+    <input class="toggle__input" id="{id}" name="{id}" type="checkbox" bind:checked={checked} on:change>
+    <div class="toggle__fill"></div>
+</label>
\ No newline at end of file
diff --git a/src_frontend/Components/Editor/Controls.svelte b/src_frontend/Components/Editor/Controls.svelte
index 302aa7a..4b5c8b6 100644
--- a/src_frontend/Components/Editor/Controls.svelte
+++ b/src_frontend/Components/Editor/Controls.svelte
@@ -13,12 +13,17 @@
     }
     function setPower() { openSocket.emit("power:set", power_on); }
     function setVar(ev) {
-        openSocket.emit("var:set", ev.target.id, ev.target.value);
+        if (ev.target.type == "checkbox") {
+            openSocket.emit("var:set", ev.target.id, ev.target.checked);
+        } else {
+            openSocket.emit("var:set", ev.target.id, ev.target.value);
+        }
     }
 
     openSocket.on("power", (power) => power_on = power);
     openSocket.on("brightness", (value) => brightnessValue = value);
     openSocket.on("vars", (vars) => variables = vars);
+    openSocket.on("vars", (vars) => console.log(vars));
     openSocket.on("var", (name, value) => {
         name = name.replace("variable/", "");
         if (value.value == null) {
@@ -27,6 +32,7 @@
             variables[name] = value;
         }
         variables = variables;
+        console.log(variables);
     });
 
     onMount(() => {
@@ -75,9 +81,25 @@
     </div>
 
     {#each Object.entries(variables) as [name, value]}
-    <div>
-        <label for="{name}"><PrettyVar varText={name} /></label>
+    <div class:var-group={["BOOL", "TRIGGER"].includes(value.type)}>
+    <label for="{name}"><PrettyVar varText={name} /></label>
+        {#if value.type == "INT"}
+        <div class="var-group">
+            <input type="range" id="{name}" bind:value={value.value} on:change={setVar} min={value.min} max={value.max} />
+            {value.value}
+        </div>
+        {:else if value.type == "FLOAT"}
+        <div class="var-group">
+            <input type="range" id="{name}" bind:value={value.value} on:change={setVar} min={value.min} max={value.max} step={value.step} />
+            {value.value}
+        </div>
+        {:else if value.type == "BOOL"}
+            <input type="checkbox" id="{name}" bind:checked={value.value} on:change={setVar} />
+        {:else if value.type == "TRIGGER"}
+            <button type="button" id="{name}" value="true" on:click={setVar}>Trigger</button>
+        {:else}
         <input type="text" id="{name}" bind:value={value.value} on:blur={setVar} />
+        {/if}
     </div>
     {/each}
 </div>
\ No newline at end of file
diff --git a/src_frontend/Components/MainControls/ControlComponents.svelte b/src_frontend/Components/MainControls/ControlComponents.svelte
index 71c522a..f12ccbb 100644
--- a/src_frontend/Components/MainControls/ControlComponents.svelte
+++ b/src_frontend/Components/MainControls/ControlComponents.svelte
@@ -59,7 +59,7 @@
                 if (value.value == null) {
                     delete variables[name];
                 } else {
-                    variables[name] = value.value;
+                    variables[name] = value;
                 }
                 variables = variables;
         }
@@ -143,5 +143,7 @@
     {#if Object.keys(colorVariables).length > 0}
         <ControlColors on:change={setColor} bind:colorVariables={colorVariables} />
     {/if}
-    <ControlOthers />
+    {#if Object.keys(variables).length > 0}
+    <ControlOthers bind:variables={variables} />
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src_frontend/Components/MainControls/ControlOthers.svelte b/src_frontend/Components/MainControls/ControlOthers.svelte
index 390daf9..4261c64 100644
--- a/src_frontend/Components/MainControls/ControlOthers.svelte
+++ b/src_frontend/Components/MainControls/ControlOthers.svelte
@@ -1,13 +1,16 @@
 <script>
+	import { openSocket } from "../../stores/socketStore";
+    import Toggle from "../../ComponentLib/Toggle.svelte";
 
-    // This is a list of variables that we can change
-    export 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"}
-    ];
+    export let variables = {};
 
+    function setVar(ev) {
+        if (ev.target.type == "checkbox") {
+            openSocket.emit("var:set", ev.target.id, ev.target.checked);
+        } else {
+            openSocket.emit("var:set", ev.target.id, ev.target.value);
+        }
+    };
 </script>
 
 <style>
@@ -19,18 +22,53 @@
         padding: 15px;
         text-align: left;
     }
+    label {
+        width: 100%;
+    }
+    .var-group {
+        display: flex;
+        margin-top: 5px;
+    }
     input {
         width: 100%;
     }
+    button {
+        width: 100%;
+        padding: 10px;
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 15px;
+        margin-top: 5px;
+    }
+    button:hover { filter: brightness(0.9); }
+    button:active { filter: brightness(0.85); }
+
 </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}>
+    {#each Object.entries(variables) as [name, value]}
+    <div class:var-group={["BOOL"].includes(value.type)}>
+        {#if !["TRIGGER"].includes(value.type)}
+        <label for={name}>{name}</label>
+        {/if}
+
+        {#if value.type == "INT"}
+        <div class="var-group">
+            <input type="range" id={name} min={value.min} max={value.max} bind:value={value.value} on:change={setVar}>
+            {value.value}
+        </div>
+        {:else if value.type == "FLOAT"}
+        <div class="var-group">
+            <input type="range" id={name} min={value.min} max={value.max} step={value.step} bind:value={value.value} on:change={setVar}>
+            {value.value}
+        </div>
+        {:else if value.type == "BOOL"}
+        <Toggle id="{name}" bind:checked={value.value} on:change={setVar} />
+        {:else if value.type == "TRIGGER"}
+            <button type="button" id="{name}" value="true" on:click={setVar}>Trigger {name}</button>
         {:else}
-            <input type="text" id={variable.id} value={variable.value} />
+            <input type="text" id={name} bind:value={value.value} on:blur={setVar} />
         {/if}
+    </div>
     {/each}
 </div>
\ No newline at end of file