OH3 widget: Daikin Aircon / HVAC

Hi,

i am struggling how to combine this mechanics with the following background color condition:

  style:
    background-color: '=(items[props.item].state === "OFF") ? "rgba(228,228,228,0.9)" : "white"'

i tried all kind of versions with the expression tester but this did not work out. What i want to achieve is:

  1. if themeOption.dark is “light”, then the above condtion should work, ( OFF= rgba, ON= white ), but when the themeOption.dark is “dark”, then the backgroud should be set to different colors e.g. ( OFF= black, ON = yellow )

Thank for some guidance here!

Hey @muelli1967

it would work like this for example:
background-color: "=themeOptions.dark === 'light' && items[props.item].state === 'ON' ? 'white' : themeOptions.dark === 'light' && items[props.item].state === 'OFF' ? 'rgba(228,228,228,0.9)' : themeOptions.dark === 'dark' && items[props.item].state === 'ON' ? 'yellow' : 'black'"

There are ways to make this conditional statment shorter but this is easier to understand for now, I think.

thanks, Rainer! This works as expected. Much appreciated. I guess i was on a too complex path. :slight_smile:

For using " or in these kind of expressions it does not seem to matter as long as you are consistent or is there any condition to take into consideration?

Exactly you could use whatever you like the most (if you are consistent) within the expression afaik.

Hi Rainer @RGroll , i seem to struggle with the " or ’ in such expressions. For the background image of an OH3 page, i have tried following:

  style:
    background-image: "=themeOptions.dark === 'dark' ? '#d6ab00' :  'url('/static/images/Wallpapers/hk-Office1.jpg')'"

unfortunately this does not work and i suspect that the ’ from inside the url () are preventing from success. I tried to rework everything to:

background-image: '=themeOptions.dark === "dark" ? "#d6ab00" : "url('/static/images/Wallpapers/hk-Office1.jpg')"'

this works in the widget expression tester but throws an error in the code of the site.

background-image: can’t handle color values like rgb, hsl, hex or whatever, so you have to use background: here. See CSS background-image property

Correct, you can escape these characters with \\:

background: "=themeOptions.dark === 'dark' ? '#d6ab00' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg\\')'"

Hi Rainer,

i re-worked it according to your suggestions and also have removed the color values with another background but this does not seem to work yet, neither wiht background-image nor on background.
It is a background for a page. i want to change the background with dark / light theme.

config:
  label: Büro
  sidebar: true
  style:
    background-image: "=themeOptions.dark === 'dark' ? 'url(\\'/static/images/Wallpapers/hk-Office1bw.jpg'\\)' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg'\\)'"

I am sure i miss something here. It still shows no background with these lines.

You’ve set the escape characters at the wrong place - the’ve to be in front of the char you want to escape, so it would be:

background-image: "=themeOptions.dark === 'dark' ? 'url(\\'/static/images/Wallpapers/hk-Office1bw.jpg\\')' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg\\')'"

yes, you are right. Hmm, still does not work…

working is this one:

  style:
    background-image: url('/static/images/Wallpapers/hk-Office1bw.jpg')

not working:

  style:
    background-image: url(\\'/static/images/Wallpapers/hk-Office1bw.jpg\\')

not working:

config:
  label: Büro
  sidebar: true
  style:
    background-image: "=themeOptions.dark === 'dark' ? 'url(\\'/static/images/Wallpapers/hk-Office1bw.jpg\\')' : 'url(\\'/static/images/Wallpapers/hk-Office1.jpg\\')'"
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover

Try:

background-image: "=themeOptions.dark === 'dark' ? 'url(/static/images/Wallpapers/hk-Office1bw.jpg)' : 'url(/static/images/Wallpapers/hk-Office1.jpg)'"

Don’t use semicolon in styles

still does not work :frowning: . I attach a screenshot this time )

image

this works:

config:
  label: Büro
  sidebar: true
  style:
    background-image: url(/static/images/Wallpapers/hk-Office1.jpg)
    background-size: cover
    background-repeat: no-repeat

As this is standard css syntax it would be strange if it doesn’t. :slight_smile:

Are you sure that you can access these images at the given path?

It works fine here:
background

Hi Rainer,

i just replicated your little setup with an f7-card in a widget and i confirm there it works perfectly well. Where it does not seem to work is in the code of a page to change that background. Maybe this is a bug? I cannot think of something else here. If you confirm, i will create an issue log.

working

not working:

by the way how are you creating that animated gif´s ?

Ah okay, didn’t know that you’d like to change the page background with this. And yes, this isn’t possible right now due to the fact that the page can’t handle the variable informations you’ll get with = afaik. This would be a feature request in the openhab-webui repo.

Am I correct here @ysc ?

An awesome open source tool (Windows only sadly) named ScreenToGif

Hi Rainer, once again thank you for your valuable time: i did fill a feature request in the openhab-webui repro:

I can imagine that this request finds more people that would like to see this implemented as we are moving along the line of optimizing our experience with the OH3 UI, one thing i noticed is that switching from dark to light does have some downsides, but the reality is that my family at home does have different preferences and it needs to address both. Changing a background based on the dark / light theme seems to be something an obvious one.

1 Like

Yes the page config cannot be evaluated as expressions right now.

1 Like

Thank you Marcus for the great binding!!!

I’ve a Daikin HVAC connected to KNX via ZENNIO KLICDDv3. Here are my modifications to make this widget work. Also included, the working KNX channel configuration for DPT 20.105, DPT 1.005, DPT 5.001
See OH 3 Tips and Tricks - #18 by Fritz on how to copy this to your configuration.

Things file

UID: knx:device:XXXXX:XXXXX
label: KNX KLICDDv3 Daikin WZ
thingTypeUID: knx:device
configuration:
  pingInterval: 600
  address: 2.9.9
  readInterval: 0
  fetch: false
bridgeUID: knx:ip:XXXXX
channels:
  - id: WZ_Daikin_EinAus
    channelTypeUID: knx:switch
    label: Wohnzimmer Klimaanlage
    description: null
    configuration:
      ga: 3/2/0+<3/2/1
  - id: WZ_Daikin_TemperaturIst
    channelTypeUID: knx:number
    label: Wohnzimmer Klimaanlage Temperatur Status
    description: null
    configuration:
      ga: <3/2/12
  - id: WohnzimmerKlimaanlageModus
    channelTypeUID: knx:string
    label: Wohnzimmer Klimaanlage Modus
    description: ""
    configuration:
      ga: 20.105:3/2/2+<3/2/3
  - id: WZ_Daikin_Solltemperatur
    channelTypeUID: knx:number
    label: Wohnzimmer Klimaanlage Solltemperatur
    description: null
    configuration:
      ga: 3/2/20+<3/2/21
  - id: WZ_Daikin_Luefter
    channelTypeUID: knx:dimmer
    label: Wohnzimmer Klimaanlage Lüfter
    description: ""
    configuration:
      position: 3/2/4+<3/2/5
  - id: WZ_Daikin_Lamellen_Horizontal
    channelTypeUID: knx:switch
    label: Wohnzimmer Klimaanlage Lamellen Horizontal
    description: null
    configuration:
      ga: 3/2/8+<3/2/9
  - id: WZ_Daikin_Lamellen_Vertikal
    channelTypeUID: knx:switch
    label: Wohnzimmer Klimaanlage Lamellen Vertikal
    description: null
    configuration:
      ga: 3/2/10+<3/2/11
  - id: WZ_Daikin_FehlerAC
    channelTypeUID: knx:switch
    label: Wohnzimmer Klimaanlage Fehler AC Einheit
    description: null
    configuration:
      ga: <3/2/18
  - id: WZ_Daikin_Fehler_Bestaetigung
    channelTypeUID: knx:switch
    label: Wohnzimmer Klimaanlage Fehler Bestätigung
    description: null
    configuration:
      ga: 1.005:<3/2/17
  - id: WZ_Daikin_Szene
    channelTypeUID: knx:number
    label: Wohnzimmer Klimaanlage Szene
    description: null
    configuration:
      ga: 0/3/2
  - id: WZ_Daikin_Betriebszeit
    channelTypeUID: knx:number
    label: Wohnzimmer Klimaanlage Betriebszeit
    description: null
    configuration:
      ga: 7.007:<3/2/15
  - id: WZ_Daikin_Fehler_Kommunikation
    channelTypeUID: knx:switch
    label: Wohnzimmer Klimaanlage Fehler Kommunikation
    description: null
    configuration:
      ga: 1.005:<3/2/16
  - id: WZ_Daikin_Fehlercode
    channelTypeUID: knx:string
    label: Wohnzimmer Klimaanlage Fehlercode
    description: null
    configuration:
      ga: 16.000:<3/2/19

Items JSON

  • You need a group called SZ_HVAC
[
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "NULL",
      "stateDescription": {
        "pattern": "%.0f",
        "readOnly": false,
        "options": []
      },
      "type": "Number",
      "name": "KNXKLICDDv3DaikinSZ_SchlafzimmerKlimaanlageSzene",
      "label": "Schlafzimmer Klimaanlage Szene",
      "category": "",
      "tags": [
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "",
      "stateDescription": {
        "pattern": "%s",
        "readOnly": true,
        "options": []
      },
      "metadata": {
        "stateDescription": {
          "value": " ",
          "config": {
            "readOnly": true
          }
        }
      },
      "type": "String",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageFehlercode",
      "label": "Schlafzimmer Klimaanlage Fehlercode",
      "category": "error",
      "tags": [
        "Alarm"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "24.0",
      "stateDescription": {
        "pattern": "%.0f",
        "readOnly": false,
        "options": []
      },
      "metadata": {
        "listWidget": {
          "value": "oh-stepper-item",
          "config": {
            "step": 0.5,
            "min": 18,
            "max": 28
          }
        },
        "widget": {
          "value": "oh-stepper-card",
          "config": {
            "step": 0.5,
            "min": 18,
            "max": 28
          }
        },
        "widgetOrder": {
          "value": "3"
        }
      },
      "type": "Number",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageSolltemperatur",
      "label": "Schlafzimmer Klimaanlage Solltemperatur",
      "category": "temperature_cold",
      "tags": [
        "Temperature",
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "OFF",
      "stateDescription": {
        "readOnly": true,
        "options": []
      },
      "metadata": {
        "stateDescription": {
          "value": " ",
          "config": {
            "readOnly": true
          }
        }
      },
      "type": "Switch",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageFehlerBestatigung",
      "label": "Schlafzimmer Klimaanlage Fehler Bestätigung",
      "category": "error",
      "tags": [
        "Alarm"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "Auto",
      "stateDescription": {
        "pattern": "%s",
        "readOnly": false,
        "options": [
          {
            "value": "Auto",
            "label": "Automatik"
          },
          {
            "value": "Heat",
            "label": "Heizen"
          },
          {
            "value": "Cool",
            "label": "Kühlen"
          },
          {
            "value": "Fan Only",
            "label": "Lüften"
          },
          {
            "value": "Dehumidification",
            "label": "Trocknen"
          }
        ]
      },
      "commandDescription": {
        "commandOptions": [
          {
            "command": "Auto",
            "label": "Automatik"
          },
          {
            "command": "Heat",
            "label": "Heizen"
          },
          {
            "command": "Cool",
            "label": "Kühlen"
          },
          {
            "command": "Fan Only",
            "label": "Lüften"
          },
          {
            "command": "Dehumidification",
            "label": "Trocknen"
          }
        ]
      },
      "metadata": {
        "widgetOrder": {
          "value": "4"
        },
        "stateDescription": {
          "value": " ",
          "config": {
            "options": "Auto=Automatik,Heat=Heizen,Cool=Kühlen,Fan Only=Lüften,Dehumidification=Trocknen"
          }
        }
      },
      "type": "String",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageModus",
      "label": "Schlafzimmer Klimaanlage Modus",
      "category": "temperature_cold",
      "tags": [
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "OFF",
      "stateDescription": {
        "readOnly": true,
        "options": []
      },
      "metadata": {
        "stateDescription": {
          "value": " ",
          "config": {
            "readOnly": true
          }
        }
      },
      "type": "Switch",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageFehlerACEinheit",
      "label": "Schlafzimmer Klimaanlage Fehler AC Einheit",
      "category": "error",
      "tags": [
        "Alarm"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "OFF",
      "metadata": {
        "widgetOrder": {
          "value": "2"
        }
      },
      "type": "Switch",
      "name": "KNXKLICDDv3DaikinSZ_SchlafzimmerKlimaanlage",
      "label": "Schlafzimmer Klimaanlage",
      "category": "temperature_cold",
      "tags": [
        "Status",
        "Temperature"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "OFF",
      "stateDescription": {
        "readOnly": true,
        "options": []
      },
      "metadata": {
        "stateDescription": {
          "value": " ",
          "config": {
            "readOnly": true
          }
        }
      },
      "type": "Switch",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageFehlerKommunikation",
      "label": "Schlafzimmer Klimaanlage Fehler Kommunikation",
      "category": "error",
      "tags": [
        "Alarm"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "27.0",
      "stateDescription": {
        "pattern": "%.0f",
        "readOnly": true,
        "options": []
      },
      "metadata": {
        "stateDescription": {
          "value": " ",
          "config": {
            "readOnly": true
          }
        }
      },
      "type": "Number",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageBetriebszeit",
      "label": "Schlafzimmer Klimaanlage Betriebszeit",
      "category": "text",
      "tags": [
        "Status",
        "Duration"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "0",
      "stateDescription": {
        "readOnly": false,
        "options": [
          {
            "value": "0",
            "label": "Auto"
          },
          {
            "value": "20",
            "label": "S1"
          },
          {
            "value": "40",
            "label": "S2"
          },
          {
            "value": "60",
            "label": "S3"
          },
          {
            "value": "80",
            "label": "S4"
          },
          {
            "value": "100",
            "label": "S5"
          }
        ]
      },
      "commandDescription": {
        "commandOptions": [
          {
            "command": "0",
            "label": "Auto"
          },
          {
            "command": "20",
            "label": "S1"
          },
          {
            "command": "40",
            "label": "S2"
          },
          {
            "command": "60",
            "label": "S3"
          },
          {
            "command": "80",
            "label": "S4"
          },
          {
            "command": "100",
            "label": "S5"
          }
        ]
      },
      "metadata": {
        "listWidget": {
          "value": " ",
          "config": {
            "scaleSubSteps": 1,
            "step": 20
          }
        },
        "widget": {
          "value": " ",
          "config": {
            "step": 20,
            "scaleSubSteps": ""
          }
        },
        "widgetOrder": {
          "value": "5"
        },
        "stateDescription": {
          "value": " ",
          "config": {
            "options": "0=Auto,20=S1,40=S2,60=S3,80=S4,100=S5"
          }
        }
      },
      "type": "Dimmer",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageLufter",
      "label": "Schlafzimmer Klimaanlage Lüfter",
      "category": "fan",
      "tags": [
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "STOPPED",
      "stateDescription": {
        "readOnly": false,
        "options": [
          {
            "value": "STOPPED",
            "label": "Aus"
          },
          {
            "value": "VERTICAL",
            "label": "Vertikal"
          },
          {
            "value": "HORIZONTAL",
            "label": "Horizontal"
          },
          {
            "value": "VERTICAL_AND_HORIZONTAL",
            "label": "3D"
          }
        ]
      },
      "commandDescription": {
        "commandOptions": [
          {
            "command": "STOPPED",
            "label": "Aus"
          },
          {
            "command": "VERTICAL",
            "label": "Vertikal"
          },
          {
            "command": "HORIZONTAL",
            "label": "Horizontal"
          },
          {
            "command": "VERTICAL_AND_HORIZONTAL",
            "label": "3D"
          }
        ]
      },
      "metadata": {
        "widgetOrder": {
          "value": "5"
        },
        "stateDescription": {
          "value": " ",
          "config": {
            "options": "STOPPED=Aus,VERTICAL=Vertikal,HORIZONTAL=Horizontal,VERTICAL_AND_HORIZONTAL=3D"
          }
        }
      },
      "type": "String",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageLamellen",
      "label": "Schlafzimmer Klimaanlage Lamellen",
      "category": "flow",
      "tags": [
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "OFF",
      "type": "Switch",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageLamellenVertikal",
      "label": "Schlafzimmer Klimaanlage Lamellen Vertikal",
      "category": "flow",
      "tags": [
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "OFF",
      "type": "Switch",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageLamellenHorizontal",
      "label": "Schlafzimmer Klimaanlage Lamellen Horizontal",
      "category": "flow",
      "tags": [
        "Point"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    },
    {
      "link": "http://wastl:8080/rest/items/SZ_HVAC",
      "state": "25.0",
      "stateDescription": {
        "pattern": "%.1f °C",
        "readOnly": true,
        "options": []
      },
      "metadata": {
        "stateDescription": {
          "value": " ",
          "config": {
            "pattern": "%.1f °C",
            "readOnly": true
          }
        }
      },
      "type": "Number",
      "name": "SZ_HVAC_SchlafzimmerKlimaanlageTemperaturStatus",
      "label": "Schlafzimmer Klimaanlage Temperatur Status",
      "category": "temperature",
      "tags": [
        "Status",
        "Temperature"
      ],
      "groupNames": [
        "SZ_HVAC"
      ]
    }
]

Rules

  • since the KLICDDv3 only provides switches for horizontal and vertical switches, the following rules are required
rule "Kinderzimmer Klimaanlage Lamellen Gesamt von KNX"
when
        Item KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal changed or
        Item KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal changed
then
        if (KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.state == ON && KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.state == OFF) {
                KZ_HVAC_KinderzimmerKlimaanlageLamellen.postUpdate("VERTICAL")
        }
        else if (KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.state == OFF && KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.state == ON) {
                KZ_HVAC_KinderzimmerKlimaanlageLamellen.postUpdate("HORIZONTAL")
        }
        else if (KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.state == ON && KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.state == ON) {
                KZ_HVAC_KinderzimmerKlimaanlageLamellen.postUpdate("VERTICAL_AND_HORIZONTAL")
        }
        else if (KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.state == OFF && KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.state == OFF) {
                KZ_HVAC_KinderzimmerKlimaanlageLamellen.postUpdate("STOPPED")
        }
end

rule "Kinderzimmer Klimaanlage Lamellen Gesamt nach KNX"
when
        Item KZ_HVAC_KinderzimmerKlimaanlageLamellen changed
then
        if (KZ_HVAC_KinderzimmerKlimaanlageLamellen.state == "VERTICAL") {
                KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.sendCommand(ON)
                KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.sendCommand(OFF)
        }
        else if (KZ_HVAC_KinderzimmerKlimaanlageLamellen.state == "HORIZONTAL") {
                KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.sendCommand(OFF)
                KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.sendCommand(ON)
        }
        else if (KZ_HVAC_KinderzimmerKlimaanlageLamellen.state == "VERTICAL_AND_HORIZONTAL") {
                KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.sendCommand(ON)
                KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.sendCommand(ON)
        }
        else if (KZ_HVAC_KinderzimmerKlimaanlageLamellen.state == "STOPPED") {
                KZ_HVAC_KinderzimmerKlimaanlageLamellenVertikal.sendCommand(OFF)
                KZ_HVAC_KinderzimmerKlimaanlageLamellenHorizontal.sendCommand(OFF)
        }
end

Widget

  • modifications to display the displayState
  • german translation
  • modified commands for the KLICDDv3
uid: Daikin HVAC
tags: []
props:
  parameters:
    - description: Location (room) or device name
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Item for power channel
      label: Power
      name: itemPower
      required: false
      type: TEXT
    - context: item
      description: Item for indoor temperature channel
      label: Indoor temperature
      name: itemIndoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for outdoor temperature channel
      label: Outdoor temperature
      name: itemOutdoorTemp
      required: false
      type: TEXT
    - context: item
      description: Item for target temperature channel
      label: Target temperature
      name: itemTargetTemp
      required: false
      type: TEXT
    - description: Set minimum target temperature (default = 0)
      label: Minimum Temperature
      name: MinimumTemperature
      required: false
      type: INTEGER
    - description: Set maximum target temperature (default = 100)
      label: Maximum Temperature
      name: MaximumTemperature
      required: false
      type: INTEGER
    - description: Set Target Temperature Stepsize (default = 1)
      label: Target Temperature Stepsize
      name: TemperatureStepsize
      required: false
      type: DECIMAL
    - context: item
      description: Item for operation mode channel
      label: Operation mode
      name: itemMode
      required: false
      type: TEXT
    - context: item
      description: Item for fan speed channel
      label: Fan speed
      name: itemFanSpeed
      required: false
      type: TEXT
    - context: item
      description: Item for swing channel
      label: Swing mode
      name: itemSwing
      required: false
      type: TEXT
    - description: Hide timer button and options
      label: Hide Timer Function
      name: hideTimerFunction
      required: false
      type: BOOLEAN
    - context: item
      description: Switch item for timer
      label: Switch Timer ON/OFF
      name: itemTimerSwitch
      required: false
      type: TEXT
      advanced: true
    - context: item
      description: Item for timer duration
      label: Timer Duration
      name: itemTimerDuration
      required: false
      type: TEXT
      advanced: true
    - description: Timer minimum duration
      label: Timer minimum
      name: TimerMinimum
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer maximum duration
      label: Timer maximum
      name: TimerMaximum
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer step
      label: Timer step
      name: TimerStep
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer scale steps
      label: Timer scale steps
      name: TimerScaleSteps
      required: false
      type: DECIMAL
      advanced: true
    - description: Timer scale sub steps
      label: Timer scale sub steps
      name: TimerScaleSubSteps
      required: false
      type: DECIMAL
      advanced: true
    - description: Hide solarplant power
      label: Hide Solarplant AC power measurement
      name: hideSolarplant
      required: false
      type: BOOLEAN
    - context: item
      description: AC Power item for solarplant
      label: Solarplant AC Power
      name: itemSolarplantACPower
      required: false
      type: TEXT
      advanced: true
  parameterGroups: []
timestamp: Apr 10, 2021, 6:44:31 AM
component: f7-card
config:
  title: =props.title
  outline: true
  class:
    - no-padding
slots:
  default:
    - component: f7-row
      config:
        class:
          - margin-top-half
          - margin-left-half
          - margin-right-half
          - margin-bottom
      slots:
        default:
          - component: f7-col
            config:
              width: "50"
              large: "33"
            slots:
              default:
                - component: f7-segmented
                  config:
                    class:
                      - segmented-strong
                    style:
                      --f7-segmented-strong-padding: 0px
                      --f7-segmented-strong-between-buttons: 5px
                      --f7-segmented-strong-button-font-weight: 300
                      --f7-segmented-strong-bg-color: transparent
                      --f7-segmented-strong-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), 0.07)
                      --f7-button-fill-hover-bg-color: var(--f7-theme-color)
                      --f7-button-border-radius: 4px
                      --f7-button-padding-vertical: 0px
                      --f7-button-padding-horizontal: 0px
                  slots:
                    default:
                      - component: oh-button
                        config:
                          outline: true
                          class:
                            - padding-top-half
                            - display-flex
                            - flex-direction-column
                          text: ON/OFF
                          action: toggle
                          actionItem: =props.itemPower
                          actionCommand: ON
                          actionCommandAlt: OFF
                          icon-f7: power
                          iconSize: 15
                          fill: "=(items[props.itemPower].state === 'ON') ? true : false"
                          style:
                            --f7-button-border-width: 1px
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            height: auto
                            font-size: 8px
                      - component: oh-button
                        config:
                          visible: =!props.hideTimerFunction
                          text: TIMER
                          action: toggle
                          actionItem: =props.itemTimerSwitch
                          actionCommand: ON
                          actionCommandAlt: OFF
                          iconF7: timer
                          iconSize: 15px
                          fill: "=(items.ac_timer_on_off.state === 'ON') ? true : false"
                          outline: false
                          class:
                            - display-flex
                            - flex-direction-column
                            - padding-top-half
                          style:
                            --f7-button-border-width: 1px
                            --f7-button-border-color: var(--f7-card-outline-border-color)
                            font-size: 8px
                            height: auto
          - component: f7-col
            config:
              width: "33"
            slots:
              default:
                - component: f7-row
                  config:
                    class:
                      - padding-right-half
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "25"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-right
                                f7: house
                                size: 15
                                color: var(--f7-theme-color)
                      - component: f7-col
                        config:
                          width: "75"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-right
                                text: =items[props.itemIndoorTemp].displayState
                                style:
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: elipsis
                                  font-size: 12px
                - component: f7-row
                  config:
                    class:
                      - padding-right-half
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "25"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-right
                                f7: tree
                                size: 15
                                color: var(--f7-theme-color)
                      - component: f7-col
                        config:
                          width: "75"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-right
                                text: =items[props.itemOutdoorTemp].displayState
                                style:
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: elipsis
                                  font-size: 12px
                - component: f7-row
                  config:
                    visible: =!props.hideSolarplant
                    class:
                      - padding-right-half
                  slots:
                    default:
                      - component: f7-col
                        config:
                          width: "25"
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                class:
                                  - float-right
                                f7: sun_max
                                size: 15
                                color: var(--f7-theme-color)
                      - component: f7-col
                        config:
                          width: "75"
                        slots:
                          default:
                            - component: Label
                              config:
                                class:
                                  - float-right
                                text: =items[props.itemSolarplantACPower].state
                                style:
                                  white-space: nowrap
                                  overflow: hidden
                                  text-overflow: elipsis
                                  font-size: 12px
    - component: f7-row
      config:
        class:
          - justify-content-center
      slots:
        default:
          - component: oh-knob
            config:
              item: =props.itemTargetTemp
              min: =props.MinimumTemperature
              max: =props.MaximumTemperature
              stepSize: =props.TemperatureStepsize
              secondaryColor: var(--f7-card-outline-border-color)
              primaryColor: var(--f7-theme-color)
              responsive: false
              strokeWidth: "12"
              size: 150
    - component: f7-segmented
      config:
        visible: true
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-font-size: 8px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: modeRow
              in:
                - icon: arrow_2_squarepath
                  command: Auto
                  text: AUTOMATIK
                - icon: thermometer_snowflake
                  command: Cool
                  text: KÜHLEN
                - icon: thermometer_sun
                  command: Heat
                  text: HEIZEN
                - icon: drop_fill
                  command: Dehumidification
                  text: TROCKNEN
                - icon: wind
                  command: Fan Only
                  text: NUR LÜFTER
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.modeRow.icon
                    iconSize: 15px
                    fill: "=(items[props.itemMode].state === loop.modeRow.command) ? true : false"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                      - padding-top-half
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.modeRow.text
                    action: command
                    actionItem: =props.itemMode
                    actionCommand: =loop.modeRow.command
          - component: oh-button
            config:
              iconF7: ellipsis_vertical
              iconSize: 15px
              action: variable
              actionVariable: options
              actionVariableValue: "=vars.options || vars.options === undefined ? false : true"
              fill: "=vars.options || vars.options === undefined ? false : true"
              outline: true
              class:
                - display-flex
                - flex-direction-column
              style:
                --f7-button-border-color: var(--f7-card-outline-border-color)
                height: auto
                width: 50%
    - component: f7-segmented
      config:
        visible: =vars.options === false
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-font-size: 8px
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: optionsRow
              in:
                - icon: wind ellipsis_vertical
                  option: fanspeed
                - icon: move ellipsis_vertical
                  option: swing
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.optionsRow.icon
                    iconSize: 15px
                    fill: "=vars[loop.optionsRow.option] || vars[loop.optionsRow.option] === undefined ? false : true"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    action: variable
                    actionVariable: =loop.optionsRow.option
                    actionVariableValue: "=vars[loop.optionsRow.option] || vars[loop.optionsRow.option] === undefined ? false : true"
          - component: oh-button
            config:
              visible: =!props.hideTimerFunction
              action: variable
              actionVariable: timer_menu
              actionVariableValue: "=vars.timer_menu || vars.timer_menu === undefined ? false : true"
              fill: "=vars.timer_menu || vars.timer_menu === undefined ? false : true"
              iconF7: timer ellipsis_vertical
              iconSize: 15px
              outline: true
              style:
                --f7-button-border-color: var(--f7-card-outline-border-color)
    - component: f7-segmented
      config:
        visible: "=vars.fanspeed === false && vars.options === false ? true : false"
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: fanspeedRow
              in:
                - icon: arrow_2_squarepath
                  command: "0"
                - command: "20"
                  text: 1
                - command: "40"
                  text: 2
                - command: "60"
                  text: 3
                - command: "80"
                  text: 4
                - command: "100"
                  text: 5
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.fanspeedRow.icon
                    iconSize: 15px
                    fill: "=(items[props.itemFanSpeed].state === loop.fanspeedRow.command) ? true : false"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.fanspeedRow.text
                    action: command
                    actionItem: =props.itemFanSpeed
                    actionCommand: =loop.fanspeedRow.command
    - component: f7-segmented
      config:
        visible: "=vars.swing === false && vars.options === false ? true : false"
        class:
          - margin-left-half
          - margin-right-half
          - margin-top
          - margin-bottom-half
        style:
          --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
          --f7-button-border-radius: 4px
          --f7-button-outline-border-width: 1px
          --f7-button-font-weight: 300
          --f7-button-padding-vertical: 0px
          --f7-button-padding-horizontal: 0px
      slots:
        default:
          - component: oh-repeater
            config:
              sourceType: array
              for: swingRow
              in:
                - command: STOPPED
                  text: AUS
                - icon: resize_v
                  command: VERTICAL
                - icon: resize_h
                  command: HORIZONTAL
                - icon: view_3d
                  command: VERTICAL_AND_HORIZONTAL
              fragment: true
            slots:
              default:
                - component: oh-button
                  config:
                    iconF7: =loop.swingRow.icon
                    iconSize: 15px
                    fill: "=(items[props.itemSwing].state === loop.swingRow.command) ? true : false"
                    outline: true
                    class:
                      - display-flex
                      - flex-direction-column
                    style:
                      --f7-button-border-color: var(--f7-card-outline-border-color)
                      height: auto
                    text: =loop.swingRow.text
                    action: command
                    actionItem: =props.itemSwing
                    actionCommand: =loop.swingRow.command
    - component: f7-row
      config:
        visible: "=vars.timer_menu === false && vars.options === false && !props.hideTimerFunction === true ? true : false"
        class:
          - margin-left-half
          - margin-right-half
          - margin-bottom-half
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-slider-card
                  config:
                    outline: true
                    item: =props.itemTimerDuration
                    min: =props.TimerMinimum
                    max: =props.TimerMaximum
                    step: =props.TimerStep
                    scaleSteps: =props.TimerScaleSteps
                    scaleSubSteps: =props.TimerScaleSubSteps
                    scale: true
                    unit: min
                    label: true

Best regards
Fritz

Hey @Marcus

could you please tell me, how the timer function is supposed to work? Item configuration? Rule?

Thank

Best regards
Fritz

Hey @Fritz ,

You’re right. This is an external logic just triggering the item power by a rule.

I used 2 separate items to achieve that (“advanced” options in widget config):
(“ac_timer_on_off” and “ac_timer”)

    - context: item
      description: Switch item for timer
      label: Switch Timer ON/OFF
      name: itemTimerSwitch
      required: false
      type: TEXT
      advanced: true
    - context: item
      description: Item for timer duration
      label: Timer Duration
      name: itemTimerDuration
      required: false
      type: TEXT
      advanced: true

and the following rule:

rule "Klimaanlage - Timerbetrieb"
  when
    Item ac_timer_on_off changed
  then
    if (ac_timer_on_off.state == ON) { 
      DaikinACUnit192168040_Power.sendCommand(ON)
      sendNotification("xxx@gmail.com", "Klimaanlage - Timerbetrieb -> Start")
      createTimer(now.plusMinutes((ac_timer.state as Number).intValue),  [ |
        DaikinACUnit192168040_Power.sendCommand(OFF)
        sendNotification("xxx@gmail.com", "Klimaanlage - Timerbetrieb -> Ende")
        ac_timer_on_off.sendCommand(OFF)
      ])
    }
end

Thanks!