From c9b744449c8c771c7f42b63442541c5c2c9eee3a Mon Sep 17 00:00:00 2001
From: Christoph Giesche <christoph.giesche@cgidev.de>
Date: Mon, 16 Oct 2023 22:12:47 +0200
Subject: [PATCH 1/4] streamdeck-homeassistant-117 Streamdeck Plus

---
 public/manifest.json                          |  7 +-
 src/components/PiComponent.vue                | 77 ++++++++++++----
 src/components/PluginComponent.vue            | 89 ++++++++++++++-----
 src/components/ServiceCallConfiguration.vue   | 42 ++++++---
 src/components/accordeon/Accordeon.vue        | 14 +++
 src/components/accordeon/AccordeonItem.vue    | 31 +++++++
 src/modules/common/settings.js                | 21 ++++-
 src/modules/common/streamdeck.js              | 27 +++++-
 .../plugin/entityButtonImageFactory.js        |  5 --
 9 files changed, 254 insertions(+), 59 deletions(-)
 create mode 100644 src/components/accordeon/Accordeon.vue
 create mode 100644 src/components/accordeon/AccordeonItem.vue

diff --git a/public/manifest.json b/public/manifest.json
index 42884d8..6f6dfd7 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -12,7 +12,12 @@
         }
       ],
       "SupportedInMultiActions": true,
-      "UUID": "de.perdoctus.streamdeck.homeassistant.entity"
+      "UUID": "de.perdoctus.streamdeck.homeassistant.entity",
+      "Controllers": ["Keypad", "Encoder"],
+      "Encoder": {
+        "layout": "$A0",
+        "StackColor": "#AABBCC"
+      }
     },
 
     {
diff --git a/src/components/PiComponent.vue b/src/components/PiComponent.vue
index 3dfa7ff..21fc5da 100644
--- a/src/components/PiComponent.vue
+++ b/src/components/PiComponent.vue
@@ -42,7 +42,7 @@
     </div>
 
     <div v-if="haConnectionState === 'connected'" class="clearfix mb-3">
-      <h1>Button appearance</h1>
+      <h1>{{ controllerType }} appearance</h1>
 
       <div class="mb-3">
         <label class="form-label" for="accessToken">Domain</label>
@@ -115,19 +115,46 @@
         <label class="form-check-label" for="chkHideIcon">Hide icon</label>
       </div>
 
-      <h1>Button actions</h1>
-
-      <h6>Short Press</h6>
-      <ServiceCallConfiguration v-model="serviceShortPress"
-                                :available-entities="availableEntities"
-                                :available-services="availableServices"
-
-      ></ServiceCallConfiguration>
-
-      <h6>Long Press</h6>
-      <ServiceCallConfiguration v-model="serviceLongPress"
-                                :available-entities="availableEntities"
-                                :available-services="availableServices"></ServiceCallConfiguration>
+      <h1>{{ controllerType }} actions</h1>
+
+      <AccordeonComponent id="presses" class="mb-2">
+        <AccordeonItem accordeon-id="presses" item-id="shortPress" title="Short Press">
+          <ServiceCallConfiguration v-model="serviceShortPress" :available-entities="availableEntities"
+                                    :available-services="availableServices"
+                                    class="mb-2"
+
+          ></ServiceCallConfiguration>
+        </AccordeonItem>
+
+        <AccordeonItem accordeon-id="presses" item-id="longPress" title="Long Press">
+          <ServiceCallConfiguration v-model="serviceLongPress" :available-entities="availableEntities"
+                                    :available-services="availableServices"
+                                    class="mb-2"></ServiceCallConfiguration>
+
+        </AccordeonItem>
+
+        <template v-if="controllerType === 'Encoder'">
+          <AccordeonItem accordeon-id="presses" item-id="touch" title="Screen tap">
+            <ServiceCallConfiguration v-model="serviceTap" :available-entities="availableEntities"
+                                      :available-services="availableServices"
+                                      class="mb-2"></ServiceCallConfiguration>
+          </AccordeonItem>
+
+          <AccordeonItem accordeon-id="presses" item-id="dialRotate" title="Rotation">
+            <ServiceCallConfiguration v-model="serviceRotation"
+                                      :available-entities="availableEntities"
+                                      :available-services="availableServices"></ServiceCallConfiguration>
+            <details class="mb-2">
+              <summary>Available variables</summary>
+              <div class="form-text">
+                <span v-pre class="text-info font-monospace">{{ ticks }}</span> - The number of ticks the dial was
+                rotated
+              </div>
+            </details>
+          </AccordeonItem>
+        </template>
+
+      </AccordeonComponent>
 
       <button id="mybutton" :disabled="!domain" class="btn btn-sm btn-primary float-end"
               v-on:click="saveSettings">
@@ -148,6 +175,8 @@ import {Service} from "@/modules/pi/service";
 import {computed, onMounted, ref} from "vue";
 import ServiceCallConfiguration from "@/components/ServiceCallConfiguration.vue";
 import {ObjectUtils} from "@/modules/common/utils";
+import AccordeonComponent from "@/components/accordeon/Accordeon.vue";
+import AccordeonItem from "@/components/accordeon/AccordeonItem.vue";
 
 let $HA = null;
 let $SD = null;
@@ -156,8 +185,12 @@ const serverUrl = ref("")
 const accessToken = ref("")
 const domain = ref("")
 const entity = ref("")
+
 const serviceShortPress = ref({})
 const serviceLongPress = ref({})
+const serviceTap = ref({})
+const serviceRotation = ref({})
+
 const useCustomTitle = ref(false)
 const buttonTitle = ref("{{friendly_name}}")
 const useStateImagesForOnOffStates = ref(false) // determined by action ID (manifest)
@@ -173,6 +206,8 @@ const currentStates = ref([])
 const haConnectionState = ref("disconnected") // disconnected, connecting, connected
 const haError = ref("")
 
+const controllerType = ref("")
+
 
 onMounted(() => {
   window.connectElgatoStreamDeckSocket = (inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) => {
@@ -180,9 +215,9 @@ onMounted(() => {
 
     // Dual State entity (custom icons for on/off)
     const inActionInfoObject = JSON.parse(inActionInfo);
-    if (inActionInfoObject["action"] === "de.perdoctus.streamdeck.homeassistant.dual-state-entity") {
-      useStateImagesForOnOffStates.value = true;
-    }
+
+    useStateImagesForOnOffStates.value = inActionInfoObject["action"] === "de.perdoctus.streamdeck.homeassistant.dual-state-entity";
+    controllerType.value = inActionInfoObject.payload.controller
 
     $SD.on("globalsettings", (globalSettings) => {
       if (globalSettings) {
@@ -210,6 +245,8 @@ onMounted(() => {
       buttonLabels.value = settings["display"]["buttonLabels"]
       serviceShortPress.value = settings["button"]["serviceShortPress"]
       serviceLongPress.value = settings["button"]["serviceLongPress"]
+      serviceTap.value = settings["button"]["serviceTap"]
+      serviceRotation.value = settings["button"]["serviceRotation"]
     })
   }
 })
@@ -301,7 +338,9 @@ function saveGlobalSettings() {
 
 function saveSettings() {
   let settings = {
-    version: 3,
+    version: 4,
+
+    controllerType: controllerType.value,
 
     display: {
       domain: domain.value,
@@ -318,6 +357,8 @@ function saveSettings() {
     button: {
       serviceShortPress: serviceShortPress.value,
       serviceLongPress: serviceLongPress.value,
+      serviceTap: serviceTap.value,
+      serviceRotation: serviceRotation.value
     }
 
   }
diff --git a/src/components/PluginComponent.vue b/src/components/PluginComponent.vue
index c596db2..536a9f5 100644
--- a/src/components/PluginComponent.vue
+++ b/src/components/PluginComponent.vue
@@ -17,10 +17,12 @@ const buttonImageFactory = new EntityButtonImageFactory()
 const $SD = ref(null)
 const $HA = ref(null)
 const $reconnectTimeout = ref({})
-// const useStateImagesForOnOffStates = ref(false)
-const actionSettings = ref({})
+const actionSettings = ref([])
 const buttonLongpressTimeouts = ref(new Map()) //context, timeout
 
+let rotationTimeout = [];
+let rotationAmount = [];
+
 onMounted(() => {
   window.connectElgatoStreamDeckSocket = (inPort, inPluginUUID, inRegisterEvent, inInfo) => {
     $SD.value = new StreamDeck(inPort, inPluginUUID, inRegisterEvent, inInfo, "{}");
@@ -32,7 +34,6 @@ onMounted(() => {
         }
     )
 
-
     const onHAConnected = () => {
       $HA.value.getStates(entitiyStatesChanged)
       $HA.value.subscribeEvents(entityStateChanged)
@@ -61,26 +62,16 @@ onMounted(() => {
     })
 
     $SD.value.on("keyDown", (message) => {
-      let context = message.context
-
-      const timeout = setTimeout(buttonLongPress, 300, context);
-      buttonLongpressTimeouts.value.set(context, timeout)
+      buttonDown(message.context);
     })
 
     $SD.value.on("keyUp", (message) => {
-      let context = message.context
-
-      // If "long press timeout" is still present, we perform a normal press
-      const lpTimeout = buttonLongpressTimeouts.value.get(context);
-      if (lpTimeout) {
-        clearTimeout(lpTimeout);
-        buttonLongpressTimeouts.value.delete(context)
-        buttonShortPress(context);
-      }
+      buttonUp(message.context);
     })
 
     $SD.value.on("willAppear", (message) => {
       let context = message.context;
+      rotationAmount[context] = 0;
       actionSettings.value[context] = Settings.parse(message.payload.settings)
       if ($HA.value) {
         $HA.value.getStates(entitiyStatesChanged)
@@ -92,15 +83,61 @@ onMounted(() => {
       delete actionSettings.value[context]
     })
 
+    $SD.value.on("dialRotate", (message) => {
+      let context = message.context;
+      let settings = actionSettings.value[context];
+
+      rotationAmount[context] += message.payload.ticks;
+
+      if (rotationTimeout[context])
+        return;
+
+      rotationTimeout[context] = setTimeout(() => {
+        callService(context, settings.button.serviceRotation, {ticks: rotationAmount[context]});
+        rotationAmount[context] = 0;
+        rotationTimeout[context] = null;
+      }, 300);
+
+    })
+
+    $SD.value.on("dialDown", (message) => {
+      buttonDown(message.context);
+    })
+
+    $SD.value.on("dialUp", (message) => {
+      buttonUp(message.context);
+    })
+
+    $SD.value.on("touchTap", (message) => {
+      let context = message.context;
+      let settings = actionSettings.value[context];
+      callService(context, settings.button.serviceTap);
+    })
+
     $SD.value.on("didReceiveSettings", (message) => {
       let context = message.context;
+      rotationAmount[context] = 0;
       actionSettings.value[context] = Settings.parse(message.payload.settings)
-
       if ($HA.value) {
         $HA.value.getStates(entitiyStatesChanged)
       }
     })
 
+    const buttonDown = (context) => {
+      const timeout = setTimeout(buttonLongPress, 300, context);
+      buttonLongpressTimeouts.value.set(context, timeout)
+    }
+
+    const buttonUp = (context) => {
+      // If "long press timeout" is still present, we perform a normal press
+      const lpTimeout = buttonLongpressTimeouts.value.get(context);
+      if (lpTimeout) {
+        clearTimeout(lpTimeout);
+        buttonLongpressTimeouts.value.delete(context)
+        buttonShortPress(context);
+      }
+    }
+
     const buttonShortPress = (context) => {
       let settings = actionSettings.value[context];
       callService(context, settings.button.serviceShortPress);
@@ -108,7 +145,7 @@ onMounted(() => {
 
     const buttonLongPress = (context) => {
       buttonLongpressTimeouts.value.delete(context);
-      let settings = actionSettings[context];
+      let settings = actionSettings.value[context];
       if (settings.button.serviceLongPress.serviceId) {
         callService(context, settings.button.serviceLongPress);
       } else {
@@ -116,12 +153,18 @@ onMounted(() => {
       }
     }
 
-    const callService = (context, serviceToCall) => {
+    const callService = (context, serviceToCall, serviceDataAttributes = {}) => {
       if ($HA.value) {
         if (serviceToCall["serviceId"]) {
           try {
             const serviceIdParts = serviceToCall.serviceId.split('.');
-            const serviceData = serviceToCall.serviceData ? JSON.parse(serviceToCall.serviceData) : null;
+
+            let serviceData = null;
+            if (serviceToCall.serviceData) {
+              let renderedServiceData = nunjucks.renderString(serviceToCall.serviceData, serviceDataAttributes)
+              serviceData = JSON.parse(renderedServiceData);
+            }
+
             $HA.value.callService(serviceIdParts[1], serviceIdParts[0], serviceToCall.entityId, serviceData)
           } catch (e) {
             console.error(e)
@@ -222,7 +265,11 @@ onMounted(() => {
 
   const setButtonSVG = (svg, changedContext) => {
     const image = "data:image/svg+xml;charset=utf8," + svg;
-    $SD.value.setImage(changedContext, image)
+    if (actionSettings.value[changedContext].controllerType === 'Encoder') {
+      $SD.value.setFeedback(changedContext, {"canvas": image, title: "Hallo"})
+    } else {
+      $SD.value.setImage(changedContext, image)
+    }
   }
 })
 
diff --git a/src/components/ServiceCallConfiguration.vue b/src/components/ServiceCallConfiguration.vue
index a280be4..a81c2aa 100644
--- a/src/components/ServiceCallConfiguration.vue
+++ b/src/components/ServiceCallConfiguration.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-2">
+  <div>
 
     <div class="mb-3">
       <label class="form-label" for="domain">Domain</label>
@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    <div v-if="props.modelValue.serviceId" class="mb-3">
+    <template v-if="props.modelValue.serviceId">
       <label class="form-label" for="serviceData">Service Data JSON (Optional)</label>
       <textarea
           id="serviceData"
@@ -78,22 +78,37 @@
           </template>
         </div>
       </details>
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup>
 
 import {computed, onMounted, ref} from "vue";
+import nunjucks from "nunjucks";
 
 const titleSort = (s1, s2) => s1.title.toLowerCase() > s2.title.toLowerCase() ? 1 : -1;
 
 
-const props = defineProps([
-  'modelValue', // domainId.serviceId
-  'availableServices', // Service[]
-  'availableEntities', // Entity[]
-])
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: Object,
+    default: () => ({
+      serviceId: null,
+      entityId: null,
+      serviceData: null
+    })
+  },
+  availableServices: {
+    required: true,
+    type: [] // Service[]
+  },
+  availableEntities: {
+    required: true,
+    type: [] // Entity[]
+  }
+})
 
 const emit = defineEmits([
   'update:modelValue'
@@ -137,7 +152,7 @@ const domainServices = computed(() => {
 })
 
 const domainEntities = computed(() => {
-  if (!props.availableServices || !props.availableEntities || !props.modelValue.serviceId) {
+  if (!props.availableServices || !props.availableEntities || !props.modelValue || !props.modelValue.serviceId) {
     return [];
   }
   let selectedService = props.availableServices.filter(service => service.serviceId === props.modelValue.serviceId)[0]
@@ -153,11 +168,14 @@ const domainEntities = computed(() => {
 })
 
 const serviceDataInvalidFeedback = computed(() => {
-  if (!props.modelValue.serviceData) {
+  let serviceDataString = props.modelValue.serviceData;
+  if (!serviceDataString) {
     return "";
   }
   try {
-    const json = JSON.parse(props.modelValue.serviceData);
+    const renderedServiceData = nunjucks.renderString(serviceDataString, {ticks: 5});
+
+    const json = JSON.parse(renderedServiceData);
     return (typeof json === "object") ? "" : "Service data must be an JSON object."
   } catch (e) {
     return "Invalid JSON string: " + e;
@@ -165,7 +183,7 @@ const serviceDataInvalidFeedback = computed(() => {
 })
 
 const dataProperties = computed(() => {
-  if (!(props.availableServices.length && props.availableEntities && props.modelValue.serviceId)) {
+  if (!(props.availableServices.length && props.availableEntities && props.modelValue && props.modelValue.serviceId)) {
     return [];
   }
   let selectedService = props.availableServices.filter(service => service.serviceId === props.modelValue.serviceId)[0]
diff --git a/src/components/accordeon/Accordeon.vue b/src/components/accordeon/Accordeon.vue
new file mode 100644
index 0000000..f4e0f32
--- /dev/null
+++ b/src/components/accordeon/Accordeon.vue
@@ -0,0 +1,14 @@
+<template>
+  <div :id="id" class="accordion">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+
+defineProps({
+  id: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/accordeon/AccordeonItem.vue b/src/components/accordeon/AccordeonItem.vue
new file mode 100644
index 0000000..8062531
--- /dev/null
+++ b/src/components/accordeon/AccordeonItem.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="accordion-item">
+    <h2 class="accordion-header" :id="itemId">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="'#collapse' + itemId" aria-expanded="true" :aria-controls="'collapse' + itemId">
+        {{ title }}
+      </button>
+    </h2>
+    <div :id="'collapse' + itemId" class="accordion-collapse collapse" :aria-labelledby="itemId" :data-bs-parent="'#' + accordeonId">
+      <div class="accordion-body">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  accordeonId: {
+    type: String,
+    required: true
+  },
+  itemId: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+})
+</script>
diff --git a/src/modules/common/settings.js b/src/modules/common/settings.js
index 6858ba1..b45ab4b 100644
--- a/src/modules/common/settings.js
+++ b/src/modules/common/settings.js
@@ -87,7 +87,26 @@ export class Settings {
         }
 
         if (settings.version === 3) {
+            let settingsV4 = {...settings};
+            settingsV4.version = 4
+
+            settingsV4.button.serviceRotation = {
+                serviceId: "",
+                entityId: "",
+                serviceData: "",
+            }
+            settingsV4.button.serviceTap = {
+                serviceId: "",
+                entityId: "",
+                serviceData: "",
+            }
+            settingsV4.controllerType = "Keypad"
+
+            return this.parse(settingsV4)
+        }
+
+        if (settings.version === 4) {
             return settings;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/modules/common/streamdeck.js b/src/modules/common/streamdeck.js
index 861dd15..2bae5ca 100644
--- a/src/modules/common/streamdeck.js
+++ b/src/modules/common/streamdeck.js
@@ -30,6 +30,21 @@ export class StreamDeck {
                 case "keyUp":
                     this.events.emit("keyUp", incomingEvent)
                     break;
+                case "dialDown":
+                    this.events.emit("dialDown", incomingEvent)
+                    break;
+                case "dialUp":
+                    this.events.emit("dialUp", incomingEvent)
+                    break;
+                case "dialRotate":
+                    this.events.emit("dialRotate", incomingEvent)
+                    break;
+                case "touchTap":
+                    this.events.emit("touchTap", incomingEvent)
+                    break;
+                case "systemDidWakeUp":
+                    this.events.emit("systemDidWakeUp", incomingEvent)
+                    break;
                 case "willAppear":
                     this.events.emit("willAppear", incomingEvent)
                     break;
@@ -102,6 +117,16 @@ export class StreamDeck {
         this.streamDeckWebsocket.send(JSON.stringify(message))
     }
 
+    setFeedback(context, payload) {
+        let message = {
+            "event": "setFeedback",
+            "context": context,
+            "payload": payload
+        }
+
+        this.streamDeckWebsocket.send(JSON.stringify(message))
+    }
+
     showAlert(context) {
         let message = {
             "event": "showAlert",
@@ -119,7 +144,7 @@ export class StreamDeck {
 
         this.streamDeckWebsocket.send(JSON.stringify(message))
     }
-    
+
     setState(context, number) {
         let message = {
             "event": "setState",
diff --git a/src/modules/plugin/entityButtonImageFactory.js b/src/modules/plugin/entityButtonImageFactory.js
index 34a5758..54b029e 100644
--- a/src/modules/plugin/entityButtonImageFactory.js
+++ b/src/modules/plugin/entityButtonImageFactory.js
@@ -25,16 +25,11 @@ export class EntityConfigFactory {
         let stateAttributes = stateObject.attributes;
         let deviceClass = stateAttributes.device_class || "default";
 
-        console.log(`Finding entity-config for ${domain}.${deviceClass}(${state})`)
-
         if (this[domain] && this[domain][deviceClass]) {
-            console.log(`... sucess (device class)!`)
             return this[domain][deviceClass](state, stateAttributes, labelTemplates);
         } else if (this[domain] && this[domain]["default"]) {
-            console.log(`... sucess (domain)!`)
             return this[domain]["default"](state, stateAttributes, labelTemplates);
         } else {
-            console.log(`... sucess (generic default)!`)
             return this.default(state, stateAttributes, labelTemplates);
         }
     }

From 770eefb49544e89c9468a3698c70ce3a6922dddd Mon Sep 17 00:00:00 2001
From: Christoph Giesche <christoph.giesche@cgidev.de>
Date: Mon, 16 Oct 2023 22:13:21 +0200
Subject: [PATCH 2/4] streamdeck-homeassistant-117 Streamdeck Plus

---
 src/components/PiComponent.vue                                | 4 ++--
 .../accordeon/{Accordeon.vue => BootstrapAccordeon.vue}       | 0
 .../{AccordeonItem.vue => BootstrapAccordeonItem.vue}         | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/components/accordeon/{Accordeon.vue => BootstrapAccordeon.vue} (100%)
 rename src/components/accordeon/{AccordeonItem.vue => BootstrapAccordeonItem.vue} (100%)

diff --git a/src/components/PiComponent.vue b/src/components/PiComponent.vue
index 21fc5da..01d878f 100644
--- a/src/components/PiComponent.vue
+++ b/src/components/PiComponent.vue
@@ -175,8 +175,8 @@ import {Service} from "@/modules/pi/service";
 import {computed, onMounted, ref} from "vue";
 import ServiceCallConfiguration from "@/components/ServiceCallConfiguration.vue";
 import {ObjectUtils} from "@/modules/common/utils";
-import AccordeonComponent from "@/components/accordeon/Accordeon.vue";
-import AccordeonItem from "@/components/accordeon/AccordeonItem.vue";
+import AccordeonComponent from "@/components/accordeon/BootstrapAccordeon.vue";
+import AccordeonItem from "@/components/accordeon/BootstrapAccordeonItem.vue";
 
 let $HA = null;
 let $SD = null;
diff --git a/src/components/accordeon/Accordeon.vue b/src/components/accordeon/BootstrapAccordeon.vue
similarity index 100%
rename from src/components/accordeon/Accordeon.vue
rename to src/components/accordeon/BootstrapAccordeon.vue
diff --git a/src/components/accordeon/AccordeonItem.vue b/src/components/accordeon/BootstrapAccordeonItem.vue
similarity index 100%
rename from src/components/accordeon/AccordeonItem.vue
rename to src/components/accordeon/BootstrapAccordeonItem.vue

From dd1dbe4c01b164b013f19adaea69d6bc3cc4b6ba Mon Sep 17 00:00:00 2001
From: Christoph Giesche <christoph.giesche@cgidev.de>
Date: Sun, 5 Nov 2023 23:00:29 +0100
Subject: [PATCH 3/4] streamdeck-homeassistant-117 Refactoring + Minimalistic
 SD+ hack for display.

---
 src/components/PluginComponent.vue            |  15 +-
 .../plugin/entityButtonImageFactory.js        | 386 +-----------------
 src/modules/plugin/entityConfigFactory.js     | 381 +++++++++++++++++
 src/modules/plugin/imageUtils.js              |  84 ----
 src/modules/plugin/svgUtils.js                |  45 +-
 5 files changed, 422 insertions(+), 489 deletions(-)
 create mode 100644 src/modules/plugin/entityConfigFactory.js
 delete mode 100644 src/modules/plugin/imageUtils.js

diff --git a/src/components/PluginComponent.vue b/src/components/PluginComponent.vue
index 536a9f5..3f6fc6f 100644
--- a/src/components/PluginComponent.vue
+++ b/src/components/PluginComponent.vue
@@ -5,14 +5,16 @@
 <script setup>
 import {StreamDeck} from "@/modules/common/streamdeck";
 import {Homeassistant} from "@/modules/homeassistant/homeassistant";
-import {EntityButtonImageFactory, EntityConfigFactory} from "@/modules/plugin/entityButtonImageFactory";
+import {EntityButtonImageFactory} from "@/modules/plugin/entityButtonImageFactory";
 import nunjucks from "nunjucks"
 import {Settings} from "@/modules/common/settings";
 import {onMounted, ref} from "vue";
+import {EntityConfigFactory} from "@/modules/plugin/entityConfigFactory";
 
 
 const entityConfigFactory = new EntityConfigFactory()
 const buttonImageFactory = new EntityButtonImageFactory()
+const touchScreenImageFactory = new EntityButtonImageFactory({width: 200, height: 100})
 
 const $SD = ref(null)
 const $HA = ref(null)
@@ -249,8 +251,13 @@ onMounted(() => {
             $SD.value.setState(currentContext, 0);
         }
       } else {
-        const buttonImage = buttonImageFactory.createButton(entityConfig);
-        setButtonSVG(buttonImage, currentContext)
+        if (contextSettings.controllerType === 'Encoder') {
+          const buttonImage = touchScreenImageFactory.createButton(entityConfig);
+          setButtonSVG(buttonImage, currentContext)
+        } else {
+          const buttonImage = buttonImageFactory.createButton(entityConfig);
+          setButtonSVG(buttonImage, currentContext)
+        }
       }
 
       if (contextSettings.display.useCustomTitle) {
@@ -266,7 +273,7 @@ onMounted(() => {
   const setButtonSVG = (svg, changedContext) => {
     const image = "data:image/svg+xml;charset=utf8," + svg;
     if (actionSettings.value[changedContext].controllerType === 'Encoder') {
-      $SD.value.setFeedback(changedContext, {"canvas": image, title: "Hallo"})
+      $SD.value.setFeedback(changedContext, {"full-canvas": image, "canvas": null, "title": ""})
     } else {
       $SD.value.setImage(changedContext, image)
     }
diff --git a/src/modules/plugin/entityButtonImageFactory.js b/src/modules/plugin/entityButtonImageFactory.js
index 54b029e..c8224fe 100644
--- a/src/modules/plugin/entityButtonImageFactory.js
+++ b/src/modules/plugin/entityButtonImageFactory.js
@@ -1,393 +1,15 @@
 'use strict';
-import * as Mdi from "@mdi/js";
 import nunjucks from "nunjucks"
 import {SvgUtils} from "./svgUtils";
 
-export class EntityConfigFactory {
-
-    constructor() {
-        // Todo: configurable colors
-        this.colors = {
-            unavailable: "#505050",
-
-            neutral: "#FFF",
-            passive: "#a1a1a1",
-            active: "#e9b200",
-
-            ok: "#08ac00",
-            warn: "#a13300",
-            error: "#a10000"
-        }
-    }
-
-    determineConfig(domain, stateObject, labelTemplates) {
-        let state = stateObject.state;
-        let stateAttributes = stateObject.attributes;
-        let deviceClass = stateAttributes.device_class || "default";
-
-        if (this[domain] && this[domain][deviceClass]) {
-            return this[domain][deviceClass](state, stateAttributes, labelTemplates);
-        } else if (this[domain] && this[domain]["default"]) {
-            return this[domain]["default"](state, stateAttributes, labelTemplates);
-        } else {
-            return this.default(state, stateAttributes, labelTemplates);
-        }
-    }
-
-    default(state, attributes, templates) {
-        const iconString = this.#tryGetIconFromAttributes(attributes);
-        let icon = null;
-        let color = this.colors.unavailable;
-
-        if (state) {
-            color = this.colors.neutral;
-        }
-
-        if (iconString) {
-            icon = Mdi[iconString]
-        }
-        if (!templates) {
-            templates = []
-            if (icon) {
-                templates.push(" ", " ")
-            }
-            templates.push("{{state}}")
-        }
-
-        return {
-            state,
-            attributes,
-            templates,
-            icon,
-            color
-        }
-    }
-
-    "switch" = {
-        "default": (state, attributes, templates) => {
-            let icon = Mdi.mdiToggleSwitchOff;
-            let color = this.colors.unavailable;
-
-            if (state === 'on') {
-                icon = Mdi.mdiToggleSwitch
-                color = this.colors.active
-            } else if (state === 'off') {
-                color = this.colors.passive;
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        }
-    }
-
-    light = this.switch
-
-    input_boolean = this.switch
-
-    "binary_sensor" = {
-        "default": (state, attributes, templates) => {
-            let icon;
-            let color = this.colors.unavailable;
-
-            if (state === 'on') {
-                icon = Mdi.mdiCircleSlice8
-                color = this.colors.active
-            } else if (state === 'off') {
-                icon = Mdi.mdiCircleOutline
-                color = this.colors.passive
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        },
-
-        "plug": (state, attributes, templates) => {
-            const customizableDefaultConfig = this.binary_sensor.default(state, attributes, templates);
-
-            if (state === 'on') {
-                customizableDefaultConfig.icon = Mdi.mdiPowerPlugOutline
-            } else if (state === 'off') {
-                customizableDefaultConfig.icon = Mdi.mdiPowerPlugOffOutline
-            }
-
-            return customizableDefaultConfig;
-        },
-
-        "window": (state, attributes, templates) => {
-            const customizableDefaultConfig = this.binary_sensor.default(state, attributes, templates);
-
-            if (state === 'on') {
-                customizableDefaultConfig.icon = Mdi.mdiWindowOpenVariant
-            } else if (state === 'off') {
-                customizableDefaultConfig.icon = Mdi.mdiWindowClosedVariant
-            }
-
-            return customizableDefaultConfig;
-        }
-    }
-    "cover" = {
-        "garage": (state, attributes, templates) => {
-            let icon;
-            let color = this.colors.unavailable;
-
-            if (state === 'open') {
-                icon = Mdi.mdiGarageOpen
-                color = this.colors.active
-            } else if (state === 'closed') {
-                icon = Mdi.mdiGarage
-                color = this.colors.passive
-            } else if (state === 'closing') {
-                icon = Mdi.mdiArrowDownBox
-                color = this.colors.active
-            } else if (state === 'opening') {
-                icon = Mdi.mdiArrowUpBox 
-                color = this.colors.active
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        }
-    }
-    sensor = {
-        "humidity": (state, attributes, templates) => {
-            const icon = Mdi.mdiWaterPercent;
-            let color = "#3f3fdb";
-
-            if (!templates) {
-                templates = [" ", " ", "{{state}}{{unit_of_measurement}}"]
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        },
-
-        "temperature": (state, attributes, templates) => {
-            const icon = Mdi.mdiThermometer;
-
-            let temperature = 0 + state;
-            if (attributes.unit_of_measurement === "°F") {
-                temperature = (temperature - 32) * 5/9;
-            }
-
-            let color = "#00a400";
-            if (temperature < 5) {
-                color = "#3838f8";
-            } else if (temperature > 25) {
-                color = "#fa4848";
-            }
-
-            if (!templates) {
-                templates = [" ", " ", "{{state}}{{unit_of_measurement}}"]
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        },
-
-        "battery": (state, attributes, templates) => {
-            const customizableDefaultConfig = this.default(state, attributes, templates);
-
-            let levelColor;
-            if (state < 15) {
-                levelColor = "#FF0000"
-            } else if (state < 30) {
-                levelColor = "#ff8600"
-            } else {
-                levelColor = "#00a400"
-            }
-            customizableDefaultConfig.color = levelColor;
-
-            if (!templates) {
-                customizableDefaultConfig.templates = []
-                if (customizableDefaultConfig.icon) {
-                    customizableDefaultConfig.templates.push(" ", " ")
-                }
-                customizableDefaultConfig.templates.push("{{state}}{{unit_of_measurement}}")
-            }
-
-            return customizableDefaultConfig;
-        },
-
-        "power": (state, attributes, templates) => {
-            const customizableDefaultConfig = this.default(state, attributes, templates);
-
-            customizableDefaultConfig.icon = Mdi.mdiFlash
-
-            if (!templates) {
-                customizableDefaultConfig.templates = [" ", " ", "{{state}}W"]
-            }
-
-            return customizableDefaultConfig;
-        },
-
-    }
-
-    weather = {
-        "default": (state, attributes, templates) => {
-            const customizableDefaultConfig = this.default(state, attributes, templates);
-
-            customizableDefaultConfig.color = this.colors.neutral;
-
-            switch (state) {
-                case 'clear-night':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherNight;
-                    break;
-                case 'cloudy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherCloudy;
-                    break;
-                case 'fog':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherFog;
-                    break;
-                case 'hail':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherHail;
-                    break;
-                case 'lightning':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherLightning;
-                    break;
-                case 'lightning-rainy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherLightningRainy;
-                    break;
-                case 'partlycloudy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherPartlyCloudy
-                    break;
-                case 'pouring':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherPouring
-                    break;
-                case 'rainy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherRainy
-                    break;
-                case 'snowy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherSnowy
-                    break;
-                case 'snowy-rainy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherSnowyRainy
-                    break;
-                case 'sunny':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherSunny
-                    break;
-                case 'windy':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherWindy
-                    break;
-                case 'windy-variant':
-                    customizableDefaultConfig.icon = Mdi.mdiWeatherWindyVariant
-                    break;
-                default:
-                    break;
-            }
-
-            if (!templates) {
-                customizableDefaultConfig.templates = []
-                if (customizableDefaultConfig.icon) {
-                    customizableDefaultConfig.templates.push(" ", " ")
-                }
-                customizableDefaultConfig.templates.push("{{temperature}}{{unit_of_measurement | default('°C')}}", "{{humidity}}%")
-            }
-
-            return customizableDefaultConfig;
-        }
-    }
-
-    lock = {
-        "default": (state, attributes, templates) => {
-            let icon = Mdi.mdiLockQuestion;
-            let color = this.colors.unavailable;
-
-            if (state === 'locked') {
-                icon = Mdi.mdiLock;
-                color = this.colors.ok;
-            } else if (state === 'locking') {
-                icon = Mdi.mdiLockClock;
-                color = this.colors.active;
-            } else if (state === 'unlocked') {
-                icon = Mdi.mdiLockOpen;
-                color = this.colors.warn;
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        }
-    }
-
-    vacuum = {
-        "default": (state, attributes, templates) => {
-            const icon = Mdi.mdiRobotVacuum;
-            let color = this.colors.unavailable;
-
-            if (state === "cleaning") {
-                color = this.colors.active;
-            } else if (state === "returning") {
-                color = this.colors.ok;
-            } else if (state === "idle" || state === 'docked') {
-                color = this.colors.passive;
-            }
-
-            if (!templates) {
-                templates = [" ", " ", "{{state}}"]
-            }
-
-            return {
-                state,
-                attributes,
-                templates,
-                icon,
-                color
-            }
-        }
-    }
-
-    #tryGetIconFromAttributes = (attributes) => {
-        const mdiIcon = attributes.icon;
-        return mdiIcon ? this.#toPascalCase(mdiIcon) : null;
-    }
-
-    #toPascalCase = (iconName) => {
-        const iconNameRaw = iconName.substring(4)
-        const iconNamePascalCase = iconNameRaw.replace(/(^\w|-\w)/g, this.#clearAndUpper)
-        return "mdi" + iconNamePascalCase;
-    }
-
-    #clearAndUpper = (text) => {
-        return text.replace(/-/, "").toUpperCase();
-    }
-
-}
-
 export class EntityButtonImageFactory {
 
-    svgUtils = new SvgUtils();
+    constructor(resolution = {width: 144, height: 144}) {
+        this.svgUtils = new SvgUtils(resolution);
+    }
 
     createButton(entityConfig) {
-        const buttonIcon = entityConfig.hideIcon ? undefined : entityConfig.icon;
+        const buttonIcon = entityConfig.hideIcon ? null : entityConfig.icon;
         const buttonLines = this.#applyValuesToTemplates(entityConfig.templates, {...entityConfig.attributes, ...{state: entityConfig.state}});
         return this.svgUtils.generateButtonSVG(buttonLines, buttonIcon, entityConfig.color, entityConfig.isAction, entityConfig.isMultiAction)
     }
diff --git a/src/modules/plugin/entityConfigFactory.js b/src/modules/plugin/entityConfigFactory.js
new file mode 100644
index 0000000..59ef882
--- /dev/null
+++ b/src/modules/plugin/entityConfigFactory.js
@@ -0,0 +1,381 @@
+import * as Mdi from "@mdi/js";
+
+export class EntityConfigFactory {
+
+    constructor() {
+        // Todo: configurable colors
+        this.colors = {
+            unavailable: "#505050",
+
+            neutral: "#FFF",
+            passive: "#a1a1a1",
+            active: "#e9b200",
+
+            ok: "#08ac00",
+            warn: "#a13300",
+            error: "#a10000"
+        }
+    }
+
+    determineConfig(domain, stateObject, labelTemplates) {
+        let state = stateObject.state;
+        let stateAttributes = stateObject.attributes;
+        let deviceClass = stateAttributes.device_class || "default";
+
+        if (this[domain] && this[domain][deviceClass]) {
+            return this[domain][deviceClass](state, stateAttributes, labelTemplates);
+        } else if (this[domain] && this[domain]["default"]) {
+            return this[domain]["default"](state, stateAttributes, labelTemplates);
+        }
+
+        return this.default(state, stateAttributes, labelTemplates);
+
+    }
+
+    default(state, attributes, templates) {
+        const iconString = this.#tryGetIconFromAttributes(attributes);
+        let icon = null;
+        let color = this.colors.unavailable;
+
+        if (state) {
+            color = this.colors.neutral;
+        }
+
+        if (iconString) {
+            icon = Mdi[iconString]
+        }
+        if (!templates) {
+            templates = []
+            if (icon) {
+                templates.push(" ", " ")
+            }
+            templates.push("{{state}}")
+        }
+
+        return {
+            state,
+            attributes,
+            templates,
+            icon,
+            color
+        }
+    }
+
+    "switch" = {
+        "default": (state, attributes, templates) => {
+            let icon = Mdi.mdiToggleSwitchOff;
+            let color = this.colors.unavailable;
+
+            if (state === 'on') {
+                icon = Mdi.mdiToggleSwitch
+                color = this.colors.active
+            } else if (state === 'off') {
+                color = this.colors.passive;
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        }
+    }
+
+    light = this.switch
+
+    input_boolean = this.switch
+
+    "binary_sensor" = {
+        "default": (state, attributes, templates) => {
+            let icon;
+            let color = this.colors.unavailable;
+
+            if (state === 'on') {
+                icon = Mdi.mdiCircleSlice8
+                color = this.colors.active
+            } else if (state === 'off') {
+                icon = Mdi.mdiCircleOutline
+                color = this.colors.passive
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        },
+
+        "plug": (state, attributes, templates) => {
+            const customizableDefaultConfig = this.binary_sensor.default(state, attributes, templates);
+
+            if (state === 'on') {
+                customizableDefaultConfig.icon = Mdi.mdiPowerPlugOutline
+            } else if (state === 'off') {
+                customizableDefaultConfig.icon = Mdi.mdiPowerPlugOffOutline
+            }
+
+            return customizableDefaultConfig;
+        },
+
+        "window": (state, attributes, templates) => {
+            const customizableDefaultConfig = this.binary_sensor.default(state, attributes, templates);
+
+            if (state === 'on') {
+                customizableDefaultConfig.icon = Mdi.mdiWindowOpenVariant
+            } else if (state === 'off') {
+                customizableDefaultConfig.icon = Mdi.mdiWindowClosedVariant
+            }
+
+            return customizableDefaultConfig;
+        }
+    }
+    "cover" = {
+        "garage": (state, attributes, templates) => {
+            let icon;
+            let color = this.colors.unavailable;
+
+            if (state === 'open') {
+                icon = Mdi.mdiGarageOpen
+                color = this.colors.active
+            } else if (state === 'closed') {
+                icon = Mdi.mdiGarage
+                color = this.colors.passive
+            } else if (state === 'closing') {
+                icon = Mdi.mdiArrowDownBox
+                color = this.colors.active
+            } else if (state === 'opening') {
+                icon = Mdi.mdiArrowUpBox
+                color = this.colors.active
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        }
+    }
+    sensor = {
+        "humidity": (state, attributes, templates) => {
+            const icon = Mdi.mdiWaterPercent;
+            let color = "#3f3fdb";
+
+            if (!templates) {
+                templates = [" ", " ", "{{state}}{{unit_of_measurement}}"]
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        },
+
+        "temperature": (state, attributes, templates) => {
+            const icon = Mdi.mdiThermometer;
+
+            let temperature = 0 + state;
+            if (attributes.unit_of_measurement === "°F") {
+                temperature = (temperature - 32) * 5 / 9;
+            }
+
+            let color = "#00a400";
+            if (temperature < 5) {
+                color = "#3838f8";
+            } else if (temperature > 25) {
+                color = "#fa4848";
+            }
+
+            if (!templates) {
+                templates = [" ", " ", "{{state}}{{unit_of_measurement}}"]
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        },
+
+        "battery": (state, attributes, templates) => {
+            const customizableDefaultConfig = this.default(state, attributes, templates);
+
+            let levelColor;
+            if (state < 15) {
+                levelColor = "#FF0000"
+            } else if (state < 30) {
+                levelColor = "#ff8600"
+            } else {
+                levelColor = "#00a400"
+            }
+            customizableDefaultConfig.color = levelColor;
+
+            if (!templates) {
+                customizableDefaultConfig.templates = []
+                if (customizableDefaultConfig.icon) {
+                    customizableDefaultConfig.templates.push(" ", " ")
+                }
+                customizableDefaultConfig.templates.push("{{state}}{{unit_of_measurement}}")
+            }
+
+            return customizableDefaultConfig;
+        },
+
+        "power": (state, attributes, templates) => {
+            const customizableDefaultConfig = this.default(state, attributes, templates);
+
+            customizableDefaultConfig.icon = Mdi.mdiFlash
+
+            if (!templates) {
+                customizableDefaultConfig.templates = [" ", " ", "{{state}}W"]
+            }
+
+            return customizableDefaultConfig;
+        },
+
+    }
+
+    weather = {
+        "default": (state, attributes, templates) => {
+            const customizableDefaultConfig = this.default(state, attributes, templates);
+
+            customizableDefaultConfig.color = this.colors.neutral;
+
+            switch (state) {
+                case 'clear-night':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherNight;
+                    break;
+                case 'cloudy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherCloudy;
+                    break;
+                case 'fog':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherFog;
+                    break;
+                case 'hail':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherHail;
+                    break;
+                case 'lightning':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherLightning;
+                    break;
+                case 'lightning-rainy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherLightningRainy;
+                    break;
+                case 'partlycloudy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherPartlyCloudy
+                    break;
+                case 'pouring':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherPouring
+                    break;
+                case 'rainy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherRainy
+                    break;
+                case 'snowy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherSnowy
+                    break;
+                case 'snowy-rainy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherSnowyRainy
+                    break;
+                case 'sunny':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherSunny
+                    break;
+                case 'windy':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherWindy
+                    break;
+                case 'windy-variant':
+                    customizableDefaultConfig.icon = Mdi.mdiWeatherWindyVariant
+                    break;
+                default:
+                    break;
+            }
+
+            if (!templates) {
+                customizableDefaultConfig.templates = []
+                if (customizableDefaultConfig.icon) {
+                    customizableDefaultConfig.templates.push(" ", " ")
+                }
+                customizableDefaultConfig.templates.push("{{temperature}}{{unit_of_measurement | default('°C')}}", "{{humidity}}%")
+            }
+
+            return customizableDefaultConfig;
+        }
+    }
+
+    lock = {
+        "default": (state, attributes, templates) => {
+            let icon = Mdi.mdiLockQuestion;
+            let color = this.colors.unavailable;
+
+            if (state === 'locked') {
+                icon = Mdi.mdiLock;
+                color = this.colors.ok;
+            } else if (state === 'locking') {
+                icon = Mdi.mdiLockClock;
+                color = this.colors.active;
+            } else if (state === 'unlocked') {
+                icon = Mdi.mdiLockOpen;
+                color = this.colors.warn;
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        }
+    }
+
+    vacuum = {
+        "default": (state, attributes, templates) => {
+            const icon = Mdi.mdiRobotVacuum;
+            let color = this.colors.unavailable;
+
+            if (state === "cleaning") {
+                color = this.colors.active;
+            } else if (state === "returning") {
+                color = this.colors.ok;
+            } else if (state === "idle" || state === 'docked') {
+                color = this.colors.passive;
+            }
+
+            if (!templates) {
+                templates = [" ", " ", "{{state}}"]
+            }
+
+            return {
+                state,
+                attributes,
+                templates,
+                icon,
+                color
+            }
+        }
+    }
+
+    #tryGetIconFromAttributes = (attributes) => {
+        const mdiIcon = attributes.icon;
+        return mdiIcon ? this.#toPascalCase(mdiIcon) : null;
+    }
+
+    #toPascalCase = (iconName) => {
+        const iconNameRaw = iconName.substring(4)
+        const iconNamePascalCase = iconNameRaw.replace(/(^\w|-\w)/g, this.#clearAndUpper)
+        return "mdi" + iconNamePascalCase;
+    }
+
+    #clearAndUpper = (text) => {
+        return text.replace(/-/, "").toUpperCase();
+    }
+
+}
diff --git a/src/modules/plugin/imageUtils.js b/src/modules/plugin/imageUtils.js
deleted file mode 100644
index 1a9c3da..0000000
--- a/src/modules/plugin/imageUtils.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import nunjucks from "nunjucks"
-import {SvgUtils} from "@/modules/plugin/svgUtils";
-import * as Mdi from "@mdi/js";
-
-const colors = {
-    action: "#FFFFFF",
-    passive: "#bbbbbb",
-    active: "#e9b200",
-    bg: "#4E4E61",
-    bgRed: "#700300",
-    bgBlue: "#003d70"
-};
-
-const svgUtils = new SvgUtils();
-
-export const IconFactory = {
-
-    getS: function (iconName) {
-        const iconNameRaw = iconName.substring(4)
-        const iconNamePascalCase = iconNameRaw.replace(/(^\w|-\w)/g, IconFactory.clearAndUpper)
-        return "mdi" + iconNamePascalCase;
-    },
-
-    clearAndUpper: function (text) {
-        return text.replace(/-/, "").toUpperCase();
-    },
-
-    default: (state, attributes, labelTemplates) => {
-        const lines = IconFactory.applyValues(labelTemplates, {...attributes, ...{state}})
-        var icon = null;
-        if (attributes.icon) {
-            icon = Mdi[IconFactory.getS(attributes.icon)];
-        }
-        return svgUtils.generateButtonSVG(lines, icon, colors.active)
-    },
-
-    "switch": {
-        default: (state, attributes, labelTemplates) => {
-            const lines = IconFactory.applyValues(labelTemplates, {...attributes, ...{state}})
-
-            let icon;
-            let color;
-            if (state === "on") {
-                icon = Mdi.mdiToggleSwitch
-                color = colors.active
-            } else {
-                icon = Mdi.mdiToggleSwitchOff;
-                color = colors.passive
-            }
-            return svgUtils.generateButtonSVG(lines, icon, color)
-        }
-    },
-
-    "light": {
-        default: (state, attributes, labelTemplates) => {
-            return IconFactory.switch.default(state, attributes, labelTemplates);
-        }
-    },
-
-    "input_boolean": {
-        default: (state, attributes, labelTemplates) => {
-            return IconFactory.switch.default(state, attributes, labelTemplates);
-        }
-    },
-
-    sensor: {
-        _defaultLabelTemplate: [
-            "",
-            "",
-            "{{state}} {{unit_of_measurement}}"
-        ],
-
-        battery: (state, attributes, labelTemplate) => {
-            return IconFactory.default(state, attributes, labelTemplate || IconFactory.sensor._defaultLabelTemplate)
-        },
-
-    },
-
-    applyValues: (labelTemplates, values) => {
-        return labelTemplates ? labelTemplates.map(
-            template => nunjucks.renderString(template, values)
-        ) : []
-    }
-}
diff --git a/src/modules/plugin/svgUtils.js b/src/modules/plugin/svgUtils.js
index 7745389..371b43a 100644
--- a/src/modules/plugin/svgUtils.js
+++ b/src/modules/plugin/svgUtils.js
@@ -3,42 +3,48 @@ import {urlencode} from "nunjucks/src/filters";
 
 export class SvgUtils {
 
-    constructor() {
-        this.buttonRes = 144;
-        this.halfRes = this.buttonRes / 2;
+    constructor(resolution = {width: 144, height: 144}) {
+        this.buttonRes = resolution;
+        this.halfRes = {
+            width: this.buttonRes.width / 2,
+            height: this.buttonRes.height / 2
+        }
         this.buttonBgColor = "#000000";
+        this.fontSize = 24;
         this.lineAttr = {
             "fill": "#FFF",
             "font-family": "sans-serif",
             "font-weight": "bold",
-            "font-size": "24px",
+            "font-size": `${this.fontSize}px`,
             "text-anchor": "middle",
             "stroke": "#000",
             "strokeWidth": 4,
         }
-        this.snap = Snap(this.buttonRes, this.buttonRes);
+        this.snap = Snap(this.buttonRes.width, this.buttonRes.height);
     }
 
     generateButtonSVG(labels, iconSVG, iconColor, isAction = false, isMultiAction = false) {
 
 
-        this.snap.rect(0, 0, this.buttonRes, this.buttonRes).attr({fill: this.buttonBgColor})
+        this.snap.rect(0, 0, this.buttonRes.width, this.buttonRes.height).attr({fill: this.buttonBgColor})
 
         if (iconSVG) {
             const icon = this.snap.path(iconSVG)
             icon.attr("fill", iconColor);
             const iconBBox = icon.getBBox();
             const iconHeight = iconBBox.height;
-            const targetHeight = this.halfRes - 20;
-            const scaleFactor = targetHeight / iconHeight;
-            const xPos = this.halfRes - (iconBBox.width * scaleFactor / 2) - (iconBBox.x * scaleFactor);
-            const yPos = 10 - iconBBox.y * scaleFactor;
+            const iconWidth = iconBBox.width;
+            const targetHeight = this.halfRes.height / 1.2;
+            const targetWidth = this.buttonRes.width / 1.3;
+            const scaleFactor = Math.min(targetHeight / iconHeight, targetWidth / iconWidth);
+            const xPos = (this.buttonRes.width - iconWidth * scaleFactor) / 2 - (iconBBox.x * scaleFactor);
+            const yPos = (this.halfRes.height - iconHeight * scaleFactor) / 2 - (iconBBox.y * scaleFactor);
             icon.transform(`translate(${xPos} ${yPos}) scale(${scaleFactor})`)
         }
 
         if (isAction) {
             const color = isMultiAction ? "#3e89ff" : "#62ff65"
-            this.snap.circle(this.buttonRes - 1, 0, 15).attr("fill", color)
+            this.snap.circle(this.buttonRes.width - 1, 0, 15).attr("fill", color)
         }
 
         let currentLineNumber = 0;
@@ -51,12 +57,12 @@ export class SvgUtils {
         }
 
         // Debug Grid
-        // s.line(this.halfRes, 0, this.halfRes, this.buttonRes).attr("stroke", "#FFFFFF")
-        // s.line(this.halfRes / 2, 0, this.halfRes / 2, this.buttonRes).attr("stroke", "#FFFFFF")
-        // s.line(this.halfRes * 1.5, 0, this.halfRes * 1.5, this.buttonRes).attr("stroke", "#FFFFFF")
-        // s.line(0, this.halfRes, this.buttonRes, this.halfRes).attr("stroke", "#FFFFFF")
-        // s.line(0, this.halfRes / 2, this.buttonRes, this.halfRes / 2).attr("stroke", "#FFFFFF")
-        // s.line(0, this.halfRes * 1.5, this.buttonRes, this.halfRes * 1.5).attr("stroke", "#FFFFFF")
+        // this.snap.line(this.halfRes, 0, this.halfRes, this.buttonRes).attr("stroke", "#FFFFFF")
+        // this.snap.line(this.halfRes / 2, 0, this.halfRes / 2, this.buttonRes).attr("stroke", "#FFFFFF")
+        // this.snap.line(this.halfRes * 1.5, 0, this.halfRes * 1.5, this.buttonRes).attr("stroke", "#FFFFFF")
+        // this.snap.line(0, this.halfRes, this.buttonRes, this.halfRes).attr("stroke", "#FFFFFF")
+        // this.snap.line(0, this.halfRes / 2, this.buttonRes, this.halfRes / 2).attr("stroke", "#FFFFFF")
+        // this.snap.line(0, this.halfRes * 1.5, this.buttonRes, this.halfRes * 1.5).attr("stroke", "#FFFFFF")
 
         let outerSVG = this.snap.outerSVG();
         this.snap.clear();
@@ -65,9 +71,10 @@ export class SvgUtils {
 
     drawText(text, lineNr) {
         const escapedText = urlencode(text);
-        this.snap.text(0, 26 + lineNr * 36, escapedText)
+        const quarterHeight = this.buttonRes.height / 4
+        this.snap.text(0, (quarterHeight - ((quarterHeight * 1.2 - this.fontSize) / 2)) + lineNr * quarterHeight, escapedText)
             .attr(this.lineAttr)
-            .transform(`translateX(${this.halfRes})`);
+            .transform(`translateX(${this.halfRes.width})`);
     }
 
 }

From 7d875f4c0671fdd468762cb8eb954189a842760c Mon Sep 17 00:00:00 2001
From: Christoph Giesche <christoph.giesche@cgidev.de>
Date: Mon, 6 Nov 2023 00:02:21 +0100
Subject: [PATCH 4/4] streamdeck-homeassistant-117 Added rotationPercent and
 rotationAbsolute to available variables.

---
 src/components/PiComponent.vue              | 10 +++++++++-
 src/components/PluginComponent.vue          | 10 +++++++++-
 src/components/ServiceCallConfiguration.vue |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/PiComponent.vue b/src/components/PiComponent.vue
index 01d878f..34485c1 100644
--- a/src/components/PiComponent.vue
+++ b/src/components/PiComponent.vue
@@ -148,7 +148,15 @@
               <summary>Available variables</summary>
               <div class="form-text">
                 <span v-pre class="text-info font-monospace">{{ ticks }}</span> - The number of ticks the dial was
-                rotated
+                rotated (negative value for left turn, positive value for right turn).
+              </div>
+              <div class="form-text">
+                <span v-pre class="text-info font-monospace">{{ rotationPercent }}</span> - A number between 0 and 100
+                that represents the rotation percentage value of the dial.
+              </div>
+              <div class="form-text">
+                <span v-pre class="text-info font-monospace">{{ rotationAbsolute }}</span> - A number between 0 and 255
+                that represents the absolute rotation value of the dial.
               </div>
             </details>
           </AccordeonItem>
diff --git a/src/components/PluginComponent.vue b/src/components/PluginComponent.vue
index 3f6fc6f..e7ae11c 100644
--- a/src/components/PluginComponent.vue
+++ b/src/components/PluginComponent.vue
@@ -24,6 +24,7 @@ const buttonLongpressTimeouts = ref(new Map()) //context, timeout
 
 let rotationTimeout = [];
 let rotationAmount = [];
+let rotationPercent = [];
 
 onMounted(() => {
   window.connectElgatoStreamDeckSocket = (inPort, inPluginUUID, inRegisterEvent, inInfo) => {
@@ -74,6 +75,7 @@ onMounted(() => {
     $SD.value.on("willAppear", (message) => {
       let context = message.context;
       rotationAmount[context] = 0;
+      rotationPercent[context] = 0;
       actionSettings.value[context] = Settings.parse(message.payload.settings)
       if ($HA.value) {
         $HA.value.getStates(entitiyStatesChanged)
@@ -90,12 +92,18 @@ onMounted(() => {
       let settings = actionSettings.value[context];
 
       rotationAmount[context] += message.payload.ticks;
+      rotationPercent[context] += (message.payload.ticks * 2);
+      if (rotationPercent[context] < 0) {
+        rotationPercent[context] = 0;
+      } else if (rotationPercent[context] > 100) {
+        rotationPercent[context] = 100;
+      }
 
       if (rotationTimeout[context])
         return;
 
       rotationTimeout[context] = setTimeout(() => {
-        callService(context, settings.button.serviceRotation, {ticks: rotationAmount[context]});
+        callService(context, settings.button.serviceRotation, {ticks: rotationAmount[context], rotationPercent: rotationPercent[context], rotationAbsolute: 2.55 * rotationPercent[context]});
         rotationAmount[context] = 0;
         rotationTimeout[context] = null;
       }, 300);
diff --git a/src/components/ServiceCallConfiguration.vue b/src/components/ServiceCallConfiguration.vue
index a81c2aa..9fde751 100644
--- a/src/components/ServiceCallConfiguration.vue
+++ b/src/components/ServiceCallConfiguration.vue
@@ -173,7 +173,7 @@ const serviceDataInvalidFeedback = computed(() => {
     return "";
   }
   try {
-    const renderedServiceData = nunjucks.renderString(serviceDataString, {ticks: 5});
+    const renderedServiceData = nunjucks.renderString(serviceDataString, {ticks: 5, rotationPercent: 100, rotationAbsolute: 100});
 
     const json = JSON.parse(renderedServiceData);
     return (typeof json === "object") ? "" : "Service data must be an JSON object."