Building Pages in the OH3 UI: documentation draft (2/3)

Ah okay, got it!

And tested this already by accident, but obviously it only works if the root component is an f7-block.
So I´ll try to wait patiently for your work on the mentioned request. :slight_smile:

On the topic of this request - I managed it to create a widget with a custom background already (at least for the popup-case)


Thanks again!

7 Likes

Would you mind providing your Source code?

Looks great!

I think it would be best to open a new topic in the UI category (https://community.openhab.org/c/add-ons/uis/30, maybe there could be a dedicated one) to discuss new widgets like this. I can do the same for the keypad.

3 Likes

Of course!

I’ll just clean it up a bit and add some parameters and will post it in the mentioned category later tonight. Maybe until then I also got some tweaks done, so that you can define multiple layers of images in the top-section so it can react to different type of weathers and the sunset etc.

One last questions regarding the group-parameters @ysc - Is there a link where I can find all the parameter types to define? and maybe something like a divider / headline group-item as its used for the action param?

And thanks for your kind words!

1 Like

@RGroll the format of the props in a widget is the same as the config description parameters (& groups) familiar to binding developers, only in YAML. They are described here:
https://next.openhab.org/javadoc/latest/org/openhab/core/config/core/configdescriptionparameter
https://next.openhab.org/javadoc/latest/org/openhab/core/config/core/configdescriptionparametergroup
For instance to have separate sections for parameters you’ll need to define a group and then set groupName: <name> in your parameters.

2 Likes

I have created a new topic for the keypad widget here: UI Widget: Keypad

Is there an expression I can use to make the badge color depend on the state of the Item? I experimented with trying a trinary operator and the like but the editor marks it as wrong no matter what I try (probably means the answer is can’t do it). Maybe I have to use visibility?

Ultimately what I’m shooting for is a three layered accordion list that rolls up the status into one line. If something goes offline I can open up the list and see all my machines and identify which machine has something offline. Clicking on that shows the list of services and I want to see which one is offline.

So, for example, if InfluxDB goes offline All Services will show as OFFLINE. Opening that and Argus will show as OFFLINE. Opening that in turn will show that InfluxDB is OFFLINE and everything else is ONLINE.

Maybe all I can use is the after and not the badge? But being able to show the state with a colored badge would be really useful.

As I play with this stuff it’s clear that building pages is going to be as complicated as building rules to do anything more than just the basics. It’s going to need lots of docs I fear.

Something like this should definitely work I think:
badgeColor: =items.vArgus_Status.state === 'ON' ? 'green' : 'red'

As I play with this stuff it’s clear that building pages is going to be as complicated as building rules to do anything more than just the basics. It’s going to need lots of docs I fear.

yes :disappointed:
But @RGroll definitely got the gist of it, so maybe people can learn by examples after a number of those are available.

Yes, i tried it for 1 month, and it’s complicated, simple things are very hard. Maybe just html with access to underline vue.js will have been simpler. Maybe we can add that to the edit mode : yaml mode and html mode with access to f7 component.
(I hate yaml :smile: )

1 Like

So, for example, if InfluxDB goes offline All Services will show as OFFLINE. Opening that and Argus will show as OFFLINE. Opening that in turn will show that InfluxDB is OFFLINE and everything else is ONLINE.

For that you might be better served by a Group item with an aggregation function, and simply displaying the state of that Group in the badge.

They are Group Items that I’m trying to display. That’s actually how I do it in my old sitemap. And I can see that all these Groups and Switch Items have a state when I look at the Items. But the icon isn’t changing color to match the state and the state is always showing as - on the page.

When I tried to use the ternary operator the editor marked it as an error line. When I saved it it deleted everything from that error line to the end of the YAML. :cry: I need to stop for today. More experiments tomorrow!

This should work

badgeColor: '=(items.testItem.state === "ON") ? "green" : "red"'

It seems that you have to use apostrophe to enlose your statement so its get recognized as a valid ternary-operation. The round brackets are just a personal thing, which makes clear, what is the ‘if’ part. (especially usefull in long concatenated statements)

1 Like

Kind of off topic from everyone else, I tried re-creating an abbreviated version of my OH2.5 sitemap (only astro and openweathermap bindings and items) by using both the design and code page, but after a few hours or after a reboot/restart, the system does not see the pages. I get the message that no sitemap pages have been defined, but they are still listed and they show up without any errors, at least in the code page.

So if everything else is working but it’s just reporting that they don’t exist than I would open a new issue. That’s probably a minor bug.

OK, I got the badge stuff working. I can’t seem to get at the state of the actual Items though.

But I’m trying to get your collapsible list to work above and it does indeed work if the third level only has one Item (InfluxDB in that example). But if there is more than one, only the first one is shown.

I’ve tried:

  • using oh-list-items instead of oh-label-items
  • making the each second layer component be an oh-list-card too
  • playing with using default and accordion under slots.

The closest I’ve come to success is as follows:

component: oh-list-card
config:
  accordionList: true
  title: All Services Status
  footer: Online status of home automation related services
slots:
  default:
    - component: oh-list-item
      config:
        title: All Services
        subtitle: When OFF one or more services are offline
        badge: '=(items.ServiceStatuses.state.state === "ON") ? "ONLINE" : "OFFLINE"'
        badgeColor: '=(items.ServiceStatuses.state === ON) ? "green" : "red"'
      slots:
        accordion:
          - component: oh-list-card
            config:
              accordionList: true
              noBorder: true
              noShadow: true
              outline: true
            slots:
              default:
                - component: oh-list-card
                  config:
                    accordionList: true
                    noBorder: true
                    noShadow: true
                    outline: true
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: argus
                          subtitle: Home automation server
                          badge: '=(items.vArgus_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                          badgeColor: '=(items.vArgus_Status.state === "ON") ? "green" : "red"'
                        slots:
                          accordion:
                            - component: oh-list-item
                              config:
                                title: Grafana
                                badge: '=(items.vGrafana_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vGrafana_Status.state === "ON") ? "green" : "red"'
                            - component: oh-list-item
                              config:
                                title: InfluxDB
                                badge: '=(items.vInfluxdb_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                                badgeColor: '=(items.vInfluxdb_Status.state === "ON") ? "green" : "red"'
                - component: oh-list-card
                  config:
                    accordionList: true
                    noBorder: true
                    noShadow: true
                    outline: true
                  slots:
                    default:
                      - component: oh-list-item
                        config:
                          title: cerberos
                          subtitle: Garage sensors and controller
                          badge: '=(items.vCerberos_Status.state === "ON") ? "ONLINE" : "OFFLINE"'
                          badgeColor: '=(items.vCerberos_Status.state === "ON") ? "green" : "red"'

image

Am I doing something stupid? Are two levels as deep as one can go? Obviously I have other approaches to display this information if it simply can’t be done, but I think a collapsible list like this is an elegant solution if I can get it to work.

Thanks for all the help so far!

You don’t really need oh-list-card inside an accordion slot, a oh-list is enough (with accordionList: true if there are accordion items in it) but it is necessary - you can place anything in the accordion slot - i.e. and collapsible area - so you need to organize it like this:

(condensed version)

component: oh-list-card
config:
  accordionList: true
slots:
  default:
    # regular non-collapsible items
    - component: oh-list-item
    - component: oh-list-item
    - component: oh-list-item
    # collapsible item
    - component: oh-list-item
      config: accordionItem: true
      slots:
        accordion:
         - component: oh-list
           config:
             accordionList: true
           slots
             default:
              - component: oh-list-item
              - component: oh-list-item
              ...

So, at every level:

  1. you should have a oh-list (or oh-list-card at the root level) with a collection of oh-list-item in the default block.
  2. To make a collapsible item, the oh-list-item in question should have a accordion slot, which should contain a new oh-list like in 1.
  3. Every oh-list having accordion (collapsible) items should have accordionList: true in its config.

Here’s a working version (without the badge properties for clarity). Note the class: - margin-left to give increasing margins to the lists to make them look like a tree view:

component: oh-list-card
config:
  title: All Services Status
  accordionList: true
  footer: Online status of home automation related services
slots:
  default:
    - component: oh-list-item
      config:
        title: All Services
        icon: oh:network
        badge: OK
        badgeColor: green
      slots:
        accordion:
          - component: oh-list
            config:
              accordionList: true
              class:
                - margin-left
            slots:
              default:
                - component: oh-list-item
                  config:
                    title: argus
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: influxDB
                            - component: oh-list-item
                              config:
                                title: Grafana
                - component: oh-list-item
                  config:
                    title: cerberos
                  slots:
                    accordion:
                      - component: oh-list
                        config:
                          accordionList: true
                          class:
                            - margin-left
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                title: Service1
                            - component: oh-list-item
                              config:
                                title: Service2
4 Likes

Fantastic! That works! I’m thinking we may need to come up with a pretty good reference and maybe some tutorials for some of the more common widgets users might want to make. I think I’m starting to understand this part of it at least. Thanks!

1 Like

OK, here’s another question. Is there a way to use the default widget config from the Item in the code above? Or is this a case where it has to be defined. I tried to replace the config from one of the components with just item: NameOfItem after modifying that Item to override the default List Widget and it came up blank.

Do the default widgets only come into play when adding widgets from the model?

Yes, I wish we had dynamic resolving of default widgets too but since they’re stored in metadata and can’t be retrieved efficiently right now (we don’t want a call to the API to figure out the default control multiple times in the page, that would have poor performance), maybe that’s something that could be retrieved early, cached and somehow kept current in the future… then that could become possible.

1 Like