diff options
Diffstat (limited to 'src_frontend/Components/MainControls')
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..65bd1c4 --- /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.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 |