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.
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.
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:
Number of open windows
Number of open doors
Number of lights switched on
Number of closed shutters
3-4 scenes
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.
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.
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.
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).
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.
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