Hey forumers,
I want to use/develop a widget to control the HVAC mode of my heating actuator. In a sitemap you simply would do something like that:
Switch item=Livingroom_Heating_HVAC_Mode label="HVAC Mode" icon="heating" mappings=["Comfort"="Comfort", "Standby"="Standby", "Economy"="Economy", "Building Protection"="Building Protection"]
Is there an equivalent in the OH3 standard items or widget library?
I’m making progress here. I’ve create a first version of a custom widget using oh-list-card as a container and oh-list-item for the HVAC mode selection. To give feedback of the selected items I’ve used the icon f7:circle for the non selected modes and f7:circle_fill for the selected state.
First version looks like this:
uid: HVAC Mode Widget
props:
parameters:
- description: Der Titel der Betriebsart
label: Titel
name: title
required: true
type: TEXT
- context: item
description: Das Item für das die Betriebsart eingestellt wird
label: Betriebsart Item
name: item
required: true
type: TEXT
parameterGroups: []
timestamp: Jan 3, 2021, 2:51:27 PM
component: oh-list-card
config:
title: =props.title
slots:
default:
- component: oh-list-item
config:
title: Komfort
action: command
actionItem: =props.item
actionCommand: Comfort
icon: "=items[props.item].state === 'Comfort' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: red
- component: oh-list-item
config:
title: Standby
action: command
actionItem: =props.item
actionCommand: Standby
icon: "=items[props.item].state === 'Standby' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: red
- component: oh-list-item
config:
title: Nachtabsenkung
action: command
actionItem: =props.item
actionCommand: Economy
icon: "=items[props.item].state === 'Economy' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: red
- component: oh-list-item
config:
title: Frostschutz
action: command
actionItem: =props.item
actionCommand: Building Protection
icon: "=items[props.item].state === 'Building Protection' ? 'f7:circle_fill' : 'f7:circle'"
iconColor: red
The result looks like this:
Next step would be to give the list items the title as parameters. Question here, how to define a parameter with an array type.
Stay tuned
I would use f7-segmented for that, don´t know if there is a possibility with oh-button.
Here you find an overview of the available f7-icons
uid: segmented_button
timestamp: Jan 4, 2021, 8:01:27 PM
component: f7-segmented
config:
raisedAurora: true
round: true
slots:
default:
- component: oh-button
config:
iconF7: exclamationmark_triangle
iconColor: red
text: Standby
- component: oh-button
config:
iconF7: bed_double
iconColor: green
text: Komfort
- component: oh-button
config:
iconF7: thermometer_snowflake
iconColor: blue
text: Nachtabsenkung
based on your ideas i created my first heating widget with current temperature, the trend line and 4 buttons of mode selection with a stepper for manual temperature setting. First trial and error steps of the new YAML functionallity of OH3 for me. Not perfect yet, specifically on mobile where the text of the buttons disappear, but a start… 
This widget looks very nice for heating control. Could you post the code please?
Sure. The following items must be edited manually in the code:
The Set Temperature item for the OH Stepper Card
The Actual Temperature Item in the Trend Item
Both in the actionAnalyzerItems.
> uid: Thermostat-Control
tags: []
props:
parameters:
- description: Thermostat to control
label: Description
name: Title
required: false
type: TEXT
- context: item
description: Das Item für das die Betriebsart eingestellt wird
label: Ist Temperature Item
name: item1
required: true
type: TEXT
- context: item
description: Das Item für das den Preset eingestellt wird
label: Preset Item
name: item
required: true
type: TEXT
timestamp: Jan 8, 2021, 8:30:09 AM
component: f7-card
config:
outline: false
noBorder: true
padding: false
noShadow: false
style:
--f7-safe-area-right: 0
--f7-safe-area-left: 0
slots:
content:
- component: oh-label-card
config:
noShadow: false
trendItem: The Actual Temperature item
action: analyzer
actionAnalyzerItems:
- The Set Temperature item
- The Actual Temperature item
item: =(props.item1)
title: =(props.Title)
icon: f7:thermometer
actionAnalyzerCoordSystem: time
vertical: false
- component: f7-row
config:
class:
- padding-top
- padding-bottom
- padding-right
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Auto
action: command
actionItem: =(props.item)
actionCommand: 1
iconF7: eject
iconColor: blue
text: Auto
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Lower
action: command
actionItem: =(props.item)
actionCommand: 4
iconF7: thermometer_snowflake
iconColor: blue
text: Lower
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Warm
action: command
actionItem: =(props.item)
actionCommand: 2
iconF7: thermometer_sun
iconColor: blue
text: Warm
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Off
action: command
actionItem: =(props.item)
actionCommand: 3
iconF7: multiply_circle_fill
iconColor: blue
text: Off
- component: oh-stepper-card
config:
color-theme: blue
item: The Set Temperature item
large: false
autorepeat: trueThanks a lot.
So just to make sure I do everything the right way from begin:
To use a custom Widget, I have to define it at “Developer Tools” -> “Widgets”, then choose the widget in the metadata-options of each corresponding Equipment.
yes for the create Widget part. Then you can use this widget in the pages --> create or edit layout pages part, e.g. in the overview page.
Cool, thanks a lot.
Is there an option to set fixed “points” in the widget?
For example: In my “semantic model”, I have 5 rooms, all of them have their equipment “Heating”. Each “Heating” has its Points:
“mode”
“actual temperature”
“setpoint temperature”
Now when I add the widget to the equipment, it would be nice if the points will be set automaticilly.
Is this possible?
I believe yes and i have this for 4 rooms as well, but in my case the mode is triggered by a rule with numbers 0-3 that fires the mode to a “virtual” item which sets the mode with a sendCommand(…) . You can see this in the widget code. Not sure how you set your mode. It was a quick and dirty widget for my specific case but could be extended to be used for other specific cases as well.
hi
i tried your widget, it works fine, but i had one problem the line of temperatur dont shows. i changed the “actionanalyzerItems” to my.
actionAnalyzerItems:
- sPZB001_wohnz_temperature
is this the correct way? the “sPZB001_wohnz_temperature” is my actually temperatur item of the thermostat.
uid: Thermostat-Control
tags:
props:
parameters:
- description: Thermostat to control
label: Description
name: Title
required: false
type: TEXT
- context: item
description: Das Item für das die Betriebsart eingestellt wird
label: Ist Temperature Item
name: item1
required: true
type: TEXT
- context: item
description: Das Item für das den Preset eingestellt wird
label: Preset Item
name: item
required: true
type: TEXT
timestamp: Jan 22, 2021, 10:31:18 AM
component: f7-card
config:
outline: false
noBorder: true
padding: false
noShadow: false
style:
–f7-safe-area-right: 0
–f7-safe-area-left: 0
slots:
content:
- component: oh-label-card
config:
noShadow: false
trendItem: sPZB001_wohnz_temperature
action: analyzer
actionAnalyzerItems:
- sPZB001_wohnz_temperature
- sPZB001_wohnz_solltemperature
item: =(props.item1)
title: =(props.Title)
icon: f7:thermometer
actionAnalyzerCoordSystem: time
vertical: false
- component: f7-row
config:
class:
- padding-top
- padding-bottom
- padding-right
slots:
default:
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Auto
action: command
actionItem: =(props.item)
actionCommand: AUTO
iconF7: eject
iconColor: blue
text: Auto
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Warm
action: command
actionItem: =(props.item)
actionCommand: HEAT
iconF7: thermometer_sun
iconColor: blue
text: Heizen
- component: f7-col
slots:
default:
- component: oh-button
config:
title: Off
action: command
actionItem: =(props.item)
actionCommand: OFF
iconF7: multiply_circle_fill
iconColor: blue
text: AUS
- component: oh-stepper-card
config:
color-theme: blue
item: sPZB001_wohnz_solltemperature
large: false
autorepeat: true
i understand that the line is not showing on the widget, correct? The item trendItem is responsible for the line of temperature in the widget. the actionAnalzyerItems are set for the popover graph. Just a guess, did you persist this item?
widget: including trend item:
popover graph, actionAnalyzer, comparing set and current temperature:
i hope this helps.
can you give the code for this item
Hi, this is a standard OH3 Label Cell, no specific changes made, everything is on board features of the OH3 label cell.
below is the YAML code. The item “Iphone_Sw” is a group of my iphones which turns to ON if one of the member is @home. The popup shows the group details.
component: oh-label-cell
config:
icon: f7:house
item: Iphone_Sw
color: green
action: group
actionGroupPopupItem: Iphone_Sw
footer: status Anwesenheit
header: Presence
OK thanks. Can you tell me how to remove these three points
near icons? They are inside the “oh-cell”
I’ve adopted the thermostat widget to my needs which ended with:
This are three separate widgets in a row…
Unfortunately, I haven’t figured out how to insert some space between the widgets (indicated by the red lines)
Could someone point me in the right direction how to acchieve this?
The second thing I’m struggling with is the analyzer action. The analyzer opens, but the window remain empty. Is something wrong with the following YAML?
- component: oh-label-card
config:
noShadow: false
trendItem: =(props.tempItem)
action: analyzer
actionAnalyzerItems:
- =(props.tempItem)
- =(props.setpointItem)
item: =(props.tempItem)
title: =(props.Title)
icon: f7:thermometer
actionAnalyzerCoordSystem: time
vertical: falseWell, first question solved on my own;
I’ve added some style to the f7-card. Doing so, I adopted the radius of the corners from the oh-cell too:
component: f7-card
config:
outline: false
noBorder: false
padding: true
noShadow: false
style:
--f7-card-margin-horizontal: 5px
--f7-card-content-padding-vertical: 0px
--f7-card-content-padding-horizontal: 8px
border-radius: 16px
Remains the question regarding the analyzer items…
Why is this not working:
action: analyzer
actionAnalyzerItems:
- =(props.tempItem)
- =(props.setpointItem)
Any hint?
Well, can answer myself now…
That works:
actionAnalyzerItems: =[props.tempItem,props.setpointItem]
So my result so far with widgets styled similar to the oh-label-cell’s:
Very nice!! Kindly ask if you like to share your entire code for this, so I/other may adopt this for own purposes?
Cheers
INT5749
