OH3 item/widget: switch with multiple buttons?

Tags: #<Tag:0x00007f173ced3c08> #<Tag:0x00007f173ced3b18> #<Tag:0x00007f173ced3938>

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

Widget Code
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

3 Likes

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… :smiley:

HeatingWidget

6 Likes

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: true

Thanks 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.

may look then like this:

still wip though…

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:
widget1

popover graph, actionAnalyzer, comparing set and current temperature:

i hope this helps.

1 Like

image
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”
image

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: false

Well, 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:

3 Likes

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