YAML Code for Widgets in Getting Started - Pages - Overview Page

Hi,
i am almost done with the migriation to OH3 (currently running 3.2M4 on a Openhabian-installed Raspi 4).
I am building now the UI with pages / widgets etc.
I have seen the Getting Started - Pages part in the OH Documentation which is a usefull introduction.
There are a couple of examples like
Screenshot 2021-11-21 171448

I would be intrested in the respective YAML code of these widgets but was not able to find them.
Any hint towards the YAML code is welcome.
Thanks

The widgets in the Equipment, Location, and Properties tabs of the overview page cannot be easily directly rendered with the custom widget YAML. They rely on some internal scripts and code that just isn’t compatible with the YAML widget system. If you wish to have something exactly like those widgets you will need to dig deep into custom widget system and probably have several associated proxy items and rules as well.

I am interested in the same. I have the items, goup definitions etc. in files (as in OH2) and i prefer to have it like this to be able to track changes in git. With text definitions I did not manage to achieve what is in the example yet :frowning:

It is worth noting that all the configurations made with the MainUI are stored in json files in the userdata/jsondb folder. These files can be checked in to git just like the text configuration files. In fact, enough users do exactly this, that recently some upgrades have been made to make those configuration files even more git-friendly by enforcing a consistent order of objects.

That’s not to say that you should not use text configuration, but if git versioning is your primary concern you could revisit UI config and possibly find it fits your needs pretty well.

It is possible. The components of the semantic model are just tags and groups. It is, however, a lot of extra tagging and grouping to keep track of in a text configuration and as a result it is easy to break the model. Without going over your entire configuration it will be difficult to say why you are not achieving success with this.

1 Like

Meanwhile I got it to work without knowing the YAML-code.
The result so far (just an example):
Screenshot 2021-11-22 165959

When i click on the card i get the full picture of the related items.


and here is the extract from the semantic model:

How to get the items to the location page:
edit your “Home Page” e.g.in pages

you can edit the card e.g. for AZ with Confige Card
Screenshot 2021-11-22 171851

here your can with “Configure Card” configre the content of the card in the location tab e.g. which badges should be shown.:

If you prefere YAML you can use “Edit YAML” for the configuration

config:
  label: Home Page
equipment:
  - component: oh-equipment-tab
    config:
      cardOrder:
        - Receiver
        - Television
        - Lightbulb
        - Blinds
        - Window
        - Sensor
        - WallSwitch
        - Camera
        - MotionDetector
        - HVAC
        - Inverter
        - Equipment
        - NetworkAppliance
        - WebService
        - WeatherService
    slots: {}
locations:
  - component: oh-locations-tab
    config:
      cardOrder:
        - smgloc_Eingang
        - smgloc_2EG
        - smgloc_2EG_Flur_EG
        - smgloc_2EG_GaesteWC
        - smgloc_2EG_WZ
        - smgloc_2EG_EZ
        - smgloc_2EG_Kueche
        - smgloc_3OG
        - smgloc_3OG_Flur_OG
        - smgloc_3OG_Ankleide
        - smgloc_3OG_Bad
        - smgloc_3OG_SZ
        - smgloc_3OG_AZ
        - smgloc_3OG_Balkon
        - smgloc_4DG
        - smgloc_4DG_Flur_DG
        - smgloc_4DG_Gaeste
        - smgloc_1KG
        - smgloc_1KG_Waschkueche
        - smgloc_1KG_Gaestebad
        - smgloc_1KG_Technikraum
        - smgloc_1KG_Vorrat
        - smgloc_Terrasse
      excludedCards:
        - smgloc_Eingang
        - smgloc_1KG_Gaestebad
        - smgloc_4DG
        - smgloc_3OG_Balkon
    slots:
      smgloc_1KG:
        - component: oh-location-card
          config: {}
      smgloc_1KG_Waschkueche:
        - component: oh-location-card
          config:
            backgroundColor: black
            badges:
              - windows
            invertText: false
            subtitle: KG
            title: Waschküche
      smgloc_2EG_EZ:
        - component: oh-location-card
          config:
            backgroundColor: yellow
            badges:
              - lights
              - windows
              - blinds
            subtitle: EG
            title: Esszimmer
      smgloc_2EG_GaesteWC:
        - component: oh-location-card
          config:
            backgroundColor: blue
            badges:
              - windows
            subtitle: EG
            title: Gäste WC
      smgloc_2EG_Kueche:
        - component: oh-location-card
          config:
            backgroundColor: lime
            badges:
              - lights
              - windows
              - blinds
            subtitle: EG
            title: Küche
      smgloc_2EG_WZ:
        - component: oh-location-card
          config:
            backgroundColor: purple
            badges:
              - lights
              - windows
              - blinds
              - temperature
              - humidity
            subtitle: EG
            title: Wohnzimmer
      smgloc_3OG_AZ:
        - component: oh-location-card
          config:
            backgroundColor: teal
            badges:
              - lights
              - windows
              - blinds
              - temperature
              - humidity
            subtitle: OG
            title: Arbeitszimmer
      smgloc_3OG_Bad:
        - component: oh-location-card
          config:
            backgroundColor: blue
            badges:
              - windows
            subtitle: OG
            title: Bad
      smgloc_3OG_SZ:
        - component: oh-location-card
          config:
            backgroundColor: green
            badges:
              - lights
              - windows
              - blinds
              - temperature
              - humidity
            subtitle: OG
            title: Schlafzimmer
      smgloc_4DG_Gaeste:
        - component: oh-location-card
          config:
            backgroundColor: deeppurple
            badges:
              - windows
            subtitle: DG
            title: Gäste
      smgloc_Eingang:
        - component: oh-location-card
          config: {}
properties:
  - component: oh-properties-tab
    config: {}

What is important: you have to tag your equipment items and point items according to the badges
Semantic Model - Badges

Here a short view to my equipment for the room “AZ”. Here you can see the equipment items taged according to the badges table.

And the Items to be displayed have to be tagged also according to the badge-table:

If you use the .items files (as i do for a couple of items) you just need to put the tags according to badges table into your item:

Number:Temperature              Wetterstation_indoor_temp2      "WS Innen Temperatur AZ  [%.1f %unit%]"      <temperature>    (eq_LokalesWetter, gPersInfluxDB_Wetter, gWeatherTemp, eq_WS_AZ_Temp_Feucht)  ["Measurement", "Temperature"]
Number:Dimensionless            Wetterstation_indoor_humidity2  "WS Innen Feuchtigkeit AZ  [%.1f %%]"        <humidity>       (eq_LokalesWetter, gPersInfluxDB_Wetter, gWeather,     eq_WS_AZ_Temp_Feucht)  ["Measurement", "Humidity"]

‘eq_WS_AZ_Temp_Feucht’ is the link to the equipment and ‘[“Measurement”, “Humidity”]’ are the tags according to the badges table for this item.

If you want to fine-tune how your item is displayed in the card you can add the Metadata “Default List Item Widget” to your item

in my case i wanted the state of the item for the rollershutter to see how wide-open the rollershutter is.

I hope i haven’t forgotten anything as it is a topic with many dependencies and it took me quite some time to understand how the topics are linked together.

3 Likes

At least for me the challange was to understand all the dependencies in the semantic model, badges, items, standard widgets etc. and to find all the relevant documentation and tie it together.
Once you have understood how everthing is linked together it’s easy to implement it with the UI or in files.

Overall there are great improvements with OH3, also the UI is much better as it was before. Good work from the whole team.
What i am definitly missing is to get some documentation out the system e.g. a list of all items with the attributes. I tried it via the REST-API but the result is not usefull for documentation.

Hi Justin,
the files necessary for tracking are:
uicomponents_ui_page.json
uicomponents_ui_widget.json
and a couple of others.

All the yaml clode for the widgets is in one large file.
I’d prefer to have a folder were you have a file per widget instead one big file.

BR
Marco

I got it now partly working thanks to your guide.
There is a startup problem in my case.
Roomtemperatures are in conf/items/raumtemperaturen.items
Window contacts in conf/items/kontakte.items
etc.

Examples from these file:

Contact Fenster_OG_Tim "OG Tim Fenster [MAP(de.map):%s]" <window> (gKontakte, gKontakteOffen, OG_Tim, tim)  ["Window", "OpenState"] { channel="knx:device:bridge:kontakte:Fenster_OG_Tim" }

or

Dimmer Licht_OG_Tim "OG Tim Spots"  <light> (gLicht, gLichterAn, tim) ["Switch", "Light"]   { channel="knx:device:bridge:lichter:Licht_OG_Tim" }

When I start the OH3 docker container the Semantic Model will look like:

So it looks like it is not working. But if I touch the items files and save them it will start working:

Note: the knx items are available after a couple of seconds and is the last binding available.

I have a similar issue. If i recall right then there is still a problem with the semantic model in cases where you have defined items (e.g. the location and equipment) with the UI and other items in item files. The items from an item file are not correct mapped to the sematic model. If you touch the item file its correct but i you touch something in the model via UI it’s gone again.
Another topic is that you can link one item only to one place in the semantic model structure. If an item is linked the more than one place then you never know where it is shown.

Due to the knx mapping I want items files. So that means the semantic model is not usable that way. Have you tried the latest 3.2 Milestone? If not i’ll do it.

I am on 3.2M4 and the issue with the model is still there.
What i would like to test is when you add items from a textual definition (as in Advanced Object Management) how you can update them. What i have in mind to keep the item-files outside of the conf/item area and just add the item file again (does it update the exiting item or not)

probably best to file a bug on github?

i think it’s already filed