[MainUi] Better rendering of equipment with lots of points

[curlyel]

One of the strengths of openHAB3’s new WebUI is the automatic generation of UI elements like the cards for locations, equipment etc.

Like many others I started over with semantic modeling my stuff to benefit from the automatic generation of UI parts.

The Problem

Unfortunately, if some equipment in a certain location has lots of points, the location card gets cluttered by it. This leads to very long list of points which damages the clarity of that card.

Yannick said, that he is aware of that and is considering some improvement on that maybe for 3.1:

Improve equipment rendering in model cards

In the meantime I found a way that suits my needs to limit the list of points to only the most relevant. The less important points will be revealed only after a details switch has switched to ON. This keeps the less important point still accessible via the model cards after enabling the details view (instead of simply removing the less relevant items from the model completely).

Interim solution

To keep the clarity of a model card, I’ve introduced a dummy point (switch item) per equipment. The visibility of the less important points will be switched on/off by that item.

Example

This is the wall charger equipment in my garage:

As you see, there is a switch item with label Details added to the equipment Tesla Wallcharger. This item has no channel linked to it, just the expire metadata set which switches the item back to OFF after two minutes after switched to ON.

All less relevant points get a Default List Item Widget assigned to have the option to configure their visibility ON and OFF:

With this applied, we get a limited list of points when opening the model card for the location:

… and the long list after enabling Details:

I’m quite sure, Yannick will come with a much sleeker solution once he tackled the equipment rendering again.

But for now, I can live with it

[dewildep (De Wilde Peter)]

Hello @curlyel ,
i am new to openHAB and would like to use your solution to only show a dimmer bar when a switch is toggled to ON

For my test I created a Switch Item called Details and added an Expiration Timer of 10 seconds.
To the Dimmer Item i’ve added Default List Item Widget with =items.Details.state=="ON" as a syntax in Visible Options.

But how do i create a card now to let this work?

[curlyel]

The topic is more related to the automatic generated UI cards based on the semantic model. Especially the equipment cards.

To get some automatic generation of those cards, you need to model your setup into the semantic model. If this is your intention, start reading about semantic model.

But maybe you’re more after some individual designed widgets for your UI.
If so, start reading about pages and how to create custom widgets first.
In your widget you can use for the slider component:

- component: oh-slider
  config:
    visible:  =(items[props.powerItem].state !== "ON")
    item: =props.dimmerItem

Hope that helps…

[dewildep (De Wilde Peter)]

Hi, thanks for your reply. I’ll look into this!
with ‘props.powerItem’ and ‘props.dimmerItem’ you mean the real name of the ‘item’ right? or do i have to add the ‘props.’ ?

[curlyel]

@dewildep

mean the real name of the ‘item’ right?

No.

@dewildep

do i have to add the ‘props.’ ?

Yes.

But only if …

@curlyel

you’re more after some individual designed widgets for your UI.

Frankly, you really should…

@curlyel

start reading about pages and how to create custom widgets first.

Without that, you’re wasting your time (and our’s too)

[dewildep (De Wilde Peter)]

Hi @curlyel , thanks for the answer!
I’ll start reading right away !