From 8c425b44ed133668bfdbd669ad39f962ee9eabd8 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Mon, 16 Mar 2026 18:39:40 +0100
Subject: [PATCH 01/12] Fix quotes and add debounced text field

---
 cypress/integration/example.spec.ts           |  8 +-
 cypress/support/index.ts                      |  2 +-
 eslint.config.ts                              |  7 +-
 package.json                                  |  4 +-
 src/App.vue                                   | 39 +++++-----
 src/components/DeviceInfo.vue                 | 14 ++--
 src/components/ServerStatusOverlay.vue        |  8 +-
 src/components/__tests__/HelloWorld.spec.ts   | 14 ++--
 src/components/automation/CreateForm.vue      | 24 +++---
 src/components/automation/LogViewer.vue       |  6 +-
 src/components/automation/MonacoEditor.vue    | 20 ++---
 src/components/chart/StreamLineChart.vue      | 14 ++--
 src/components/device/DebouncedSlider.vue     |  2 +-
 src/components/device/DebouncedTextField.vue  | 76 +++++++++++++++++++
 src/components/device/DeviceCard.vue          | 18 ++---
 src/components/device/DeviceControl.vue       | 70 ++++++++---------
 .../device/control/DeviceEstim2bControl.vue   | 14 ++--
 .../device/control/DeviceZc95Control.vue      | 14 ++--
 .../device/control/GenericDeviceControl.vue   | 32 ++++----
 .../slvctrlplus/DeviceAirValveControl.vue     | 10 +--
 .../slvctrlplus/DeviceDisplayControl.vue      | 30 ++++----
 .../slvctrlplus/DeviceDistanceControl.vue     | 18 ++---
 .../slvctrlplus/DeviceEt312Control.vue        | 56 +++++++-------
 .../slvctrlplus/DeviceNogasmControl.vue       | 26 +++----
 .../slvctrlplus/DeviceStrikerMk2Control.vue   | 14 ++--
 .../virtual/DeviceVirtualDisplayControl.vue   | 16 ++--
 .../virtual/DeviceVirtualPiperTtsControl.vue  | 18 ++---
 .../DeviceVirtualRandomGeneratorControl.vue   |  6 +-
 .../virtual/DeviceVirtualTtsControl.vue       | 24 +++---
 src/components/icons/DeviceIcon.vue           | 24 +++---
 src/helper/ChartHelper.ts                     | 12 +--
 src/helper/DeviceCommunicator.ts              | 17 +----
 src/helper/TimeoutHelper.ts                   | 20 -----
 src/layouts/LayoutWithMenu.vue                | 40 +++++-----
 src/main.ts                                   | 24 +++---
 src/model/MapRule.ts                          |  6 +-
 src/model/devices/Device.ts                   |  4 +
 src/model/devices/estim2b/DeviceEstim2b.ts    |  4 +-
 src/model/devices/slvctrl/DeviceAirValve.ts   |  4 +-
 src/model/devices/slvctrl/DeviceDisplay.ts    |  4 +-
 src/model/devices/slvctrl/DeviceDistance.ts   |  4 +-
 src/model/devices/slvctrl/DeviceEt312.ts      |  4 +-
 src/model/devices/slvctrl/DeviceNogasm.ts     |  6 +-
 src/model/devices/slvctrl/DeviceStrikerMk2.ts |  4 +-
 .../devices/virtual/VirtualDeviceDisplay.ts   |  4 +-
 .../devices/virtual/VirtualDevicePiperTts.ts  |  4 +-
 src/model/devices/virtual/VirtualDeviceTts.ts |  4 +-
 .../devices/virtual/VirtualRandomGenerator.ts |  4 +-
 src/model/devices/zc95/DeviceZc95.ts          |  6 +-
 src/plugins/vueSocketIOClient.ts              | 10 +--
 src/plugins/vuetify.ts                        | 62 +++++++--------
 src/plugins/webfontloader.ts                  |  4 +-
 src/router/index.ts                           | 48 ++++++------
 src/shims-vue.d.ts                            |  8 +-
 src/shims-vuetify.d.ts                        |  6 +-
 src/stores/app.ts                             | 14 ++--
 src/stores/automation.ts                      | 26 +++----
 src/stores/backend.ts                         | 10 +--
 src/stores/devices.ts                         | 17 +++--
 src/stores/health.ts                          | 40 +++++-----
 src/stores/settings.ts                        | 16 ++--
 src/utils/apiFetch.ts                         |  2 +-
 src/utils/utils.ts                            | 18 ++++-
 src/views/AutomationView.vue                  | 42 +++++-----
 src/views/BackendUrl.vue                      | 12 +--
 src/views/DevicesView.vue                     | 10 +--
 src/views/MissionControlSingleView.vue        | 18 ++---
 src/views/MissionControlView.vue              | 10 +--
 src/views/SettingsView.vue                    | 22 +++---
 src/views/SystemHealthView.vue                | 28 +++----
 src/vueSocketIOClient.d.ts                    |  4 +-
 vite.config.ts                                | 10 +--
 vue.config.js                                 |  2 +-
 73 files changed, 661 insertions(+), 581 deletions(-)
 create mode 100644 src/components/device/DebouncedTextField.vue
 delete mode 100644 src/helper/TimeoutHelper.ts

diff --git a/cypress/integration/example.spec.ts b/cypress/integration/example.spec.ts
index 3130c00..6e1bb87 100644
--- a/cypress/integration/example.spec.ts
+++ b/cypress/integration/example.spec.ts
@@ -1,8 +1,8 @@
 // https://docs.cypress.io/api/introduction/api.html
 
-describe("My First Test", () => {
-  it("visits the app root url", () => {
-    cy.visit("/");
-    cy.contains("h1", "You did it!");
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/');
+    cy.contains('h1', 'You did it!');
   });
 });
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index d076cec..37a498f 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import "./commands";
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
diff --git a/eslint.config.ts b/eslint.config.ts
index 5381806..db457bb 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -2,7 +2,6 @@ import { globalIgnores } from 'eslint/config'
 import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
 import * as pluginVue from 'eslint-plugin-vue'
 import * as pluginVitest from '@vitest/eslint-plugin'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 
 // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 // import { configureVueProject } from '@vue/eslint-config-typescript'
@@ -24,5 +23,9 @@ export default defineConfigWithVueTs(
       ...pluginVitest.default.configs.recommended,
       files: ['src/**/__tests__/*'],
     },
-    skipFormatting,
+    {
+      rules: {
+        'quotes': ['warn', 'single', { 'allowTemplateLiterals': true }],
+      },
+    },
 )
diff --git a/package.json b/package.json
index cd5e468..5dd91da 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "build": "vue-tsc --noEmit -p tsconfig.app.json --composite false && vite build",
     "test:unit": "vitest --environment jsdom",
     "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "lint": "eslint . --fix",
+    "lint": "eslint .",
     "dev": "vite",
     "preview": "vite preview --port 5050",
     "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'"
@@ -46,7 +46,6 @@
     "@vitejs/plugin-vue-jsx": "^5.0.0",
     "@vitest/eslint-plugin": "^1.2.7",
     "@vue/compiler-sfc": "^3.5.17",
-    "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
@@ -57,7 +56,6 @@
     "jiti": "^2.4.2",
     "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
-    "prettier": "^3.5.3",
     "sass": "^1.89.2",
     "start-server-and-test": "^2.0.12",
     "typescript": "^5.8.3",
diff --git a/src/App.vue b/src/App.vue
index c1addf2..111610c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { useDevicesStore } from "./stores/devices.js";
-import { useSocketIO } from "./plugins/vueSocketIOClient.js";
-import type { Socket } from "socket.io-client";
-import type Device from "./model/devices/Device";
-import { useSettingsStore } from "./stores/settings.js";
-import { useAutomationStore } from "./stores/automation.js";
-import { storeToRefs } from "pinia";
-import { useAppStore } from "./stores/app";
-import { useHealthStore } from "./stores/health";
-import { useBackendStore } from "@/stores/backend";
-import ServerStatusOverlay from "@/components/ServerStatusOverlay.vue";
+import { useDevicesStore } from './stores/devices.js';
+import { useSocketIO } from './plugins/vueSocketIOClient.js';
+import type { Socket } from 'socket.io-client';
+import type Device from './model/devices/Device';
+import { useSettingsStore } from './stores/settings.js';
+import { useAutomationStore } from './stores/automation.js';
+import { storeToRefs } from 'pinia';
+import { useAppStore } from './stores/app';
+import { useHealthStore } from './stores/health';
+import { useBackendStore } from '@/stores/backend';
+import ServerStatusOverlay from '@/components/ServerStatusOverlay.vue';
 
 const settingsStore = useSettingsStore();
 const healthStore = useHealthStore();
@@ -23,7 +23,7 @@ const { theme } = storeToRefs(settingsStore);
 if (backendStore.backendUrl) {
   const io = useSocketIO() as Socket;
 
-  io.on("connect", () => {
+  io.on('connect', () => {
     backendStore.setServerOnline(true);
 
     // Init/update stores with initial data from server
@@ -32,9 +32,12 @@ if (backendStore.backendUrl) {
     devicesStore.init();
     healthStore.init();
   });
-  io.on("disconnect", () => backendStore.setServerOnline(false));
+  io.on('disconnect', () => {
+    backendStore.setServerOnline(false);
+    devicesStore.clear();
+  });
 
-  io.on("deviceDisconnected", (device) => {
+  io.on('deviceDisconnected', (device) => {
     devicesStore.removeDevice(device);
 
     appStore.displaySnackbar(
@@ -43,7 +46,7 @@ if (backendStore.backendUrl) {
       }) disconnected`
     );
   });
-  io.on("deviceConnected", (device) => {
+  io.on('deviceConnected', (device) => {
     devicesStore.addDevice(device);
 
     appStore.displaySnackbar(
@@ -52,17 +55,17 @@ if (backendStore.backendUrl) {
       }) connected`
     );
   });
-  io.on("deviceRefreshed", (device) => {
+  io.on('deviceRefreshed', (device) => {
     devicesStore.updateDevice(device);
   });
-  io.on("automationConsoleLog", (data: string) => {
+  io.on('automationConsoleLog', (data: string) => {
     automationStore.logMessages.push(data);
 
     if (automationStore.logMessages.length > 500) {
       automationStore.logMessages.shift();
     }
   });
-  io.on("settingsChanged", async () => {
+  io.on('settingsChanged', async () => {
     await settingsStore.getServerSettings()
   });
 }
diff --git a/src/components/DeviceInfo.vue b/src/components/DeviceInfo.vue
index d39b6df..d41ea09 100644
--- a/src/components/DeviceInfo.vue
+++ b/src/components/DeviceInfo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type Device from "@/model/devices/Device";
-import DeviceIcon from "./icons/DeviceIcon.vue";
-import { computed, reactive } from "vue";
-import {hasProperty} from "@/utils/utils";
+import type Device from '@/model/devices/Device';
+import DeviceIcon from './icons/DeviceIcon.vue';
+import { computed, reactive } from 'vue';
+import {hasProperty} from '@/utils/utils';
 
 interface Props {
   device: Device;
@@ -14,12 +14,12 @@ const device = reactive<Device>(props.device);
 const lastRefreshed = computed<string>((): string => {
   return device.lastRefresh
     ? new Date(device.lastRefresh).toISOString()
-    : "n/a";
+    : 'n/a';
 });
 
 const deviceTypeModel = computed<string>((): string => {
   return `${device.type} ${
-    device.type === "slvCtrlPlus" ? ` (model: ${device.deviceModel})` : ""
+    device.type === 'slvCtrlPlus' ? ` (model: ${device.deviceModel})` : ''
   }`;
 });
 
@@ -38,7 +38,7 @@ function formatFwVersion(fwVersion: string|number): string {
 }
 
 function isStringOrNumber(val: unknown): val is string | number {
-  return typeof val === "string" || typeof val === "number";
+  return typeof val === 'string' || typeof val === 'number';
 }
 </script>
 
diff --git a/src/components/ServerStatusOverlay.vue b/src/components/ServerStatusOverlay.vue
index c77202b..cbdbdc0 100644
--- a/src/components/ServerStatusOverlay.vue
+++ b/src/components/ServerStatusOverlay.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import {useBackendStore} from "@/stores/backend";
-import {storeToRefs} from "pinia";
-import {computed, ref, watch} from "vue";
-import {format} from "date-fns";
+import {useBackendStore} from '@/stores/backend';
+import {storeToRefs} from 'pinia';
+import {computed, ref, watch} from 'vue';
+import {format} from 'date-fns';
 
 const backendStore = useBackendStore();
 const { backendUrl, isServerOnline, wasServerEverOnline } = storeToRefs(backendStore);
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
index da11e2e..f7b12f0 100644
--- a/src/components/__tests__/HelloWorld.spec.ts
+++ b/src/components/__tests__/HelloWorld.spec.ts
@@ -1,11 +1,11 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from 'vitest';
 
-import { mount } from "@vue/test-utils";
-import HelloWorld from "../HelloWorld.vue";
+import { mount } from '@vue/test-utils';
+import HelloWorld from '../HelloWorld.vue';
 
-describe("HelloWorld", () => {
-  it("renders properly", () => {
-    const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } });
-    expect(wrapper.text()).toContain("Hello Vitest");
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } });
+    expect(wrapper.text()).toContain('Hello Vitest');
   });
 });
diff --git a/src/components/automation/CreateForm.vue b/src/components/automation/CreateForm.vue
index 9c8ea09..3fcbe56 100644
--- a/src/components/automation/CreateForm.vue
+++ b/src/components/automation/CreateForm.vue
@@ -1,32 +1,32 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useAutomationStore } from "@/stores/automation.js";
-import { useAppStore } from "@/stores/app.js";
+import { ref } from 'vue';
+import { useAutomationStore } from '@/stores/automation.js';
+import { useAppStore } from '@/stores/app.js';
 
-const emit = defineEmits(["save", "cancel"]);
+const emit = defineEmits(['save', 'cancel']);
 
 const appStore = useAppStore();
 const automationStore = useAutomationStore();
 
-const newScriptName = ref("");
+const newScriptName = ref('');
 const isValid = ref(true);
 
 const scriptNameRules = [
   (value: string) => {
     if (value) return true;
-    return "You must enter a script name.";
+    return 'You must enter a script name.';
   },
   (value: string) => {
     if (value.length >= 3) return true;
-    return "The script name needs to be at least 3 characters long.";
+    return 'The script name needs to be at least 3 characters long.';
   },
   (value: string) => {
     if (value.length < 64) return true;
-    return "The script name needs to no more than 64 characters long.";
+    return 'The script name needs to no more than 64 characters long.';
   },
   (value: string) => {
     if (value.match(/^[a-z\d-_.]+$/)) return true;
-    return "Only lower case letters, numbers, hyphens, underscores and dots are allowed.";
+    return 'Only lower case letters, numbers, hyphens, underscores and dots are allowed.';
   },
 ];
 
@@ -45,10 +45,10 @@ function createScript(): void {
       automationStore.fetchScript(scriptNameWithExt);
     })
     .then(() => {
-      emit("save");
-      newScriptName.value = "";
+      emit('save');
+      newScriptName.value = '';
     })
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 </script>
 
diff --git a/src/components/automation/LogViewer.vue b/src/components/automation/LogViewer.vue
index 01a570b..44378ca 100644
--- a/src/components/automation/LogViewer.vue
+++ b/src/components/automation/LogViewer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from "vue";
-import moment from "moment";
+import { computed, nextTick, ref, watch } from 'vue';
+import moment from 'moment';
 
 interface Props {
   logData: string[];
@@ -11,7 +11,7 @@ const emit = defineEmits(['close']);
 
 const props = defineProps<Props>();
 
-const logData = computed(() => `${props.logData.join("\n")}\n\n`);
+const logData = computed(() => `${props.logData.join('\n')}\n\n`);
 const runningSinceFormatted = computed(() => {
   if (null === props.runningSince) {
     return null;
diff --git a/src/components/automation/MonacoEditor.vue b/src/components/automation/MonacoEditor.vue
index 023f0fb..9c12dd8 100644
--- a/src/components/automation/MonacoEditor.vue
+++ b/src/components/automation/MonacoEditor.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useSettingsStore } from "@/stores/settings.js";
-import { storeToRefs } from "pinia";
-import {defineAsyncComponent, watch} from "vue";
-import type * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import { useSettingsStore } from '@/stores/settings.js';
+import { storeToRefs } from 'pinia';
+import {defineAsyncComponent, watch} from 'vue';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
 // Load Monaco Editor asynchronously for performance reasons
 const MonacoEditor = defineAsyncComponent(() => import('monaco-editor-vue3'));
@@ -28,7 +28,7 @@ const options: monaco.editor.IEditorOptions = {
   minimap: { enabled: false },
 };
 
-window.addEventListener("resize", () => {
+window.addEventListener('resize', () => {
   if (editorInstance === null) {
     return;
   }
@@ -37,7 +37,7 @@ window.addEventListener("resize", () => {
 
   // wait for next frame to ensure last layout finished
   window.requestAnimationFrame(() => {
-    const monacoElement = document.getElementById("monaco-wrapper");
+    const monacoElement = document.getElementById('monaco-wrapper');
 
     if (null === editorInstance || null === monacoElement) {
       return;
@@ -85,11 +85,11 @@ declare const console: {
   trace: (...args: any[]) => void;
 };
 `;
-  const libUri = "ts:filename/facts.d.ts";
+  const libUri = 'ts:filename/facts.d.ts';
 
   const compilerOptions = {
     target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
-    lib: ["es2020"],
+    lib: ['es2020'],
     allowNonTsExtensions: true,
   };
 
@@ -124,9 +124,9 @@ watch(
   }
 );
 
-const emit = defineEmits(["update:code"]);
+const emit = defineEmits(['update:code']);
 
-const updateValue = (event: string) => emit("update:code", event);
+const updateValue = (event: string) => emit('update:code', event);
 </script>
 
 <template>
diff --git a/src/components/chart/StreamLineChart.vue b/src/components/chart/StreamLineChart.vue
index fe5b3e3..d9d56a3 100644
--- a/src/components/chart/StreamLineChart.vue
+++ b/src/components/chart/StreamLineChart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Line } from "vue-chartjs";
+import { Line } from 'vue-chartjs';
 import {
   Chart as ChartJS,
   Title,
@@ -10,14 +10,14 @@ import {
   PointElement,
   CategoryScale,
   Filler,
-} from "chart.js";
-import type { ChartOptions, ChartData, Plugin } from "chart.js";
-import "chartjs-adapter-luxon";
-import ChartStreaming from "chartjs-plugin-streaming";
+} from 'chart.js';
+import type { ChartOptions, ChartData, Plugin } from 'chart.js';
+import 'chartjs-adapter-luxon';
+import ChartStreaming from 'chartjs-plugin-streaming';
 
 interface Props {
-  chartData: ChartData<"line">;
-  chartOptions: ChartOptions<"line">;
+  chartData: ChartData<'line'>;
+  chartOptions: ChartOptions<'line'>;
 }
 
 const props = defineProps<Props>();
diff --git a/src/components/device/DebouncedSlider.vue b/src/components/device/DebouncedSlider.vue
index 88febf9..48d98f6 100644
--- a/src/components/device/DebouncedSlider.vue
+++ b/src/components/device/DebouncedSlider.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import type {IntRangeDeviceAttribute} from "@/model/devices/Device";
+import type {IntRangeDeviceAttribute} from '@/model/devices/Device';
 
 interface Props {
   modelValue: number|undefined;
diff --git a/src/components/device/DebouncedTextField.vue b/src/components/device/DebouncedTextField.vue
new file mode 100644
index 0000000..ee27bcf
--- /dev/null
+++ b/src/components/device/DebouncedTextField.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+interface Props {
+  modelValue: string | number | undefined;
+  type?: 'text' | 'number';
+  disabled?: boolean;
+  debounceMs?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  disabled: false,
+  debounceMs: 200,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number];
+}>();
+
+const localValue = ref<string | number | undefined>(props.modelValue);
+const isActive = ref<boolean>(false);
+let debounceTimer: number | undefined;
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isActive.value) {
+      localValue.value = newValue;
+    }
+  }
+);
+
+const emitValue = (value: string | number): void => {
+  emit('update:modelValue', value);
+};
+
+const handleValueChange = (value: string | number): void => {
+  localValue.value = value;
+
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+
+  if (props.debounceMs === 0) {
+    emitValue(value);
+    return;
+  }
+
+  debounceTimer = window.setTimeout(() => {
+    emitValue(value);
+    debounceTimer = undefined;
+  }, props.debounceMs);
+};
+
+const handleStart = (): void => {
+  isActive.value = true;
+};
+
+const handleEnd = (): void => {
+  setTimeout(() => {
+    isActive.value = false;
+  }, 100);
+};
+</script>
+
+<template>
+  <v-text-field
+    :model-value="localValue"
+    :type="props.type"
+    @update:modelValue="value => value !== null ? handleValueChange(value) : undefined"
+    @focus="handleStart"
+    @blur="handleEnd"
+    :disabled="disabled"
+  ></v-text-field>
+</template>
diff --git a/src/components/device/DeviceCard.vue b/src/components/device/DeviceCard.vue
index 0e0e0c8..84dce67 100644
--- a/src/components/device/DeviceCard.vue
+++ b/src/components/device/DeviceCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import DeviceIcon from "../icons/DeviceIcon.vue";
-import DeviceControl from "./DeviceControl.vue";
-import type Device from "../../model/devices/Device";
-import { onBeforeUnmount, ref } from "vue";
+import DeviceIcon from '../icons/DeviceIcon.vue';
+import DeviceControl from './DeviceControl.vue';
+import type Device from '../../model/devices/Device';
+import { onBeforeUnmount, ref } from 'vue';
 
 interface Props {
   device: Device;
@@ -27,23 +27,23 @@ const openInNewWindow = (device: Device): void => {
     return;
   }
 
-  console.log("open popup for device: " + device.deviceId);
+  console.log('open popup for device: ' + device.deviceId);
   popup = window.open(
     `${location.protocol}//${location.host}/mission-control/device/${device.deviceId}`,
-    "",
-    "width=600,height=400"
+    '',
+    'width=600,height=400'
   );
 
   if (!popup) {
     return;
   }
 
-  popup.addEventListener("load", () => {
+  popup.addEventListener('load', () => {
     if (!popup) {
       return;
     }
     popup.document.title = `${document.title}: ${props.device.deviceName}`;
-    popup.addEventListener("beforeunload", () => onPopupClose());
+    popup.addEventListener('beforeunload', () => onPopupClose());
   });
 
   isPopupOpen.value = true;
diff --git a/src/components/device/DeviceControl.vue b/src/components/device/DeviceControl.vue
index ed6fa90..fa34b90 100644
--- a/src/components/device/DeviceControl.vue
+++ b/src/components/device/DeviceControl.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from "vue";
-import type { Component } from "vue";
-import type Device from "@/model/devices/Device";
+import { computed, defineAsyncComponent } from 'vue';
+import type { Component } from 'vue';
+import type Device from '@/model/devices/Device';
 
 interface Props {
   device: Device;
@@ -18,58 +18,58 @@ const componentMap = import.meta.glob('./control/**/*.vue');
 const comp = computed<Component>(() => {
   let controlComponent: string;
 
-  if (props.device.type === "slvCtrlPlus") {
+  if (props.device.type === 'slvCtrlPlus') {
     switch (props.device.deviceModel) {
-      case "air_valve":
-        controlComponent = "slvctrlplus/DeviceAirValveControl";
+      case 'air_valve':
+        controlComponent = 'slvctrlplus/DeviceAirValveControl';
         break;
-      case "et312":
-        controlComponent = "slvctrlplus/DeviceEt312Control";
+      case 'et312':
+        controlComponent = 'slvctrlplus/DeviceEt312Control';
         break;
-      case "strikerMk2":
-        controlComponent = "slvctrlplus/DeviceStrikerMk2Control";
+      case 'strikerMk2':
+        controlComponent = 'slvctrlplus/DeviceStrikerMk2Control';
         break;
-      case "distance":
-        controlComponent = "slvctrlplus/DeviceDistanceControl";
+      case 'distance':
+        controlComponent = 'slvctrlplus/DeviceDistanceControl';
         break;
-      case "display":
-        controlComponent = "slvctrlplus/DeviceDisplayControl";
+      case 'display':
+        controlComponent = 'slvctrlplus/DeviceDisplayControl';
         break;
-      case "nogasm":
-        controlComponent = "slvctrlplus/DeviceNogasmControl";
+      case 'nogasm':
+        controlComponent = 'slvctrlplus/DeviceNogasmControl';
         break;
       default:
-        controlComponent = "GenericDeviceControl";
+        controlComponent = 'GenericDeviceControl';
     }
-  } else if (props.device.type === "buttplugIo") {
-    controlComponent = "GenericDeviceControl";
-  } else if (props.device.type === "zc95") {
-    controlComponent = "DeviceZc95Control";
-  } else if (props.device.type === "estim2b") {
-    controlComponent = "DeviceEstim2bControl";
-  } else if (props.device.type === "virtual") {
-    controlComponent = "";
+  } else if (props.device.type === 'buttplugIo') {
+    controlComponent = 'GenericDeviceControl';
+  } else if (props.device.type === 'zc95') {
+    controlComponent = 'DeviceZc95Control';
+  } else if (props.device.type === 'estim2b') {
+    controlComponent = 'DeviceEstim2bControl';
+  } else if (props.device.type === 'virtual') {
+    controlComponent = '';
     switch (props.device.deviceModel) {
-      case "display":
-        controlComponent = "virtual/DeviceVirtualDisplayControl";
+      case 'display':
+        controlComponent = 'virtual/DeviceVirtualDisplayControl';
         break;
-      case "randomGenerator":
-        controlComponent = "virtual/DeviceVirtualRandomGeneratorControl";
+      case 'randomGenerator':
+        controlComponent = 'virtual/DeviceVirtualRandomGeneratorControl';
         break;
-      case "tts":
-        controlComponent = "virtual/DeviceVirtualTtsControl";
+      case 'tts':
+        controlComponent = 'virtual/DeviceVirtualTtsControl';
         break;
-      case "piper":
-        controlComponent = "virtual/DeviceVirtualPiperTtsControl";
+      case 'piper':
+        controlComponent = 'virtual/DeviceVirtualPiperTtsControl';
         break;
       default:
-        controlComponent = "GenericDeviceControl";
+        controlComponent = 'GenericDeviceControl';
     }
   } else {
     console.log(
       `Cannot find control component for device of type ${props.device.type}, fall back to generic device control`
     );
-    controlComponent = "GenericDeviceControl";
+    controlComponent = 'GenericDeviceControl';
   }
 
   const importPath = `./control/${controlComponent}.vue`;
diff --git a/src/components/device/control/DeviceEstim2bControl.vue b/src/components/device/control/DeviceEstim2bControl.vue
index d9ba883..5b33ea1 100644
--- a/src/components/device/control/DeviceEstim2bControl.vue
+++ b/src/components/device/control/DeviceEstim2bControl.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import {isIntRangeDeviceAttribute, typedEntries} from "@/utils/utils";
+import { computed } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import {isIntRangeDeviceAttribute, typedEntries} from '@/utils/utils';
 import type {
   DeviceEstim2b,
   PatternDeviceEStim2bAttributes,
   PowerLevelDeviceEStim2bAttributes
-} from "@/model/devices/estim2b/DeviceEstim2b";
+} from '@/model/devices/estim2b/DeviceEstim2b';
 
 interface Props {
   device: DeviceEstim2b;
diff --git a/src/components/device/control/DeviceZc95Control.vue b/src/components/device/control/DeviceZc95Control.vue
index e36c062..c6e4d20 100644
--- a/src/components/device/control/DeviceZc95Control.vue
+++ b/src/components/device/control/DeviceZc95Control.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
+import { computed } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type {
   DeviceZc95,
   PatternDeviceZc95Attributes,
   PowerChannelDeviceZc95Attributes
-} from "@/model/devices/zc95/DeviceZc95";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import {isIntRangeDeviceAttribute, isListDeviceAttribute, typedEntries} from "@/utils/utils";
+} from '@/model/devices/zc95/DeviceZc95';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import {isIntRangeDeviceAttribute, isListDeviceAttribute, typedEntries} from '@/utils/utils';
 
 interface Props {
   device: DeviceZc95;
diff --git a/src/components/device/control/GenericDeviceControl.vue b/src/components/device/control/GenericDeviceControl.vue
index b1cc076..0726ff9 100644
--- a/src/components/device/control/GenericDeviceControl.vue
+++ b/src/components/device/control/GenericDeviceControl.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import type Device from "@/model/devices/Device";
-import type { DeviceAttribute } from "@/model/devices/Device";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import {hasProperty, isIntRangeDeviceAttribute, isListDeviceAttribute, typedEntries} from "@/utils/utils";
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import type Device from '@/model/devices/Device';
+import type { DeviceAttribute } from '@/model/devices/Device';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import DebouncedTextField from '@/components/device/DebouncedTextField.vue';
+import {hasProperty, isBoolDeviceAttribute, isFloatDeviceAttribute, isIntDeviceAttribute, isIntRangeDeviceAttribute, isListDeviceAttribute, isStringDeviceAttribute, typedEntries} from '@/utils/utils';
 
 interface Props {
   device: Device<Record<string, DeviceAttribute>>;
@@ -15,17 +16,21 @@ const props = defineProps<Props>();
 const io = useSocketIO() as Socket;
 
 const deviceComm = new DeviceCommunicator(props.device, io);
+
+const hasUom = (attr: DeviceAttribute): attr is DeviceAttribute & { uom: string } => {
+  return hasProperty(attr, 'uom') && typeof attr.uom === 'string';
+}
 </script>
 
 <template>
   <div :key="key" v-for="[key, attr] in typedEntries(props.device.attributes)">
     <dl>
       <dt>
-        <label>{{ attr.label ?? attr.name }}<span v-if="hasProperty(attr, 'uom') && 'string' === typeof attr.uom"> ({{ attr.uom }})</span></label>
+        <label>{{ attr.label ?? attr.name }}<span v-if="hasUom(attr)"> ({{ attr.uom }})</span></label>
       </dt>
       <dd>
         <v-switch
-          v-if="attr.type === 'bool'"
+          v-if="isBoolDeviceAttribute(attr)"
           :model-value="attr.value"
           color="primary"
           :hide-details="true"
@@ -44,17 +49,16 @@ const deviceComm = new DeviceCommunicator(props.device, io);
           :disabled="attr.modifier === 'ro'"
         ></v-select>
 
-        <v-text-field
-          v-if="
-            attr.type === 'str' || attr.type === 'float' || attr.type === 'int'
-          "
+        <DebouncedTextField
+          v-if="isStringDeviceAttribute(attr) || isFloatDeviceAttribute(attr) || isIntDeviceAttribute(attr)"
           :model-value="attr.value"
           color="primary"
           class="pa-0 ma-0"
           :type="attr.type === 'str' ? 'text' : 'number'"
           @update:modelValue="value => deviceComm.setAttribute(attr.name, value)"
           :disabled="attr.modifier === 'ro'"
-        ></v-text-field>
+          :debounce-ms="100"
+        />
 
         <DebouncedSlider
           v-if="isIntRangeDeviceAttribute(attr)"
diff --git a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
index 58a07f0..e085cf3 100644
--- a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type {DeviceAirValve} from "@/model/devices/slvctrl/DeviceAirValve";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "../../../../helper/DeviceCommunicator";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
+import type {DeviceAirValve} from '@/model/devices/slvctrl/DeviceAirValve';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
 interface Props {
   device: DeviceAirValve;
diff --git a/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue b/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue
index 9535641..1b76fda 100644
--- a/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceDisplayControl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import type {DeviceDisplay} from "@/model/devices/slvctrl/DeviceDisplay";
+import { computed } from 'vue';
+import type {DeviceDisplay} from '@/model/devices/slvctrl/DeviceDisplay';
 
 interface Props {
   device: DeviceDisplay;
@@ -19,24 +19,24 @@ const displayHtml = computed(() => {
   const contentBase64 = props.device.attributes.content.value;
 
   if (undefined === contentBase64) {
-    return "";
+    return '';
   }
 
   const content = JSON.parse(atob(contentBase64)) as DisplayElement[];
 
-  let html = "";
+  let html = '';
 
   for (const comp of content) {
-    let style = "";
-    let translateX = "0";
-    let translateY = "0";
+    let style = '';
+    let translateX = '0';
+    let translateY = '0';
 
-    if (comp.posX === "left") {
+    if (comp.posX === 'left') {
       style += ` left: 0; `;
-    } else if (comp.posX === "center") {
+    } else if (comp.posX === 'center') {
       style += ` left: 50%; `;
-      translateX = "-50%";
-    } else if (comp.posX === "right") {
+      translateX = '-50%';
+    } else if (comp.posX === 'right') {
       style += ` right: 0; `;
     } else {
       const posXNum = Number(comp.posX);
@@ -48,12 +48,12 @@ const displayHtml = computed(() => {
       }
     }
 
-    if (comp.posY === "top") {
+    if (comp.posY === 'top') {
       style += ` top: 0; `;
-    } else if (comp.posY === "center") {
+    } else if (comp.posY === 'center') {
       style += ` top: 50%; `;
-      translateY = "-50%";
-    } else if (comp.posY === "bottom") {
+      translateY = '-50%';
+    } else if (comp.posY === 'bottom') {
       style += ` bottom: 0; `;
     } else {
       const posYNum = Number(comp.posY);
diff --git a/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue b/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue
index 77b4da4..a51a976 100644
--- a/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceDistanceControl.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import StreamLineChart from "../../../chart/StreamLineChart.vue";
-import type {Chart, ChartOptions} from "chart.js";
-import ChartHelper from "@/helper/ChartHelper";
-import type {LineChartData} from "@/helper/ChartHelper";
-import { merge } from "chart.js/helpers";
-import type {DeviceDistance} from "@/model/devices/slvctrl/DeviceDistance";
+import { computed, ref } from 'vue';
+import StreamLineChart from '../../../chart/StreamLineChart.vue';
+import type {Chart, ChartOptions} from 'chart.js';
+import ChartHelper from '@/helper/ChartHelper';
+import type {LineChartData} from '@/helper/ChartHelper';
+import { merge } from 'chart.js/helpers';
+import type {DeviceDistance} from '@/model/devices/slvctrl/DeviceDistance';
 
 interface Props {
   device: DeviceDistance;
@@ -29,7 +29,7 @@ const currentDistance = computed((): number|undefined => {
 const chartData: LineChartData = {
   datasets: [
     ChartHelper.createEmptyDataSet({
-      label: "Distance",
+      label: 'Distance',
       color: { r: 0, g: 189, b: 126 },
       spanGaps: 1000,
     }),
@@ -59,7 +59,7 @@ const chartOptions = merge(
   }
 );
 
-const chartOptionsRef = ref<ChartOptions<"line">>(chartOptions);
+const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
 </script>
 
 <template>
diff --git a/src/components/device/control/slvctrlplus/DeviceEt312Control.vue b/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
index f6ebf8b..b353c0b 100644
--- a/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
+++ b/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import type {DeviceEt312} from "@/model/devices/slvctrl/DeviceEt312";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import type {DeviceEt312} from '@/model/devices/slvctrl/DeviceEt312';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
 interface Props {
   device: DeviceEt312;
@@ -18,29 +18,29 @@ const props = defineProps<Props>();
 const io = useSocketIO() as Socket;
 
 const modes: { [key: number]: string } = {
-  0x76: "Waves",
-  0x77: "Stroke",
-  0x78: "Climb",
-  0x79: "Combo",
-  0x7a: "Intense",
-  0x7b: "Rhythm",
-  0x7c: "Audio 1",
-  0x7d: "Audio 2",
-  0x7e: "Audio 3",
-  0x7f: "Split",
-  0x80: "Random 1",
-  0x81: "Random 2",
-  0x82: "Toggle",
-  0x83: "Orgasm",
-  0x84: "Torment",
-  0x85: "Phase 1",
-  0x86: "Phase 2",
-  0x87: "Phase 3",
-  0x88: "User 1",
-  0x89: "User 2",
-  0x8a: "User 3",
-  0x8b: "User 4",
-  0x8c: "User 5",
+  0x76: 'Waves',
+  0x77: 'Stroke',
+  0x78: 'Climb',
+  0x79: 'Combo',
+  0x7a: 'Intense',
+  0x7b: 'Rhythm',
+  0x7c: 'Audio 1',
+  0x7d: 'Audio 2',
+  0x7e: 'Audio 3',
+  0x7f: 'Split',
+  0x80: 'Random 1',
+  0x81: 'Random 2',
+  0x82: 'Toggle',
+  0x83: 'Orgasm',
+  0x84: 'Torment',
+  0x85: 'Phase 1',
+  0x86: 'Phase 2',
+  0x87: 'Phase 3',
+  0x88: 'User 1',
+  0x89: 'User 2',
+  0x8a: 'User 3',
+  0x8b: 'User 4',
+  0x8c: 'User 5',
 };
 
 const selectModes: SelectItem[] = [];
diff --git a/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue b/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
index 34d3557..b65f49b 100644
--- a/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import {computed, ref} from "vue";
-import StreamLineChart from "../../../chart/StreamLineChart.vue";
+import {computed, ref} from 'vue';
+import StreamLineChart from '../../../chart/StreamLineChart.vue';
 import type {
   Chart,
   Color,
   LinearScaleOptions,
   ScriptableLineSegmentContext
-} from "chart.js";
-import ChartHelper from "../../../../helper/ChartHelper";
-import type {LineChartData, LineChartOptions} from "@/helper/ChartHelper";
-import { merge } from "chart.js/helpers";
-import type {DeviceNogasm} from "@/model/devices/slvctrl/DeviceNogasm";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import {useSocketIO} from "@/plugins/vueSocketIOClient";
-import type {Socket} from "socket.io-client";
+} from 'chart.js';
+import ChartHelper from '../../../../helper/ChartHelper';
+import type {LineChartData, LineChartOptions} from '@/helper/ChartHelper';
+import { merge } from 'chart.js/helpers';
+import type {DeviceNogasm} from '@/model/devices/slvctrl/DeviceNogasm';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import {useSocketIO} from '@/plugins/vueSocketIOClient';
+import type {Socket} from 'socket.io-client';
 
 interface Props {
   device: DeviceNogasm;
@@ -30,7 +30,7 @@ const colorDeviationOk = {r: 0, g: 189, b: 126 };
 const colorDeviationNok = {r: 255, g: 152, b: 0};
 
 const thresholdDataset = ChartHelper.createEmptyDataSet({
-  label: "Threshold",
+  label: 'Threshold',
   color: colorThreshold,
   densityLine: 0.7,
   fill: false,
@@ -51,7 +51,7 @@ const dynamicLineColoring = (alpha: number) => (ctx: ScriptableLineSegmentContex
 const chartData: LineChartData = {
   datasets: [
     ChartHelper.createEmptyDataSet({
-      label: "Pressure deviation",
+      label: 'Pressure deviation',
       color: colorDeviationOk,
       segment: {
         borderColor: dynamicLineColoring(1),
diff --git a/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue b/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
index 1d6ec92..33b5dd0 100644
--- a/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
+++ b/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { reactive } from "vue";
-import type { Socket } from "socket.io-client";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import DeviceCommunicator from "@/helper/DeviceCommunicator";
-import type {DeviceStrikerMk2} from "@/model/devices/slvctrl/DeviceStrikerMk2";
-import DebouncedSlider from "@/components/device/DebouncedSlider.vue";
+import { reactive } from 'vue';
+import type { Socket } from 'socket.io-client';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import type {DeviceStrikerMk2} from '@/model/devices/slvctrl/DeviceStrikerMk2';
+import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
 interface Props {
   device: DeviceStrikerMk2;
@@ -17,7 +17,7 @@ const deviceComm = new DeviceCommunicator(props.device, io);
 const device = reactive<DeviceStrikerMk2>(props.device);
 
 const speedChangeHandler = (newSpeed: number): void => {
-  deviceComm.setAttribute("speed", newSpeed);
+  deviceComm.setAttribute('speed', newSpeed);
 };
 </script>
 
diff --git a/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue b/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue
index 59fda49..1dac6cd 100644
--- a/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualDisplayControl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import { useFullscreen, useWakeLock } from "@vueuse/core";
-import type {VirtualDeviceDisplay} from "@/model/devices/virtual/VirtualDeviceDisplay";
+import { computed, ref, watch } from 'vue';
+import { useFullscreen, useWakeLock } from '@vueuse/core';
+import type {VirtualDeviceDisplay} from '@/model/devices/virtual/VirtualDeviceDisplay';
 
 type TimerId = ReturnType<typeof setTimeout>;
 
@@ -13,7 +13,7 @@ const props = defineProps<Props>();
 
 const displayHtml = computed(() => {
   if (undefined === props.device.attributes.content.value) {
-    return "";
+    return '';
   }
   return props.device.attributes.content.value;
 });
@@ -22,7 +22,7 @@ const fullscreenElement = ref<HTMLElement | null>(null);
 
 const { isFullscreen, toggle } = useFullscreen(fullscreenElement);
 const icon = computed<string>(() =>
-  isFullscreen.value ? "mdi-fullscreen-exit" : "mdi-fullscreen"
+  isFullscreen.value ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'
 );
 
 // useWakeLock
@@ -60,7 +60,7 @@ const toggleFullscreen = (toggle: () => Promise<void>) => {
     if (isSupported.value) {
       requestWakeLock('screen');
     } else {
-      console.warn("Wake Lock API is not supported on this browser.");
+      console.warn('Wake Lock API is not supported on this browser.');
     }
   }
 };
@@ -140,9 +140,9 @@ function updateCursorVisibility() {
     !controlsVisible.value &&
     !controlsCurrentlyHovered.value
   ) {
-    fullscreenElement.value.style.cursor = "none";
+    fullscreenElement.value.style.cursor = 'none';
   } else {
-    fullscreenElement.value.style.cursor = "auto";
+    fullscreenElement.value.style.cursor = 'auto';
   }
 }
 
diff --git a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
index 2b93ff4..2fa34e4 100644
--- a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, nextTick } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "../../../../helper/DeviceCommunicator";
-import type {VirtualDevicePiperTts} from "@/model/devices/virtual/VirtualDevicePiperTts";
+import { computed, ref, nextTick } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
+import type {VirtualDevicePiperTts} from '@/model/devices/virtual/VirtualDevicePiperTts';
 
 interface Props {
   device: VirtualDevicePiperTts;
@@ -14,7 +14,7 @@ const io = useSocketIO() as Socket;
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
-const text = ref<string>(props.device.attributes.text.value ?? "");
+const text = ref<string>(props.device.attributes.text.value ?? '');
 const textAreaRef = ref();
 const queuingLabel = computed<string>(() => props.device.attributes.queuing.value
     ? 'Queuing enabled'
@@ -25,15 +25,15 @@ const sendTextHandler = (): void => {
   if (undefined === text.value || 0 === text.value.trim().length) {
     return;
   }
-  deviceComm.setAttribute("text", text.value);
-  text.value = "";
+  deviceComm.setAttribute('text', text.value);
+  text.value = '';
   nextTick(() => {
     textAreaRef.value?.focus();
   });
 };
 const changeQueuing = (newValue: boolean | null): void => {
   if (newValue !== null) {
-    deviceComm.setAttribute("queuing", newValue);
+    deviceComm.setAttribute('queuing', newValue);
   }
 };
 </script>
diff --git a/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue b/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue
index 6acc5d6..5be3745 100644
--- a/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualRandomGeneratorControl.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import type {VirtualDeviceRandomGenerator} from "@/model/devices/virtual/VirtualRandomGenerator";
+import { computed } from 'vue';
+import type {VirtualDeviceRandomGenerator} from '@/model/devices/virtual/VirtualRandomGenerator';
 
 interface Props {
   device: VirtualDeviceRandomGenerator;
@@ -10,7 +10,7 @@ const props = defineProps<Props>();
 
 const displayHtml = computed(() => {
   if (undefined === props.device.attributes.value.value) {
-    return "";
+    return '';
   }
   return props.device.attributes.value.value;
 });
diff --git a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
index fa8fdd1..b6d9393 100644
--- a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, nextTick } from "vue";
-import { useSocketIO } from "@/plugins/vueSocketIOClient";
-import type { Socket } from "socket.io-client";
-import DeviceCommunicator from "../../../../helper/DeviceCommunicator";
-import type {VirtualDeviceTts} from "@/model/devices/virtual/VirtualDeviceTts";
+import { computed, ref, nextTick } from 'vue';
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
+import type {VirtualDeviceTts} from '@/model/devices/virtual/VirtualDeviceTts';
 
 interface Props {
   device: VirtualDeviceTts;
@@ -14,32 +14,32 @@ const io = useSocketIO() as Socket;
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
-const text = ref<string>(props.device.attributes.text.value ?? "");
+const text = ref<string>(props.device.attributes.text.value ?? '');
 const textAreaRef = ref();
 const currentlySpeaking = computed<string>(() => {
   return undefined === props.device.attributes.speaking.value || !props.device.attributes.speaking.value
-    ? "no"
-    : "yes";
+    ? 'no'
+    : 'yes';
 });
 const queuingLabel = computed<string>(() => {
   return props.device.attributes.queuing.value
     ? `Queuing enabled (Queue: ${props.device.attributes.queueLength.value})`
-    : "Queuing disabled";
+    : 'Queuing disabled';
 });
 
 const sendTextHandler = (): void => {
   if (undefined === text.value || 0 === text.value.trim().length) {
     return;
   }
-  deviceComm.setAttribute("text", text.value);
-  text.value = "";
+  deviceComm.setAttribute('text', text.value);
+  text.value = '';
   nextTick(() => {
     textAreaRef.value?.focus();
   });
 };
 const changeQueuing = (newValue: boolean | null): void => {
   if (newValue !== null) {
-    deviceComm.setAttribute("queuing", newValue);
+    deviceComm.setAttribute('queuing', newValue);
   }
 };
 </script>
diff --git a/src/components/icons/DeviceIcon.vue b/src/components/icons/DeviceIcon.vue
index c844985..ac4901f 100644
--- a/src/components/icons/DeviceIcon.vue
+++ b/src/components/icons/DeviceIcon.vue
@@ -4,8 +4,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import type Device from "../../model/devices/Device";
+import { computed } from 'vue';
+import type Device from '../../model/devices/Device';
 
 interface Props {
   device: Device;
@@ -17,24 +17,24 @@ const comp = computed<string>(() => {
   let iconComponentName: string;
 
   const deviceTypeModel = `${props.device.type}${
-    props.device.type === "generic" ? `-${props.device.deviceModel}` : ""
+    props.device.type === 'generic' ? `-${props.device.deviceModel}` : ''
   }`;
 
   switch (deviceTypeModel) {
-    case "generic-air_valve":
-      iconComponentName = "mdi-fan";
+    case 'generic-air_valve':
+      iconComponentName = 'mdi-fan';
       break;
-    case "generic-et312":
-      iconComponentName = "mdi-lightning-bolt";
+    case 'generic-et312':
+      iconComponentName = 'mdi-lightning-bolt';
       break;
-    case "generic-strikerMk2":
-      iconComponentName = "mdi-swap-horizontal";
+    case 'generic-strikerMk2':
+      iconComponentName = 'mdi-swap-horizontal';
       break;
-    case "generic-distance":
-      iconComponentName = "mdi-ruler";
+    case 'generic-distance':
+      iconComponentName = 'mdi-ruler';
       break;
     default:
-      iconComponentName = "mdi-robot";
+      iconComponentName = 'mdi-robot';
       break;
   }
 
diff --git a/src/helper/ChartHelper.ts b/src/helper/ChartHelper.ts
index 4262ed1..85c612c 100644
--- a/src/helper/ChartHelper.ts
+++ b/src/helper/ChartHelper.ts
@@ -1,6 +1,6 @@
-import type {ChartData, ChartDataset, ChartOptions, LineOptions, ScatterDataPoint} from "chart.js";
-import type { Chart } from "chart.js";
-import type { RealTimeScale } from "chartjs-plugin-streaming";
+import type {ChartData, ChartDataset, ChartOptions, LineOptions, ScatterDataPoint} from 'chart.js';
+import type { Chart } from 'chart.js';
+import type { RealTimeScale } from 'chartjs-plugin-streaming';
 
 export type LineChartOptions = ChartOptions<'line'>;
 export type LineChartData = ChartData<'line'>;
@@ -38,7 +38,7 @@ export default abstract class ChartHelper {
       },
       scales: {
         x: {
-          type: "realtime",
+          type: 'realtime',
           realtime: {
             duration: duration,
             refresh: refreshMs,
@@ -64,7 +64,7 @@ export default abstract class ChartHelper {
 
   public static createEmptyDataSet(
     options: DatasetOptions
-  ): ChartDataset<"line", (number | ScatterDataPoint | null)[]> {
+  ): ChartDataset<'line', (number | ScatterDataPoint | null)[]> {
     const densityLine = options.densityLine ?? 0.5;
     const densityBackground = options.densityBackground ?? 0.1;
 
@@ -73,7 +73,7 @@ export default abstract class ChartHelper {
       pointBackgroundColor: `rgba(${options.color.r}, ${options.color.g}, ${options.color.b})`,
       backgroundColor: `rgba(${options.color.r}, ${options.color.g}, ${options.color.b}, ${densityBackground})`,
       borderColor: `rgba(${options.color.r}, ${options.color.g}, ${options.color.b}, ${densityLine})`,
-      fill: options.fill ?? "origin",
+      fill: options.fill ?? 'origin',
       tension: options.tension ?? 0.5,
       spanGaps: options.spanGaps ?? undefined,
       stack: options.stack ?? undefined,
diff --git a/src/helper/DeviceCommunicator.ts b/src/helper/DeviceCommunicator.ts
index 857d7aa..0884230 100644
--- a/src/helper/DeviceCommunicator.ts
+++ b/src/helper/DeviceCommunicator.ts
@@ -1,6 +1,5 @@
-import type { Socket } from "socket.io-client";
-import TimeoutHelper from "./TimeoutHelper";
-import type Device from "@/model/devices/Device";
+import type { Socket } from 'socket.io-client';
+import type Device from '@/model/devices/Device';
 
 type DeviceData<D extends Device> = {
   [K in keyof D['attributes']]-?: Exclude<D['attributes'][K], undefined> extends { value: infer V } ? V : never
@@ -9,17 +8,11 @@ type DeviceData<D extends Device> = {
 export default class DeviceCommunicator<T extends Device> {
   private readonly io: Socket;
 
-  private readonly timeout: TimeoutHelper;
-
   private readonly device: T;
 
   public constructor(device: T, io: Socket) {
     this.io = io;
     this.device = device;
-    this.timeout = new TimeoutHelper(
-      () => (this.device.receiveUpdates = true),
-      500
-    );
   }
 
   public setAttribute<K extends keyof T['attributes']>(attrName: K, newValue: DeviceData<T>[K] | null): void {
@@ -29,13 +22,9 @@ export default class DeviceCommunicator<T extends Device> {
       return;
     }
 
-    this.device.receiveUpdates = false;
-
-    this.io.emit("deviceUpdate", {
+    this.io.emit('deviceUpdate', {
       deviceId: this.device.deviceId,
       data: { [attrName]: newValue },
     });
-
-    this.timeout.schedule();
   }
 }
diff --git a/src/helper/TimeoutHelper.ts b/src/helper/TimeoutHelper.ts
deleted file mode 100644
index 62b7442..0000000
--- a/src/helper/TimeoutHelper.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default class TimeoutHelper {
-  private timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  private readonly handler: () => void;
-
-  private readonly timeoutMs: number;
-
-  public constructor(handler: () => void, timeoutMs: number) {
-    this.handler = handler;
-    this.timeoutMs = timeoutMs;
-  }
-
-  public schedule() {
-    if (null !== this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-
-    this.timeoutId = setTimeout(this.handler, this.timeoutMs);
-  }
-}
diff --git a/src/layouts/LayoutWithMenu.vue b/src/layouts/LayoutWithMenu.vue
index 90e75d8..b55a1b6 100644
--- a/src/layouts/LayoutWithMenu.vue
+++ b/src/layouts/LayoutWithMenu.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useAutomationStore } from "../stores/automation";
-import { storeToRefs } from "pinia";
-import { useAppStore } from "../stores/app";
+import { ref } from 'vue';
+import { useAutomationStore } from '../stores/automation';
+import { storeToRefs } from 'pinia';
+import { useAppStore } from '../stores/app';
 
 const drawer = ref(false);
 const menuItems = [
   {
-    title: "Mission Control",
-    to: "/mission-control",
-    icon: "mdi-rocket-launch",
+    title: 'Mission Control',
+    to: '/mission-control',
+    icon: 'mdi-rocket-launch',
   },
   {
-    title: "Automation",
-    to: "/automation",
-    icon: "mdi-play",
+    title: 'Automation',
+    to: '/automation',
+    icon: 'mdi-play',
   },
   {
-    title: "Devices",
-    to: "/devices",
-    icon: "mdi-devices",
+    title: 'Devices',
+    to: '/devices',
+    icon: 'mdi-devices',
   },
   {
-    title: "System health",
-    to: "/health",
-    icon: "mdi-heart",
+    title: 'System health',
+    to: '/health',
+    icon: 'mdi-heart',
   },
   {
-    title: "Settings",
-    to: "/settings",
-    icon: "mdi-cog",
+    title: 'Settings',
+    to: '/settings',
+    icon: 'mdi-cog',
   },
 ];
 
@@ -44,7 +44,7 @@ function stopScript() {
     .then(() => {
       appStore.displaySnackbar(`Script execution stopped`);
     })
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index 34073a1..765c532 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,14 +1,14 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import "vuetify/styles";
-import "@mdi/font/css/materialdesignicons.css";
-import { loadFonts } from "./plugins/webfontloader";
-import { vueSocketIOClient } from "./plugins/vueSocketIOClient.js";
-import { createPinia } from "pinia";
-import { vuetify } from "./plugins/vuetify";
-import VueFullscreen from "vue-fullscreen";
-import {useBackendStore} from "@/stores/backend";
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import 'vuetify/styles';
+import '@mdi/font/css/materialdesignicons.css';
+import { loadFonts } from './plugins/webfontloader';
+import { vueSocketIOClient } from './plugins/vueSocketIOClient.js';
+import { createPinia } from 'pinia';
+import { vuetify } from './plugins/vuetify';
+import VueFullscreen from 'vue-fullscreen';
+import {useBackendStore} from '@/stores/backend';
 
 loadFonts().catch(console.log);
 
@@ -22,4 +22,4 @@ app
   .use(router)
   .use(vuetify)
   .use(VueFullscreen)
-  .mount("#app");
+  .mount('#app');
diff --git a/src/model/MapRule.ts b/src/model/MapRule.ts
index 103d768..4b005a6 100644
--- a/src/model/MapRule.ts
+++ b/src/model/MapRule.ts
@@ -1,6 +1,6 @@
-import Rule from "./Rule.js";
-import type Device from "./devices/Device";
-import type ValueMap from "./ValueMap.js";
+import Rule from './Rule.js';
+import type Device from './devices/Device';
+import type ValueMap from './ValueMap.js';
 
 export default class MapRule extends Rule {
   public fromDevice: Device | null = null;
diff --git a/src/model/devices/Device.ts b/src/model/devices/Device.ts
index eff65d3..e14d99a 100644
--- a/src/model/devices/Device.ts
+++ b/src/model/devices/Device.ts
@@ -23,6 +23,10 @@ export interface IntDeviceAttribute<V extends number|undefined = number|undefine
    uom?: string;
 }
 
+export interface FloatDeviceAttribute<V extends number|undefined = number|undefined> extends DeviceAttribute<V> {
+   uom?: string;
+}
+
 export interface IntRangeDeviceAttribute<V extends number|undefined = number|undefined> extends IntDeviceAttribute<V> {
    min: number;
    max: number;
diff --git a/src/model/devices/estim2b/DeviceEstim2b.ts b/src/model/devices/estim2b/DeviceEstim2b.ts
index c15933b..6a75365 100644
--- a/src/model/devices/estim2b/DeviceEstim2b.ts
+++ b/src/model/devices/estim2b/DeviceEstim2b.ts
@@ -1,10 +1,10 @@
-import type Device from "../Device";
+import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute,
     StrDeviceAttribute
-} from "../Device";
+} from '../Device';
 
 export type PowerLevelDeviceEStim2bAttributes = {
     channelALevel: IntRangeDeviceAttribute,
diff --git a/src/model/devices/slvctrl/DeviceAirValve.ts b/src/model/devices/slvctrl/DeviceAirValve.ts
index e1fe178..219230b 100644
--- a/src/model/devices/slvctrl/DeviceAirValve.ts
+++ b/src/model/devices/slvctrl/DeviceAirValve.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntRangeDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntRangeDeviceAttribute } from '../Device';
 
 type DeviceAirValveAttributes = {
   flow: IntRangeDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceDisplay.ts b/src/model/devices/slvctrl/DeviceDisplay.ts
index c53a395..05f29c8 100644
--- a/src/model/devices/slvctrl/DeviceDisplay.ts
+++ b/src/model/devices/slvctrl/DeviceDisplay.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { StrDeviceAttribute } from '../Device';
 
 type DeviceDisplayAttributes = {
   content: StrDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceDistance.ts b/src/model/devices/slvctrl/DeviceDistance.ts
index a375fb7..b07e697 100644
--- a/src/model/devices/slvctrl/DeviceDistance.ts
+++ b/src/model/devices/slvctrl/DeviceDistance.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntDeviceAttribute, StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntDeviceAttribute, StrDeviceAttribute } from '../Device';
 
 type DeviceDistanceAttributes = {
   distance: IntDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceEt312.ts b/src/model/devices/slvctrl/DeviceEt312.ts
index 7951a96..3b43fde 100644
--- a/src/model/devices/slvctrl/DeviceEt312.ts
+++ b/src/model/devices/slvctrl/DeviceEt312.ts
@@ -1,9 +1,9 @@
-import type Device from "../Device";
+import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute
-} from "../Device";
+} from '../Device';
 
 type DeviceEt312Attributes = {
   connected: BoolDeviceAttribute<boolean>;
diff --git a/src/model/devices/slvctrl/DeviceNogasm.ts b/src/model/devices/slvctrl/DeviceNogasm.ts
index 84ea83c..ed050cc 100644
--- a/src/model/devices/slvctrl/DeviceNogasm.ts
+++ b/src/model/devices/slvctrl/DeviceNogasm.ts
@@ -1,6 +1,6 @@
-import type Device from "../Device"
-import type {IntRangeDeviceAttribute, ListDeviceAttribute} from "../Device";
-import type { IntDeviceAttribute } from "../Device";
+import type Device from '../Device'
+import type {IntRangeDeviceAttribute, ListDeviceAttribute} from '../Device';
+import type { IntDeviceAttribute } from '../Device';
 
 type DeviceNogasmAttributes = {
   timestampMs: IntDeviceAttribute;
diff --git a/src/model/devices/slvctrl/DeviceStrikerMk2.ts b/src/model/devices/slvctrl/DeviceStrikerMk2.ts
index b3b62c6..9c6260a 100644
--- a/src/model/devices/slvctrl/DeviceStrikerMk2.ts
+++ b/src/model/devices/slvctrl/DeviceStrikerMk2.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntRangeDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntRangeDeviceAttribute } from '../Device';
 
 type DeviceStrikerMk2Attributes = {
   speed: IntRangeDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualDeviceDisplay.ts b/src/model/devices/virtual/VirtualDeviceDisplay.ts
index e6fa0bc..f71645a 100644
--- a/src/model/devices/virtual/VirtualDeviceDisplay.ts
+++ b/src/model/devices/virtual/VirtualDeviceDisplay.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { StrDeviceAttribute } from '../Device';
 
 type VirtualDeviceDisplayAttributes = {
     content: StrDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualDevicePiperTts.ts b/src/model/devices/virtual/VirtualDevicePiperTts.ts
index cadc5ff..a521699 100644
--- a/src/model/devices/virtual/VirtualDevicePiperTts.ts
+++ b/src/model/devices/virtual/VirtualDevicePiperTts.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { BoolDeviceAttribute, StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { BoolDeviceAttribute, StrDeviceAttribute } from '../Device';
 
 type VirtualDevicePiperTtsAttributes = {
   text: StrDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualDeviceTts.ts b/src/model/devices/virtual/VirtualDeviceTts.ts
index 1e6319c..f22ed6c 100644
--- a/src/model/devices/virtual/VirtualDeviceTts.ts
+++ b/src/model/devices/virtual/VirtualDeviceTts.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { BoolDeviceAttribute, IntDeviceAttribute, StrDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { BoolDeviceAttribute, IntDeviceAttribute, StrDeviceAttribute } from '../Device';
 
 type VirtualDeviceTtsAttributes = {
   text: StrDeviceAttribute;
diff --git a/src/model/devices/virtual/VirtualRandomGenerator.ts b/src/model/devices/virtual/VirtualRandomGenerator.ts
index eadfeed..39d7956 100644
--- a/src/model/devices/virtual/VirtualRandomGenerator.ts
+++ b/src/model/devices/virtual/VirtualRandomGenerator.ts
@@ -1,5 +1,5 @@
-import type Device from "../Device";
-import type { IntDeviceAttribute } from "../Device";
+import type Device from '../Device';
+import type { IntDeviceAttribute } from '../Device';
 
 type VirtualDeviceRandomGeneratorAttributes = {
   value: IntDeviceAttribute;
diff --git a/src/model/devices/zc95/DeviceZc95.ts b/src/model/devices/zc95/DeviceZc95.ts
index b9c2c1b..628d3c3 100644
--- a/src/model/devices/zc95/DeviceZc95.ts
+++ b/src/model/devices/zc95/DeviceZc95.ts
@@ -1,10 +1,10 @@
-import type Device from "../Device";
+import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute
-} from "../Device";
-import type {AllOrNone} from "@/types";
+} from '../Device';
+import type {AllOrNone} from '@/types';
 
 type RequiredDeviceZc95Attributes = {
     activePattern: ListDeviceAttribute<number, string>;
diff --git a/src/plugins/vueSocketIOClient.ts b/src/plugins/vueSocketIOClient.ts
index d2c5f08..7828d65 100644
--- a/src/plugins/vueSocketIOClient.ts
+++ b/src/plugins/vueSocketIOClient.ts
@@ -1,17 +1,17 @@
-import type { App, InjectionKey, Plugin } from "vue";
-import { inject } from "vue";
+import type { App, InjectionKey, Plugin } from 'vue';
+import { inject } from 'vue';
 import {
   io,
   type ManagerOptions,
   Socket,
   type SocketOptions,
-} from "socket.io-client";
+} from 'socket.io-client';
 
 interface SocketPluginOptions extends Partial<ManagerOptions & SocketOptions> {
   connection: string;
 }
 
-const injectionKey: InjectionKey<Socket> = Symbol("socketIO");
+const injectionKey: InjectionKey<Socket> = Symbol('socketIO');
 
 export const useSocketIO = () => inject(injectionKey, null);
 
@@ -19,7 +19,7 @@ export const vueSocketIOClient: Plugin = {
   install: async (app: App, options: SocketPluginOptions): Promise<void> => {
     const socketIO = io(options.connection, options);
 
-    socketIO.on("connect", () => {
+    socketIO.on('connect', () => {
       console.log(`WebSocket connection established: ${socketIO.id}`);
     });
 
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 8aaff9a..9da8341 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -1,45 +1,45 @@
 // Styles
-import "@mdi/font/css/materialdesignicons.css";
-import "vuetify/styles";
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
 
 // Vuetify
-import { createVuetify } from "vuetify";
-import type { App, Plugin } from "vue";
-import * as components from "vuetify/components";
-import * as directives from "vuetify/directives";
-import { aliases, mdi } from "vuetify/iconsets/mdi";
+import { createVuetify } from 'vuetify';
+import type { App, Plugin } from 'vue';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
 
 const dark = {
   dark2: true,
   colors: {
-    primary: "#00BD7E",
-    "primary-darken-1": "#008055",
-    "primary-darken-2": "#004d33",
-    "primary-darken-3": "#094732",
-    secondary: "#03DAC6",
-    "secondary-darken-1": "#018786",
-    error: "#B00020",
-    info: "#2196F3",
-    success: "#4CAF50",
-    warning: "#FB8C00",
-    logo: "#eee",
+    primary: '#00BD7E',
+    'primary-darken-1': '#008055',
+    'primary-darken-2': '#004d33',
+    'primary-darken-3': '#094732',
+    secondary: '#03DAC6',
+    'secondary-darken-1': '#018786',
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+    logo: '#eee',
   },
 };
 
 const light = {
   dark: false,
   colors: {
-    primary: "#00BD7E",
-    "primary-darken-1": "#008055",
-    "primary-darken-2": "#004d33",
-    "primary-darken-3": "#094732",
-    secondary: "#03DAC6",
-    "secondary-darken-1": "#018786",
-    error: "#B00020",
-    info: "#2196F3",
-    success: "#4CAF50",
-    warning: "#FB8C00",
-    logo: "#222",
+    primary: '#00BD7E',
+    'primary-darken-1': '#008055',
+    'primary-darken-2': '#004d33',
+    'primary-darken-3': '#094732',
+    secondary: '#03DAC6',
+    'secondary-darken-1': '#018786',
+    error: '#B00020',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+    logo: '#222',
   },
 };
 
@@ -49,14 +49,14 @@ export const vuetify: Plugin = {
       components,
       directives,
       icons: {
-        defaultSet: "mdi",
+        defaultSet: 'mdi',
         aliases,
         sets: {
           mdi,
         },
       },
       theme: {
-        defaultTheme: "dark",
+        defaultTheme: 'dark',
         themes: {
           dark,
           light,
diff --git a/src/plugins/webfontloader.ts b/src/plugins/webfontloader.ts
index e86aa7d..51caf7e 100644
--- a/src/plugins/webfontloader.ts
+++ b/src/plugins/webfontloader.ts
@@ -6,12 +6,12 @@
 
 export async function loadFonts() {
   const webFontLoader = await import(
-    /* webpackChunkName: "webfontloader" */ "webfontloader"
+    /* webpackChunkName: "webfontloader" */ 'webfontloader'
   );
 
   webFontLoader.load({
     google: {
-      families: ["Roboto:100,300,400,500,700,900&display=swap"],
+      families: ['Roboto:100,300,400,500,700,900&display=swap'],
     },
   });
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 12bf0d8..54aaadf 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,62 +1,62 @@
-import { createRouter, createWebHistory } from "vue-router";
-import LayoutWithMenu from "../layouts/LayoutWithMenu.vue";
-import {useBackendStore} from "@/stores/backend";
+import { createRouter, createWebHistory } from 'vue-router';
+import LayoutWithMenu from '../layouts/LayoutWithMenu.vue';
+import {useBackendStore} from '@/stores/backend';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: "/",
-      name: "welcome",
+      path: '/',
+      name: 'welcome',
       components: {
-        default: () => import("../views/WelcomeView.vue"),
+        default: () => import('../views/WelcomeView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/mission-control",
-      name: "mission-control",
+      path: '/mission-control',
+      name: 'mission-control',
       components: {
-        default: () => import("../views/MissionControlView.vue"),
+        default: () => import('../views/MissionControlView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/mission-control/device/:id",
-      component: () => import("../views/MissionControlSingleView.vue"),
+      path: '/mission-control/device/:id',
+      component: () => import('../views/MissionControlSingleView.vue'),
     },
     {
-      path: "/automation",
-      name: "automation",
+      path: '/automation',
+      name: 'automation',
       components: {
-        default: () => import("../views/AutomationView.vue"),
+        default: () => import('../views/AutomationView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/devices",
-      name: "devices",
+      path: '/devices',
+      name: 'devices',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       components: {
-        default: () => import("../views/DevicesView.vue"),
+        default: () => import('../views/DevicesView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/health",
-      name: "health",
+      path: '/health',
+      name: 'health',
       components: {
-        default: () => import("../views/SystemHealthView.vue"),
+        default: () => import('../views/SystemHealthView.vue'),
         layout: LayoutWithMenu,
       },
     },
     {
-      path: "/settings",
-      name: "serverSettings",
+      path: '/settings',
+      name: 'serverSettings',
       components: {
-        default: () => import("../views/SettingsView.vue"),
+        default: () => import('../views/SettingsView.vue'),
         layout: LayoutWithMenu,
       },
     },
@@ -69,7 +69,7 @@ const router = createRouter({
       path: '/:pathMatch(.*)*',
       name: 'not-found',
       components: {
-        default: () => import("../views/NotFoundView.vue"),
+        default: () => import('../views/NotFoundView.vue'),
         layout: LayoutWithMenu,
       },
     },
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index ef2e3a1..b52c925 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,8 +1,8 @@
-declare module "*.vue";
-declare module "*.js";
-import type { Socket } from "socket.io-client";
+declare module '*.vue';
+declare module '*.js';
+import type { Socket } from 'socket.io-client';
 
-declare module "@vue/runtime-core" {
+declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     $socket: Socket;
   }
diff --git a/src/shims-vuetify.d.ts b/src/shims-vuetify.d.ts
index edeacab..0b620dd 100644
--- a/src/shims-vuetify.d.ts
+++ b/src/shims-vuetify.d.ts
@@ -1,3 +1,3 @@
-declare module "vuetify";
-declare module "vuetify/lib/components";
-declare module "vuetify/lib/directives";
+declare module 'vuetify';
+declare module 'vuetify/lib/components';
+declare module 'vuetify/lib/directives';
diff --git a/src/stores/app.ts b/src/stores/app.ts
index 09a7612..4997b81 100644
--- a/src/stores/app.ts
+++ b/src/stores/app.ts
@@ -1,5 +1,5 @@
-import { defineStore } from "pinia";
-import { reactive } from "vue";
+import { defineStore } from 'pinia';
+import { reactive } from 'vue';
 
 export type AppState = {
   snackbar: {
@@ -16,19 +16,19 @@ export type AppState = {
   getVersion(): string;
 };
 
-export const useAppStore = defineStore("app", (): AppState => {
+export const useAppStore = defineStore('app', (): AppState => {
   // reactive state
-  const snackbar = reactive<AppState["snackbar"]>({
+  const snackbar = reactive<AppState['snackbar']>({
     display: false,
-    text: "",
-    color: "primary",
+    text: '',
+    color: 'primary',
     timeout: 5000,
   });
 
   // actions
   function displaySnackbar(
       text: string,
-      color: string = "primary",
+      color: string = 'primary',
       timeout: number = 5000
   ): void {
     snackbar.text = text;
diff --git a/src/stores/automation.ts b/src/stores/automation.ts
index 6de6182..76c909f 100644
--- a/src/stores/automation.ts
+++ b/src/stores/automation.ts
@@ -1,7 +1,7 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import type AutomationScript from "../model/AutomationScript";
-import {apiFetch} from "@/utils/apiFetch";
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import type AutomationScript from '../model/AutomationScript';
+import {apiFetch} from '@/utils/apiFetch';
 
 const defaultCode = `// Write your automation here. The script will fire on device events:
 //
@@ -14,7 +14,7 @@ const defaultCode = `// Write your automation here. The script will fire on devi
 // variable. To access other devices you can use the global variable "devices" -> devices.getById(\`{device uuid}\`)
 `;
 
-export const useAutomationStore = defineStore("automation", () => {
+export const useAutomationStore = defineStore('automation', () => {
     // State
     const scripts = ref<AutomationScript[]>([]);
     const currentScriptName = ref<string | null>(null);
@@ -47,7 +47,7 @@ export const useAutomationStore = defineStore("automation", () => {
         data.items.forEach((v: AutomationScript) => {
             scripts.value.push(v);
         });
-        console.log("List of scripts updated");
+        console.log('List of scripts updated');
         return scripts.value;
     }
 
@@ -65,11 +65,11 @@ export const useAutomationStore = defineStore("automation", () => {
     }
 
     async function saveScript(): Promise<void> {
-        if (!currentScriptName.value) throw new Error("No script selected to save");
+        if (!currentScriptName.value) throw new Error('No script selected to save');
 
         const response = await apiFetch(`/automation/scripts/${currentScriptName.value}`, {
-            headers: { "Content-Type": "text/plain" },
-            method: "POST",
+            headers: { 'Content-Type': 'text/plain' },
+            method: 'POST',
             body: currentCode.value,
         });
         if (response.status !== 201) {
@@ -79,8 +79,8 @@ export const useAutomationStore = defineStore("automation", () => {
 
     async function deleteScript(scriptName: string): Promise<void> {
         const response = await apiFetch(`/automation/scripts/${scriptName}`, {
-            headers: { "Content-Type": "text/plain" },
-            method: "DELETE",
+            headers: { 'Content-Type': 'text/plain' },
+            method: 'DELETE',
         });
         if (response.status !== 204) {
             throw new Error(`Could not delete script "${scriptName}": ${response.statusText}`);
@@ -89,8 +89,8 @@ export const useAutomationStore = defineStore("automation", () => {
 
     async function runScript(): Promise<void> {
         const response = await apiFetch(`/automation/run`, {
-            headers: { "Content-Type": "text/plain" },
-            method: "POST",
+            headers: { 'Content-Type': 'text/plain' },
+            method: 'POST',
             body: currentCode.value,
         });
         if (response.status !== 200) {
diff --git a/src/stores/backend.ts b/src/stores/backend.ts
index a8f04b4..a1628b4 100644
--- a/src/stores/backend.ts
+++ b/src/stores/backend.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from "vue";
+import { ref } from 'vue';
 
 
 export const useBackendStore = defineStore('backend', () => {
@@ -29,7 +29,7 @@ export const useBackendStore = defineStore('backend', () => {
             localStorage.setItem(backendUrlLocalStoreName, url);
             backendUrl.value = url;
         } catch (error) {
-            console.error("Error setting backend URL:", error);
+            console.error('Error setting backend URL:', error);
         }
 
         if (!history.value.includes(url)) {
@@ -42,7 +42,7 @@ export const useBackendStore = defineStore('backend', () => {
             try {
                 localStorage.setItem(historyLocalStoreName, JSON.stringify(history.value));
             } catch (error) {
-                console.error("Error saving backend history:", error);
+                console.error('Error saving backend history:', error);
             }
         }
     }
@@ -54,7 +54,7 @@ export const useBackendStore = defineStore('backend', () => {
             wasServerEverOnline.value = false;
             isServerOnline.value = false;
         } catch (error) {
-            console.error("Error clearing backend URL:", error);
+            console.error('Error clearing backend URL:', error);
         }
     }
 
@@ -69,7 +69,7 @@ export const useBackendStore = defineStore('backend', () => {
         try {
             localStorage.setItem(historyLocalStoreName, JSON.stringify(history.value));
         } catch (error) {
-            console.error("Error saving backend history:", error);
+            console.error('Error saving backend history:', error);
         }
     }
 
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
index 25a3224..fb2e03e 100644
--- a/src/stores/devices.ts
+++ b/src/stores/devices.ts
@@ -1,9 +1,9 @@
-import { defineStore } from "pinia";
-import { ref, reactive, computed } from "vue";
-import {apiFetch} from "@/utils/apiFetch";
-import type Device from "@/model/devices/Device";
+import { defineStore } from 'pinia';
+import { ref, reactive, computed } from 'vue';
+import {apiFetch} from '@/utils/apiFetch';
+import type Device from '@/model/devices/Device';
 
-export const useDevicesStore = defineStore("devices", () => {
+export const useDevicesStore = defineStore('devices', () => {
   // State: use reactive for objects, ref for primitives
   const devices = reactive<{ [key: string]: Device }>({});
   const devicesLoaded = ref(false);
@@ -47,11 +47,18 @@ export const useDevicesStore = defineStore("devices", () => {
     }
   }
 
+  function clear() {
+    for (const key in devices) {
+      delete devices[key];
+    }
+  }
+
   return {
     devices,
     devicesLoaded,
     deviceList,
     init,
+    clear,
     removeDevice,
     addDevice,
     updateDevice,
diff --git a/src/stores/health.ts b/src/stores/health.ts
index 595bdb6..bd179b9 100644
--- a/src/stores/health.ts
+++ b/src/stores/health.ts
@@ -1,9 +1,9 @@
-import { defineStore } from "pinia";
-import { ref, reactive, type Ref } from "vue";
-import type { ChartData } from "chart.js";
-import ChartHelper from "../helper/ChartHelper";
-import { useBackendStore } from "@/stores/backend";
-import { apiFetch } from "@/utils/apiFetch";
+import { defineStore } from 'pinia';
+import { ref, reactive, type Ref } from 'vue';
+import type { ChartData } from 'chart.js';
+import ChartHelper from '../helper/ChartHelper';
+import { useBackendStore } from '@/stores/backend';
+import { apiFetch } from '@/utils/apiFetch';
 
 interface SystemInfo {
   process: {
@@ -39,9 +39,9 @@ interface SystemInfo {
 }
 
 type HealthChartData = {
-  processMemory: ChartData<"line">;
-  systemCpu: ChartData<"line">;
-  systemMemory: ChartData<"line">;
+  processMemory: ChartData<'line'>;
+  systemCpu: ChartData<'line'>;
+  systemMemory: ChartData<'line'>;
 }
 
 type HealthStore = {
@@ -50,7 +50,7 @@ type HealthStore = {
   init: () => void;
 };
 
-export const useHealthStore = defineStore("health", (): HealthStore => {
+export const useHealthStore = defineStore('health', (): HealthStore => {
   // state refs/reactive
   const state = ref<SystemInfo | undefined>(undefined);
 
@@ -59,38 +59,38 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
     processMemory: {
       datasets: [
         ChartHelper.createEmptyDataSet({
-          label: "Resident Set Size",
+          label: 'Resident Set Size',
           color: { r: 0, g: 189, b: 126 },
           tension: 0,
         }),
         ChartHelper.createEmptyDataSet({
-          label: "Heap total", color: { r: 0, g: 189, b: 126 }, tension: 0,
+          label: 'Heap total', color: { r: 0, g: 189, b: 126 }, tension: 0,
         }),
         ChartHelper.createEmptyDataSet({
-          label: "Heap used",
+          label: 'Heap used',
           color: { r: 204, g: 0, b: 0 },
           tension: 0,
         }),
       ],
-    } as ChartData<"line">,
+    } as ChartData<'line'>,
     systemCpu: {
       datasets: [
         ChartHelper.createEmptyDataSet({
-          label: "Percentage",
+          label: 'Percentage',
           color: { r: 0, g: 189, b: 126 },
           tension: 0,
         }),
       ],
-    } as ChartData<"line">,
+    } as ChartData<'line'>,
     systemMemory: {
       datasets: [
         ChartHelper.createEmptyDataSet({
-          label: "Percentage",
+          label: 'Percentage',
           color: { r: 0, g: 189, b: 126 },
           tension: 0,
         }),
       ],
-    } as ChartData<"line">,
+    } as ChartData<'line'>,
   });
 
   // actions
@@ -104,7 +104,7 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
 
       const response = await apiFetch(`/health`);
       state.value = await response.json();
-    }, 500);
+    }, 3000);
 
     setInterval(() => {
       if (!backendStore.isServerOnline || !chartData || !state.value) {
@@ -133,7 +133,7 @@ export const useHealthStore = defineStore("health", (): HealthStore => {
         x: Date.now(),
         y: Number(state.value.system.memory.usedMemPercentage.toFixed(2)),
       });
-    }, 425);
+    }, 1000);
   }
 
   return {
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 9b4f0ba..5863e3e 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,6 +1,6 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
-import { apiFetch } from "@/utils/apiFetch";
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { apiFetch } from '@/utils/apiFetch';
 
 type ValidationErrors = {
   message: string;
@@ -14,10 +14,10 @@ type ValidationError = {
     keyword: string;
 }
 
-export const useSettingsStore = defineStore("serverSettings", () => {
+export const useSettingsStore = defineStore('serverSettings', () => {
   // state as refs
-  const theme = ref("dark");
-  const serverSettings = ref("");
+  const theme = ref('dark');
+  const serverSettings = ref('');
   const validationErrors = ref<ValidationErrors|null>(null);
 
   // actions
@@ -27,8 +27,8 @@ export const useSettingsStore = defineStore("serverSettings", () => {
 
   async function saveServerSettings(): Promise<void> {
     const response = await apiFetch(`/settings`, {
-      headers: { "Content-Type": "application/json", "Accept": "application/json" },
-      method: "PUT",
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      method: 'PUT',
       body: serverSettings.value,
     });
     if (response.status !== 200) {
diff --git a/src/utils/apiFetch.ts b/src/utils/apiFetch.ts
index 27444cf..7812302 100644
--- a/src/utils/apiFetch.ts
+++ b/src/utils/apiFetch.ts
@@ -1,5 +1,5 @@
 import { useBackendStore } from '@/stores/backend';
-import { useAppStore } from "@/stores/app";
+import { useAppStore } from '@/stores/app';
 
 export async function apiFetch(path: string, options?: RequestInit): Promise<Response> {
     const backendStore = useBackendStore();
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e44c372..ee9201a 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,4 +1,4 @@
-import type {IntRangeDeviceAttribute, ListDeviceAttribute} from "@/model/devices/Device";
+import type {BoolDeviceAttribute, FloatDeviceAttribute, IntDeviceAttribute, IntRangeDeviceAttribute, ListDeviceAttribute, StrDeviceAttribute} from '@/model/devices/Device';
 
 type StringKey<T> = Extract<keyof T, string>;
 
@@ -28,6 +28,22 @@ export const isListDeviceAttribute = (obj: object): obj is ListDeviceAttribute<n
     return hasType(obj, 'list');
 }
 
+export const isStringDeviceAttribute = (obj: object): obj is StrDeviceAttribute => {
+    return hasType(obj, 'str') || hasType(obj, 'float') || hasType(obj, 'int');
+}
+
+export const isIntDeviceAttribute = (obj: object): obj is IntDeviceAttribute => {
+    return hasType(obj, 'int');
+}
+
+export const isFloatDeviceAttribute = (obj: object): obj is FloatDeviceAttribute => {
+    return hasType(obj, 'float');
+}
+
+export const isBoolDeviceAttribute = (obj: object): obj is BoolDeviceAttribute => {
+    return hasType(obj, 'bool');
+}
+
 export const hasType = (obj: unknown, expectedType: string): boolean => {
     return (
         typeof obj === 'object' &&
diff --git a/src/views/AutomationView.vue b/src/views/AutomationView.vue
index 70f840b..c6e7a4a 100644
--- a/src/views/AutomationView.vue
+++ b/src/views/AutomationView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useAutomationStore } from "@/stores/automation";
-import { storeToRefs } from "pinia";
-import {computed, defineAsyncComponent, ref} from "vue";
-import { useAppStore } from "@/stores/app";
-import CreateForm from "@/components/automation/CreateForm.vue";
-import type AutomationScript from "@/model/AutomationScript";
-import LogViewer from "@/components/automation/LogViewer.vue";
-import {useBackendStore} from "@/stores/backend";
+import { useAutomationStore } from '@/stores/automation';
+import { storeToRefs } from 'pinia';
+import {computed, defineAsyncComponent, ref} from 'vue';
+import { useAppStore } from '@/stores/app';
+import CreateForm from '@/components/automation/CreateForm.vue';
+import type AutomationScript from '@/model/AutomationScript';
+import LogViewer from '@/components/automation/LogViewer.vue';
+import {useBackendStore} from '@/stores/backend';
 
 const MonacoEditor = defineAsyncComponent(() => import('@/components/automation/MonacoEditor.vue'));
 
@@ -25,15 +25,15 @@ const {
 const button = computed(() => {
   if (scriptRunning.value) {
     return {
-      label: "stop",
-      color: "red",
-      icon: "mdi-stop",
+      label: 'stop',
+      color: 'red',
+      icon: 'mdi-stop',
     };
   } else {
     return {
-      label: "run",
-      color: "primary",
-      icon: "mdi-play",
+      label: 'run',
+      color: 'primary',
+      icon: 'mdi-play',
     };
   }
 });
@@ -45,14 +45,14 @@ async function runScript(): Promise<void> {
       .then(() => {
         appStore.displaySnackbar(`Script execution started`);
       })
-      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
   } else {
     automationStore
       .stopScript()
       .then(() => {
         appStore.displaySnackbar(`Script execution stopped`);
       })
-      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+      .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
   }
 }
 
@@ -68,13 +68,13 @@ async function saveScript(): Promise<void> {
   automationStore
     .saveScript()
     .then(() => appStore.displaySnackbar(`Automation script "${currentScriptName.value}" saved`))
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 
 function changeScript(newScriptName: string): void {
   automationStore
     .fetchScript(newScriptName)
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 
 function deleteScript(): void {
@@ -88,10 +88,10 @@ function deleteScript(): void {
         currentCode.value = automationStore.getDefaultCode();
       }
 
-      itemKeyDelete.value = "";
+      itemKeyDelete.value = '';
       showDeleteDialog.value = false;
     })
-    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, "red"));
+    .catch((e: Error) => appStore.displaySnackbar(`${e.message}`, 'red'));
 }
 
 function displayDeleteDialog(scriptName: string): void {
@@ -114,7 +114,7 @@ const selectOptions = computed(() =>
 const showCreateDialog = ref(false);
 const showDeleteDialog = ref(false);
 const showLogDialog = ref(false);
-const itemKeyDelete = ref("");
+const itemKeyDelete = ref('');
 </script>
 
 <template>
diff --git a/src/views/BackendUrl.vue b/src/views/BackendUrl.vue
index 2676c5c..597af2d 100644
--- a/src/views/BackendUrl.vue
+++ b/src/views/BackendUrl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useBackendStore } from '@/stores/backend'
-import { useAppStore } from "@/stores/app";
+import { useAppStore } from '@/stores/app';
 
 const validForm = ref(false);
 
@@ -11,13 +11,13 @@ const backendInput = ref('')
 const history = backendStore.history
 
 const serverUrlRules = [
-  (v: string) => !!v || "Server URL is required",
+  (v: string) => !!v || 'Server URL is required',
   (v: string) =>
-      /^https?:\/\/.+/.test(v) || "Server URL must start with http(s)://",
-  (v: string) => /[^/]$/.test(v) || "Server URL must not end in a /",
+      /^https?:\/\/.+/.test(v) || 'Server URL must start with http(s)://',
+  (v: string) => /[^/]$/.test(v) || 'Server URL must not end in a /',
   (v: string) =>
-      v.length >= 10 || "Server URL must be at least 10 characters long",
-  (v: string) => /^https?:\/\/[^\/?#]+$/.test(v) || "Server URL must not have a path or query",
+      v.length >= 10 || 'Server URL must be at least 10 characters long',
+  (v: string) => /^https?:\/\/[^\/?#]+$/.test(v) || 'Server URL must not have a path or query',
 ];
 
 function connect() {
diff --git a/src/views/DevicesView.vue b/src/views/DevicesView.vue
index 0f97d11..a106d6d 100644
--- a/src/views/DevicesView.vue
+++ b/src/views/DevicesView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import LoadingState from "@/components/LoadingState.vue";
-import { useDevicesStore } from "@/stores/devices";
-import { storeToRefs } from "pinia";
-import EmptyState from "@/components/EmptyState.vue";
-import DeviceInfo from "@/components/DeviceInfo.vue";
+import LoadingState from '@/components/LoadingState.vue';
+import { useDevicesStore } from '@/stores/devices';
+import { storeToRefs } from 'pinia';
+import EmptyState from '@/components/EmptyState.vue';
+import DeviceInfo from '@/components/DeviceInfo.vue';
 
 const devicesStore = useDevicesStore();
 const { deviceList, devicesLoaded } = storeToRefs(devicesStore);
diff --git a/src/views/MissionControlSingleView.vue b/src/views/MissionControlSingleView.vue
index b89fd6d..9c6efc6 100644
--- a/src/views/MissionControlSingleView.vue
+++ b/src/views/MissionControlSingleView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import LoadingState from "../components/LoadingState.vue";
-import { useDevicesStore } from "@/stores/devices.js";
-import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
-import {ref, watch, nextTick} from "vue";
-import type { ComponentPublicInstance } from "vue";
-import type Device from "@/model/devices/Device";
-import DeviceCard from "@/components/device/DeviceCard.vue";
+import LoadingState from '../components/LoadingState.vue';
+import { useDevicesStore } from '@/stores/devices.js';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import {ref, watch, nextTick} from 'vue';
+import type { ComponentPublicInstance } from 'vue';
+import type Device from '@/model/devices/Device';
+import DeviceCard from '@/components/device/DeviceCard.vue';
 
 const devicesStore = useDevicesStore();
 const { devicesLoaded, deviceList } = storeToRefs(devicesStore);
@@ -24,7 +24,7 @@ function resizeToContent() {
       }
       const el = containerRef.value.$el;
       // Temporarily remove fill-height and d-flex classes
-      const removedClasses = removeClasses(el, ["fill-height", "d-flex"]);
+      const removedClasses = removeClasses(el, ['fill-height', 'd-flex']);
       // Measure height
       const height = el.scrollHeight;
       const browserOverheadHeight = window.outerHeight - window.innerHeight;
diff --git a/src/views/MissionControlView.vue b/src/views/MissionControlView.vue
index c75d933..5b5ea0b 100644
--- a/src/views/MissionControlView.vue
+++ b/src/views/MissionControlView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import LoadingState from "@/components/LoadingState.vue";
-import { useDevicesStore } from "@/stores/devices";
-import EmptyState from "@/components/EmptyState.vue";
-import DeviceCard from "@/components/device/DeviceCard.vue";
+import { storeToRefs } from 'pinia';
+import LoadingState from '@/components/LoadingState.vue';
+import { useDevicesStore } from '@/stores/devices';
+import EmptyState from '@/components/EmptyState.vue';
+import DeviceCard from '@/components/device/DeviceCard.vue';
 
 const devicesStore = useDevicesStore();
 const { devicesLoaded, deviceList } = storeToRefs(devicesStore);
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 6d29c43..440b253 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import {defineAsyncComponent, nextTick, ref, watch} from "vue";
-import { useSettingsStore } from "@/stores/settings";
-import { useAppStore } from "@/stores/app";
-import { storeToRefs } from "pinia";
-import type * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-import {useBackendStore} from "@/stores/backend";
+import {defineAsyncComponent, nextTick, ref, watch} from 'vue';
+import { useSettingsStore } from '@/stores/settings';
+import { useAppStore } from '@/stores/app';
+import { storeToRefs } from 'pinia';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import {useBackendStore} from '@/stores/backend';
 
 // Load Monaco Editor asynchronously for performance reasons
 const MonacoEditor = defineAsyncComponent(() => import('monaco-editor-vue3'));
 
-const tab = ref("tab-ui");
+const tab = ref('tab-ui');
 
 const validUserInterfaceFrom = ref(false);
 
@@ -42,20 +42,20 @@ function editorWillMount(monacoInstance: typeof monaco): void {
 function storeEditorInstance(
   editor: monaco.editor.IStandaloneCodeEditor
 ): void {
-  const container = document.getElementById("monaco-wrapper");
+  const container = document.getElementById('monaco-wrapper');
 
   if (container) {
     const rect = container.getBoundingClientRect();
     editor.layout({ width: rect.width, height: rect.height });
   }
 
-  window.addEventListener("resize", () => {
+  window.addEventListener('resize', () => {
     // make editor as small as possible
     editor.layout({ width: 0, height: 0 });
 
     // wait for next frame to ensure last layout finished
     window.requestAnimationFrame(() => {
-      const monacoElement = document.getElementById("monaco-wrapper");
+      const monacoElement = document.getElementById('monaco-wrapper');
 
       if (null === editor || null === monacoElement) {
         return;
@@ -72,7 +72,7 @@ function storeEditorInstance(
 function saveServerSettings(): void {
   settingsStore.saveServerSettings()
       .then(() => appStore.displaySnackbar(`Server settings saved`))
-      .catch((err: Error) => appStore.displaySnackbar(`Sever settings could not be saved: ${err.message}`, "red"));
+      .catch((err: Error) => appStore.displaySnackbar(`Sever settings could not be saved: ${err.message}`, 'red'));
 }
 
 function clearBackendUrl(): void {
diff --git a/src/views/SystemHealthView.vue b/src/views/SystemHealthView.vue
index 0baf3b9..2a86b8c 100644
--- a/src/views/SystemHealthView.vue
+++ b/src/views/SystemHealthView.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ChartOptions } from "chart.js";
-import ChartHelper from "@/helper/ChartHelper.js";
-import { merge } from "chart.js/helpers";
-import StreamLineChart from "@/components/chart/StreamLineChart.vue";
-import LoadingState from "@/components/LoadingState.vue";
-import { computed, ref, toRaw } from "vue";
-import moment from "moment";
-import { storeToRefs } from "pinia";
-import { useHealthStore } from "@/stores/health";
+import type { ChartOptions } from 'chart.js';
+import ChartHelper from '@/helper/ChartHelper.js';
+import { merge } from 'chart.js/helpers';
+import StreamLineChart from '@/components/chart/StreamLineChart.vue';
+import LoadingState from '@/components/LoadingState.vue';
+import { computed, ref, toRaw } from 'vue';
+import moment from 'moment';
+import { storeToRefs } from 'pinia';
+import { useHealthStore } from '@/stores/health';
 
 const healthStore = useHealthStore();
 const { state, chartData } = storeToRefs(healthStore);
@@ -44,24 +44,24 @@ const chartOptionsSystemCpu = merge(
   getScales(0, 100)
 );
 
-const chartOptionsProcessMemoryRef = ref<ChartOptions<"line">>(
+const chartOptionsProcessMemoryRef = ref<ChartOptions<'line'>>(
   chartOptionsProcessMemory
 );
 
-const chartOptionsSystemMemoryRef = ref<ChartOptions<"line">>(
+const chartOptionsSystemMemoryRef = ref<ChartOptions<'line'>>(
   chartOptionsSystemMemory
 );
 
-const chartOptionsSystemCpuRef = ref<ChartOptions<"line">>(
+const chartOptionsSystemCpuRef = ref<ChartOptions<'line'>>(
   chartOptionsSystemCpu
 );
 
 const uptime = computed(() => {
   if (healthStore.state === undefined) {
-    return "calculating...";
+    return 'calculating...';
   }
 
-  return moment.duration(healthStore.state.system.uptime, "seconds").humanize();
+  return moment.duration(healthStore.state.system.uptime, 'seconds').humanize();
 });
 </script>
 
diff --git a/src/vueSocketIOClient.d.ts b/src/vueSocketIOClient.d.ts
index b297940..003ff40 100644
--- a/src/vueSocketIOClient.d.ts
+++ b/src/vueSocketIOClient.d.ts
@@ -1,6 +1,6 @@
-import { Socket } from "socket.io-client";
+import { Socket } from 'socket.io-client';
 
-declare module "@vue/runtime-core" {
+declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $socket: typeof Socket;
   }
diff --git a/vite.config.ts b/vite.config.ts
index d7c1261..c8e1591 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,9 @@
 import path from 'path';
 
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import vueJsx from "@vitejs/plugin-vue-jsx";
-import monacoEditorPlugin from "vite-plugin-monaco-editor-esm";
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import monacoEditorPlugin from 'vite-plugin-monaco-editor-esm';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,7 +14,7 @@ export default defineConfig({
     vue(),
     vueJsx(),
     monacoEditorPlugin({
-      languageWorkers: ["editorWorkerService", "json", "typescript"],
+      languageWorkers: ['editorWorkerService', 'json', 'typescript'],
     }),
   ],
   resolve: {
diff --git a/vue.config.js b/vue.config.js
index b9df550..93ec4fa 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,4 @@
-import { defineConfig } from "@vue/cli-service";
+import { defineConfig } from '@vue/cli-service';
 module.exports = defineConfig({
   pluginOptions: {
     vuetify: {

From 61d405e7409d8679b5935308da3a1f74d22ab293 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Mon, 16 Mar 2026 18:41:44 +0100
Subject: [PATCH 02/12] Make double quotes report as error

---
 eslint.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint.config.ts b/eslint.config.ts
index db457bb..3578bce 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -25,7 +25,7 @@ export default defineConfigWithVueTs(
     },
     {
       rules: {
-        'quotes': ['warn', 'single', { 'allowTemplateLiterals': true }],
+        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
       },
     },
 )

From da50c69f1a82947dbac409992266e10383083dfe Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sun, 29 Mar 2026 13:01:08 +0200
Subject: [PATCH 03/12] wip, but commands to devices get lost?

---
 src/components/DeviceInfo.vue                 | 22 ++++---
 src/components/device/DeviceControl.vue       |  2 +
 .../device/control/DeviceAiroticControl.vue   | 63 +++++++++++++++++++
 .../device/control/GenericDeviceControl.vue   |  4 +-
 src/components/icons/DeviceIcon.vue           | 20 ++++--
 src/model/devices/airotic/DeviceAirotic.ts    | 11 ++++
 src/stores/devices.ts                         |  7 +--
 src/utils/utils.ts                            | 28 +++++++--
 8 files changed, 131 insertions(+), 26 deletions(-)
 create mode 100644 src/components/device/control/DeviceAiroticControl.vue
 create mode 100644 src/model/devices/airotic/DeviceAirotic.ts

diff --git a/src/components/DeviceInfo.vue b/src/components/DeviceInfo.vue
index d41ea09..27502d2 100644
--- a/src/components/DeviceInfo.vue
+++ b/src/components/DeviceInfo.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
 import type Device from '@/model/devices/Device';
 import DeviceIcon from './icons/DeviceIcon.vue';
-import { computed, reactive } from 'vue';
-import {hasProperty} from '@/utils/utils';
+import { computed } from 'vue';
 
 interface Props {
   device: Device;
 }
 
 const props = defineProps<Props>();
-const device = reactive<Device>(props.device);
 
 const lastRefreshed = computed<string>((): string => {
-  return device.lastRefresh
-    ? new Date(device.lastRefresh).toISOString()
+  return props.device.lastRefresh
+    ? new Date(props.device.lastRefresh).toISOString()
     : 'n/a';
 });
 
 const deviceTypeModel = computed<string>((): string => {
-  return `${device.type} ${
-    device.type === 'slvCtrlPlus' ? ` (model: ${device.deviceModel})` : ''
+  return `${props.device.type} ${
+    props.device.type === 'slvCtrlPlus' ? ` (model: ${props.device.deviceModel})` : ''
   }`;
 });
 
@@ -59,16 +57,20 @@ function isStringOrNumber(val: unknown): val is string | number {
           <v-list-item-title>Type</v-list-item-title>
           <v-list-item-subtitle>{{ deviceTypeModel }}</v-list-item-subtitle>
         </v-list-item>
-        <v-list-item v-if="hasProperty<Device, 'fwVersion'>(device, 'fwVersion') && isStringOrNumber(device.fwVersion)">
+        <v-list-item v-if="'fwVersion' in props.device && isStringOrNumber(props.device.fwVersion)">
           <v-list-item-title>Firmware</v-list-item-title>
           <v-list-item-subtitle>{{
-            formatFwVersion(device.fwVersion)
+            formatFwVersion(props.device.fwVersion)
           }}</v-list-item-subtitle>
         </v-list-item>
+        <v-list-item v-if="'rssi' in props.device">
+          <v-list-item-title>Signal strength</v-list-item-title>
+          <v-list-item-subtitle>{{props.device.rssi}}</v-list-item-subtitle>
+        </v-list-item>
         <v-list-item>
           <v-list-item-title>Connected since</v-list-item-title>
           <v-list-item-subtitle>{{
-            new Date(device.connectedSince).toISOString()
+            new Date(props.device.connectedSince).toISOString()
           }}</v-list-item-subtitle>
         </v-list-item>
         <v-list-item>
diff --git a/src/components/device/DeviceControl.vue b/src/components/device/DeviceControl.vue
index fa34b90..2ad024a 100644
--- a/src/components/device/DeviceControl.vue
+++ b/src/components/device/DeviceControl.vue
@@ -47,6 +47,8 @@ const comp = computed<Component>(() => {
     controlComponent = 'DeviceZc95Control';
   } else if (props.device.type === 'estim2b') {
     controlComponent = 'DeviceEstim2bControl';
+  } else if (props.device.type === 'airotic') {
+    controlComponent = 'DeviceAiroticControl';
   } else if (props.device.type === 'virtual') {
     controlComponent = '';
     switch (props.device.deviceModel) {
diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
new file mode 100644
index 0000000..7e5adb5
--- /dev/null
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import type { Socket } from 'socket.io-client';
+import DeviceCommunicator from '@/helper/DeviceCommunicator';
+import type { DeviceAirotic } from '@/model/devices/airotic/DeviceAirotic';
+import { ref } from 'vue';
+
+interface Props {
+  device: DeviceAirotic;
+}
+
+const props = defineProps<Props>();
+const io = useSocketIO() as Socket;
+
+const deviceComm = new DeviceCommunicator(props.device, io);
+//const localDevice = reactive({ ...props.device });
+
+const localRestColor = ref({ r: 0, g: 0, b: 0 });
+const localBreathInColor = ref({ r: 0, g: 0, b: 0 });
+
+</script>
+
+<template>
+  <dl>
+    <dt><label>Rest color</label></dt>
+    <dd>
+      <v-color-picker
+        v-model="localRestColor"
+        mode="rgb"
+        hide-inputs
+        hide-eye-dropper
+      />
+      <v-btn @click="console.log(localRestColor); deviceComm.setAttribute('restColor', localRestColor.r + ',' + localRestColor.g + ',' + localRestColor.b)">
+        Apply Color
+      </v-btn>
+    </dd>
+  </dl>
+  
+  <dl>
+    <dt><label>Breath in color</label></dt>
+    <dd>
+      <v-color-picker
+        v-model="localBreathInColor"
+        mode="rgb"
+        hide-inputs
+        hide-eye-dropper
+      />
+      <v-btn @click="console.log(localBreathInColor); deviceComm.setAttribute('breathInColor', localBreathInColor.r + ',' + localBreathInColor.g + ',' + localBreathInColor.b)">
+        Apply Color
+      </v-btn>
+    </dd>
+  </dl>
+
+  <v-btn @click="console.log('Reset colors'); deviceComm.setAttribute('resetColors', true)">
+    Reset Colors
+  </v-btn>
+
+  <v-btn @click="console.log('Reboot'); deviceComm.setAttribute('reboot', true)">
+    Reboot
+  </v-btn>
+</template>
+
+<style scoped></style>
diff --git a/src/components/device/control/GenericDeviceControl.vue b/src/components/device/control/GenericDeviceControl.vue
index 0726ff9..cafc375 100644
--- a/src/components/device/control/GenericDeviceControl.vue
+++ b/src/components/device/control/GenericDeviceControl.vue
@@ -6,7 +6,7 @@ import type { DeviceAttribute } from '@/model/devices/Device';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 import DebouncedTextField from '@/components/device/DebouncedTextField.vue';
-import {hasProperty, isBoolDeviceAttribute, isFloatDeviceAttribute, isIntDeviceAttribute, isIntRangeDeviceAttribute, isListDeviceAttribute, isStringDeviceAttribute, typedEntries} from '@/utils/utils';
+import {isBoolDeviceAttribute, isFloatDeviceAttribute, isIntDeviceAttribute, isIntRangeDeviceAttribute, isListDeviceAttribute, isStringDeviceAttribute, typedEntries} from '@/utils/utils';
 
 interface Props {
   device: Device<Record<string, DeviceAttribute>>;
@@ -18,7 +18,7 @@ const io = useSocketIO() as Socket;
 const deviceComm = new DeviceCommunicator(props.device, io);
 
 const hasUom = (attr: DeviceAttribute): attr is DeviceAttribute & { uom: string } => {
-  return hasProperty(attr, 'uom') && typeof attr.uom === 'string';
+  return 'uom' in attr && typeof attr.uom === 'string';
 }
 </script>
 
diff --git a/src/components/icons/DeviceIcon.vue b/src/components/icons/DeviceIcon.vue
index ac4901f..1b717fe 100644
--- a/src/components/icons/DeviceIcon.vue
+++ b/src/components/icons/DeviceIcon.vue
@@ -17,22 +17,32 @@ const comp = computed<string>(() => {
   let iconComponentName: string;
 
   const deviceTypeModel = `${props.device.type}${
-    props.device.type === 'generic' ? `-${props.device.deviceModel}` : ''
+    props.device.type === 'slvCtrlPlus' ? `-${props.device.deviceModel}` : ''
   }`;
 
   switch (deviceTypeModel) {
-    case 'generic-air_valve':
+    case 'slvCtrlPlus-air_valve':
       iconComponentName = 'mdi-fan';
       break;
-    case 'generic-et312':
+    case 'slvCtrlPlus-et312':
       iconComponentName = 'mdi-lightning-bolt';
       break;
-    case 'generic-strikerMk2':
+    case 'slvCtrlPlus-strikerMk2':
       iconComponentName = 'mdi-swap-horizontal';
       break;
-    case 'generic-distance':
+    case 'slvCtrlPlus-distance':
       iconComponentName = 'mdi-ruler';
       break;
+    case 'airotic':
+      iconComponentName = 'mdi-chart-bubble';
+      break;
+    case 'zc95':
+    case 'estim2b':
+      iconComponentName = 'mdi-lightning-bolt-circle';
+      break;
+    case 'virtual':
+      iconComponentName = 'mdi-virtual-reality';
+      break;
     default:
       iconComponentName = 'mdi-robot';
       break;
diff --git a/src/model/devices/airotic/DeviceAirotic.ts b/src/model/devices/airotic/DeviceAirotic.ts
new file mode 100644
index 0000000..30ae91a
--- /dev/null
+++ b/src/model/devices/airotic/DeviceAirotic.ts
@@ -0,0 +1,11 @@
+import type Device from '../Device';
+import type { BoolDeviceAttribute, StrDeviceAttribute } from '../Device';
+
+export type DeviceAiroticAttributes = {
+    restColor: StrDeviceAttribute,
+    breathInColor: StrDeviceAttribute,
+    resetColors: BoolDeviceAttribute,
+    reboot: BoolDeviceAttribute,
+};
+
+export type DeviceAirotic = Device<DeviceAiroticAttributes>;
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
index fb2e03e..13c6f94 100644
--- a/src/stores/devices.ts
+++ b/src/stores/devices.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { ref, reactive, computed } from 'vue';
 import {apiFetch} from '@/utils/apiFetch';
 import type Device from '@/model/devices/Device';
+import { deepMergeReactive } from '@/utils/utils';
 
 export const useDevicesStore = defineStore('devices', () => {
   // State: use reactive for objects, ref for primitives
@@ -40,11 +41,7 @@ export const useDevicesStore = defineStore('devices', () => {
       return;
     }
 
-    device.lastRefresh = updatedDevice.lastRefresh;
-
-    if ('attributes' in device && 'attributes' in updatedDevice) {
-      device.attributes = updatedDevice.attributes;
-    }
+    deepMergeReactive(device, updatedDevice);
   }
 
   function clear() {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ee9201a..4a56e99 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -6,6 +6,30 @@ export const getTypedKeys = <T extends object>(obj: T): (StringKey<T>)[] => {
     return Object.keys(obj) as StringKey<T>[];
 }
 
+
+export const deepMergeReactive = <T extends object>(target: T, source: Partial<T>): void => {
+    for (const key of getTypedKeys(source)) {
+        const sourceVal = source[key];
+        const targetVal = target[key];
+
+        if (Array.isArray(sourceVal)) {
+            // Replace arrays entirely (not deep merge)
+            (target as { [K in keyof T]: T[K] })[key] = sourceVal as T[typeof key];
+        } else if (
+            sourceVal &&
+            typeof sourceVal === 'object' &&
+            !Array.isArray(sourceVal) &&
+            targetVal &&
+            typeof targetVal === 'object' &&
+            !Array.isArray(targetVal)
+        ) {
+            deepMergeReactive(targetVal, sourceVal as Partial<typeof targetVal>);
+        } else if (sourceVal !== undefined) {
+            (target as { [K in keyof T]: T[K] })[key] = sourceVal as T[typeof key];
+        }
+    }
+}
+
 type RequiredKeys<T> = {
     [K in keyof T]-?: Exclude<T[K], undefined>
 };
@@ -52,7 +76,3 @@ export const hasType = (obj: unknown, expectedType: string): boolean => {
         (obj as { type?: string }).type === expectedType
     );
 }
-
-export const hasProperty = <O extends object, P extends PropertyKey>(obj: O, prop: P): obj is O & Record<P, unknown> => {
-    return obj != null && typeof obj === 'object' && prop in obj;
-}

From 7d068404cf4094590567996b8f16659dddbf0bd9 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sun, 24 May 2026 14:34:56 +0200
Subject: [PATCH 04/12] Airotic control panel

---
 package.json                                  |  1 +
 .../device/control/DeviceAiroticControl.vue   | 14 ++--
 .../slvctrlplus/DeviceAirValveControl.vue     |  4 +-
 yarn.lock                                     | 68 +++++--------------
 4 files changed, 29 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 5dd91da..a12241f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "socket.io-client": "^4.8.1",
     "vue": "^3.5.0",
     "vue-chartjs": "^4.1.1",
+    "vue-color": "^3.3.3",
     "vue-fullscreen": "^3.1.2",
     "vue-router": "^4.5.1",
     "vue-socket.io": "^3.0.10",
diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index 7e5adb5..18084aa 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { HueSlider } from 'vue-color'
 import { useSocketIO } from '@/plugins/vueSocketIOClient';
 import type { Socket } from 'socket.io-client';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
@@ -30,13 +31,14 @@ const localBreathInColor = ref({ r: 0, g: 0, b: 0 });
         hide-inputs
         hide-eye-dropper
       />
-      <v-btn @click="console.log(localRestColor); deviceComm.setAttribute('restColor', localRestColor.r + ',' + localRestColor.g + ',' + localRestColor.b)">
+      <!--HueSlider v-model:tinyColor="localRestColor" /-->
+      <v-btn color="primary" @click="console.log(localRestColor); deviceComm.setAttribute('restColor', localRestColor.r + ',' + localRestColor.g + ',' + localRestColor.b)">
         Apply Color
       </v-btn>
     </dd>
   </dl>
   
-  <dl>
+  <dl class="my-4">
     <dt><label>Breath in color</label></dt>
     <dd>
       <v-color-picker
@@ -45,17 +47,19 @@ const localBreathInColor = ref({ r: 0, g: 0, b: 0 });
         hide-inputs
         hide-eye-dropper
       />
-      <v-btn @click="console.log(localBreathInColor); deviceComm.setAttribute('breathInColor', localBreathInColor.r + ',' + localBreathInColor.g + ',' + localBreathInColor.b)">
+      <v-btn color="primary" @click="console.log(localBreathInColor); deviceComm.setAttribute('breathInColor', localBreathInColor.r + ',' + localBreathInColor.g + ',' + localBreathInColor.b)">
         Apply Color
       </v-btn>
     </dd>
   </dl>
 
-  <v-btn @click="console.log('Reset colors'); deviceComm.setAttribute('resetColors', true)">
+  <v-divider class="my-4"></v-divider>
+
+  <v-btn class="mr-4" @click="console.log('Reset colors'); deviceComm.setAttribute('resetColors', true)">
     Reset Colors
   </v-btn>
 
-  <v-btn @click="console.log('Reboot'); deviceComm.setAttribute('reboot', true)">
+  <v-btn  color="grey-darken-3" @click="console.log('Reboot'); deviceComm.setAttribute('reboot', true)">
     Reboot
   </v-btn>
 </template>
diff --git a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
index e085cf3..d8ab744 100644
--- a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
@@ -29,9 +29,7 @@ const deviceComm = new DeviceCommunicator(props.device, io);
   </dl>
   <v-divider class="my-4"></v-divider>
   <div>
-    <v-btn color="grey-darken-3" class="mr-4" @click="deviceComm.setAttribute('flow', 100)"
-      >open</v-btn
-    >
+    <v-btn color="grey-darken-3" class="mr-4" @click="deviceComm.setAttribute('flow', 100)">open</v-btn>
     <v-btn color="grey-darken-3" @click="deviceComm.setAttribute('flow', 0)">close</v-btn>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 9471481..e952ed2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -903,11 +903,6 @@
   resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@pkgr/core@^0.2.4":
-  version "0.2.7"
-  resolved "https://registry.npmjs.org/@pkgr/core/-/core-0.2.7.tgz"
-  integrity sha512-YLT9Zo3oNPJoBjBc4q8G2mjU4tqIbf5CEOORbUUr48dCD9q3umJ3IPlVqOqDakPfd2HuwccBaqlGhN4Gmr5OWg==
-
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.29"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.29.tgz#5a40109a1ab5f84d6fd8fc928b19f367cbe7e7b1"
@@ -1643,14 +1638,6 @@
   dependencies:
     rfdc "^1.4.1"
 
-"@vue/eslint-config-prettier@^10.2.0":
-  version "10.2.0"
-  resolved "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz"
-  integrity sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==
-  dependencies:
-    eslint-config-prettier "^10.0.1"
-    eslint-plugin-prettier "^5.2.2"
-
 "@vue/eslint-config-typescript@^14.5.1":
   version "14.5.1"
   resolved "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.5.1.tgz"
@@ -2648,11 +2635,6 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-prettier@^10.0.1:
-  version "10.1.5"
-  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.5.tgz"
-  integrity sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==
-
 eslint-plugin-cypress@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-5.1.0.tgz"
@@ -2660,14 +2642,6 @@ eslint-plugin-cypress@^5.1.0:
   dependencies:
     globals "^16.2.0"
 
-eslint-plugin-prettier@^5.2.2:
-  version "5.5.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.0.tgz"
-  integrity sha512-8qsOYwkkGrahrgoUv76NZi23koqXOGiiEzXMrT8Q7VcYaUISR+5MorIUxfWqYXN0fN/31WbSrxCxFkVQ43wwrA==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-    synckit "^0.11.7"
-
 eslint-plugin-vue@^10.2.0:
   version "10.2.0"
   resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.2.0.tgz"
@@ -2888,11 +2862,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz"
-  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
-
 fast-glob@^3.3.2, fast-glob@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz"
@@ -3719,6 +3688,11 @@ map-stream@~0.1.0:
   resolved "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz"
   integrity sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==
 
+material-colors@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 math-intrinsics@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
@@ -4149,18 +4123,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
-prettier@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz"
-  integrity sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==
-
 pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"
@@ -4709,13 +4671,6 @@ symbol-tree@^3.2.4:
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-synckit@^0.11.7:
-  version "0.11.8"
-  resolved "https://registry.npmjs.org/synckit/-/synckit-0.11.8.tgz"
-  integrity sha512-+XZ+r1XGIJGeQk3VvXhT6xx/VpbHsRzsTkGgF6E5RX9TTXD0118l87puaEBZ566FhqblC6U0d4XnubznJDm30A==
-  dependencies:
-    "@pkgr/core" "^0.2.4"
-
 throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz"
@@ -4731,6 +4686,11 @@ tinybench@^2.9.0:
   resolved "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz"
   integrity sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==
 
+tinycolor2@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tinyexec@^0.3.2:
   version "0.3.2"
   resolved "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz"
@@ -5063,6 +5023,14 @@ vue-chartjs@^4.1.1:
   resolved "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.2.tgz"
   integrity sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==
 
+vue-color@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-3.3.3.tgz#1b175fcbed92f774e4f8e76c75415d6ba1cef7c7"
+  integrity sha512-FW/9JXFbCHfFEGv6SFUuK/SE+K61pHoL7lxJMQXcU+Zt7s36Ui1/tMDc3vzGXPrxxRBB+NSzFt+71nEaUJ29dQ==
+  dependencies:
+    material-colors "^1.2.6"
+    tinycolor2 "^1.6.0"
+
 vue-component-type-helpers@^2.0.0:
   version "2.2.10"
   resolved "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.10.tgz"

From 3d34a5a6c4b64b40a482ae50007a1ee77993dd12 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sat, 27 Jun 2026 18:04:25 +0200
Subject: [PATCH 05/12] Remove unused import

---
 src/components/device/control/DeviceAiroticControl.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index 18084aa..3e867d2 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { HueSlider } from 'vue-color'
 import { useSocketIO } from '@/plugins/vueSocketIOClient';
 import type { Socket } from 'socket.io-client';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';

From 1875aba3173dce410b955c22c903a1c2a768c952 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sun, 28 Jun 2026 19:56:19 +0200
Subject: [PATCH 06/12] Update types for automation script

---
 src/components/automation/MonacoEditor.vue | 14 ++++++++++-
 src/stores/automation.ts                   | 27 ++++++++++++++--------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/automation/MonacoEditor.vue b/src/components/automation/MonacoEditor.vue
index 44765af..0cdd1c1 100644
--- a/src/components/automation/MonacoEditor.vue
+++ b/src/components/automation/MonacoEditor.vue
@@ -55,6 +55,9 @@ function editorWillMount(monacoInstance: typeof monaco): void {
 
   // extra libraries
   const libSource = `
+type JsonObject = { [key: string]: JsonValue };
+type JsonValue = null | boolean | number | string | JsonValue[] | JsonObject;
+
 type DeviceAttributeModifier = 'ro' | 'rw' | 'wo';
 type DeviceAttributeType = 'bool' | 'list' | 'str' | 'float' | 'int' | 'range';
 type DeviceAttributeValue = string | number | boolean | undefined;
@@ -81,7 +84,16 @@ declare interface DeviceEvent {
     readonly device: Device;
 }
 
-declare function onEvent(handler: (event: DeviceEvent) => void | Promise<void>): void;
+declare interface DeviceNotification {
+    readonly type: string;
+    readonly data: JsonObject;
+}
+
+declare function onEvent(
+    eventName: 'deviceConnected' | 'deviceDisconnected' | 'deviceRefreshed',
+    handler: (device: Device) => void | Promise<void>
+): void;
+declare function onEvent(eventName: 'deviceNotification', handler: (device: Device, notification: DeviceNotification) => void | Promise<void>): void;
 declare function onStart(handler: () => void | Promise<void>): void;
 declare function onStop(handler: () => void | Promise<void>): void;
 
diff --git a/src/stores/automation.ts b/src/stores/automation.ts
index 5416920..d7d0b96 100644
--- a/src/stores/automation.ts
+++ b/src/stores/automation.ts
@@ -3,7 +3,9 @@ import { ref, computed } from 'vue';
 import type AutomationScript from '../model/AutomationScript';
 import {apiFetch} from '@/utils/apiFetch';
 
-const defaultCode = `onStart(async () => {
+const defaultCode = `// To access any device you can use the global variable "devices" -> devices.getById("{device uuid}")
+
+onStart(async () => {
     // This function will fire once when your script starts.
     // You can initialize variables or set device attributes here.
 });
@@ -13,15 +15,20 @@ onStop(async () => {
     // You can clean up any resources or reset device attributes here.
 });
 
-onEvent(async (event) => {
-    // This function will be called on any device event. Possible events are:
-    //
-    //  - deviceConnected: A new device was connected to SlvCtrl+
-    //  - deviceDisconnected: A device was disconnected from SlvCtrl+
-    //  - deviceRefreshed: New data has been pulled from a device
-    //
-    // You can get information about the event and the device that invoked your script through the "event"
-    // variable. To access other devices you can use the global variable "devices" -> devices.getById("{device uuid}")
+onEvent('deviceConnected', async (device: Device) => {
+    // This function will be called when a new device was connected to SlvCtrl+
+});
+
+onEvent('deviceDisconnected', async (device: Device) => {
+    // This function will be called when a device was disconnected from SlvCtrl+
+});
+
+onEvent('deviceRefreshed', async (device: Device) => {
+    // This function will be called when new data has been pulled from a device
+});
+
+onEvent('deviceNotification', async (device: Device, notification: DeviceNotification) => {
+    // This function will be called when a device sends a notification
 });
 `;
 

From 3d115f4f5bdddae98bfca91827b86a57859a0eb5 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Thu, 2 Jul 2026 07:49:20 +0200
Subject: [PATCH 07/12] wip

---
 src/App.vue                                   |  22 +-
 src/components/chart/StreamLineChart.vue      |  11 +-
 .../device/control/DeviceAiroticControl.vue   | 222 +++++++++++++++---
 .../virtual/DeviceVirtualPiperTtsControl.vue  |  34 ++-
 .../virtual/DeviceVirtualTtsControl.vue       |  39 +--
 src/model/devices/Device.ts                   |   4 +
 src/model/devices/airotic/DeviceAirotic.ts    |   6 +-
 src/stores/deviceNotifications.ts             |  33 +++
 tsconfig.app.json                             |   1 -
 9 files changed, 293 insertions(+), 79 deletions(-)
 create mode 100644 src/stores/deviceNotifications.ts

diff --git a/src/App.vue b/src/App.vue
index 032ef40..0f022ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useDevicesStore } from './stores/devices.js';
 import { useSocketIO } from './plugins/vueSocketIOClient.js';
-import type { Socket } from 'socket.io-client';
 import type Device from './model/devices/Device';
 import { useSettingsStore } from './stores/settings.js';
 import { useAutomationStore } from './stores/automation.js';
@@ -9,6 +8,7 @@ import { storeToRefs } from 'pinia';
 import { useAppStore } from './stores/app';
 import { useHealthStore } from './stores/health';
 import { useBackendStore } from '@/stores/backend';
+import { useDeviceNotificationsStore } from '@/stores/deviceNotifications';
 import ServerStatusOverlay from '@/components/ServerStatusOverlay.vue';
 
 const settingsStore = useSettingsStore();
@@ -17,13 +17,14 @@ const appStore = useAppStore();
 const automationStore = useAutomationStore();
 const devicesStore = useDevicesStore();
 const backendStore = useBackendStore();
+const deviceNotificationsStore = useDeviceNotificationsStore();
 
 const { theme } = storeToRefs(settingsStore);
 
 if (backendStore.backendUrl) {
-  const io = useSocketIO() as Socket;
+  const io = useSocketIO();
 
-  io.on('connect', () => {
+  io?.on('connect', () => {
     backendStore.setServerOnline(true);
 
     // Init/update stores with initial data from server
@@ -32,12 +33,12 @@ if (backendStore.backendUrl) {
     devicesStore.init();
     healthStore.init(io);
   });
-  io.on('disconnect', () => {
+  io?.on('disconnect', () => {
     backendStore.setServerOnline(false);
     devicesStore.clear();
   });
 
-  io.on('deviceDisconnected', (device) => {
+  io?.on('deviceDisconnected', (device) => {
     devicesStore.removeDevice(device);
 
     appStore.displaySnackbar(
@@ -46,7 +47,7 @@ if (backendStore.backendUrl) {
       }) disconnected`
     );
   });
-  io.on('deviceConnected', (device) => {
+  io?.on('deviceConnected', (device) => {
     devicesStore.addDevice(device);
 
     appStore.displaySnackbar(
@@ -55,17 +56,20 @@ if (backendStore.backendUrl) {
       }) connected`
     );
   });
-  io.on('deviceRefreshed', (device) => {
+  io?.on('deviceRefreshed', (device) => {
     devicesStore.updateDevice(device);
   });
-  io.on('automationConsoleLog', (data: string) => {
+  io?.on('deviceNotification', (device, notification) => {
+    deviceNotificationsStore.dispatch(device, notification);
+  });
+  io?.on('automationConsoleLog', (data: string) => {
     automationStore.logMessages.push(data);
 
     if (automationStore.logMessages.length > 500) {
       automationStore.logMessages.shift();
     }
   });
-  io.on('settingsChanged', async () => {
+  io?.on('settingsChanged', async () => {
     await settingsStore.getServerSettings()
   });
 }
diff --git a/src/components/chart/StreamLineChart.vue b/src/components/chart/StreamLineChart.vue
index d9d56a3..1ea438d 100644
--- a/src/components/chart/StreamLineChart.vue
+++ b/src/components/chart/StreamLineChart.vue
@@ -18,9 +18,14 @@ import ChartStreaming from 'chartjs-plugin-streaming';
 interface Props {
   chartData: ChartData<'line'>;
   chartOptions: ChartOptions<'line'>;
+  width?: number;
+  height?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  width: 400,
+  height: 200,
+});
 
 ChartJS.register(
   Title,
@@ -42,8 +47,8 @@ const plugins: Plugin[] = [];
     :chartData="props.chartData"
     :chartOptions="props.chartOptions"
     chartId="foo-id"
-    :width="400"
-    :height="200"
+    :width="props.width"
+    :height="props.height"
     :plugins="plugins"
   />
 </template>
diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index 3e867d2..46f1df6 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type { DeviceAirotic } from '@/model/devices/airotic/DeviceAirotic';
-import { ref } from 'vue';
+import { ref, computed, watch } from 'vue';
+import { useDeviceNotificationsStore } from '@/stores/deviceNotifications';
+import type { DeviceNotificationEvent } from '@/stores/deviceNotifications';
+import StreamLineChart from '@/components/chart/StreamLineChart.vue';
+import type { Chart, ChartOptions } from 'chart.js';
+import ChartHelper from '@/helper/ChartHelper';
+import type { LineChartData } from '@/helper/ChartHelper';
+import { merge } from 'chart.js/helpers';
 
 interface Props {
   device: DeviceAirotic;
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 //const localDevice = reactive({ ...props.device });
@@ -18,49 +24,191 @@ const deviceComm = new DeviceCommunicator(props.device, io);
 const localRestColor = ref({ r: 0, g: 0, b: 0 });
 const localBreathInColor = ref({ r: 0, g: 0, b: 0 });
 
+const restColorMenu = ref(false);
+const breathInColorMenu = ref(false);
+
+const applyRestColor = (): void => {
+  deviceComm.setAttribute('restColor', localRestColor.value.r + ',' + localRestColor.value.g + ',' + localRestColor.value.b);
+  restColorMenu.value = false;
+};
+
+const applyBreathInColor = (): void => {
+  deviceComm.setAttribute('breathInColor', localBreathInColor.value.r + ',' + localBreathInColor.value.g + ',' + localBreathInColor.value.b);
+  breathInColorMenu.value = false;
+};
+
+const rssiIcon = computed<{icon: string, color?: string}>(() => {
+  const rssi = props.device.rssi;
+
+  if (rssi >= -60) return { icon: 'mdi-wifi-strength-4', color: undefined };
+  if (rssi >= -70) return { icon: 'mdi-wifi-strength-3', color: undefined };
+  if (rssi >= -80) return { icon: 'mdi-wifi-strength-2', color: 'warning' };
+
+  return { icon: 'mdi-wifi-strength-1', color: 'error' };
+});
+
+const breathsPerMin = computed(() => {
+  const rawData = props.device.attributes.breathsPerMin.value;
+  return (undefined === rawData) ? undefined : Math.round(rawData * 10) / 10;
+});
+
+const deviceNotificationsStore = useDeviceNotificationsStore();
+
+const latestNotification = computed<DeviceNotificationEvent | undefined>(
+  () => deviceNotificationsStore.getLatest(props.device.deviceId)
+);
+
+// 0 = restColor active, 1 = breathInColor active
+const breathState = ref<0 | 1>(0);
+
+watch(latestNotification, (event) => {
+  if (!event) return;
+  const { type, data } = event.notification;
+
+  if (type === 'colorChange') {
+    breathState.value = data.colorType === 'breathInColor' ? 1 : 0;
+  }
+});
+
+// Chart
+const chartData: LineChartData = {
+  datasets: [
+    {
+      ...ChartHelper.createEmptyDataSet({
+        label: 'Breath phase',
+        color: { r: 0, g: 189, b: 126 },
+        tension: 0,
+      }),
+      stepped: 'before' as const,
+    },
+  ],
+};
+
+const onRefresh = (chart: Chart): void => {
+  chart.data.datasets[0].data.push({
+    x: Date.now(),
+    y: breathState.value,
+  });
+};
+
+const chartOptions = merge(
+  ChartHelper.createStreamChartOptions(30000, 250, 500, onRefresh),
+  {
+    scales: {
+      y: {
+        min: 0,
+        max: 1,
+        display: false,
+      },
+    },
+  }
+);
+
+const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
 </script>
 
 <template>
+  <StreamLineChart
+    :chartData="chartData"
+    :chartOptions="chartOptions"
+    :height="100"
+    @mouseover="ChartHelper.pauseChart(chartOptionsRef)"
+    @mouseleave="ChartHelper.resumeChart(chartOptionsRef)"
+  />
+
   <dl>
-    <dt><label>Rest color</label></dt>
-    <dd>
-      <v-color-picker
-        v-model="localRestColor"
-        mode="rgb"
-        hide-inputs
-        hide-eye-dropper
-      />
-      <!--HueSlider v-model:tinyColor="localRestColor" /-->
-      <v-btn color="primary" @click="console.log(localRestColor); deviceComm.setAttribute('restColor', localRestColor.r + ',' + localRestColor.g + ',' + localRestColor.b)">
-        Apply Color
-      </v-btn>
-    </dd>
-  </dl>
-  
-  <dl class="my-4">
-    <dt><label>Breath in color</label></dt>
-    <dd>
-      <v-color-picker
-        v-model="localBreathInColor"
-        mode="rgb"
-        hide-inputs
-        hide-eye-dropper
-      />
-      <v-btn color="primary" @click="console.log(localBreathInColor); deviceComm.setAttribute('breathInColor', localBreathInColor.r + ',' + localBreathInColor.g + ',' + localBreathInColor.b)">
-        Apply Color
-      </v-btn>
+    <dt class="mt-4 mb-2"><label>Breathing frequency</label></dt>
+    <dd class="text-h3 text-primary">
+      {{ undefined === breathsPerMin ? '&ndash;' : `${breathsPerMin.toFixed(1)}/min` }}
     </dd>
   </dl>
 
-  <v-divider class="my-4"></v-divider>
+  <v-divider class="my-4" />
+
+  <div class="d-flex ga-4">
+    <v-btn class="px-3" color="primary" @click="restColorMenu = true">
+      Set Rest Color
+    </v-btn>
+    <v-dialog v-model="restColorMenu" max-width="360">
+      <v-card>
+        <v-card-title>Rest color</v-card-title>
+        <v-card-text>
+          <v-color-picker
+            v-model="localRestColor"
+            mode="rgb"
+            hide-inputs
+            hide-eye-dropper
+            width="100%"
+            bgColor="grey-darken-3"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn @click="restColorMenu = false">
+            Cancel
+          </v-btn>
+          <v-btn color="primary" @click="applyRestColor">
+            Apply Color
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-btn class="px-3" color="primary" @click="breathInColorMenu = true">
+      Set Breath In Color
+    </v-btn>
+    <v-dialog v-model="breathInColorMenu" max-width="360">
+      <v-card>
+        <v-card-title>Breath in color</v-card-title>
+        <v-card-text>
+          <v-color-picker
+            v-model="localBreathInColor"
+            mode="rgb"
+            hide-inputs
+            hide-eye-dropper
+            width="100%"
+            bgColor="grey-darken-3"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn @click="breathInColorMenu = false">
+            Cancel
+          </v-btn>
+          <v-btn color="primary" @click="applyBreathInColor">
+            Apply Color
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+
+  <v-divider class="mt-4" />
 
-  <v-btn class="mr-4" @click="console.log('Reset colors'); deviceComm.setAttribute('resetColors', true)">
-    Reset Colors
-  </v-btn>
+  <v-footer class="px-0 mt-2 mx-1">
+    <v-row align="center" no-gutters>
+      <v-col cols="auto">
+        <v-btn class="pl-2 pr-3 mr-4" @click="deviceComm.setAttribute('resetColors', true)">
+          <v-icon icon="mdi-restore" class="mr-2" />
+          Reset Colors
+        </v-btn>
 
-  <v-btn  color="grey-darken-3" @click="console.log('Reboot'); deviceComm.setAttribute('reboot', true)">
-    Reboot
-  </v-btn>
+        <v-btn class="pl-2 pr-3" color="grey-darken-3" @click="deviceComm.setAttribute('reboot', true)">
+          <v-icon icon="mdi-restart" class="mr-2" />
+          Reboot
+        </v-btn>
+      </v-col>
+      <v-spacer />
+      <v-col cols="auto">
+        <v-tooltip location="left">
+          <template #activator="{ props }">
+            <v-icon v-bind="props" :icon="rssiIcon.icon" :color="rssiIcon.color" />
+          </template>
+          Signal strength: {{ props.device.rssi }} dBm
+        </v-tooltip>
+      </v-col>
+    </v-row>
+  </v-footer>
 </template>
 
 <style scoped></style>
diff --git a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
index 2fa34e4..ee3ea8d 100644
--- a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
@@ -48,16 +48,28 @@ const changeQueuing = (newValue: boolean | null): void => {
     type="text"
     hide-details
   ></v-textarea>
-  <v-btn color="primary" class="mt-4 mr-4" @click="sendTextHandler">send</v-btn>
-
-  <v-switch
-    :model-value="props.device.attributes.queuing.value"
-    :hide-details="true"
-    color="primary"
-    class="pa-0 ma-0"
-    :label="queuingLabel"
-    @update:modelValue="changeQueuing"
-  ></v-switch>
+  <v-row align="center" no-gutters>
+    <v-col cols="auto">
+      <v-btn color="primary" class="mt-4 mr-4" @click="sendTextHandler">send</v-btn>
+    </v-col>
+    <v-spacer />
+    <v-col cols="auto">
+      <v-switch
+        :model-value="props.device.attributes.queuing.value"
+        :hide-details="true"
+        color="primary"
+        class="pa-0 ma-0 mt-4 switch-label-left"
+        :label="queuingLabel"
+        @update:modelValue="changeQueuing"
+      ></v-switch>
+    </v-col>
+  </v-row>
 </template>
 
-<style scoped></style>
+<style scoped>
+.switch-label-left :deep(.v-selection-control) {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
index b6d9393..87d73e2 100644
--- a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
@@ -21,11 +21,6 @@ const currentlySpeaking = computed<string>(() => {
     ? 'no'
     : 'yes';
 });
-const queuingLabel = computed<string>(() => {
-  return props.device.attributes.queuing.value
-    ? `Queuing enabled (Queue: ${props.device.attributes.queueLength.value})`
-    : 'Queuing disabled';
-});
 
 const sendTextHandler = (): void => {
   if (undefined === text.value || 0 === text.value.trim().length) {
@@ -54,16 +49,24 @@ const changeQueuing = (newValue: boolean | null): void => {
     type="text"
     hide-details
   ></v-textarea>
-  <v-btn color="primary" class="mt-4 mr-4" @click="sendTextHandler">send</v-btn>
+  <v-row align="center" no-gutters>
+    <v-col cols="auto">
+      <v-btn color="primary" class="mt-4 mr-4" @click="sendTextHandler">send</v-btn>
+    </v-col>
+    <v-spacer />
+    <v-col cols="auto">
+      <v-switch
+        :model-value="props.device.attributes.queuing.value"
+        :hide-details="true"
+        color="primary"
+        class="pa-0 ma-0 mt-4 switch-label-left"
+        label="Queuing disabled"
+        @update:modelValue="changeQueuing"
+      ></v-switch>
+    </v-col>
+  </v-row>
 
-  <v-switch
-    :model-value="props.device.attributes.queuing.value"
-    :hide-details="true"
-    color="primary"
-    class="pa-0 ma-0"
-    :label="queuingLabel"
-    @update:modelValue="changeQueuing"
-  ></v-switch>
+  <v-divider class="mt-4" />
 
   <dl v-if="true === props.device.attributes.queuing.value" class="mt-4 mb-4">
     <dt><label>Queue length</label></dt>
@@ -79,4 +82,10 @@ const changeQueuing = (newValue: boolean | null): void => {
   </dl>
 </template>
 
-<style scoped></style>
+<style scoped>
+.switch-label-left :deep(.v-selection-control) {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/src/model/devices/Device.ts b/src/model/devices/Device.ts
index e14d99a..90d4b72 100644
--- a/src/model/devices/Device.ts
+++ b/src/model/devices/Device.ts
@@ -53,3 +53,7 @@ export default interface Device<T extends DeviceAttributes = DeviceAttributes> {
    receiveUpdates: boolean;
    attributes: T;
 }
+
+export interface WirelessDevice<T extends DeviceAttributes = DeviceAttributes> extends Device<T> {
+   rssi: number;
+}
diff --git a/src/model/devices/airotic/DeviceAirotic.ts b/src/model/devices/airotic/DeviceAirotic.ts
index 30ae91a..f9963ce 100644
--- a/src/model/devices/airotic/DeviceAirotic.ts
+++ b/src/model/devices/airotic/DeviceAirotic.ts
@@ -1,11 +1,11 @@
-import type Device from '../Device';
-import type { BoolDeviceAttribute, StrDeviceAttribute } from '../Device';
+import type { BoolDeviceAttribute, FloatDeviceAttribute, StrDeviceAttribute, WirelessDevice } from '../Device';
 
 export type DeviceAiroticAttributes = {
     restColor: StrDeviceAttribute,
     breathInColor: StrDeviceAttribute,
     resetColors: BoolDeviceAttribute,
     reboot: BoolDeviceAttribute,
+    breathsPerMin: FloatDeviceAttribute,
 };
 
-export type DeviceAirotic = Device<DeviceAiroticAttributes>;
+export type DeviceAirotic = WirelessDevice<DeviceAiroticAttributes>;
diff --git a/src/stores/deviceNotifications.ts b/src/stores/deviceNotifications.ts
new file mode 100644
index 0000000..07f9a55
--- /dev/null
+++ b/src/stores/deviceNotifications.ts
@@ -0,0 +1,33 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import type Device from '@/model/devices/Device';
+
+export type DeviceNotification = {
+    type: string;
+    data: Record<string, unknown>;
+};
+
+export type DeviceNotificationEvent = {
+    device: Device;
+    notification: DeviceNotification;
+    timestamp: number;
+};
+
+export const useDeviceNotificationsStore = defineStore('deviceNotifications', () => {
+    // Map of deviceId -> latest notification event
+    const latest = ref<Record<string, DeviceNotificationEvent>>({});
+
+    function dispatch(device: Device, notification: DeviceNotification): void {
+        latest.value[device.deviceId] = { device, notification, timestamp: Date.now() };
+    }
+
+    function getLatest(deviceId: string): DeviceNotificationEvent | undefined {
+        return latest.value[deviceId];
+    }
+
+    return {
+        latest,
+        dispatch,
+        getLatest,
+    };
+});
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 4e4bd41..e0e7879 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -14,7 +14,6 @@
       "dom"
     ],
     "module": "esnext",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     },

From 013faa3da1207c68c2b9d1097a0802ef9a5c435f Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Thu, 2 Jul 2026 08:34:23 +0200
Subject: [PATCH 08/12] Improved typing of socket and AiroticControl
 improvements

---
 .github/workflows/release.yml                 |  2 +-
 .github/workflows/test.yml                    |  2 +-
 src/App.vue                                   |  4 +-
 .../device/control/DeviceAiroticControl.vue   |  4 +-
 .../device/control/DeviceEstim2bControl.vue   |  5 +-
 .../device/control/DeviceZc95Control.vue      |  5 +-
 .../device/control/GenericDeviceControl.vue   |  5 +-
 .../slvctrlplus/DeviceAirValveControl.vue     |  5 +-
 .../slvctrlplus/DeviceEt312Control.vue        |  5 +-
 .../slvctrlplus/DeviceNogasmControl.vue       |  5 +-
 .../slvctrlplus/DeviceStrikerMk2Control.vue   |  5 +-
 .../virtual/DeviceVirtualPiperTtsControl.vue  |  5 +-
 .../virtual/DeviceVirtualTtsControl.vue       |  5 +-
 src/helper/DeviceCommunicator.ts              |  6 +--
 src/model/devices/zc95/DeviceZc95.ts          |  2 +-
 src/plugins/vueSocketIOClient.ts              | 18 ++++---
 src/stores/health.ts                          | 41 ++-------------
 src/types/socket.ts                           | 52 +++++++++++++++++++
 src/{types.d.ts => types/utility.ts}          |  0
 19 files changed, 94 insertions(+), 82 deletions(-)
 create mode 100644 src/types/socket.ts
 rename src/{types.d.ts => types/utility.ts} (100%)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index aa120ef..1fa7177 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -24,7 +24,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Install modules
-        run: yarn install
+        run: yarn install --frozen-lockfile
       - name: Build app
         env:
           VITE_APP_VERSION: ${{ steps.set_tag.outputs.tag }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 14c2d62..9d672ac 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -19,7 +19,7 @@ jobs:
         with:
           node-version: '20.x'
       - name: Install modules
-        run: yarn install
+        run: yarn install --frozen-lockfile
       - name: Linting
         run: |
           yarn run lint
diff --git a/src/App.vue b/src/App.vue
index 0f022ff..85b3539 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,9 +21,9 @@ const deviceNotificationsStore = useDeviceNotificationsStore();
 
 const { theme } = storeToRefs(settingsStore);
 
-if (backendStore.backendUrl) {
-  const io = useSocketIO();
+const io = useSocketIO();
 
+if (backendStore.backendUrl) {
   io?.on('connect', () => {
     backendStore.setServerOnline(true);
 
diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index 46f1df6..edb0e70 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type { DeviceAirotic } from '@/model/devices/airotic/DeviceAirotic';
 import { ref, computed, watch } from 'vue';
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO();
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 //const localDevice = reactive({ ...props.device });
diff --git a/src/components/device/control/DeviceEstim2bControl.vue b/src/components/device/control/DeviceEstim2bControl.vue
index 5b33ea1..083c384 100644
--- a/src/components/device/control/DeviceEstim2bControl.vue
+++ b/src/components/device/control/DeviceEstim2bControl.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 import {isIntRangeDeviceAttribute, typedEntries} from '@/utils/utils';
@@ -16,7 +15,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
diff --git a/src/components/device/control/DeviceZc95Control.vue b/src/components/device/control/DeviceZc95Control.vue
index c6e4d20..7d2043b 100644
--- a/src/components/device/control/DeviceZc95Control.vue
+++ b/src/components/device/control/DeviceZc95Control.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type {
   DeviceZc95,
@@ -16,7 +15,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
diff --git a/src/components/device/control/GenericDeviceControl.vue b/src/components/device/control/GenericDeviceControl.vue
index cafc375..a93d74f 100644
--- a/src/components/device/control/GenericDeviceControl.vue
+++ b/src/components/device/control/GenericDeviceControl.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import type Device from '@/model/devices/Device';
 import type { DeviceAttribute } from '@/model/devices/Device';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
@@ -13,7 +12,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
diff --git a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
index d8ab744..b2e7691 100644
--- a/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceAirValveControl.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type {DeviceAirValve} from '@/model/devices/slvctrl/DeviceAirValve';
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
 import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 
@@ -10,7 +9,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 const deviceComm = new DeviceCommunicator(props.device, io);
 </script>
 
diff --git a/src/components/device/control/slvctrlplus/DeviceEt312Control.vue b/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
index b353c0b..8b78e47 100644
--- a/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
+++ b/src/components/device/control/slvctrlplus/DeviceEt312Control.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type {DeviceEt312} from '@/model/devices/slvctrl/DeviceEt312';
 import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
@@ -15,7 +14,7 @@ type SelectItem = {
 };
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const modes: { [key: number]: string } = {
   0x76: 'Waves',
diff --git a/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue b/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
index b65f49b..5cd5608 100644
--- a/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
+++ b/src/components/device/control/slvctrlplus/DeviceNogasmControl.vue
@@ -13,15 +13,14 @@ import { merge } from 'chart.js/helpers';
 import type {DeviceNogasm} from '@/model/devices/slvctrl/DeviceNogasm';
 import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
-import {useSocketIO} from '@/plugins/vueSocketIOClient';
-import type {Socket} from 'socket.io-client';
+import {useRequiredSocketIO} from '@/plugins/vueSocketIOClient';
 
 interface Props {
   device: DeviceNogasm;
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 const deviceComm = new DeviceCommunicator(props.device, io);
 
 const modeNames = new Map<number, string>([[1, 'Manual'],[2, 'Automatic']]);
diff --git a/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue b/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
index 33b5dd0..3f00a87 100644
--- a/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
+++ b/src/components/device/control/slvctrlplus/DeviceStrikerMk2Control.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
-import type { Socket } from 'socket.io-client';
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '@/helper/DeviceCommunicator';
 import type {DeviceStrikerMk2} from '@/model/devices/slvctrl/DeviceStrikerMk2';
 import DebouncedSlider from '@/components/device/DebouncedSlider.vue';
@@ -11,7 +10,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 const device = reactive<DeviceStrikerMk2>(props.device);
diff --git a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
index ee3ea8d..284aaa2 100644
--- a/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualPiperTtsControl.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, nextTick } from 'vue';
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
 import type {VirtualDevicePiperTts} from '@/model/devices/virtual/VirtualDevicePiperTts';
 
@@ -10,7 +9,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
diff --git a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
index 87d73e2..de4e15c 100644
--- a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, nextTick } from 'vue';
-import { useSocketIO } from '@/plugins/vueSocketIOClient';
-import type { Socket } from 'socket.io-client';
+import { useRequiredSocketIO } from '@/plugins/vueSocketIOClient';
 import DeviceCommunicator from '../../../../helper/DeviceCommunicator';
 import type {VirtualDeviceTts} from '@/model/devices/virtual/VirtualDeviceTts';
 
@@ -10,7 +9,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const io = useSocketIO() as Socket;
+const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
diff --git a/src/helper/DeviceCommunicator.ts b/src/helper/DeviceCommunicator.ts
index 0884230..7dbb2e9 100644
--- a/src/helper/DeviceCommunicator.ts
+++ b/src/helper/DeviceCommunicator.ts
@@ -1,16 +1,16 @@
-import type { Socket } from 'socket.io-client';
 import type Device from '@/model/devices/Device';
+import type { AppSocket } from '@/types/socket';
 
 type DeviceData<D extends Device> = {
   [K in keyof D['attributes']]-?: Exclude<D['attributes'][K], undefined> extends { value: infer V } ? V : never
 };
 
 export default class DeviceCommunicator<T extends Device> {
-  private readonly io: Socket;
+  private readonly io: AppSocket;
 
   private readonly device: T;
 
-  public constructor(device: T, io: Socket) {
+  public constructor(device: T, io: AppSocket) {
     this.io = io;
     this.device = device;
   }
diff --git a/src/model/devices/zc95/DeviceZc95.ts b/src/model/devices/zc95/DeviceZc95.ts
index 628d3c3..7c0fac8 100644
--- a/src/model/devices/zc95/DeviceZc95.ts
+++ b/src/model/devices/zc95/DeviceZc95.ts
@@ -1,10 +1,10 @@
+import type { AllOrNone } from '@/types/utility';
 import type Device from '../Device';
 import type {
     BoolDeviceAttribute,
     IntRangeDeviceAttribute,
     ListDeviceAttribute
 } from '../Device';
-import type {AllOrNone} from '@/types';
 
 type RequiredDeviceZc95Attributes = {
     activePattern: ListDeviceAttribute<number, string>;
diff --git a/src/plugins/vueSocketIOClient.ts b/src/plugins/vueSocketIOClient.ts
index 7828d65..189f4b0 100644
--- a/src/plugins/vueSocketIOClient.ts
+++ b/src/plugins/vueSocketIOClient.ts
@@ -1,23 +1,25 @@
 import type { App, InjectionKey, Plugin } from 'vue';
 import { inject } from 'vue';
-import {
-  io,
-  type ManagerOptions,
-  Socket,
-  type SocketOptions,
-} from 'socket.io-client';
+import { io, type ManagerOptions, type SocketOptions } from 'socket.io-client';
+import type { AppSocket } from '@/types/socket';
 
 interface SocketPluginOptions extends Partial<ManagerOptions & SocketOptions> {
   connection: string;
 }
 
-const injectionKey: InjectionKey<Socket> = Symbol('socketIO');
+const injectionKey: InjectionKey<AppSocket> = Symbol('socketIO');
 
 export const useSocketIO = () => inject(injectionKey, null);
 
+export const useRequiredSocketIO = (): AppSocket => {
+  const socket = inject(injectionKey, null);
+  if (!socket) throw new Error('Socket not available');
+  return socket;
+};
+
 export const vueSocketIOClient: Plugin = {
   install: async (app: App, options: SocketPluginOptions): Promise<void> => {
-    const socketIO = io(options.connection, options);
+    const socketIO: AppSocket = io(options.connection, options);
 
     socketIO.on('connect', () => {
       console.log(`WebSocket connection established: ${socketIO.id}`);
diff --git a/src/stores/health.ts b/src/stores/health.ts
index 8bffdc3..4ca877e 100644
--- a/src/stores/health.ts
+++ b/src/stores/health.ts
@@ -2,40 +2,7 @@ import { defineStore } from 'pinia';
 import { ref, reactive, type Ref } from 'vue';
 import type { ChartData } from 'chart.js';
 import ChartHelper from '../helper/ChartHelper';
-import type { Socket } from 'socket.io-client';
-
-interface SystemInfo {
-  process: {
-    memoryUsage: {
-      rss: number;
-      heapTotal: number;
-      heapUsed: number;
-      external: number;
-    };
-  };
-  system: {
-    cpu: {
-      usage: number;
-      model: string;
-      cores: string;
-    };
-    memory: {
-      totalMemMb: number;
-      usedMemMb: number;
-      freeMemMb: number;
-      usedMemPercentage: number;
-      freeMemPercentage: number;
-    };
-    os: {
-      name: string;
-      arch: string;
-      type: string;
-    };
-    uptime: number;
-    hostname: string;
-    ip: string;
-  };
-}
+import type { AppSocket, SystemInfo } from '@/types/socket';
 
 type HealthChartData = {
   processMemory: ChartData<'line'>;
@@ -46,7 +13,7 @@ type HealthChartData = {
 type HealthStore = {
   state: Ref<SystemInfo | undefined>;
   chartData: HealthChartData;
-  init: (socket: Socket) => void;
+  init: (socket: AppSocket) => void;
 };
 
 export const useHealthStore = defineStore('health', (): HealthStore => {
@@ -93,8 +60,8 @@ export const useHealthStore = defineStore('health', (): HealthStore => {
   });
 
   // actions
-  function init(socket: Socket): void {
-    socket.on('healthMetrics', (data: SystemInfo) => {
+  function init(socket: AppSocket): void {
+    socket.on('healthMetrics', (data) => {
       state.value = data;
 
       if (!chartData) {
diff --git a/src/types/socket.ts b/src/types/socket.ts
new file mode 100644
index 0000000..123f96c
--- /dev/null
+++ b/src/types/socket.ts
@@ -0,0 +1,52 @@
+import type { Socket } from 'socket.io-client';
+import type Device from '@/model/devices/Device';
+import type { DeviceNotification } from '@/stores/deviceNotifications';
+
+export interface SystemInfo {
+  process: {
+    memoryUsage: {
+      rss: number;
+      heapTotal: number;
+      heapUsed: number;
+      external: number;
+    };
+  };
+  system: {
+    cpu: {
+      usage: number;
+      model: string;
+      cores: string;
+    };
+    memory: {
+      totalMemMb: number;
+      usedMemMb: number;
+      freeMemMb: number;
+      usedMemPercentage: number;
+      freeMemPercentage: number;
+    };
+    os: {
+      name: string;
+      arch: string;
+      type: string;
+    };
+    uptime: number;
+    hostname: string;
+    ip: string;
+  };
+}
+
+export interface ServerToClientEvents {
+  deviceConnected: (device: Device) => void;
+  deviceDisconnected: (device: Device) => void;
+  deviceRefreshed: (device: Device) => void;
+  deviceNotification: (device: Device, notification: DeviceNotification) => void;
+  automationConsoleLog: (data: string) => void;
+  settingsChanged: () => void;
+  healthMetrics: (data: SystemInfo) => void;
+}
+
+export interface ClientToServerEvents {
+  deviceUpdate: (payload: { deviceId: string; data: Record<string, unknown> }) => void;
+}
+
+export type AppSocket = Socket<ServerToClientEvents, ClientToServerEvents>;
diff --git a/src/types.d.ts b/src/types/utility.ts
similarity index 100%
rename from src/types.d.ts
rename to src/types/utility.ts

From 59f542ff10dc4ccd8df68ee82b1a4414857eb316 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Thu, 2 Jul 2026 22:15:36 +0200
Subject: [PATCH 09/12] Correctly display airotic device with bpm and trend

---
 src/components/device/control/DeviceAiroticControl.vue | 8 ++++++--
 src/model/devices/airotic/DeviceAirotic.ts             | 1 +
 src/stores/devices.ts                                  | 8 ++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index edb0e70..e801761 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -19,7 +19,6 @@ const props = defineProps<Props>();
 const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
-//const localDevice = reactive({ ...props.device });
 
 const localRestColor = ref({ r: 0, g: 0, b: 0 });
 const localBreathInColor = ref({ r: 0, g: 0, b: 0 });
@@ -52,6 +51,8 @@ const breathsPerMin = computed(() => {
   return (undefined === rawData) ? undefined : Math.round(rawData * 10) / 10;
 });
 
+const bpmTrend = computed(() => props.device.attributes.bpmTrend.value);
+
 const deviceNotificationsStore = useDeviceNotificationsStore();
 
 const latestNotification = computed<DeviceNotificationEvent | undefined>(
@@ -118,8 +119,11 @@ const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
 
   <dl>
     <dt class="mt-4 mb-2"><label>Breathing frequency</label></dt>
-    <dd class="text-h3 text-primary">
+    <dd class="text-h3 text-primary d-flex align-center ga-2">
       {{ undefined === breathsPerMin ? '&ndash;' : `${breathsPerMin.toFixed(1)}/min` }}
+      <span v-if="bpmTrend === 'up'">&ShortUpArrow;</span>
+      <span v-if="bpmTrend === 'down'">&ShortDownArrow;</span>
+      <span v-if="bpmTrend === 'stable'">&ShortRightArrow;</span>
     </dd>
   </dl>
 
diff --git a/src/model/devices/airotic/DeviceAirotic.ts b/src/model/devices/airotic/DeviceAirotic.ts
index f9963ce..5333554 100644
--- a/src/model/devices/airotic/DeviceAirotic.ts
+++ b/src/model/devices/airotic/DeviceAirotic.ts
@@ -6,6 +6,7 @@ export type DeviceAiroticAttributes = {
     resetColors: BoolDeviceAttribute,
     reboot: BoolDeviceAttribute,
     breathsPerMin: FloatDeviceAttribute,
+    bpmTrend: StrDeviceAttribute<'up' | 'down' | 'stable' | undefined>,
 };
 
 export type DeviceAirotic = WirelessDevice<DeviceAiroticAttributes>;
diff --git a/src/stores/devices.ts b/src/stores/devices.ts
index 13c6f94..ff536f1 100644
--- a/src/stores/devices.ts
+++ b/src/stores/devices.ts
@@ -41,6 +41,14 @@ export const useDevicesStore = defineStore('devices', () => {
       return;
     }
 
+    for (const key of Object.keys(device.attributes)) {
+      const incomingAttr = updatedDevice.attributes?.[key];
+      if (incomingAttr && !('value' in incomingAttr)) {
+        const attr = device.attributes[key];
+        if (attr) attr.value = undefined;
+      }
+    }
+
     deepMergeReactive(device, updatedDevice);
   }
 

From eeb38f484fe31ce728205fe55b950457b7cb2651 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sat, 4 Jul 2026 12:57:54 +0200
Subject: [PATCH 10/12] Nicer control design for airotic

---
 .../device/control/DeviceAiroticControl.vue   | 168 +++++++++++-------
 1 file changed, 108 insertions(+), 60 deletions(-)

diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index e801761..afee07e 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -20,8 +20,23 @@ const io = useRequiredSocketIO();
 
 const deviceComm = new DeviceCommunicator(props.device, io);
 
-const localRestColor = ref({ r: 0, g: 0, b: 0 });
-const localBreathInColor = ref({ r: 0, g: 0, b: 0 });
+const parseColor = (val: string | undefined): { r: number; g: number; b: number } => {
+  if (!val) return { r: 0, g: 0, b: 0 };
+  const [r, g, b] = val.split(',').map(Number);
+  return { r: r ?? 0, g: g ?? 0, b: b ?? 0 };
+};
+
+const localRestColor = ref(parseColor(props.device.attributes.restColor.value));
+const localBreathInColor = ref(parseColor(props.device.attributes.breathInColor.value));
+
+const restColorCss = computed(() => {
+  const c = localRestColor.value;
+  return `rgb(${c.r},${c.g},${c.b})`;
+});
+const breathInColorCss = computed(() => {
+  const c = localBreathInColor.value;
+  return `rgb(${c.r},${c.g},${c.b})`;
+});
 
 const restColorMenu = ref(false);
 const breathInColorMenu = ref(false);
@@ -62,6 +77,14 @@ const latestNotification = computed<DeviceNotificationEvent | undefined>(
 // 0 = restColor active, 1 = breathInColor active
 const breathState = ref<0 | 1>(0);
 
+watch(() => props.device.attributes.restColor.value, (val) => {
+  localRestColor.value = parseColor(val);
+});
+
+watch(() => props.device.attributes.breathInColor.value, (val) => {
+  localBreathInColor.value = parseColor(val);
+});
+
 watch(latestNotification, (event) => {
   if (!event) return;
   const { type, data } = event.notification;
@@ -129,63 +152,68 @@ const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
 
   <v-divider class="my-4" />
 
-  <div class="d-flex ga-4">
-    <v-btn class="px-3" color="primary" @click="restColorMenu = true">
-      Set Rest Color
-    </v-btn>
-    <v-dialog v-model="restColorMenu" max-width="360">
-      <v-card>
-        <v-card-title>Rest color</v-card-title>
-        <v-card-text>
-          <v-color-picker
-            v-model="localRestColor"
-            mode="rgb"
-            hide-inputs
-            hide-eye-dropper
-            width="100%"
-            bgColor="grey-darken-3"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="restColorMenu = false">
-            Cancel
-          </v-btn>
-          <v-btn color="primary" @click="applyRestColor">
-            Apply Color
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <v-btn class="px-3" color="primary" @click="breathInColorMenu = true">
-      Set Breath In Color
-    </v-btn>
-    <v-dialog v-model="breathInColorMenu" max-width="360">
-      <v-card>
-        <v-card-title>Breath in color</v-card-title>
-        <v-card-text>
-          <v-color-picker
-            v-model="localBreathInColor"
-            mode="rgb"
-            hide-inputs
-            hide-eye-dropper
-            width="100%"
-            bgColor="grey-darken-3"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="breathInColorMenu = false">
-            Cancel
-          </v-btn>
-          <v-btn color="primary" @click="applyBreathInColor">
-            Apply Color
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </div>
+  <v-row align="center" no-gutters>
+      <v-col cols="6">
+        <div class="d-flex align-center ga-3 color-trigger" @click="restColorMenu = true">
+          <span class="color-patch" :style="{ backgroundColor: restColorCss }" />
+          <div>
+            <h3>Rest color</h3>
+            <span class="text-link">Change</span>
+          </div>
+        </div>
+        
+        <v-dialog v-model="restColorMenu" max-width="360">
+          <v-card>
+            <v-card-title>Rest color</v-card-title>
+            <v-card-text>
+              <v-color-picker
+                v-model="localRestColor"
+                mode="rgb"
+                hide-inputs
+                hide-eye-dropper
+                width="100%"
+                bgColor="grey-darken-3"
+              />
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="restColorMenu = false">Cancel</v-btn>
+              <v-btn color="primary" @click="applyRestColor">Apply Color</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+      <v-col cols="6">
+        <div class="d-flex align-center ga-3 color-trigger" @click="breathInColorMenu = true">
+          <span class="color-patch" :style="{ backgroundColor: breathInColorCss }" />
+          <div>
+            <h3>Breath in color</h3>
+            <span class="text-link">Change</span>
+          </div>
+        </div>
+        
+        <v-dialog v-model="breathInColorMenu" max-width="360">
+          <v-card>
+            <v-card-title>Breath in color</v-card-title>
+            <v-card-text>
+              <v-color-picker
+                v-model="localBreathInColor"
+                mode="rgb"
+                hide-inputs
+                hide-eye-dropper
+                width="100%"
+                bgColor="grey-darken-3"
+              />
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="breathInColorMenu = false">Cancel</v-btn>
+              <v-btn color="primary" @click="applyBreathInColor">Apply Color</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-col>
+  </v-row>
 
   <v-divider class="mt-4" />
 
@@ -215,4 +243,24 @@ const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
   </v-footer>
 </template>
 
-<style scoped></style>
+<style scoped>
+.color-patch {
+  display: inline-block;
+  width: 2.5em;
+  height: 2.5em;
+  border-radius: .5em;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  flex-shrink: 0;
+}
+
+.color-trigger {
+  cursor: pointer;
+}
+
+.text-link {
+  cursor: pointer;
+  text-decoration: underline;
+  color: rgb(var(--v-theme-primary));
+  font-size: 0.875rem;
+}
+</style>

From b5be4b762f573d30ca85c94caf2aed83fe203170 Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sat, 4 Jul 2026 14:07:18 +0200
Subject: [PATCH 11/12] Review findinds - part 1

---
 src/App.vue                                   |  1 +
 src/components/automation/CreateForm.vue      |  2 +-
 .../device/control/DeviceAiroticControl.vue   | 36 +++++++++++++++----
 .../virtual/DeviceVirtualTtsControl.vue       |  7 +++-
 src/stores/deviceNotifications.ts             | 10 ++++++
 src/utils/utils.ts                            |  6 ++--
 src/views/SettingsView.vue                    | 14 ++++++--
 7 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 85b3539..ca8f948 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,6 +36,7 @@ if (backendStore.backendUrl) {
   io?.on('disconnect', () => {
     backendStore.setServerOnline(false);
     devicesStore.clear();
+    deviceNotificationsStore.clear();
   });
 
   io?.on('deviceDisconnected', (device) => {
diff --git a/src/components/automation/CreateForm.vue b/src/components/automation/CreateForm.vue
index 3fcbe56..ebbd25c 100644
--- a/src/components/automation/CreateForm.vue
+++ b/src/components/automation/CreateForm.vue
@@ -21,7 +21,7 @@ const scriptNameRules = [
     return 'The script name needs to be at least 3 characters long.';
   },
   (value: string) => {
-    if (value.length < 64) return true;
+    if (value.length <= 64) return true;
     return 'The script name needs to no more than 64 characters long.';
   },
   (value: string) => {
diff --git a/src/components/device/control/DeviceAiroticControl.vue b/src/components/device/control/DeviceAiroticControl.vue
index afee07e..ce2aff3 100644
--- a/src/components/device/control/DeviceAiroticControl.vue
+++ b/src/components/device/control/DeviceAiroticControl.vue
@@ -23,7 +23,7 @@ const deviceComm = new DeviceCommunicator(props.device, io);
 const parseColor = (val: string | undefined): { r: number; g: number; b: number } => {
   if (!val) return { r: 0, g: 0, b: 0 };
   const [r, g, b] = val.split(',').map(Number);
-  return { r: r ?? 0, g: g ?? 0, b: b ?? 0 };
+  return { r: Number.isFinite(r) ? r : 0, g: Number.isFinite(g) ? g : 0, b: Number.isFinite(b) ? b : 0 };
 };
 
 const localRestColor = ref(parseColor(props.device.attributes.restColor.value));
@@ -46,11 +46,21 @@ const applyRestColor = (): void => {
   restColorMenu.value = false;
 };
 
+const cancelRestColor = (): void => {
+  localRestColor.value = parseColor(props.device.attributes.restColor.value);
+  restColorMenu.value = false;
+};
+
 const applyBreathInColor = (): void => {
   deviceComm.setAttribute('breathInColor', localBreathInColor.value.r + ',' + localBreathInColor.value.g + ',' + localBreathInColor.value.b);
   breathInColorMenu.value = false;
 };
 
+const cancelBreathInColor = (): void => {
+  localBreathInColor.value = parseColor(props.device.attributes.breathInColor.value);
+  breathInColorMenu.value = false;
+};
+
 const rssiIcon = computed<{icon: string, color?: string}>(() => {
   const rssi = props.device.rssi;
 
@@ -92,7 +102,7 @@ watch(latestNotification, (event) => {
   if (type === 'colorChange') {
     breathState.value = data.colorType === 'breathInColor' ? 1 : 0;
   }
-});
+}, { immediate: true });
 
 // Chart
 const chartData: LineChartData = {
@@ -154,7 +164,14 @@ const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
 
   <v-row align="center" no-gutters>
       <v-col cols="6">
-        <div class="d-flex align-center ga-3 color-trigger" @click="restColorMenu = true">
+        <div
+          class="d-flex align-center ga-3 color-trigger"
+          role="button"
+          tabindex="0"
+          @click="restColorMenu = true"
+          @keydown.enter="restColorMenu = true"
+          @keydown.space.prevent="restColorMenu = true"
+        >
           <span class="color-patch" :style="{ backgroundColor: restColorCss }" />
           <div>
             <h3>Rest color</h3>
@@ -177,14 +194,21 @@ const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
             </v-card-text>
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn @click="restColorMenu = false">Cancel</v-btn>
+              <v-btn @click="cancelRestColor">Cancel</v-btn>
               <v-btn color="primary" @click="applyRestColor">Apply Color</v-btn>
             </v-card-actions>
           </v-card>
         </v-dialog>
       </v-col>
       <v-col cols="6">
-        <div class="d-flex align-center ga-3 color-trigger" @click="breathInColorMenu = true">
+        <div
+          class="d-flex align-center ga-3 color-trigger"
+          role="button"
+          tabindex="0"
+          @click="breathInColorMenu = true"
+          @keydown.enter="breathInColorMenu = true"
+          @keydown.space.prevent="breathInColorMenu = true"
+        >
           <span class="color-patch" :style="{ backgroundColor: breathInColorCss }" />
           <div>
             <h3>Breath in color</h3>
@@ -207,7 +231,7 @@ const chartOptionsRef = ref<ChartOptions<'line'>>(chartOptions);
             </v-card-text>
             <v-card-actions>
               <v-spacer></v-spacer>
-              <v-btn @click="breathInColorMenu = false">Cancel</v-btn>
+              <v-btn @click="cancelBreathInColor">Cancel</v-btn>
               <v-btn color="primary" @click="applyBreathInColor">Apply Color</v-btn>
             </v-card-actions>
           </v-card>
diff --git a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
index de4e15c..27980b8 100644
--- a/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
+++ b/src/components/device/control/virtual/DeviceVirtualTtsControl.vue
@@ -31,6 +31,11 @@ const sendTextHandler = (): void => {
     textAreaRef.value?.focus();
   });
 };
+
+const queuingLabel = computed<string>(() => {
+  return props.device.attributes.queuing.value ? 'Queuing enabled' : 'Queuing disabled';
+});
+
 const changeQueuing = (newValue: boolean | null): void => {
   if (newValue !== null) {
     deviceComm.setAttribute('queuing', newValue);
@@ -59,7 +64,7 @@ const changeQueuing = (newValue: boolean | null): void => {
         :hide-details="true"
         color="primary"
         class="pa-0 ma-0 mt-4 switch-label-left"
-        label="Queuing disabled"
+        :label="queuingLabel"
         @update:modelValue="changeQueuing"
       ></v-switch>
     </v-col>
diff --git a/src/stores/deviceNotifications.ts b/src/stores/deviceNotifications.ts
index 07f9a55..08bee77 100644
--- a/src/stores/deviceNotifications.ts
+++ b/src/stores/deviceNotifications.ts
@@ -25,9 +25,19 @@ export const useDeviceNotificationsStore = defineStore('deviceNotifications', ()
         return latest.value[deviceId];
     }
 
+    function remove(deviceId: string): void {
+        delete latest.value[deviceId];
+    }
+
+    function clear(): void {
+        latest.value = {};
+    }
+
     return {
         latest,
         dispatch,
         getLatest,
+        remove,
+        clear,
     };
 });
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 4a56e99..6d06023 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -53,7 +53,7 @@ export const isListDeviceAttribute = (obj: object): obj is ListDeviceAttribute<n
 }
 
 export const isStringDeviceAttribute = (obj: object): obj is StrDeviceAttribute => {
-    return hasType(obj, 'str') || hasType(obj, 'float') || hasType(obj, 'int');
+    return hasType(obj, 'str');
 }
 
 export const isIntDeviceAttribute = (obj: object): obj is IntDeviceAttribute => {
@@ -72,7 +72,7 @@ export const hasType = (obj: unknown, expectedType: string): boolean => {
     return (
         typeof obj === 'object' &&
         obj !== null &&
-        obj.hasOwnProperty('type') &&
-        (obj as { type?: string }).type === expectedType
+        'type' in obj &&
+        obj.type === expectedType
     );
 }
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 440b253..321f071 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {defineAsyncComponent, nextTick, ref, watch} from 'vue';
+import {defineAsyncComponent, nextTick, onBeforeUnmount, ref, watch} from 'vue';
 import { useSettingsStore } from '@/stores/settings';
 import { useAppStore } from '@/stores/app';
 import { storeToRefs } from 'pinia';
@@ -18,6 +18,7 @@ const appStore = useAppStore();
 const backendStore = useBackendStore();
 const { theme, serverSettings, validationErrors } = storeToRefs(settingsStore);
 
+let resizeHandler: (() => void) | null = null;
 let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
 const options: monaco.editor.IEditorOptions = {
   fontSize: 16,
@@ -49,7 +50,7 @@ function storeEditorInstance(
     editor.layout({ width: rect.width, height: rect.height });
   }
 
-  window.addEventListener('resize', () => {
+  resizeHandler = () => {
     // make editor as small as possible
     editor.layout({ width: 0, height: 0 });
 
@@ -65,10 +66,17 @@ function storeEditorInstance(
       const rect = monacoElement.getBoundingClientRect();
       editor.layout({ width: rect.width, height: rect.height });
     });
-  });
+  };
+  window.addEventListener('resize', resizeHandler);
   editorInstance = editor;
 }
 
+onBeforeUnmount(() => {
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler);
+  }
+});
+
 function saveServerSettings(): void {
   settingsStore.saveServerSettings()
       .then(() => appStore.displaySnackbar(`Server settings saved`))

From 50010191afcca914d55b0f1b8f5b041a4fb6830d Mon Sep 17 00:00:00 2001
From: HRS <pascal@heavyrubberslave.com>
Date: Sat, 4 Jul 2026 14:30:42 +0200
Subject: [PATCH 12/12] Review findings - part 2

---
 src/components/device/DebouncedTextField.vue | 11 ++++++++++-
 src/shims-vue.d.ts                           |  4 ++--
 src/vueSocketIOClient.d.ts                   |  7 -------
 3 files changed, 12 insertions(+), 10 deletions(-)
 delete mode 100644 src/vueSocketIOClient.d.ts

diff --git a/src/components/device/DebouncedTextField.vue b/src/components/device/DebouncedTextField.vue
index ee27bcf..4d4385f 100644
--- a/src/components/device/DebouncedTextField.vue
+++ b/src/components/device/DebouncedTextField.vue
@@ -32,7 +32,16 @@ watch(
 );
 
 const emitValue = (value: string | number): void => {
-  emit('update:modelValue', value);
+  let valueToEmit = value;
+
+  if (props.type === 'number' && typeof value === 'string') {
+    const numericValue = Number(value);
+    if (!Number.isNaN(numericValue)) {
+      valueToEmit = numericValue;
+    }
+  }
+
+  emit('update:modelValue', valueToEmit);
 };
 
 const handleValueChange = (value: string | number): void => {
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index b52c925..8be38ab 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,9 +1,9 @@
 declare module '*.vue';
 declare module '*.js';
-import type { Socket } from 'socket.io-client';
+import type { AppSocket } from '@/types/socket';
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
-    $socket: Socket;
+    $socket: AppSocket;
   }
 }
diff --git a/src/vueSocketIOClient.d.ts b/src/vueSocketIOClient.d.ts
deleted file mode 100644
index 003ff40..0000000
--- a/src/vueSocketIOClient.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Socket } from 'socket.io-client';
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $socket: typeof Socket;
-  }
-}