I’ve recently been working on my overview screen. I’m very happy with the content, now. However, the display takes up quite a bit of space. I use the oh-label-card for this.
How do you do this on your home screen? Do you have any suggestions for improvement?
You can ‘evolve’ to use custom widgets to display multiple values such as inside and outside temp in one single widget.
Check the marketplace for what others have built so you don’t have to reinvent the wheel.
After an initial phase of euphoria, you will probably start removing parts of the full overview and only keep those that are most important or that you have the need to look after most often.
After some time spent experimenting, I’ve found that the things from the screenshot (windows, doors, lights, shutters, temperature) are practical for me on the overview page. I also have 2-4 scenes.
My idea is to add these simple things without a custom widget. I’ve basically succeeded in doing that.
Now I’m trying to make it a bit more compact and appealing (without custom widgets).
That’s not possible. You can use the default settings of the widgets and get what you see, or you can change the default settings of the widgets, at which point they become custom widgets.
A custom widget is just a widget that you’ve modified it overridden a default setting. It can be as little as using an expression to change the label color or as complicated as animating a SVG based on the states of Items. Both are considered custom widgets.
I use custom widgets. Mostly I put like things together using oh-repeater and I combine related stuff into one widget (e.g. Camera feed and buttons to open the garage door). I use visibility top hide the parts that are not relevant (e.g. my low batteries widget only shows batteries that are low, not all the batteries all the time).
If you want simple and more contact with minimal configuration you should configure the semantic model and use the overview tabs or use Basic UI.
If you want to create a Page and want it to look different from the default you’ll have to customize some widgets. There is a whole section in getting started with should help get you started. But to change stuff like spacing usually requires getting really low level and using CSS and stuff like that.
You might be able to get a little more compact view using cells instead of cards. Cells go on a page without masonary, rows, and columns and flow based on the width of your screen. I don’t have much experience using cells though. I don’t know if they have ways to control how they flow based on screen size.
You can get the cards closer together by changing how much percentage of each row each card takes up based on the width of the screen. From the page editing screen, click on the properties button for each widget and choose “Column Options”.
There you can configure what percentage of the row the card takes up based on the width of the screen. On narrow screens you want to use a higher percentage and wider screens a lower percentage. When the row fills up the remaining widgets flow to the next row.
For example, if you wanted three cells across on a cell phone width screen, set the percentage for each widget to 33% for the smaller widths.
Unfortunately, MainUI isn’t designed to be “compact” so you will be limited in how compact you can make it overall and it’s going to require some work (i.e. custom widgets).
I am the only one who uses the UI of my OH (everything else is voice controlled or automated) so I’ve not spent the time to make it beautiful or even consistent (widgets on the same row can be different heights). But I have spent the time to make it more compact.
On a phone all but the last two widgets take up a full row. The last two widgets are only slightly cuastomized oh-label abnd oh-toggle cards.
Hey Rich, thank you very much for your very detailed answer!
I must have misunderstood the custom widgets thing. My goal is basically to improve the display using the available “normal tools” and minor adjustments.
I’m a developer myself and could also add/adjust CSS. However, I would actually only do that to a very limited extent. For example, a little less padding or margin.
So far, I’ve worked a lot with oh-label-card. Maybe there are alternatives.
I had the problem that entries (when status changes) only appear when the page is reloaded. What’s the best way to do this with “visibility”?
I’m already using the semantic model and the overview tabs. This works very well, I like it. However, the overview page is empty even with the semantic model. I’d like to add something helpful here 
My idea:
I’ll definitely look into the possibilities for changing the layout.
If it really is just a matter of a little css for you, then you can look into using thestylesheet property. This property can be added to the overview page config and then accepts full css declarations as its value.
A quick search of the forums will provide you with numerous examples.
Customized widgets are normal.
I’ve not experienced that problem. But I also haven’t messed with that sort of thing in a long time. I used to have a widget on my main Overview page showing all the information about what’s playing on one of the Google Chromecasts/Hubs. But the widget would only appear when something is actually playing. I never had an issue where I had to refresh the page to get them to show up or disappear.
If you have to refresh, and that’s the behavior in OH 5 right now, an issue should be filed as I’d consider that to be a bug.
Most of the places I use it now is in the oh-repeater cards but that is less about visibility and more just filtering out those rows that don’t need to be shown.
See Battery Level Status for how you might do that using oh-repeater, which is a “normal tool”.
The first part is just defining properties which makes the widget reusable. The “magic” is in the title and the repeater loop.
For the title I use
'=props.title + ": " + ((items[props.minLevel].displayState ===
undefined) ? items[props.minLevel].state :
items[props.minLevel].displayState)'
This actually could be written more concisely with additions that have been made to OH since OH 3 when I wrote it. But basicailly what it does is show the title configured in the properties and the value of the battery with the minimum charge percentage (which is calculated using a Group and the MIN aggregation function.
But you could use something like a Group with the count of open windows.
Then the oh-repeater for the batteries is
- component: oh-repeater
config:
filter: Number.parseFloat(items[loop.item.name].state) <= props.max
for: item
fragment: true
groupItem: =props.minLevel
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
badge: "=(items[loop.item.name].displayState === undefined) ? loop.item.state :
items[loop.item.name].displayState"
badgeColor: '=(Number.parseFloat(loop.item.state) > props.green) ? "green" :
(Number.parseFloat(loop.item.state) > props.orange) ? "orange" :
"red"'
icon: '=(Number.parseFloat(loop.item.state) > props.green) ? "f7:battery_100" :
(Number.parseFloat(loop.item.state) > props.orange) ?
"f7:battery_25" : "f7:battery_0"'
iconColor: '=(Number.parseFloat(loop.item.state) > props.green) ? "green" :
(Number.parseFloat(loop.item.state) > props.orange) ? "orange" :
"red"'
item: =loop.item.name
title: =loop.item.label
oh-repeater loops over a number of Items and creates a separate row for each. The filter makes it so only those batteries that are below the threshold are rendered., Then the stuff under slots control how each row gets rendered. You could use something as simple as a plain old oh-label-item instead of messing with the badge and changing icon color and such. Again, there are ways to make these expressions easier to read and shorter that didn’t exist when I wrote the widget.
You might be able to use my lights widget with some modifications. I’ve not published this one to the marketplace because I have some specific customizations that won’t be generally applicable (e.g. the Christmas lights handling).
When I turn on “Tis the Season” some more lights will appear.
The code for the widget is as follows:
uid: all_lights
tags:
- card
- lights
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Feb 11, 2021, 3:03:59 PM
component: f7-card
config:
title: Lights
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
fragement: true
for: item
sourceType: itemsWithTags
itemTags: Switch,Light
filter: loop.item.label.includes("Christmas") == false ||
items.TisTheSeason.state == "ON"
slots:
default:
- component: oh-toggle-item
config:
icon: f7:lightbulb
iconColor: '=(loop.item.state == "ON") ? "yellow" : "gray"'
color: '=(loop.item.state == "ON") ? "yellow" : "gray"'
title: =loop.item.label
item: =loop.item.name
This oh-repeater matches all the Items tagged with the semantic tags “Switch” and “Light” and, if TisTheSeason is OFF it filters out those with “Christmas” in the label. That’s how I control which lights appear.
The list Item widgets are just simple oh-toggle-item widgets with some color changing icons. I will say that the color changing doesn’t happen without a page refresh but that’s always been the case. I can’t remember if I ever got around to filing an issue for that.
To meet your requirement, I’d change the title to use an expression to pull the number of light that are ON, probably from a Group that keeps count with an aggregation function.
What’s really cool about this widget though is if you add or remove an Item, the widget adjusts itself automatically. I never have to edit this widget, it finds all the lights based on the tags.
Shutters can be a tiny bit more complicated because their state is a number. But it would be the same approach as above only you’d test for == 0 or == 100 (depending on what number represents closed).
I would probably use an on-list-card for this and add an oh-label-item widget for each scene. I don’t know if there is a way to make this dynamic and use the oh-repreater-card unless you created Items to command the scenes instead of having the widget trigger the scene directly.
Thank you for your detailed answers. They helped me a lot!
I’ve now found a very simple solution. The display is very attractive and functional for me.
This is what it looks like now:
Code
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: group
actionGroupPopupItem: Gruppe_Licht
icon: =items.Gruppe_Licht.numericState == 0 ?'oh:light-off':'oh:light-on'
iconUseState: true
item: Gruppe_Licht
noBorder: false
noShadow: false
outline: false
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: group
actionGroupPopupItem: Gruppe_Rollladen_Alle
icon: =items.Gruppe_Rollladen_Alle_Geschlossen.numericState == 0
?'oh:rollershutter-0':'oh:rollershutter-100'
iconUseState: true
item: Gruppe_Rollladen_Alle_Geschlossen
noBorder: false
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: group
actionGroupPopupItem: gruppeFensterKontakte
icon: if:material-symbols:window-outline
iconColor: "=(items.gruppeFensterKontakte.state > 0 ) ? 'red' : 'green'"
iconUseState: false
item: gruppeFensterKontakte
noBorder: false
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
action: group
actionGroupPopupItem: Gruppe_Tuer_Kontakte
actionPage: page:overview
icon: if:material-symbols:door-back-outline-sharp
iconColor: "=(items.Gruppe_Tuer_Kontakte.state > 0 ) ? 'red' : 'green'"
iconUseState: true
item: Gruppe_Tuer_Kontakte
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
item: aussenTemperatur
icon: if:iconoir:home-temperature-out
fontSize: 20px
action: group
actionGroupPopupItem: Gruppe_Temperatur
iconColor: "#ac4cb5"
- component: oh-grid-col
config: {}
slots:
default:
- component: oh-label-card
config:
item: Temperatur_Wohnzimmer
icon: if:iconoir:home-temperature-in
fontSize: 20px
actionPage: page:home
action: group
actionGroupPopupItem: Gruppe_Temperatur
iconColor: "#ac4cb5"
- component: oh-block
config:
title: Szenen
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: oh-cell
config:
action: rule
actionCommand: "0"
actionItem: Aufstehen
color: yellow
header: Szene
icon: f7:sunrise
on: true
title: Aufstehen
actionRule: Aufstehen
- component: oh-cell
config:
action: rule
actionCommand: "5"
actionItem: Scene_General
color: blue
header: Szene
icon: f7:moon_zzz
on: true
title: Schlafen
actionRule: Schlafen
I haven’t yet managed to use oh:repeater to make items visible or invisible without reloading the page. I’ve written a separate post about that:
Dynamically show and hide items with oh:repeater