Widget for heating-control

Hey everyone,

i’m quite unsure if there is something like a “custom-widget-library” for openhab3. I did not find any.
Therefore i thought maybe we could share our widgets here.
I really enjoy the possiblity to write widgets with the new main ui.

So here we go: I needed a control for my heaters. I have 3 buttons controlling three HVAC-states of my KNX heating control. Additionally the widget presents current temperature, desired temperature and state of valve. Maybe its interesting for anyone? Hints, additions, extensions and co are very welcome.

Sample:
grafik

Code here:

    uid: heizungsWidget
    tags: []
    props:
      parameters:
        - description: Raum der Heizung
          label: Wohnraum
          name: raum
          required: true
          type: TEXT
        - context: item
          description: Item der Heizung (HVAC)
          label: HVAC Status
          name: itemHvac
          required: true
          type: TEXT
        - context: item
          description: Item der Raumtemperatur
          label: Raumtemperatur
          name: itemRaumTemp
          required: true
          type: TEXT
        - context: item
          description: Item der Solltemperatur
          label: Solltemperatur
          name: itemSollTemp
          required: true
          type: TEXT
        - context: item
          description: Item des Ventilstatus
          label: Ventilstatus
          name: itemVentil
          required: true
          type: TEXT
      parameterGroups: []
    timestamp: Dec 22, 2020, 5:37:32 AM
    component: f7-card
    config:
      title: ="Heizung " + props.raum
    slots:
      default:
        - component: f7-card-content
          slots:
            default:
              - component: f7-row
                config:
                  class:
                    - align-items-center
                    - display-flex
                    - justify-content-space-between
                    - align-content-stretch
                slots:
                  default:
                    - component: f7-col
                      config:
                        class:
                          - display-flex
                          - align-items-center
                          - flex-direction-column
                      slots:
                        default:
                          - component: f7-icon
                            config:
                              f7: thermometer
                              size: 36
                              color: blue
                              class:
                                - margin-top
                          - component: Label
                            config:
                              text: =(items[props.itemRaumTemp].displayState || items[props.itemRaumTemp].state)
                              style:
                                fontSize: 20px
                    - component: f7-col
                      config:
                        class:
                          - display-flex
                          - align-items-center
                          - flex-direction-column
                      slots:
                        default:
                          - component: f7-icon
                            config:
                              f7: decrease_quotelevel
                              size: 36
                              color: blue
                              class:
                                - margin-top
                          - component: Label
                            config:
                              text: =(items[props.itemSollTemp].displayState ||  items[props.itemSollTemp].state)
                              style:
                                fontSize: 20px
                    - component: f7-col
                      config:
                        class:
                          - display-flex
                          - align-items-center
                          - flex-direction-column
                      slots:
                        default:
                          - component: f7-icon
                            config:
                              f7: gauge
                              size: 36
                              color: blue
                              class:
                                - margin-top
                          - component: Label
                            config:
                              text: =(items[props.itemVentil].state) + " %"
                              style:
                                fontSize: 20px
        - component: f7-block
          config:
            class:
              - segmented
          slots:
            default:
              - component: oh-button
                config:
                  active: =(items[props.itemHvac].state === "Comfort")
                  text: Komfort
                  action: command
                  actionItem: =(props.itemHvac)
                  actionCommand: Comfort
                  large: true
                  raised: true
                  class:
                    - margin
              - component: oh-button
                config:
                  active: =(items[props.itemHvac].state === "Standby")
                  text: Standby
                  action: command
                  actionItem: =(props.itemHvac)
                  actionCommand: Standby
                  large: true
                  raised: true
                  class:
                    - margin
              - component: oh-button
                config:
                  active: =(items[props.itemHvac].state === "Economy")
                  text: Nacht
                  action: command
                  actionItem: =(props.itemHvac)
                  actionCommand: Economy
                  large: true
                  raised: true
                  class:
                    - margin

The only thing i am missing with openhab3 is adding that widget automatically in my docker-environment like items, things and stuff defined in text-files. I miss that for pages too. Isn’t it possible to define that sources in text-files? Is the User-Interface the only way for configuring that? Or am i overseeing something? Maybe i could utilize the REST-API and a corresponding init-script but that somehow sounds like overkill for me :slight_smile:

Kind regards
Matthew

8 Likes

That is great!!! Awesome, I control my home with oh2 and KNX and are moving to oh3 but I have starting problems to configure my own widgets.
This is fantastic…
I have two questions:
Is it possible to add support to change the “Solltemperatur” with an 1 bit object (in oh2 ist is a switch Off decrease the temperature On increase the temprature)?
I can set the HVAC mode and can see the valve status but I cannot see both temperatures. Do you have yany idea where I can start to find my failure?

Thank you for your work!

There will be something. I think the hope is that the new marketplace, when it ever gets built, will also work to publish custom widgets and rules, or even packages that include both. In the mean time, I think this category or Add-ons -> UI are where such examples are posted. Many thanks for posting!

It’s all stored in plain text JSON in userdata/jsondb. You should be mounting userdata anyway.

Yes, for now the UI is the only way to build them (or through the REST API). Or, like I said, the JSONDB is plain text and includes lots of configs too. They should be considered and treated as config too.

2 Likes

Solved the problem to display the temperatures. Changed from .displayState to .state and everything is fine, even with the correct unit.

1 Like

big like :slight_smile:

of course i mount userdata but i like my config to be seperately version-controlled in my github repository. therefore a solution like text-config for items/things would be nice :slight_smile:
As far as i see it correctly the configs in jsondb are stored as one big json-file (one for custom widgets and pages) aren’t they?

1 Like

Hello @Matthew,

Now, I have an other issue. Take a look:

The Item is configured with pattern: %.1f °C

And all other widgets display the value correct. Is there the possibility to set a format of the number for the widget in the yaml code?

Again, thank you! Have a nice evening!

I config my JSONDB stuff in git too. No problems so far. The history works pretty well actually.

Yes.

Hello @johannesbonn,

I think you need haven’t “fully” configured your item. As far as I know you cannot apply formats on the widget (at least not in the current release), hence you need to rely on the item state description (Add Metadata -> State Description -> Pattern -> %.1f °C ).

Also, on widget I recommend a small change which will display the formatted state (item state description), if defined, or fallback to the item state.

text: =(items[props.itemRaumTemp].displayState)

Should be changed to:

text: =items[props.itemRaumTemp].displayState || items[props.itemRaumTemp].state
1 Like

Good extension @nepotu - thanks. I changed the script in my initial posting. All my items for heating have a display state so i had no reason for a fallback to the item state. However: safety first :slight_smile:

@johannesbonn: Let us know if your issue is fixed with the right formatting as @nepotu recommended.

Thank you @nepotu, I have changed it for the temperature items. Actually it looks fine, but the effect from my earlier post comes only from time to time. I will keep an eye on it.

Hello,
great idea and clear implementation. I am trying my luck from this widget now to call a second widget in which I can then set the temperature of the heater. So I have two widgets that are called one after the other. The whole thing works in principle already. Only: Can the variable (props) from the first widget be passed to the second widget?
Probably everything is quite simple. Only I do not get through here at all.

Hey @Matthew, i placed same question in Release discussion topic, please join this thread, hope this topic could be treated as somehow community-requested :wink: