Yes, the border = outline of every “card” can be switched on when you configure the widget:
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:
- 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.
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 . I attach a screenshot this time )
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.
Are you sure that you can access these images at the given path?
It works fine here:
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.
Yes the page config cannot be evaluated as expressions right now.
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