add stateAsStyleClass

Signed-off-by: Stefan Höhn <mail@stefanhoehn.com>
openhab · Oct 8, 2024 · ebbd192 · ebbd192
1 parent 8febde6
commit ebbd192
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js
@@ -53,7 +53,8 @@ export default {
               pt('stateOffColor', 'State OFF Color', 'Color that should to be used when State is OFF').a(),
               pb('stateAsOpacity', 'Use State as Opacity', 'Use the state from 0 - 100 as element opacity').a(),
               pt('stateMinOpacity', 'Minimum Opacity applied', 'This allows an opacity to be kept above this value.').a(),
-              pb('invertStateOpacity', 'Invert State opacity', '1 - opacity').a()
+              pb('invertStateOpacity', 'Invert State opacity', '1 - opacity').a(),
+              pt('stateAsStyleClass', 'Set Style Class based on OnOff State ', 'Provide element-id:classname. ON sets the class, OFF removes the class of given element').a()
             ])
             .paramGroup(actionGroup(), actionParams()),
           component: {

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
@@ -278,13 +278,19 @@ export default {
     },
     toRGBStyle: function (itemConfig) {
       if (itemConfig.stateOnColor) {
-        if (itemConfig.stateOnColor.trim().startsWith('#')) {
+        if (itemConfig.stateOnColor?.trim().startsWith('#')) {
           return itemConfig.stateOnColor
         } else {
           const rgbNumbers = itemConfig.stateOnColor.split(',')
+          if (rgbNumbers.length !== 3) {
+            console.log(`invalid rgb values in stateOnColor: ${itemConfig.stateOnColor}`)
+            return '#ff0000' // not valid returns red
+          }
           const rgb = this.hsbToRgb(rgbNumbers[0], rgbNumbers[1], rgbNumbers[2])
           return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
         }
+      } else {
+        return undefined
       }
     },
     /*
@@ -358,18 +364,24 @@ export default {
               element.oldFill = element.style.fill
               element.style.fill = (itemConfig.stateOnColor) ? stateOnColorRgbStyle : 'rgb(0, 255, 0)'
             }
+            if (itemConfig.stateAsStyleClass) {
+              const elementClassInfo = itemConfig.stateAsStyleClass.split(':')
+              document.getElementById(elementClassInfo[0]).classList.add(elementClassInfo[1])
+            }
           } else if (state === 'OFF') {
             const updateColor = (itemConfig.stateOffColor) ? itemConfig.stateOffColor : (element?.oldFill !== 'undefined') ? element?.oldFill : 'undefined'
             if (updateColor !== 'undefined') {
               element.style.fill = updateColor
             }
             if (itemConfig.stateAsOpacity) { // we use the flash element
-              // element.oldOpacity = element.style.opacity
-              // element.style.opacity = 1
               let opacity = (itemConfig.invertStateOpacity) ? 1 : 0
               opacity = (opacity < itemConfig.stateMinOpacity) ? itemConfig.stateMinOpacity : opacity
               element.style.opacity = opacity
             }
+            if (itemConfig.stateAsStyleClass) {
+              let elementClassInfo = itemConfig.stateAsStyleClass.split(':')
+              document.getElementById(elementClassInfo[0]).classList.remove(elementClassInfo[1])
+            }
           } else { // Percent, OpenClosed
             if (itemConfig.stateAsOpacity && state) {
               // we expect that number between 0 - 100