[MainUi] Better rendering of equipment with lots of points

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:

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

7 Likes

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?

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…

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.’ ?

No.

Yes.

But only if …

Frankly, you really should…

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

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

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.