From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 .../Components/Dialogs/ConfirmActionDialog.svelte  |  59 ++++
 src_frontend/Components/Editor/Controls.svelte     |  83 ++++++
 src_frontend/Components/Editor/Editor.svelte       | 296 +++++++++++++++++++++
 src_frontend/Components/Editor/Output.svelte       |  54 ++++
 src_frontend/Components/Editor/Pane.svelte         |  41 +++
 src_frontend/Components/Editor/TopBar.svelte       |  62 +++++
 src_frontend/Components/LEDConfig/LEDConfig.svelte | 204 ++++++++++++++
 .../Components/LEDConfig/MatrixSegment.svelte      |  57 ++++
 src_frontend/Components/LEDConfig/Segment.svelte   |  38 +++
 src_frontend/Components/Logs/Logs.svelte           |  10 +
 .../Components/MainControls/ControlColors.svelte   | 107 ++++++++
 .../MainControls/ControlComponents.svelte          | 139 ++++++++++
 .../Components/MainControls/ControlOthers.svelte   |  36 +++
 src_frontend/Components/MainMenu.svelte            |  80 ++++++
 src_frontend/Components/ModeList/Mode.svelte       |  57 ++++
 src_frontend/Components/ModeList/ModeList.svelte   |  64 +++++
 .../Components/ModeList/NewModeDialog.svelte       | 153 +++++++++++
 src_frontend/Components/NotImplemented.svelte      |   7 +
 src_frontend/Components/Notifs/Notif.svelte        | 126 +++++++++
 .../Components/Notifs/NotifsWrapper.svelte         |  33 +++
 .../Components/Settings/CreateEditUser.svelte      |  93 +++++++
 .../Components/Settings/InstanceName.svelte        |  36 +++
 src_frontend/Components/Settings/SSLCert.svelte    |  57 ++++
 src_frontend/Components/Settings/Settings.svelte   |  25 ++
 src_frontend/Components/Settings/System.svelte     |  34 +++
 src_frontend/Components/Settings/Users.svelte      |  93 +++++++
 src_frontend/Components/Settings/Version.svelte    |  60 +++++
 27 files changed, 2104 insertions(+)
 create mode 100644 src_frontend/Components/Dialogs/ConfirmActionDialog.svelte
 create mode 100644 src_frontend/Components/Editor/Controls.svelte
 create mode 100644 src_frontend/Components/Editor/Editor.svelte
 create mode 100644 src_frontend/Components/Editor/Output.svelte
 create mode 100644 src_frontend/Components/Editor/Pane.svelte
 create mode 100644 src_frontend/Components/Editor/TopBar.svelte
 create mode 100644 src_frontend/Components/LEDConfig/LEDConfig.svelte
 create mode 100644 src_frontend/Components/LEDConfig/MatrixSegment.svelte
 create mode 100644 src_frontend/Components/LEDConfig/Segment.svelte
 create mode 100644 src_frontend/Components/Logs/Logs.svelte
 create mode 100644 src_frontend/Components/MainControls/ControlColors.svelte
 create mode 100644 src_frontend/Components/MainControls/ControlComponents.svelte
 create mode 100644 src_frontend/Components/MainControls/ControlOthers.svelte
 create mode 100644 src_frontend/Components/MainMenu.svelte
 create mode 100644 src_frontend/Components/ModeList/Mode.svelte
 create mode 100644 src_frontend/Components/ModeList/ModeList.svelte
 create mode 100644 src_frontend/Components/ModeList/NewModeDialog.svelte
 create mode 100644 src_frontend/Components/NotImplemented.svelte
 create mode 100644 src_frontend/Components/Notifs/Notif.svelte
 create mode 100644 src_frontend/Components/Notifs/NotifsWrapper.svelte
 create mode 100644 src_frontend/Components/Settings/CreateEditUser.svelte
 create mode 100644 src_frontend/Components/Settings/InstanceName.svelte
 create mode 100644 src_frontend/Components/Settings/SSLCert.svelte
 create mode 100644 src_frontend/Components/Settings/Settings.svelte
 create mode 100644 src_frontend/Components/Settings/System.svelte
 create mode 100644 src_frontend/Components/Settings/Users.svelte
 create mode 100644 src_frontend/Components/Settings/Version.svelte

(limited to 'src_frontend/Components')

diff --git a/src_frontend/Components/Dialogs/ConfirmActionDialog.svelte b/src_frontend/Components/Dialogs/ConfirmActionDialog.svelte
new file mode 100644
index 0000000..185c743
--- /dev/null
+++ b/src_frontend/Components/Dialogs/ConfirmActionDialog.svelte
@@ -0,0 +1,59 @@
+<script>
+    import { onMount } from "svelte";
+	import dialogPolyfill from 'dialog-polyfill'
+    import Button from "../../ComponentLib/Button/Button.svelte";
+    
+    export let title = "Are you sure?";
+    export let text = "Are you sure you want to delete the galaxy?";
+    export let defaultAction = false;
+    export let action = () => console.log("No action specified");
+
+    let modal;
+    let activeTab = 0;
+    let name;
+    let sourceMode;
+
+    function open() {
+        modal.showModal()
+    }
+    function confirm() {
+        modal.close();
+        action();
+    }
+    function register(node) {
+        dialogPolyfill.registerDialog(node);
+    }
+</script>
+
+<style>
+    dialog {
+        padding: 15px;
+        border: none;
+        border-radius: 15px;
+    }
+    h2 {
+        margin: 0;
+    }
+    .buttons {
+        display: flex;
+    }
+    .buttons > * {
+        flex-grow: 1;
+    }
+    .buttons > *:not(:last-child) {
+        margin-right: 5px;
+    }
+    .buttons > *:not(:first-child) {
+        margin-left: 5px;
+    }
+</style>
+
+<slot name="trigger" {open}></slot>
+<dialog bind:this={modal} use:register>
+    <h2>{title}</h2>
+    <p>{text}</p>
+    <div class="buttons">
+        <div><Button fullWidth=true on:click={confirm}  color={"var(--theme-primary)"} backgroundColor={"white"}>Yes</Button></div>
+        <div><Button fullWidth=true on:click={() => modal.close() }>No</Button></div>
+    </div>
+</dialog>
\ No newline at end of file
diff --git a/src_frontend/Components/Editor/Controls.svelte b/src_frontend/Components/Editor/Controls.svelte
new file mode 100644
index 0000000..302aa7a
--- /dev/null
+++ b/src_frontend/Components/Editor/Controls.svelte
@@ -0,0 +1,83 @@
+<script>
+    import { onMount } from "svelte";
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+	import { openSocket } from "../../stores/socketStore";
+
+    let brightnessValue = 0;
+    let power_on = false;
+    let variables = {};
+
+    function setBrightness() {
+        if (!power_on) { openSocket.emit("power:set", true); }
+        openSocket.emit("brightness:set", brightnessValue); 
+    }
+    function setPower() { openSocket.emit("power:set", power_on); }
+    function setVar(ev) {
+        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("var", (name, value) => {
+        name = name.replace("variable/", "");
+        if (value.value == null) {
+            delete variables[name];
+        } else {
+            variables[name] = value;
+        }
+        variables = variables;
+    });
+
+    onMount(() => {
+        openSocket.emit("power:get");
+        openSocket.emit("brightness:get");
+        openSocket.emit("vars:get")
+    });
+</script>
+
+<style>
+    label {
+        width: 100%;
+        font-size: 12px;
+        color: var(--grey-500);
+    }
+    .var-group {
+        display: flex;
+    }
+    input[type=range] {
+        width: 100%;
+    }
+    input[type=text] {
+        margin-top: 5px;
+        display: block;
+        width: 100%;
+        background-color: #737373;
+        padding: 5px;
+        color: white;
+        border: none;
+        box-sizing: border-box;
+        border-radius: 5px;
+    }
+</style>
+
+<div>
+    <div class="var-group">
+        <label for="power">Power</label>
+        <input type="checkbox" id="power" bind:checked={power_on} on:change={setPower} />
+    </div>
+    <div>
+        <label for="brightness">Brightness</label>
+        <div class="var-group">
+            <input id="brightness" type="range" min=0 max=255 bind:value={brightnessValue} on:change={setBrightness} />
+            {brightnessValue}
+        </div>
+    </div>
+
+    {#each Object.entries(variables) as [name, value]}
+    <div>
+        <label for="{name}"><PrettyVar varText={name} /></label>
+        <input type="text" id="{name}" bind:value={value.value} on:blur={setVar} />
+    </div>
+    {/each}
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Editor/Editor.svelte b/src_frontend/Components/Editor/Editor.svelte
new file mode 100644
index 0000000..b63ee9b
--- /dev/null
+++ b/src_frontend/Components/Editor/Editor.svelte
@@ -0,0 +1,296 @@
+<script context="module">
+    let debuggerInitialised = false;
+</script>
+<script>
+    import { onDestroy } from "svelte";
+	import { pop } from "svelte-spa-router";
+    import { EditorState, EditorView, basicSetup } from "@codemirror/basic-setup"
+    import { python } from "@codemirror/lang-python"
+    import { HighlightStyle, tags as t } from "@codemirror/highlight"
+    import { notif } from "../../stores/notifs";
+    import TopBar from "./TopBar.svelte";
+    import Pane from "./Pane.svelte";
+    import ControlComponents from "../MainControls/ControlComponents.svelte";
+    import Controls from "./Controls.svelte";
+    import Output from "./Output.svelte";
+    
+    import { authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore";
+    authorizedSocketNeeded.set(true);
+
+	export let modeId;
+
+    let codeEditorView;
+    let codeEditorEl;
+    let codeEditorHasChanges = false;
+    let procIsRunning = false;
+
+    function initDebugger() {
+        if (debuggerInitialised) { return; }
+        debuggerInitialised = true;
+        authorizedSocket.emit("editor:open", `user/${modeId}`, (res) => {
+            if (!res.success) { notif({title: res.reason, type: "danger"}); return; }
+        });
+    }
+
+    authorizedSocket.on("editor:code", (modeId, code) => {
+        const chalky = "#e5c07b",
+              coral = "#e06c75",
+              cyan = "#56b6c2",
+              invalid = "#ffffff",
+              ivory = "#abb2bf",
+              stone = "#7d8799", 
+              malibu = "#61afef",
+              sage = "#98c379",
+              whiskey = "#d19a66",
+              violet = "#c678dd",
+              darkBackground = "#21252b",
+              highlightBackground = "#2c313a",
+              background = "#282c34",
+              selection = "#3E4451",
+              cursor = "#528bff"
+
+        codeEditorView = new EditorView({
+            state: EditorState.create({
+                extensions: [
+                    basicSetup, 
+                    python(),
+                    EditorView.updateListener.of(update => {
+                        if (update.docChanged) {
+                            codeEditorHasChanges = true;
+                        }
+                    }),
+                    EditorView.theme({
+                        "&": {
+                            color: ivory,
+                        },
+
+                        ".cm-content": {
+                            caretColor: cursor
+                        },
+
+                        "&.cm-focused .cm-cursor": {borderLeftColor: cursor},
+                        "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {backgroundColor: selection},
+
+                        ".cm-panels": {backgroundColor: darkBackground, color: ivory},
+                        ".cm-panels.cm-panels-top": {borderBottom: "2px solid black"},
+                        ".cm-panels.cm-panels-bottom": {borderTop: "2px solid black"},
+
+                        ".cm-searchMatch": {
+                            backgroundColor: "#72a1ff59",
+                            outline: "1px solid #457dff"
+                        },
+                        ".cm-searchMatch.cm-searchMatch-selected": {
+                            backgroundColor: "#6199ff2f"
+                        },
+
+                        ".cm-activeLine": {backgroundColor: highlightBackground},
+                        ".cm-selectionMatch": {backgroundColor: "#aafe661a"},
+
+                        ".cm-matchingBracket, .cm-nonmatchingBracket": {
+                            backgroundColor: "#bad0f847",
+                            outline: "1px solid #515a6b"
+                        },
+
+                        ".cm-gutters": {
+                            backgroundColor: "transparent",
+                            color: stone,
+                            border: "none"
+                        },
+
+                        ".cm-activeLineGutter": {
+                            backgroundColor: highlightBackground
+                        },
+
+                        ".cm-foldPlaceholder": {
+                            backgroundColor: "transparent",
+                            border: "none",
+                            color: "#ddd"
+                        },
+
+                        ".cm-tooltip": {
+                            border: "1px solid #181a1f",
+                            backgroundColor: darkBackground
+                        },
+                        ".cm-tooltip-autocomplete": {
+                            "& > ul > li[aria-selected]": {
+                                backgroundColor: highlightBackground,
+                                color: ivory
+                            }
+                        }
+                    }, {dark:true}),
+                    HighlightStyle.define([
+                        {tag: t.keyword,
+                         color: violet},
+                        {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+                         color: coral},
+                        {tag: [t.function(t.variableName), t.labelName],
+                         color: malibu},
+                        {tag: [t.color, t.constant(t.name), t.standard(t.name)],
+                         color: whiskey},
+                        {tag: [t.definition(t.name), t.separator],
+                         color: ivory},
+                        {tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+                         color: chalky},
+                        {tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
+                         color: cyan},
+                        {tag: [t.meta, t.comment],
+                         color: stone},
+                        {tag: t.strong,
+                         fontWeight: "bold"},
+                        {tag: t.emphasis,
+                         fontStyle: "italic"},
+                        {tag: t.strikethrough,
+                         textDecoration: "line-through"},
+                        {tag: t.link,
+                         color: stone,
+                         textDecoration: "underline"},
+                        {tag: t.heading,
+                         fontWeight: "bold",
+                         color: coral},
+                        {tag: [t.atom, t.bool, t.special(t.variableName)],
+                         color: whiskey },
+                        {tag: [t.processingInstruction, t.string, t.inserted],
+                         color: sage},
+                        {tag: t.invalid,
+                         color: invalid},
+                    ]),
+                ],
+                doc: code
+            }),
+            parent: codeEditorEl
+        })
+    });
+    authorizedSocket.on("editor:proc:start", () => procIsRunning = true);
+    authorizedSocket.on("editor:proc:exit", (code) => {
+        procIsRunning = false;
+    });
+
+    function startProc() {
+        saveCode(() => {
+            authorizedSocket.emit("editor:startmode", (res) => {
+                if (!res.success) { notif({title: res.reason, type: "danger"}); }
+            });
+        });
+    }
+
+    function stopProc() {
+        authorizedSocket.emit("editor:stopmode", (res) => {
+            if (!res.success) { notif({title: res.reason, type: "danger"}); }
+        });
+    }
+
+    function restartProc () {
+        saveCode((res) => {
+            if (!res.success) { notif({title: res.reason, type: "danger"}); }
+            authorizedSocket.emit("editor:restartmode", (res) => {
+                if (!res.success) { notif({title: res.reason, type: "danger"}); }
+            }); 
+        });
+    }
+
+    function saveCode(fn) {
+        if (codeEditorView == null) { return; }
+        authorizedSocket.emit("editor:save", `user/${modeId}`, codeEditorView.state.doc.toString(), res => {
+            if (!res.success) { notif({title: res.reason, type: "danger"}); }
+            if (fn != null) { fn(res) }
+        });
+        codeEditorHasChanges = false;
+    }
+
+    function closeDebugger() {
+        saveCode((res) => {
+            if (!res.success) { notif({title: res.reason, type: "danger"}); }
+            authorizedSocket.emit("editor:close", res => {
+                if (!res.success) { notif({title: res.reason, type: "danger"}); }
+                debuggerInitialised = false;
+            });
+        });
+    }
+
+    onDestroy(() => {
+        closeDebugger();
+    })
+    
+    document.addEventListener("keydown", function(e) {
+        if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)  && e.keyCode == 83) {
+            e.preventDefault();
+            saveCode();
+        }
+    }, false);
+
+    setInterval(() => {
+        if (codeEditorHasChanges) {
+            saveCode();
+        }
+    }, 5000);
+</script>
+
+<style>
+    main {
+        display: grid;
+        box-sizing: border-box;
+        padding: 15px;
+        column-gap: 15px;
+        row-gap: 15px;
+        grid-template-columns: 300px 1fr;
+        grid-template-rows: 50% 1fr 33%;
+        grid-template-areas:
+            "simulation editor"
+            "controls editor"
+            "controls output";
+        width: 100%;
+        height: calc(100% - 35px);
+        background-color: #333333;
+        color: white;
+    }
+    .simulation { grid-area: simulation; }
+    .controls { grid-area: controls; }
+    .editor { grid-area: editor; }
+    .output { grid-area: output; }
+
+    .editor {
+        overflow: auto;
+    }
+
+    @media (max-width: 800px) {
+        main {
+            grid-template-columns: auto;
+            grid-template-areas:
+                "editor"
+                "editor"
+                "output";  
+        }
+        .controls, .simulation {
+            display: none;
+        }
+    }
+</style>
+
+<TopBar modeId={modeId} 
+        hasChange={codeEditorHasChanges}
+        on:closedebugger={pop}
+        on:start={startProc}
+        on:stop={stopProc}
+        on:restart={restartProc}
+        bind:procIsRunning={procIsRunning} />
+<main use:initDebugger>
+    <div class="simulation">
+        <Pane header="simulation">
+        </Pane>
+    </div>
+
+    <div class="controls">
+        <Pane header="Controls">
+            <!-- <ControlComponents /> -->
+            <Controls />
+        </Pane>
+    </div>
+
+    <div class="editor" bind:this={codeEditorEl}></div>
+
+    <div class="output">
+        <Pane header="output" padding={false} scrollable={false}>
+            <Output />
+        </Pane>
+    </div>
+</main>
diff --git a/src_frontend/Components/Editor/Output.svelte b/src_frontend/Components/Editor/Output.svelte
new file mode 100644
index 0000000..dcd5995
--- /dev/null
+++ b/src_frontend/Components/Editor/Output.svelte
@@ -0,0 +1,54 @@
+<script>
+    import { authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore";
+    authorizedSocketNeeded.set(true);
+
+    let scrollBox;
+    let htmlCode = "";
+
+    function addData(data, classname) {
+        // let styles = "white-space:pre-wrap;margin:0;";
+        // let styles = "overflow-x:auto;";
+        let styles = "";
+        switch (classname) {
+            case "exit":
+                styles += "color: green";
+                break;
+            case"stderr":
+                styles += "color: red";
+                break;
+        }
+        htmlCode += `<span style="${styles}">${data}</span>`;
+        if (scrollBox != null) {
+            scrollBox.scrollTop = scrollBox.scrollHeight + 100;
+        }
+    }
+    authorizedSocket.on("editor:proc:exit", (code) => addData(`\nMode exited with ${code}\n\n`, "exit"));
+    authorizedSocket.on("editor:proc:stdout", (stdout) => addData(stdout, "stdout"));
+    authorizedSocket.on("editor:proc:stderr", (stderr) => addData(stderr, "stderr"));
+</script>
+
+<style>
+    div {
+        height: 100%;
+        width: 100%;
+    }
+    pre {
+        height: 100%;
+        width: calc(100vw - 30px);
+        overflow: auto;
+        padding: 15px;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    @media (min-width: 800px) {
+        pre {
+            width: calc(100vw - 360px);
+        }
+    }
+</style>
+
+<div>
+    <pre bind:this={scrollBox}>
+        {@html htmlCode}
+    </pre>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Editor/Pane.svelte b/src_frontend/Components/Editor/Pane.svelte
new file mode 100644
index 0000000..143c569
--- /dev/null
+++ b/src_frontend/Components/Editor/Pane.svelte
@@ -0,0 +1,41 @@
+<script>
+    export let header;
+    export let padding = true;
+    export let scrollable = true;
+</script>
+
+<style>
+    .box {
+        background-color: #444242;
+        border-radius: 5px;
+        height: 100%;
+    }
+    .header {
+        width: 100%;
+        padding: 10px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #333333; 
+    }
+    .header h1 {
+        margin: 0;
+        font-size: 12px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+    .content {
+        height: calc(100% - 35px);
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .padding { padding: 15px; } 
+    .scrollable { overflow: auto; }
+</style>
+
+<div class="box">
+    <div class="header">
+        <h1>{header}</h1>
+    </div>
+    <div class="content" class:padding={padding} class:scrollable={scrollable}>
+        <slot></slot>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Editor/TopBar.svelte b/src_frontend/Components/Editor/TopBar.svelte
new file mode 100644
index 0000000..c74adf0
--- /dev/null
+++ b/src_frontend/Components/Editor/TopBar.svelte
@@ -0,0 +1,62 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+	import { pop } from "svelte-spa-router";
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let modeId;
+    export let hasChange = false;
+    export let procIsRunning = false;
+</script>
+
+<style>
+    .topbar {
+        display: flex;
+        background-color: #444242;
+        height: 35px;
+        box-sizing: border-box;
+        padding: 10px;
+        font-size: 12px;
+        color: white;
+    }
+    .topbar .title { margin: auto; }
+    .savestatus {
+        font-size: 10px;
+        color: var(--grey-400);
+    }
+    button {
+        background: #444242;
+        border: none;
+        color: white;
+    }
+    button i {
+        margin-right: 5px;
+    }
+    button:hover {
+        filter: brightness(0.95);
+    }
+    button:active {
+        filter: brightness(0.90);
+    }
+</style>
+
+<div class="topbar">
+    <div><button on:click={() => dispatch("closedebugger")}><i class="fas fa-chevron-left"></i></button></div>
+    <div class="title">
+        <span class="filename"><PrettyVar varText={modeId} /></span>
+        <span class="savestatus">
+            {#if hasChange}
+            (not saved)
+            {/if}
+        </span>
+    </div>
+    <div>
+        {#if procIsRunning}
+        <button on:click={() => dispatch("restart")}><i class="fas fa-sync-alt"></i>Restart</button>
+        <button on:click={() => dispatch("stop")}><i class="fas fa-stop"></i>Stop</button>
+        {:else}
+        <button on:click={() => dispatch("start")}><i class="fas fa-play"></i>Start</button>
+        {/if}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/LEDConfig/LEDConfig.svelte b/src_frontend/Components/LEDConfig/LEDConfig.svelte
new file mode 100644
index 0000000..2cf9aa2
--- /dev/null
+++ b/src_frontend/Components/LEDConfig/LEDConfig.svelte
@@ -0,0 +1,204 @@
+<script>
+    import Segment from "./Segment.svelte";
+    import MatrixSegment from "./MatrixSegment.svelte";
+    import { onMount } from "svelte";
+
+    import { authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore.js";
+    authorizedSocketNeeded.set(true);
+
+    let segments = [];
+
+    function addSegment() {
+        console.log(segments);
+        segments.push(null);
+        segments = segments; // This is needed because svelte is weird :)
+        saveConfig(); 
+    }
+    function removeSegment() {
+        segments.pop();
+        segments = segments; // This is needed because svelte is weird :)
+        saveConfig(); 
+    }
+    function segmentChange(ev) {
+        saveConfig(); 
+    }
+
+    let matrix = [[[null, false]]];
+
+    function addRow() {
+        matrix.push([[null, false]]);
+        matrix = matrix; // This is needed because svelte is weird :) 
+        saveConfig(); 
+    }
+    function removeRow() {
+        matrix.pop();
+        matrix = matrix; // This is needed because svelte is weird :) 
+        saveConfig(); 
+    }
+    function addCell(ev) {
+        matrix[ev.target.dataset.id].push([null, false]);
+        matrix = matrix; // This is needed because svelte is weird :)  
+        saveConfig();
+    }
+    function removeCell() {
+        matrix[ev.target.dataset.id].pop();
+        matrix = matrix; // This is needed because svelte is weird :)
+        saveConfig(); 
+    }
+
+    let led_channel;
+    let led_dma;
+    let led_freq_hz;
+    let led_invert;
+    let led_pin;
+
+    authorizedSocket.on("led_config", (data) => {
+        segments = data.segments;
+        matrix = data.matrix;
+        led_channel = data.led_channel.toString();
+        led_dma = data.led_dma.toString();
+        led_freq_hz = data.led_freq_hz.toString();
+        led_invert = data.led_invert;
+        led_pin = data.led_pin.toString();
+    });
+
+    onMount(async () => {
+        authorizedSocket.emit("led_config:get");
+    });
+
+    function saveConfig() {
+        authorizedSocket.emit("led_config:set", {
+            segments: segments,
+            matrix: matrix,
+            led_channel: parseInt(led_channel, 10),
+            led_dma: parseInt(led_dma, 10),
+            led_freq_hz: parseInt(led_freq_hz, 10),
+            led_invert: led_invert,
+            led_pin: parseInt(led_pin, 10)
+        });
+    }
+</script>
+
+<style>
+    .wrapper {
+        padding-bottom: 15px;
+    }
+    h1 {
+        margin-bottom: 0;
+        font-weight: 100;
+    }
+
+    .row {
+        width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
+    }
+
+    .segment {
+        display: inline-block;
+        margin-bottom: 5px;
+    }
+    .segment:not(:first-child) {
+        margin-left: 5px;
+    }
+
+    button {
+        background-color: var(--grey-200);
+        border: none;
+        border-radius: 50px;
+        padding: 10px;
+    }
+    button:hover { background-color: var(--grey-300); }
+    button:active { background-color: var(--grey-400); }
+    button > * { pointer-events: none; }
+
+    select {
+        width: 100%;
+    }
+
+</style>
+
+<div class="wrapper">
+    <h1>Segments</h1>
+    <p>Here you are defining the "segments" of your light-display. Use this to split the strip in stairs, blocks or any other configuration. Normally you would define a segment, for each cut you have made in the strip. But you could do other things to get fancy results. Each segment will be represented in the "matrix", by the number just below the number. Each segment should have it's own box below.</p>
+
+    <div class="row">
+        {#each segments as segment, i}
+            <div class="segment">
+                <Segment on:change={segmentChange} on:blur={segmentChange} bind:ledCount={segment} id={i} />
+            </div>
+        {/each}
+        <button on:click={addSegment}><i class="fas fa-plus"></i></button>
+        <button on:click={removeSegment}><i class="fas fa-minus"></i></button>
+    </div>
+
+    <h1>Matrix</h1>
+    <p>Here you are defining your matrix. A matrix is really nothing more than a 2-dimentional array, or a list of lists. This is not a mathematical array, meaning each "row" can have different lengths. Use this to stitch your segments together. Each "box" should contain the number of the segment it is representing. By pressing the double-arrows on the box, you can "invert" a segment. This means counting from the other end. Use this if you have the segments in a snake-layout.</p>
+
+    <div class="row">
+        {#each matrix as row, i}
+            <div class="">
+                {#each row as cell}
+                    <div class="segment">
+                        <MatrixSegment on:change={saveConfig} bind:segmentId={cell[0]} bind:inverted={cell[1]} />
+                    </div>
+                {/each}
+                <button on:click={addCell} data-id={i}><i class="fas fa-plus"></i></button>
+                <button on:click={removeCell} data-id={i}><i class="fas fa-minus"></i></button>
+            </div>
+        {/each}
+        <button on:click={addRow}><i class="fas fa-plus"></i></button>
+        <button on:click={removeRow}><i class="fas fa-minus"></i></button>
+    </div>
+
+    <h1>Advanced</h1>
+    <div class="">
+        <label for="gpioPin">GPIO pin</label>
+        <select id="gpioPin" bind:value={led_pin} on:change={saveConfig} >
+            <option value="10">10 (SPI)</option>
+            <option value="12">12 (PWM)</option>
+            <option value="18">18 (PWM) (Luxcena neo hat)</option>
+            <option value="21">21 (PCM)</option>
+            <option value="31">31 (PCM)</option>
+            <option value="38">39 (SPI)</option>
+            <option value="40">40 (PWM)</option>
+            <option value="52">52 (PWM)</option>
+        </select>
+
+        <label for="dmaChannel">DMA channel</label>
+        <select id="dmaChannel" bind:value={led_dma} on:change={saveConfig} >
+            <option value="0">0</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+            <option value="7">7</option>
+            <option value="8">8</option>
+            <option value="9">9</option>
+            <option value="10">10 (Recommended)</option>
+            <option value="11">11</option>
+            <option value="12">12</option>
+            <option value="13">13</option>
+            <option value="14">14</option>
+            <option value="15">15</option>
+        </select>
+
+        <label for="frequency">Frequency</label>
+        <select id="frequency" bind:value={led_freq_hz} on:change={saveConfig} >
+            <option value="800000">80k</option>
+            <option value="100000">10k</option>
+        </select>
+
+        <label for="ledChannel">LED Channel</label>
+        <select id="ledChannel" bind:value={led_channel} on:change={saveConfig} >
+            <option value="0">0</option>
+            <option value="1">1</option>
+        </select>
+
+        <input type="checkbox" id="invertSignal" bind:checked={led_invert} on:change={saveConfig} />
+        <label for="invertSignal">Invert signal</label>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/LEDConfig/MatrixSegment.svelte b/src_frontend/Components/LEDConfig/MatrixSegment.svelte
new file mode 100644
index 0000000..c2c1934
--- /dev/null
+++ b/src_frontend/Components/LEDConfig/MatrixSegment.svelte
@@ -0,0 +1,57 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+
+    export let segmentId;
+    export let inverted;
+
+    function toggleInvert() {
+        inverted = !inverted;
+        dispatch("change");
+    }
+
+    function forwardOnChange() {
+        dispatch("change")
+    }
+</script>
+
+<style>
+    div {
+        display: flex;
+    }
+    input {
+        padding: 10px 0 10px 10px;
+        width: 38px;
+        text-align: center;
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 5px 0 0 5px;
+        margin-right: -5px;
+        transition: background-color 0.5s ease;
+    }
+    input:focus {
+        outline: none;
+        background-color: var(--grey-400);
+    }
+    button {
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 0 10px 10px 0;
+        padding: 10 5px;
+        margin-left: 0;
+    }
+    .inverted input, .inverted button{
+        background-color: var(--amber-500);
+    }
+    button:hover {
+        background-color: var(--grey-400);
+    }
+    button:active {
+        background-color: var(--grey-500);
+    }
+</style>
+
+<div class:inverted={inverted}>
+    <input on:change={forwardOnChange} on:blur={forwardOnChange} type="number" step=1 bind:value={segmentId} />
+    <button on:click={toggleInvert}><i class="fas fa-exchange-alt"></i></button>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/LEDConfig/Segment.svelte b/src_frontend/Components/LEDConfig/Segment.svelte
new file mode 100644
index 0000000..3b71451
--- /dev/null
+++ b/src_frontend/Components/LEDConfig/Segment.svelte
@@ -0,0 +1,38 @@
+<script>
+    import { fade } from 'svelte/transition';
+    export let id;
+    export let ledCount;
+</script>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+    input {
+        display: inline-block;
+        padding: 10px 10px 10px 10px;
+        width: 38px;
+        text-align: right;
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 5px 5px 0 0;
+        margin: 0;
+    }
+    input:focus {
+        outline: none;
+        background-color: var(--grey-400);
+    }
+    span {
+        background-color: var(--grey-500);
+        font-size: 12px;
+        padding: 2px;
+        border-radius: 0 0 5px 5px;
+        text-align: center;
+    }
+</style>
+
+<div transition:fade|local>
+    <input on:change on:blur type="number" data-id={id} step=1 bind:value={ledCount} />
+    <span>{id}</span>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Logs/Logs.svelte b/src_frontend/Components/Logs/Logs.svelte
new file mode 100644
index 0000000..a7256ae
--- /dev/null
+++ b/src_frontend/Components/Logs/Logs.svelte
@@ -0,0 +1,10 @@
+
+<style>
+    .wrapper {
+        padding: var(--theme-padding);
+    }
+</style>
+
+<div class="wrapper">
+
+</div>
\ No newline at end of file
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
diff --git a/src_frontend/Components/MainMenu.svelte b/src_frontend/Components/MainMenu.svelte
new file mode 100644
index 0000000..7de36a5
--- /dev/null
+++ b/src_frontend/Components/MainMenu.svelte
@@ -0,0 +1,80 @@
+<script>
+    import { link } from 'svelte-spa-router';
+    import active from 'svelte-spa-router/active';
+    import { fade } from 'svelte/transition';
+
+    let menuItems = {
+        0: {type: "item", name: "Home", href: "/"},
+        // 1: {type: "item", name: "Schedules", href: "/schedules"},
+        2: {type: "seperator"},
+        3: {type: "item", name: "Mode editor", href: "/modes"},
+        4: {type: "item", name: "LED configuration", href: "/led_config"},
+        // 5: {type: "item", name: "Logs", href: "/logs"},
+        6: {type: "seperator"},
+        7: {type: "item", name: "Settings", href: "/settings"},
+        8: {type: "seperator"},
+        9: {type: "abslink", name: "Docs", href: "/docs"}
+    };
+</script>
+
+<style>
+    .menu {
+        position: absolute;
+        height: calc(100% - var(--theme-phone-header-height));
+        top: var(--theme-phone-header-height);
+        overflow-y: auto;
+        padding: var(--theme-padding);
+        font-size: 20px;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .menu a {
+        display: block;
+        text-decoration: none;
+        margin-bottom: 10px;
+        color: var(--grey-300);
+    }
+    .menu a:hover {
+        color: var(--grey-400);
+    }
+    .menu a:active {
+        color: var(--grey-600);
+    }
+    .menu hr {
+        border: 0.1px solid var(--grey-700);
+    }
+    @media (min-width: 900px) {
+        .menu {
+            position: fixed;
+            background-color: #f7f7f7;
+            top: 0;
+            right: 0;
+            font-size: 12px;
+            width: 180px;
+            height: 100%;
+            padding-top: 65px;
+        }
+        .menu a {
+            color: var(--grey-600);
+            text-transform: uppercase;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+        .menu hr {
+            display: none;
+            border-color: var(--grey-100);
+        }
+    }
+</style>
+
+<div class="menu">
+    {#each Object.entries(menuItems) as [id, menuItem]}
+        {#if menuItem.type == "item"}
+            <a use:link use:active href={menuItem.href}>{menuItem.name}</a>
+        {:else if menuItem.type == "abslink"}
+            <a href={menuItem.href}>{menuItem.name}</a>
+        {:else if menuItem.type == "seperator"}
+            <hr />
+        {/if}
+    {/each}
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/ModeList/Mode.svelte b/src_frontend/Components/ModeList/Mode.svelte
new file mode 100644
index 0000000..67752c2
--- /dev/null
+++ b/src_frontend/Components/ModeList/Mode.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { push } from "svelte-spa-router";
+    import ConfirmActionDialog from "../Dialogs/ConfirmActionDialog.svelte";
+    import { authorizedSocket } from "../../stores/socketStore.js";
+    import { notif } from "../../stores/notifs";
+    export let id;
+
+    function deleteMode() {
+        authorizedSocket.emit("mode:delete", `user/${id}`, (res) => {
+            if (!res.success) {
+                notif({title: "Error", text: "Could not delete mode...", type: "danger"})
+                console.log(res);
+            }
+        });
+    }
+</script>
+
+<style>
+    .wrapper {
+        width: 100%;
+        padding: var(--theme-padding);
+        box-sizing: border-box;
+        border-radius: 15px;
+
+        display: flex;
+        align-items: center;
+    }
+    .right {
+        margin-left: auto;
+    }
+    button {
+        border: none;
+        background-color: white;
+        background-color: transparent;
+        border: none;
+        padding: 10px;
+        border-radius: 15px;
+    }
+    button:hover {
+        background-color: var(--grey-300);
+    }
+    button:active {
+        background-color: var(--grey-400);
+    }
+</style>
+
+<div class="wrapper drop-shadow">
+    {id}
+    <div class="right">
+        <ConfirmActionDialog title="Are you sure?" text="Are you sure you want to delete {id}" action={deleteMode}>
+            <svelte:fragment slot="trigger" let:open>
+                <button on:click={open}><i class="fas fa-trash"></i></button>
+            </svelte:fragment>
+        </ConfirmActionDialog>
+        <button on:click={() => {push(`/editor/${id}`)}}><i class="fas fa-edit"></i></button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/ModeList/ModeList.svelte b/src_frontend/Components/ModeList/ModeList.svelte
new file mode 100644
index 0000000..8bac3f9
--- /dev/null
+++ b/src_frontend/Components/ModeList/ModeList.svelte
@@ -0,0 +1,64 @@
+<script>
+    import { onMount } from "svelte";
+    import { fade } from 'svelte/transition';
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+    import Mode from "./Mode.svelte";
+    import NewModeDialog from "./NewModeDialog.svelte";
+    
+    import { openSocket, authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore.js";
+	authorizedSocketNeeded.set(true);
+
+    let userModes = [];
+    let remotes = [];
+
+    openSocket.on("modelist", (modes) => {
+        userModes = [];
+        remotes = [];
+        for (let i = 0; i < modes.length; i++) {
+            if (modes[i].substr(0, 4) === "user") {
+                userModes.push(modes[i].replace("user/", ""));
+            }
+            if (modes[i].substr(0, 6) === "remote") {
+                remotes.push(modes[i].replace("remote/", ""));
+            }
+        }
+    });
+    onMount(async() => {
+        openSocket.emit("modelist:get");
+    });
+</script>
+
+<style>
+    .wrapper {
+        padding-bottom: var(--theme-padding);
+    }
+    .modes > * {
+        margin-bottom: 10px;
+    }
+    .button_menu {
+        margin-top: 20px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
+
+<div class="wrapper">
+    <h1>Modes</h1>
+    <div class="modes">
+        {#each userModes as mode}
+            <div>
+                <Mode id={mode} />
+            </div>
+        {/each}
+    </div>
+
+    <div class="button_menu">
+        <NewModeDialog>
+            <svelte:fragment slot="trigger" let:open>
+                <FloatingButton on:click={open} faIcon="fas fa-plus" label="NEW" />  
+            </svelte:fragment>
+        </NewModeDialog>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/ModeList/NewModeDialog.svelte b/src_frontend/Components/ModeList/NewModeDialog.svelte
new file mode 100644
index 0000000..539e3ef
--- /dev/null
+++ b/src_frontend/Components/ModeList/NewModeDialog.svelte
@@ -0,0 +1,153 @@
+<script>
+    import { onMount } from "svelte";
+	import dialogPolyfill from 'dialog-polyfill'
+    import Button from "../../ComponentLib/Button/Button.svelte";
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+    import { openSocket, authorizedSocket } from "../../stores/socketStore.js";
+    import { notif } from "../../stores/notifs";
+
+    let modal;
+    let activeTab = 0;
+    let name;
+    let sourceMode;
+
+    function open() {
+        modal.showModal()
+    }
+    function register(node) {
+        dialogPolyfill.registerDialog(node);
+    }
+    function createMode() {
+        let template = "template/base";
+        if (activeTab == 1) {
+            template = sourceMode;
+        }
+        authorizedSocket.emit("mode:create", name, template, (res) => {
+            if (!res.success) {
+                notif({title: "Error", text: "Could not create mode...", type: "danger"})
+            };
+
+            modal.close();
+        });
+    }
+
+    let builtinModes = [];
+    let userModes = [];
+    // let remoteModes = [];
+    openSocket.on("modelist", (modes) => {
+        builtinModes = [];
+        for (let i = 0; i < modes.length; i++) {
+            if (modes[i].substr(0, 8) === "builtin/") {
+                builtinModes.push([modes[i], modes[i].replace("builtin/", "")]);
+            }
+            if (modes[i].substr(0, 5) === "user/") {
+                userModes.push([modes[i], modes[i].replace("user/", "")]);
+            }
+            // if (modes[i].substr(0, 6) === "remote") {
+            //     remotes.push(modes[i].replace("", ""));
+            // }
+        }
+    });
+    onMount(async() => {
+        openSocket.emit("modelist:get");
+    })
+</script>
+
+<style>
+    dialog {
+        padding: 0;
+        border: none;
+        border-radius: 15px;
+    }
+    .tabs {
+        display: flex;
+        width: 100%;
+    }
+    .tabs i {
+        position: relative;
+        flex-grow: 1;
+        text-align: center;
+        font-size: 20px;
+        padding: 15px;
+    }
+    .tabs i:hover {
+        color: var(--theme-primary);
+    }
+    .tabs i.active {
+        color: var(--theme-primary);
+    }
+    .tabs > *:not(:last-child):after {
+        content: "";
+        position: absolute;
+        width: 1px;
+        height: 43%;
+        border-left: 0.1px solid var(--grey-400);
+        left: 100%;
+    }
+    .divider-h {
+        margin-left: 15px;
+        margin-right: 15px;
+        border-top: 0.01px solid var(--grey-400);
+    }
+    .content {
+        padding: 15px;
+        box-sizing: border-box;
+    }
+    input, select {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .buttons {
+        padding: 0 15px 15px 15px;
+        display: flex;
+    }
+    .buttons > * {
+        flex-grow: 1;
+    }
+    .buttons > *:not(:last-child) {
+        margin-right: 5px;
+    }
+    .buttons > *:not(:first-child) {
+        margin-left: 5px;
+    }
+</style>
+
+<slot name="trigger" {open}></slot>
+<dialog bind:this={modal} use:register>
+
+    <div class="tabs">
+        <i class:active={activeTab == 0} on:click={() => { activeTab = 0; }} class="far fa-file"></i>
+        <i class:active={activeTab == 1} on:click={() => { activeTab = 1; }} class="far fa-clone"></i> 
+    </div>
+ 
+    <div class="divider-h"></div>
+    <div class="content">
+        {#if [0, 1].includes(activeTab)}
+        <div>
+            <label for="fname">Mode name</label>
+            <input  type="text" id="fname" placeholder="My_Awesome_New_Mode" bind:value={name} />
+            {#if activeTab == 1}
+            <label for="sourcemode">Source</label>
+            <select bind:value={sourceMode}>
+                <optgroup label="builtin">
+                    {#each builtinModes as mode}
+                    <option value={mode[0]}><PrettyVar varText={mode[1]} /></option>
+                    {/each}
+                </optgroup>
+                <optgroup label="user">
+                    {#each userModes as mode}
+                    <option value={mode[0]}><PrettyVar varText={mode[1]} /></option>
+                    {/each}
+                </optgroup>
+            </select>
+            {/if}
+        </div>
+        {/if}
+    </div>
+    <div class="buttons">
+        <div><Button fullWidth=true on:click={() => modal.close() } color={"var(--theme-primary)"} backgroundColor={"white"}>Cancel</Button></div>
+        <div><Button fullWidth=true on:click={createMode}>Create</Button></div>
+    </div>
+
+</dialog>
\ No newline at end of file
diff --git a/src_frontend/Components/NotImplemented.svelte b/src_frontend/Components/NotImplemented.svelte
new file mode 100644
index 0000000..a3f385a
--- /dev/null
+++ b/src_frontend/Components/NotImplemented.svelte
@@ -0,0 +1,7 @@
+<script>
+    export let params;
+</script>
+
+<div>
+    Sorry, this functionality is not implemented yet...
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Notifs/Notif.svelte b/src_frontend/Components/Notifs/Notif.svelte
new file mode 100644
index 0000000..c8ef807
--- /dev/null
+++ b/src_frontend/Components/Notifs/Notif.svelte
@@ -0,0 +1,126 @@
+<script>
+    import { fade, fly } from "svelte/transition";
+    import { removeNotif } from "../../stores/notifs";
+    import { elasticOut } from "svelte/easing";
+    export let nid;
+    export let text = "";
+    export let title;
+    export let type;
+    export let transitionType = "fly";
+    function customTransition(
+      node,
+      { duration = 400, x = 0, y = 0, opacity = 0 }
+    ) {
+      return {
+        duration,
+        css: (t, u) => {
+          // t = 0 to 1, u = (1 - t)
+          if (transitionType === "fly")
+            return `
+            transform: translate(${x * (1 - t)}px,${y * (1 - t)}px); 
+            opacity: ${t};
+          `;
+          else
+            return `
+            opacity: ${t};
+          `;
+        }
+      };
+    }
+  </script>
+  
+  <style>
+    .notification {
+      max-width: 300px;
+      padding: 16px;
+      padding-right: 0;
+      margin: 10px 0;
+      box-shadow: 0 3px 6px rgb(0, 0, 0, 0.3);
+      border-radius: 4px;
+      display: flex;
+      justify-content: space-between;
+      z-index: 1000;
+    }
+    .notification.default {
+      background: rgb(194, 194, 194);
+      color: black;
+      border: 1px solid rgb(150, 150, 150);
+      border-left: 4px solid rgb(150, 150, 150);
+    }
+    .notification.danger {
+      background: rgb(255, 72, 72);
+      border: 1px solid rgb(235, 15, 15);
+      border-left: 4px solid rgb(235, 15, 15);
+      color: white;
+    }
+    .notification.success {
+      background: rgb(23, 153, 12);
+      border: 1px solid rgb(15, 116, 6);
+      border-left: 4px solid rgb(15, 116, 6);
+      color: white;
+    }
+    .notification.warning {
+      background: rgb(255, 144, 69);
+      border: 1px solid rgb(238, 103, 12);
+      border-left: 4px solid rgb(238, 103, 12);
+      color: white;
+    }
+    .notification.info {
+      background: rgb(69, 150, 255);
+      border: 1px solid rgb(8, 97, 214);
+      border-left: 4px solid rgb(8, 97, 214);
+      color: white;
+    }
+    .notification .notification__content {
+      padding-right: 16px;
+    }
+    .notification .notification__content--title {
+      font-weight: 500;
+      font-size: 0.9rem;
+      text-transform: uppercase;
+      margin: 0;
+      margin-bottom: 5px;
+    }
+    .notification .notification__content--text {
+      font-size: 0.9rem;
+      margin: 0;
+      word-wrap: break-word;
+      overflow: hidden;
+    }
+    .notification .notification__close {
+      font-size: 1rem;
+      font-weight: bold;
+      margin: 0;
+      text-align: right;
+      text-transform: uppercase;
+      padding: 0 6px;
+      border-left: 1px solid rgba(0, 0, 0, 0.199);
+      display: flex;
+      align-items: center;
+      /* justify-content: center; */
+    }
+    .notification.info .notification__close,
+    .notification.danger .notification__close,
+    .notification.warning .notification__close,
+    .notification.success .notification__close {
+      color: white;
+      border-left-color: rgba(255, 255, 255, 0.438);
+    }
+    .notification .notification__close span {
+      cursor: pointer;
+    }
+  </style>
+  
+  <div
+    class="notification {type || 'default'}"
+    transition:customTransition={{ x: 50, duration: 200 }}>
+    <div class="notification__content">
+      {#if title}
+        <h1 class="notification__content--title">{title}</h1>
+      {/if}
+      <p class="notification__content--text">{text}</p>
+    </div>
+    <div class="notification__close">
+      <span on:click={() => removeNotif(nid)}>&times;</span>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/src_frontend/Components/Notifs/NotifsWrapper.svelte b/src_frontend/Components/Notifs/NotifsWrapper.svelte
new file mode 100644
index 0000000..e68e2e2
--- /dev/null
+++ b/src_frontend/Components/Notifs/NotifsWrapper.svelte
@@ -0,0 +1,33 @@
+<script>
+    import { notifs } from "../../stores/notifs";
+    import Notif from "./Notif.svelte";
+    export let position = "bottom-center";
+    $: transitionType = position === "bottom-center" ? "fade" : "fly";
+</script>
+
+<style>
+.notifications {
+    position: absolute;
+    z-index: 999;
+}
+.bottom-center {
+    bottom: 20px;
+    left: 5vw;
+    width: 90vw;
+}
+.top-right {
+    top: 20px;
+    right: 20px;
+}
+</style>
+
+<div class="notifications {position}">
+{#each $notifs as notification (notification.id)}
+    <Notif
+    nid={notification.id}
+    text={notification.text}
+    title={notification.title}
+    type={notification.type}
+    {transitionType} />
+{/each}
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Settings/CreateEditUser.svelte b/src_frontend/Components/Settings/CreateEditUser.svelte
new file mode 100644
index 0000000..ca87336
--- /dev/null
+++ b/src_frontend/Components/Settings/CreateEditUser.svelte
@@ -0,0 +1,93 @@
+<script>
+    import { onMount } from "svelte";
+	import dialogPolyfill from 'dialog-polyfill'
+    import Button from "../../ComponentLib/Button/Button.svelte";
+    import { authorizedSocket } from "../../stores/socketStore.js";
+    import { notif } from "../../stores/notifs";
+
+    export let username = null;
+
+    let modal;
+    let password = "";
+    let newUser = username == null;
+
+    function open() {
+        modal.showModal()
+    }
+    function register(node) {
+        dialogPolyfill.registerDialog(node);
+    }
+
+    function updateUser() {
+        authorizedSocket.emit("user:newpassword", username, password, (res) => {
+            if (!res.success) { notif({title: res.reason}); }
+            modal.close();
+        });
+    }
+
+    function createUser() {
+        authorizedSocket.emit("user:create", username, password, (res) => {
+            if (!res.success) { notif({title: res.reason}); }
+            modal.close();
+        });
+    }
+</script>
+
+<style>
+    dialog {
+        padding: 0;
+        border: none;
+        border-radius: 15px;
+    }
+    h2 {
+        margin: 0;
+    }
+    .content {
+        padding: 15px;
+        box-sizing: border-box;
+    }
+    input {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .buttons {
+        padding: 0 15px 15px 15px;
+        display: flex;
+    }
+    .buttons > * {
+        flex-grow: 1;
+    }
+    .buttons > *:not(:last-child) {
+        margin-right: 5px;
+    }
+    .buttons > *:not(:first-child) {
+        margin-left: 5px;
+    }
+</style>
+
+<slot name="trigger" {open}></slot>
+<dialog bind:this={modal} use:register>
+    <div class="content">
+        <h2>
+            {#if newUser}
+            Create user
+            {:else}
+            Edit user
+            {/if}
+        </h2>
+        <label for="username">Username</label>
+        <input  type="text" id="username" placeholder="username" bind:value={username} disabled="{!newUser}" />
+        <label for="password">password</label>
+        <input  type="password" id="password" bind:value={password} />
+    </div>
+    <div class="buttons">
+        <div><Button fullWidth=true on:click={() => modal.close() } color={"var(--theme-primary)"} backgroundColor={"white"}>Cancel</Button></div>
+        {#if newUser}
+        <div><Button fullWidth=true on:click={createUser}>Create</Button></div>
+        {:else}
+        <div><Button fullWidth=true on:click={updateUser}>Update</Button></div>
+        {/if}
+    </div>
+
+</dialog>
\ No newline at end of file
diff --git a/src_frontend/Components/Settings/InstanceName.svelte b/src_frontend/Components/Settings/InstanceName.svelte
new file mode 100644
index 0000000..6d1892a
--- /dev/null
+++ b/src_frontend/Components/Settings/InstanceName.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { onMount } from "svelte";
+    import { openSocket, authorizedSocket } from "../../stores/socketStore.js";
+
+    let name = "-";
+
+    openSocket.on("name", (_name) => name = _name);
+
+    function saveName() {
+        authorizedSocket.emit("name:set", name, (res) => {});
+    }
+
+    onMount(async() => {
+        openSocket.emit("name:get");
+    });
+</script>
+
+<style>
+    div {
+        margin-bottom: 15px;
+    }
+    h1 { margin-bottom: 0; }
+    input {
+        background-color: var(--grey-200);
+        border-radius: 15px;
+        width: 100%;
+        padding: 15px;
+        box-sizing: border-box;
+        border: none;
+    }
+</style>
+
+<div>
+    <h1>Name</h1>
+    <input type="text" bind:value={name} on:change={saveName} />
+</div>
diff --git a/src_frontend/Components/Settings/SSLCert.svelte b/src_frontend/Components/Settings/SSLCert.svelte
new file mode 100644
index 0000000..adb3649
--- /dev/null
+++ b/src_frontend/Components/Settings/SSLCert.svelte
@@ -0,0 +1,57 @@
+<script>
+    import { onMount } from "svelte";
+
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+    import ConfirmActionDialog from "../Dialogs/ConfirmActionDialog.svelte";
+    import { authorizedSocket } from "../../stores/socketStore.js";
+
+    let isValid = false;
+    let CN = "-";
+    let validTime = "-";
+
+    authorizedSocket.on("sslcert:info", (status) => {
+        isValid = status.isValid;
+        CN = status.CN;
+        validTime = Math.round((status.certExpire-(new Date()).getTime())/86400000);
+    });
+
+    let newCertPromise;
+    function generateNewCert() {
+        newCertPromise = new Promise((resolve, reject) => {
+            authorizedSocket.emit("sslcert:generate_new", () => {
+                resolve();
+            });
+        });
+    }
+
+    onMount(async() => {
+        authorizedSocket.emit("sslcert:info");
+    });
+</script>
+
+<style>
+    h1 { margin-bottom: 0; }
+    p { margin: 0; }
+    .small {
+        font-weight: 100;
+        font-style: italic;
+        font-size: 12px;
+        color: var(--grey-600);
+    }
+    .button {
+        margin-top: 10px;
+    }
+</style>
+
+<div>
+    <h1>SSL Certificate</h1>
+    <p>{isValid ? "VALID" : "INVALID"} <span class="small">(for {validTime} days)</span></p>
+    <p><span class="small">CN</span> {CN}</p>
+
+    <ConfirmActionDialog title="Are you sure?" text="Are you sure you want to generate new self signed SSL Certificate?" action={generateNewCert}>
+        <svelte:fragment slot="trigger" let:open>
+            <div class="button"><FloatingButton on:click={open} bind:loadingPromise={newCertPromise} fullWidth=true>Generate new cerificate</FloatingButton></div>
+        </svelte:fragment>
+    </ConfirmActionDialog>
+    <!-- <div class="button"><Button fullWidth=true round=true>Show details</Button></div> -->
+</div>
diff --git a/src_frontend/Components/Settings/Settings.svelte b/src_frontend/Components/Settings/Settings.svelte
new file mode 100644
index 0000000..b95f1ac
--- /dev/null
+++ b/src_frontend/Components/Settings/Settings.svelte
@@ -0,0 +1,25 @@
+<script>
+    import { fade } from 'svelte/transition';
+    import InstanceName from './InstanceName.svelte';
+    import Version from "./Version.svelte";
+    import SSLCert from "./SSLCert.svelte";
+    import System from "./System.svelte";
+    import Users from "./Users.svelte";
+
+    import { authorizedSocketNeeded } from "../../stores/socketStore.js";
+	authorizedSocketNeeded.set(true);
+</script>
+
+<style>
+    div {
+        padding-bottom: var(--theme-padding);
+    }
+</style>
+
+<div>
+    <InstanceName />
+    <Version />
+    <SSLCert />
+    <Users />
+    <System />
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Settings/System.svelte b/src_frontend/Components/Settings/System.svelte
new file mode 100644
index 0000000..1af4531
--- /dev/null
+++ b/src_frontend/Components/Settings/System.svelte
@@ -0,0 +1,34 @@
+<script>
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+    import ConfirmActionDialog from "../Dialogs/ConfirmActionDialog.svelte";
+    import { authorizedSocket } from "../../stores/socketStore.js";
+
+    function restartSystem() {
+        authorizedSocket.emit("restart:system");
+    }
+    function restartService() {
+        authorizedSocket.emit("restart:service");
+    }
+
+</script>
+
+<style>
+    h1, p {
+        margin-bottom: 10px;
+    }
+    .button { margin-bottom: 10px; }
+</style>
+
+<div>
+    <h1>System restart</h1>
+    <ConfirmActionDialog title="Are you sure?" text="Are you sure you want to restart the rPI?" action={restartSystem}>
+        <svelte:fragment slot="trigger" let:open>
+            <div class="button"><FloatingButton on:click={open} fullWidth=true>Restart system</FloatingButton></div>
+        </svelte:fragment>
+    </ConfirmActionDialog>
+    <ConfirmActionDialog title="Are you sure?" text="Are you sure you want to restart the Luxcena NEO service?" action={restartService}>
+        <svelte:fragment slot="trigger" let:open>
+            <div class="button"><FloatingButton on:click={open} fullWidth=true>Restart service</FloatingButton></div>
+        </svelte:fragment>
+    </ConfirmActionDialog>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Settings/Users.svelte b/src_frontend/Components/Settings/Users.svelte
new file mode 100644
index 0000000..7e68c3a
--- /dev/null
+++ b/src_frontend/Components/Settings/Users.svelte
@@ -0,0 +1,93 @@
+<script>
+    import { onMount } from "svelte";
+    import { authorizedSocket, authorizedSocketNeeded, user } from "../../stores/socketStore.js";
+    authorizedSocketNeeded.set(true);
+    import CreateEditUser from "./CreateEditUser.svelte";
+    import ConfirmActionDialog from "../Dialogs/ConfirmActionDialog.svelte";
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+
+
+    let usersList = [];
+
+    function deleteUser(username) {
+        authorizedSocket.emit("user:delete", username, (res) => {
+            if (!res.success) { notif({title: res.reason}); }
+        });
+    };
+
+    authorizedSocket.on("users", (users) => {
+        usersList = users;
+    });
+
+    onMount(() => {
+        authorizedSocket.emit("users:get");
+    });
+</script>
+
+<style>
+    h1 {
+        margin: 0;
+    }
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    li {
+        width: 100%;
+        display: flex;
+        padding: 10px 10px;
+        border-radius: 5px;
+        align-items:center;
+        box-sizing: border-box;
+    }
+    li:hover {
+        background-color: var(--grey-100);
+    }
+    li:not(:last-child) {
+        border-bottom: 0.5px solid var(--grey-400);
+    }
+    .align-right { margin-left: auto; }
+    button {
+        background-color: transparent;
+        border: none;
+        padding: 10px;
+        border-radius: 50%;
+    }
+    button:hover {
+        background-color: var(--grey-300);
+    }
+    button:active {
+        background-color: var(--grey-400);
+    }
+</style>
+
+<div>
+    <h1>Users</h1>
+    <ul>
+    {#each usersList as _user}
+        <li>
+            {_user}
+            <div class="align-right">
+                {#if $user?.username != _user}
+                <ConfirmActionDialog title="Are you sure?" text="Are you sure you want to delete {_user}" action={() => {deleteUser(_user)}}>
+                    <svelte:fragment slot="trigger" let:open>
+                        <button on:click={open}><i class="fas fa-trash"></i></button>
+                    </svelte:fragment>
+                </ConfirmActionDialog>
+                {/if}
+                <CreateEditUser username={_user}>
+                    <svelte:fragment slot="trigger" let:open>
+                        <button on:click={open}><i class="fas fa-edit"></i></button>
+                    </svelte:fragment>
+                </CreateEditUser>
+            </div>
+        </li>
+    {/each}
+    </ul>
+    <CreateEditUser>
+        <svelte:fragment slot="trigger" let:open>
+            <div class="button"><FloatingButton on:click={open} fullWidth=true>Create new user</FloatingButton></div>
+        </svelte:fragment>
+    </CreateEditUser>
+</div>
\ No newline at end of file
diff --git a/src_frontend/Components/Settings/Version.svelte b/src_frontend/Components/Settings/Version.svelte
new file mode 100644
index 0000000..29d04ae
--- /dev/null
+++ b/src_frontend/Components/Settings/Version.svelte
@@ -0,0 +1,60 @@
+<script>
+    import { onMount } from 'svelte';
+    import FloatingButton from "../../ComponentLib/Button/FloatingButton.svelte";
+    import PrettyVar from "../../ComponentLib/PrettyVar.svelte";
+    import { authorizedSocket } from "../../stores/socketStore.js";
+
+    let version = "-";
+    let branch = "-";
+    let newVer = "-";
+    
+    authorizedSocket.on("version:branch", _branch => branch = _branch);
+    authorizedSocket.on("version:current_number", _version => version = _version);
+    authorizedSocket.on("version:newest_number", _version => newVer = _version);
+
+    let checkVersionPromise;
+    function checkForUpdate() {
+        checkVersionPromise = new Promise((resolve, reject) => {
+            authorizedSocket.emit("version:check_for_update", () => {
+                resolve();
+            });
+        });
+    }
+    
+    onMount(async() => {
+        authorizedSocket.emit("version:branch");
+        authorizedSocket.emit("version:current_number");
+        authorizedSocket.emit("version:newest_number");
+    });
+</script>
+
+<style>
+    h1, p { margin: 0; }
+    .label {
+        font-weight: 100;
+        font-style: italic;
+        color: var(--grey-600);
+    }
+    .button-row {
+        /* display: flex; */
+        margin-top: 20px;
+        width: 100%;
+        /* justify-content: center; */
+        /* align-items: center; */
+    }
+    .update-available {
+        color: var(--green-300);
+    }
+</style>
+
+<div>
+    <h1>Version</h1>
+    <p><span class="label">Current version</span> <PrettyVar varText={version}/></p>
+    <p><span class="label">Current branch</span> <PrettyVar bind:varText={branch}/></p>
+    {#if newVer != version}
+    <p><span class="update-available">Version <PrettyVar bind:varText={newVer} /> available.</span></p>
+    {/if}
+    <div class="button-row">
+        <FloatingButton on:click={checkForUpdate} bind:loadingPromise={checkVersionPromise} fullWidth=true>Check for updates</FloatingButton>
+    </div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3


From 5cc8e0a8ed605a15b95b707b9d1b805f32271e3f Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Sun, 3 Oct 2021 16:44:59 +0200
Subject: :building_construction: Use UNIX socket for IPC instead of stdin/out

---
 NeoRuntime/Runtime/luxcena_neo/strip.py            |   2 +-
 NeoRuntime/Runtime/neo_runtime.py                  | 141 +++++++++++-----
 src/NeoRuntimeManager/IPC.js                       | 178 +++++++++++++++++++++
 src/NeoRuntimeManager/RuntimeProcess.js            |  78 ++-------
 src/NeoRuntimeManager/index.js                     |  34 ++--
 src/UserData/index.js                              |   3 +
 .../MainControls/ControlComponents.svelte          |   2 +-
 7 files changed, 321 insertions(+), 117 deletions(-)
 create mode 100644 src/NeoRuntimeManager/IPC.js

(limited to 'src_frontend/Components')

diff --git a/NeoRuntime/Runtime/luxcena_neo/strip.py b/NeoRuntime/Runtime/luxcena_neo/strip.py
index a65b3f0..bfe2bbc 100644
--- a/NeoRuntime/Runtime/luxcena_neo/strip.py
+++ b/NeoRuntime/Runtime/luxcena_neo/strip.py
@@ -59,7 +59,7 @@ class Strip:
         self.__brightness = 255
         self.__actual_brightness = self.__brightness
 
-        self.__globvars_path = path.join(path.split(path.dirname(path.abspath(__file__)))[0], "globvars.json")
+        self.__globvars_path = path.join(path.split(path.dirname(path.abspath(__file__)))[0], "state.json")
         if path.exists(self.__globvars_path):
             try:
                 with open(self.__globvars_path, "r") as f:
diff --git a/NeoRuntime/Runtime/neo_runtime.py b/NeoRuntime/Runtime/neo_runtime.py
index e5941e2..4ecbc97 100644
--- a/NeoRuntime/Runtime/neo_runtime.py
+++ b/NeoRuntime/Runtime/neo_runtime.py
@@ -11,7 +11,8 @@ import time
 import threading
 import select
 import traceback
-from os import path
+import socket
+from os import path, remove
 
 from luxcena_neo.strip import Strip
 
@@ -41,7 +42,6 @@ def init_package(package_path, entry_module, strip):
     # Make the strip instance available in our modules
     setattr(module, "strip", strip)
 
-    module_entry_instance.declare_variables()
     return module_entry_instance
 
 def exec_module(module_executor_loop_func):
@@ -53,10 +53,12 @@ def exec_module(module_executor_loop_func):
 class NeoRuntime:
 
 
-    def __init__(self, package_path, entry_module, strip_config_file):
+    def __init__(self, package_path, entry_module, strip_config_file, socket_file):
         self.__strip = init_strip(strip_config_file)
         self.__module_entry_instance = init_package(package_path, entry_module, self.__strip)
         self.__module_th = None
+        self.__socket_file = socket_file
+        self.__send_strip_buffer = False
         
 
     def start(self):
@@ -66,49 +68,113 @@ class NeoRuntime:
 
         # This will run in this thread.
         print("> Starting to listen on stdin")
+        self.__s = None
         try:
-            self.__command_listener_loop()
+            self.__bind_socket()
+            self.__socket_listener()
         except KeyboardInterrupt:
             print("Exiting...")
         except Exception as e:
             traceback.print_exc()
-    
+        finally:
+            self.__close_socket()
+
+    def __bind_socket(self):
+        if path.exists(self.__socket_file):
+            remove(self.__socket_file)
+        
+        self.__s = socket.socket(socket.AF_UNIX, socket.SOCK_STREAM)
+        self.__s.bind(self.__socket_file)
+        self.__s.listen(1)
 
-    def __command_listener_loop(self):
+    def __socket_listener(self):
+        self.__s_clients = []
         last_send = time.perf_counter()
+
         while True:
             if not self.__module_th.is_alive(): break
-            while sys.stdin in select.select([sys.stdin], [], [], 0)[0]:
-                line = sys.stdin.readline()
-                if line:
-                    line = line.replace("\n", "")
-                    if (line[0:10] == ":::setvar:"):
-                        name, value = (line.split(" ", 1)[1]).replace("\"", "").split(":", 1)
-                        if name in self.__module_entry_instance.vars:
-                            self.__module_entry_instance.vars[name] = value
-                    elif (line[0:11] == ":::setglob:"):
-                        name, value = (line.split(" ", 1)[1]).replace("\"", "").split(":", 1)
-                        if name == "brightness":
-                            self.__strip.brightness = int(value)
-                        elif name == "power_on":
-                            self.__strip.power_on = value == "true"
-                        else:
-                            print(f"Unknown globvar \"{name}\"")
-            else:
-                if (time.perf_counter() - last_send) > 0.5:
-                    _vars = "{"
-                    for name, var in self.__module_entry_instance.vars:
-                        _vars += f" \"{name}\" : {{ \"value\": \"{var.value}\", \"var_type\": \"{var.var_type}\" }}, "
-                    if len(_vars) > 2:
-                        _vars = _vars[0:-2]
-                    _vars += "}"
-
-                    globvars = "{ \"power_on\": " + str(self.__strip.power_on).lower() + ", "
-                    globvars += " \"brightness\":" + str(self.__strip.brightness) + " }"
-                    print(f"{{ \":::data:\": {{ \"variables\": {_vars}, \"globvars\": {globvars} }} }}")
-                    last_send = time.perf_counter()
 
+            r, w, e = select.select([self.__s, *self.__s_clients], self.__s_clients, [], 0)
+
+            if (time.perf_counter() - last_send) > 0.5:
+                states = {
+                    "variables": self.__module_entry_instance.var.to_dict(),
+                    "globvars": {
+                        "power_on": self.__strip.power_on,
+                        "brightness": self.__strip.brightness
+                    }
+                }
+                buf = bytes([1]) + bytes(json.dumps(states), "ascii")
+
+                for ws in w:
+                    try:
+                        ws.send(buf)
+                    except BrokenPipeError:
+                        self.__s_clients.remove(ws)
+                        ws.close()
+
+                last_send = time.perf_counter()
+
+            for rs in r:
+                if rs is self.__s:
+                    c, a = self.__s.accept()
+                    self.__s_clients.append(c)
+                else:
+                    data = rs.recv(128)
+                    if not data:
+                        self.__s_clients.remove(rs)
+                        rs.close()
+                    else:
+                        self.__execute_command(data)
     
+    def __close_socket(self):
+        if (self.__s is None): return
+        r, w, e = select.select([self.__s, *self.__s_clients], self.__s_clients, [], 0)
+        for ws in w:
+            try:
+                ws.shutdown(socket.SHUT_RDWR)
+            except BrokenPipeError:
+                ws.close()
+            self.__s_clients.remove(ws)
+            ws.close()
+        self.__s.close()
+
+
+
+    def __execute_command(self, command):
+        """
+        command should be of type bytes
+        first byte indicates command type (currently setglob or setvar)
+        
+        for command type 1
+          byte 1 indicates which globvar
+          byte 2 indicates value
+        for command type 2
+          first 32 bytes are the var name
+            
+        """
+        # print(command.hex(" "))
+        if command[0] == 0:
+            if command[1] == 0:
+                self.__strip.power_on = (command[2] == 1)
+                print(f"Strip power: {self.__strip.power_on}")
+            elif command[1] == 1:
+                self.__strip.brightness = command[2]
+                print(f"Strip brightness: {self.__strip.brightness}")
+            else:
+                print(f"Unknown globvar {command[1]}.")
+        elif command[0] == 1:
+            name = command[3:3+command[1]].decode("ascii")
+            value = command[3+command[1]:3+command[1]+command[2]].decode("ascii")
+            if name in self.__module_entry_instance.var:
+                self.__module_entry_instance.var[name] = value
+            else:
+                print(f"Unknown variable {name}")
+        elif command[0] == 2:
+            self.__send_strip_buffer = (command[1] == 1)
+        else:
+            print("UNKNOWN COMMAND")
+
 
     def __module_loop(self):
         self.__module_entry_instance.on_start()
@@ -153,11 +219,14 @@ if __name__ == "__main__":
     parser.add_argument('--strip-config', help='Path to the strip config file.')
     parser.add_argument('--mode-path', help='Path of the folder the mode is in.')
     parser.add_argument('--mode-entry', help='Path of the module that is the entry-point of the module.')
+    parser.add_argument('--socket-file', help='The socket file the runtime will use to allow communication [default: /tmp/neo_runtime.sock].', default='/tmp/neo_runtime.sock')
+    parser.add_argument('--socket-enable', help='Wether to enable socket communication [default: true].', default=True)
     args = parser.parse_args()
 
     args.strip_config = args.strip_config.replace("\"", "")
     args.mode_path = args.mode_path.replace("\"", "")
     args.mode_entry = args.mode_entry.replace("\"", "")
+    args.socket_file = args.socket_file.replace("\"", "")
     if not path.exists(args.strip_config):
         print(f"Strip config not found ({args.strip_config}).")
         sys.exit(1)
@@ -172,6 +241,6 @@ if __name__ == "__main__":
     print(f"Module     : {args.mode_path}/{args.mode_entry}")
 
     print(f"> Starting \"{args.mode_path}\" in NeoRuntime.")
-    runtime = NeoRuntime(args.mode_path, args.mode_entry, args.strip_config)
+    runtime = NeoRuntime(args.mode_path, args.mode_entry, args.strip_config, args.socket_file)
     runtime.start()
     print ("> NeoRuntime exited...")
diff --git a/src/NeoRuntimeManager/IPC.js b/src/NeoRuntimeManager/IPC.js
new file mode 100644
index 0000000..817c049
--- /dev/null
+++ b/src/NeoRuntimeManager/IPC.js
@@ -0,0 +1,178 @@
+/**
+ * This module is used to communicate with a python NeoRuntime instance.
+ *
+ * @author jakobst1n.
+ * @since  3.10.2021
+ */
+
+const net = require("net");
+let logger = require(__basedir + "/src/logger");
+
+/** @type {int} How long wait between each reconnection attempt */
+const RECONNECT_INTERVAL = 1000;
+/** @type {Object} ENUM-ish for command that can be sent to neoruntime */
+const COMMAND = Object.freeze({SET_GLOB          : 0,
+                               SET_VAR           : 1,
+                               SET_SEND_STRIP_BUF: 2});
+/** @type {Object} ENUM-ish for globvars */
+const GLOBVAR = Object.freeze({POWER_ON  : 0,
+                               BRIGHTNESS: 1});
+/** @type {Object} ENUM-ish for what type of data neoruntime sends */
+const DATATYPE = Object.freeze({STATES   : 1,
+                                STRIP_BUF: 2});
+
+/**
+ * class that will keep a active connection to a socket if possible, and
+ * automatically reconnect. It will emit events when data is received,
+ * and it will send commands to the process. */
+class IPC {
+
+    constructor(_socketFile, _eventEmitter) {
+        this.socketFile = _socketFile;
+        this.eventEmitter = _eventEmitter;
+
+        this.client;
+        this.connected = false;
+        this.reconnectInterval = false;
+
+        this.globvars = {};
+        this.variables = {};
+
+        this.reconnect();
+    }
+
+    /**
+     * If we are not already attempting to reconnect, this will start a
+     * interval that tries to reconnect. */
+    reconnect() {
+        if (this.reconnectInterval === false) {
+            this.reconnectInterval = setInterval(this.tryOpenSocketConnection.bind(this), RECONNECT_INTERVAL);
+        }
+    }
+
+    /**
+     * This will attempt to connect to the socket, and then setup all listeners
+     * if it succedes. */
+    tryOpenSocketConnection() {
+        // logger.info("Attempting to start IPC");
+
+        this.client = net.createConnection(this.socketFile)
+        .on('connect', () => {
+            clearInterval(this.reconnectInterval);
+            this.reconnectInterval = false;
+            // logger.info("IPC Connected.");
+        })
+        .on("ready", () => {
+            this.connected = true;
+        })
+        .on('data', (data) => {
+            switch (data[0]) {
+                case DATATYPE.STATES:
+                    let json_data;
+                    try {
+                        json_data = JSON.parse(data.toString("ascii", 1));
+                    } catch (e) {
+                        logger.warning("Could not parse json data from neoruntime");
+                        return;
+                    }
+
+                    if (json_data.hasOwnProperty("globvars")) {
+                        forEachDiff(json_data["globvars"], this.globvars, (key, newVal) => {
+                            this.eventEmitter.emit("change", key, newVal);
+                        });
+                        this.globvars = json_data["globvars"];
+                    }
+                    if (json_data.hasOwnProperty("variables")) {
+                        forEachDiff(json_data["variables"], this.variables, (key, newVal) => {
+                            this.eventEmitter.emit("change", `variable/${key}`, newVal);
+                        });
+                        this.variables = json_data["variables"];
+                    }
+                    break;
+    
+                default:
+                    logger.info(data);
+            }
+    
+        })
+        .on("timeout", () => {
+            logger.info("IPC Timeout");
+        })
+        .on("close", (hadError) => {
+            // logger.info("IPC Close, hadError: ", hadError);
+            this.connected = false;
+            this.reconnect();
+        })
+        .on("end", () => {
+            // logger.info("IPC End");
+            this.connected = false;
+        })
+        .on('error', (data) => {
+            // logger.info('IPC Server not active.');
+            this.connected = false;
+            this.reconnect();
+        })
+        ;
+    }
+
+    /**
+     * Will send a command to the socket if we have a active connection,
+     * if not it will just drop the command. there is no queue implemented
+     * for such events. */
+    sendCommand(commandType, name, value) {
+        if (this.connected) {
+            let buf = Buffer.allocUnsafe(128);  // It's fine, we know what we are doing
+            // let buf = Buffer.alloc(128);
+    
+            switch (commandType) {
+                case (COMMAND.SET_GLOB):
+                    buf[1] = name;
+                    buf[2] = value;
+                    break;
+                case (COMMAND.SET_VAR):
+                    if (name.length > 32) { return {success: false, reason: "name too long", detail: "max size of name is 32 bytes"}; }
+                    if (name.length > 93) { return {success: false, reason: "value too long", detail: "max size of value is 93 bytes"}; }
+                    buf[1] = name.length;
+                    buf[2] = value.length;
+                    buf.write(name,  3,             name.length,  "ascii");
+                    buf.write(value, 3+name.length, value.length, "ascii");
+                    break;
+                case (COMMAND.SET_SEND_STRIP_BUF):
+                    buf[1] = (name) ? 1 : 0;
+                default:
+                    logger.info(`IPC UNKNOWN COMMANDTYPE ${commandType}`)
+                    return;
+            }
+
+            buf[0] = commandType;
+            this.client.write(buf);
+            return {success: true}
+        }
+        return {success: false, reason: "socket not connected", detail: "This usually means the python script is not running"};
+    }
+
+}
+
+const isObject = v => v && typeof v === 'object';
+
+/**
+ * Will call callback on all the differences between the dicts
+ */
+function forEachDiff(dict1, dict2, callback) {
+    for (const key of new Set([...Object.keys(dict1), ...Object.keys(dict2)])) {
+        if (isObject(dict1[key]) && isObject(dict2[key])) {
+            if (dict1[key].value !== dict2[key].value) {
+                callback(key, dict1[key]);
+            }
+        } else if (dict1[key] !== dict2[key]) {
+            if (isObject(dict2[key]) && (dict1[key] == null)) {
+                dict2[key].value = null;
+                callback(key, dict2[key])
+            } else {
+                callback(key, dict1[key]);
+            }
+        }
+    }
+}
+
+module.exports = {IPC, COMMAND, GLOBVAR};
\ No newline at end of file
diff --git a/src/NeoRuntimeManager/RuntimeProcess.js b/src/NeoRuntimeManager/RuntimeProcess.js
index 60f6a28..60c1de9 100644
--- a/src/NeoRuntimeManager/RuntimeProcess.js
+++ b/src/NeoRuntimeManager/RuntimeProcess.js
@@ -3,10 +3,11 @@ let spawn = require("child_process");
 
 class RuntimeProcess {
 
-    constructor(_modePath, _onVarChange, _eventEmitter) {
+    constructor(_modePath, _eventEmitter) {
         this.modePath = _modePath;
         this.logfile = `${this.modePath}/mode.log`;
-        
+        this.errfile = `${this.modePath}/mode.error`;
+
         this.stdout = "";
         this.stderr = "";
 
@@ -16,9 +17,6 @@ class RuntimeProcess {
         this.isRunning = false;
         this.exitCode = null;
 
-        this.variables = {};
-        this.globvars  = {};
-        this.onVarChange = _onVarChange;
         this.eventEmitter = _eventEmitter;
     }
 
@@ -29,7 +27,7 @@ class RuntimeProcess {
         }
         this.isRunning = true;
         this.proc = spawn.spawn(
-            "python3", 
+            "python3",
             [
                 "-u", // This makes us able to get real-time output
                 `${__basedir}/NeoRuntime/Runtime/neo_runtime.py`,
@@ -44,28 +42,13 @@ class RuntimeProcess {
         });
 
         fs.ensureFileSync(this.logfile);
+        fs.ensureFileSync(this.errfile);
         this.eventEmitter.emit("proc:start");
 
         this.proc.stdout.on('data', (_stdout) => {
             let stdout_str = _stdout.toString();
-            
-            let regex = /{ ":::data:": { (.*) } }/gi;
-            let data = stdout_str.match(regex);
-            stdout_str = stdout_str.replace(regex, () => "");
-
-            if ((data != null) && (data.length > 0)) {
-                try {
-                    this.processVarData(data)
-                } catch {}
-            }
-
-            if (stdout_str.replace("\n", "").replace(" ", "") == "") {
-                // In this case, we want to ignore the data.
-            } else {
-                // stdout_str = stdout_str.replace(/\n$/, "")
-                fs.appendFile(this.logfile, "\n====stdout====\n" + stdout_str);
-                this.eventEmitter.emit("proc:stdout", stdout_str);
-            }
+            fs.appendFile(this.logfile, `[${timestamp()}]: ` + stdout_str);
+            this.eventEmitter.emit("proc:stdout", stdout_str);
         });
 
         this.proc.stdout.on('end', () => {
@@ -73,9 +56,8 @@ class RuntimeProcess {
         });
 
         this.proc.stderr.on('data', (_stderr) => {
-            // let stderr_str =  _stderr.toString().replace(/\n$/, "")
-            let stderr_str =  _stderr.toString()
-            fs.appendFile(this.logfile, "\n====stderr====\n" + stderr_str);
+            let stderr_str =  _stderr.toString();
+            fs.appendFile(this.errfile, `[${timestamp()}]: ` + stderr_str);
             this.eventEmitter.emit("proc:stderr", stderr_str);
         });
 
@@ -85,7 +67,7 @@ class RuntimeProcess {
 
         this.proc.on('close', (code) => {
             if (code) {
-                fs.appendFile(this.logfile, "\n====close====\nScript exited with code " +  code.toString());
+                fs.appendFile(this.logfile, `[${timestamp()}]: ` + "Script exited with code " +  code.toString());
             }
             this.eventEmitter.emit("proc:exit", 0);
             this.isRunning = false;
@@ -106,45 +88,15 @@ class RuntimeProcess {
             console.log(err);
         }
     }
-
-    processVarData(data) {
-        data = JSON.parse(data)[":::data:"];
-        if (data.hasOwnProperty("globvars")) {
-            forEachDiff(data["globvars"], this.globvars, (key, newVal) => {
-                this.onVarChange("globvars", key, newVal);
-            });
-            this.globvars = data["globvars"];
-        }
-        if (data.hasOwnProperty("variables")) {
-            forEachDiff(data["variables"], this.variables, (key, newVal) => {
-                this.onVarChange("variables", key, newVal); 
-            });
-            this.variables = data["variables"];
-        }
-    }
-
 }
 
-const isObject = v => v && typeof v === 'object';
-
 /**
- * Will call callback on all the differences between the dicts
+ * Creates and returns a timestamp that can be used in logfiles.
+ *
+ * @return {string} timestamp
  */
-function forEachDiff(dict1, dict2, callback) {
-    for (const key of new Set([...Object.keys(dict1), ...Object.keys(dict2)])) {
-        if (isObject(dict1[key]) && isObject(dict2[key])) {
-            if (dict1[key].value !== dict2[key].value) {
-                callback(key, dict1[key]);
-            }
-        } else if (dict1[key] !== dict2[key]) {
-            if (isObject(dict2[key]) && (dict1[key] == null)) {
-                dict2[key].value = null;
-                callback(key, dict2[key])
-            } else {
-                callback(key, dict1[key]);
-            }
-        }
-    }
+function timestamp() {
+    return (new Date()).toISOString();
 }
 
 module.exports = RuntimeProcess;
diff --git a/src/NeoRuntimeManager/index.js b/src/NeoRuntimeManager/index.js
index 62acb8a..6238323 100644
--- a/src/NeoRuntimeManager/index.js
+++ b/src/NeoRuntimeManager/index.js
@@ -8,6 +8,7 @@
 const fs = require("fs");
 const fsPromises = fs.promises;
 const RuntimeProcess = require("./RuntimeProcess");
+const IPC = require("./IPC");
 let logger = require(__basedir + "/src/logger");
 const EventEmitter = require('events');
 
@@ -20,6 +21,8 @@ let modeId = null;
 let modeExitCode = 0;
 /** @type {RuntimeProcess} This is the current RuntimeProcess instance */
 let runtimeProcess = null;
+/** @type {IPC} The IPC instance, used to communicate with the script */
+let ipc = null;
 /** @type {EventEmitter} This is used to emit events when things change */
 const eventEmitter = new EventEmitter();
 /** @type {boolean} If this is true, we will not do things the usual way */
@@ -83,13 +86,6 @@ function setMode(_modeId) {
         return {success: false, reason: "unknown modeId"};
     }
     logger.info(`Changing mode to "${_modeId}".`);
-    
-    let globvarsTmp = {};
-    let variablesTmp = {};
-    if (runtimeProcess != null) {
-        globvarsTmp = runtimeProcess.globvars;
-        variablesTmp = runtimeProcess.variables;
-    }
 
     stopMode();
     
@@ -97,10 +93,9 @@ function setMode(_modeId) {
     neoModules.userData.config.activeMode = modeId;
     eventEmitter.emit("change", "mode", modeId);
 
-    runtimeProcess = new RuntimeProcess(getModePath(_modeId), onVariableChange, eventEmitter);
-    runtimeProcess.globvars = globvarsTmp;
-    runtimeProcess.variables = variablesTmp;
+    runtimeProcess = new RuntimeProcess(getModePath(_modeId), eventEmitter);
     startMode();
+
     return {success: true}
 };
 
@@ -194,7 +189,7 @@ function onVariableChange(location, name, newValue) {
  */
 function getGlobvars() {
     if (!modeRunning()) { return {}; }
-    return runtimeProcess.globvars;
+    return ipc.globvars;
 }
 
 /**
@@ -207,8 +202,15 @@ function getGlobvars() {
  */
 function setGlobvar(name, value) {
     if (!modeRunning()) { return; }
-    runtimeProcess.proc.stdin.write(`:::setglob: ${name}:${value}\n`);
-    return {success: true}
+    
+    switch(name) {
+        case "power_on":
+            return ipc.sendCommand(IPC.COMMAND.SET_GLOB, IPC.GLOBVAR.POWER_ON, (value) ? 1 : 0);
+        case "brightness":
+            return ipc.sendCommand(IPC.COMMAND.SET_GLOB, IPC.GLOBVAR.BRIGHTNESS, value);
+        default:
+            return {success: false, reason: "unknown globvar", detail: name};
+    }
 }
 
 /**
@@ -218,7 +220,7 @@ function setGlobvar(name, value) {
  */
 function getVariables() {
     if (!modeRunning()) { return {}; }
-    return runtimeProcess.variables;
+    return ipc.variables;
 }
 
 /**
@@ -231,8 +233,7 @@ function getVariables() {
  */
 function setVariable(name, value) {
     if (!modeRunning()) { return; }
-    runtimeProcess.proc.stdin.write(`:::setvar: ${name}:${value}\n`);
-    return {success: true}
+    return ipc.sendCommand(IPC.COMMAND.SET_VAR, name, value);
 }
 
 /**
@@ -281,6 +282,7 @@ function stopDebugger() {
 
 module.exports = (_neoModules) => {
     neoModules = _neoModules;
+    ipc = new IPC.IPC(neoModules.userData.config.neoRuntimeIPC.socketFile, eventEmitter);
     return {
         event: eventEmitter,
         modes: listModes,
diff --git a/src/UserData/index.js b/src/UserData/index.js
index e5318c9..704c5d5 100644
--- a/src/UserData/index.js
+++ b/src/UserData/index.js
@@ -40,6 +40,9 @@ function ensureMainConfig() {
     if (config.DiscoveryServer.address == null) { config.DiscoveryServer.address = "https://erj46s.deta.dev"; }
     if (config.DiscoveryServer.broadcastSelf == null) { config.DiscoveryServer.broadcastSelf = false; }
 
+    if (config.neoRuntimeIPC == null) { config.neoRuntimeIPC = {}; }
+    if (config.neoRuntimeIPC.socketFile == null) { config.neoRuntimeIPC.socketFile = "/tmp/neo_runtime.sock"; }
+
     fse.writeFileSync(__datadir + "/config/config.ini", ini.encode(config))
 }
 
diff --git a/src_frontend/Components/MainControls/ControlComponents.svelte b/src_frontend/Components/MainControls/ControlComponents.svelte
index 5f6d165..65bd1c4 100644
--- a/src_frontend/Components/MainControls/ControlComponents.svelte
+++ b/src_frontend/Components/MainControls/ControlComponents.svelte
@@ -45,7 +45,7 @@
         }
         name = name.replace("variable/", "");
 
-        switch (value.var_type) {
+        switch (value.type) {
             case "COLOR":
                 if (value.value == null) {
                     delete colorVariables[name];
-- 
cgit v1.2.3


From d962cdaa317b384b2e82d0f9dc5b9d15a5733869 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Wed, 6 Oct 2021 17:24:43 +0200
Subject: :children_crossing: Add update button to ui

---
 src/SocketIO/index.js                           | 2 ++
 src_frontend/Components/Settings/Version.svelte | 6 ++++++
 2 files changed, 8 insertions(+)

(limited to 'src_frontend/Components')

diff --git a/src/SocketIO/index.js b/src/SocketIO/index.js
index 2a625ed..1803845 100644
--- a/src/SocketIO/index.js
+++ b/src/SocketIO/index.js
@@ -194,6 +194,8 @@ function createAuthorizedNamespace(io) {
             fn({success: true});
         });
         socket.on("system:update_version", () => {
+            let p = exec('luxcena-neo-cli.sh update');
+            p.unref();
         });
 
         /* SSLCert */
diff --git a/src_frontend/Components/Settings/Version.svelte b/src_frontend/Components/Settings/Version.svelte
index 29d04ae..35c8f96 100644
--- a/src_frontend/Components/Settings/Version.svelte
+++ b/src_frontend/Components/Settings/Version.svelte
@@ -20,6 +20,11 @@
             });
         });
     }
+
+    let updateVersionPromise;
+    function doUpdate() {
+        authorizedSocket.emit("system:update_version");
+    }
     
     onMount(async() => {
         authorizedSocket.emit("version:branch");
@@ -53,6 +58,7 @@
     <p><span class="label">Current branch</span> <PrettyVar bind:varText={branch}/></p>
     {#if newVer != version}
     <p><span class="update-available">Version <PrettyVar bind:varText={newVer} /> available.</span></p>
+    <FloatingButton on:click={doUpdate} bind:loadingPromise={updateVersionPromise} fullWidth=true>Update luxcena-neo</FloatingButton>
     {/if}
     <div class="button-row">
         <FloatingButton on:click={checkForUpdate} bind:loadingPromise={checkVersionPromise} fullWidth=true>Check for updates</FloatingButton>
-- 
cgit v1.2.3


From be218575e9bd4e029d8cf228e30f1b8abe7c4908 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <14180120+JakobST1n@users.noreply.github.com>
Date: Mon, 11 Oct 2021 07:54:07 +0200
Subject: :lipstick: Clear output box when mode restarts

---
 src_frontend/Components/Editor/Output.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src_frontend/Components')

diff --git a/src_frontend/Components/Editor/Output.svelte b/src_frontend/Components/Editor/Output.svelte
index dcd5995..9e4c953 100644
--- a/src_frontend/Components/Editor/Output.svelte
+++ b/src_frontend/Components/Editor/Output.svelte
@@ -22,6 +22,8 @@
             scrollBox.scrollTop = scrollBox.scrollHeight + 100;
         }
     }
+    
+    authorizedSocket.on("editor:proc:start", () => htmlCode = "");
     authorizedSocket.on("editor:proc:exit", (code) => addData(`\nMode exited with ${code}\n\n`, "exit"));
     authorizedSocket.on("editor:proc:stdout", (stdout) => addData(stdout, "stdout"));
     authorizedSocket.on("editor:proc:stderr", (stderr) => addData(stderr, "stderr"));
@@ -51,4 +53,4 @@
     <pre bind:this={scrollBox}>
         {@html htmlCode}
     </pre>
-</div>
\ No newline at end of file
+</div>
-- 
cgit v1.2.3