I have a few minutes so I thought I would quickly write up what I’ve done with my MainUI Overview Page so far as a source for inspiration and examples.
Overall Approach
Common controls and information that are needed most frequently are in the Overview tab. This page is somewhat random in appearance and content but it gives the users of the home immediate access to those things that usually need to be controlled or overridden.
The rest are controlled through the model and Item widgets. My approach to the model is to make it as flat as reasonable so there are no subequipments and no Properties directly under a Location so that everything can be seen with the fewest number of clicks.
In appearance I like to have the overall look be relatively consistent but I’m not overly strict on this. But this does mean I’ve used all icons from one source (f7 icons) and not too many colors. I could probably spend more time on this.
Avoiding Extra Work
To customize how an individual Item appears in a card on the overview page one must set the “default list widget” metadata. Since a lot of Items are similar (e.g. multiple thermometer readings) create the list widget as a custom widget and apply that to each Item instead of recreating the same widget over and over again for each Item. This has the added benefit that when you change the custom widget it will change it everywhere that custom widget is used.
See Example Custom List Widgets for more details.
The Grand Tour
Overview Page
As described above this page has the most commonly used controls and information. Right now that’s the garage doors, lights, and a status widget that will show when one of the home automation devices or services is offline.
The image of the garage is provided by a Wyze camera in the garage. An old phone is running TinyCam to access the stream and the IP Camera binding gets a frame every 10 seconds from TinyCam. I’ve two garage doors. Clicking on the “open” area of the widget will trigger the door to open and the camera gives additional confirmation that the door has opened. I like having eyes on the doors when opening or closing them remotely.
Here’s what it looks like when one door is open.
I don’t think I’ve posted that widget anywhere else so here it is.
uid: garage_widget
tags:
- card
- garage
props:
parameters: []
parameterGroups: []
timestamp: Feb 12, 2021, 10:02:20 AM
component: f7-card
config:
title: Garage Doors
slots:
default:
- component: f7-row
slots:
default:
- component: oh-image
config:
item: GarageCamera_Image
style:
width: 100%
height: auto
- component: f7-row
config:
class:
- justify-content-left
slots:
default:
- component: f7-col
slots:
default:
- component: oh-label-card
config:
footer: Small Garage Door Opener
action: command
actionItem: Small_Garagedoor_Opener
actionCommand: ON
label: '=(items.Small_Garagedoor_Sensor.state == "OPEN") ? "close" : "open"'
item: Small_Garagedoor_Sensor
icon: '=(items.Small_Garagedoor_Sensor.state == "CLOSED") ? "f7:house" : "f7:house_fill"'
iconColor: '=(items.Small_Garagedoor_Sensor.state == "CLOSED") ? "green" : "orange"'
- component: f7-col
slots:
default:
- component: oh-label-card
config:
footer: Large Garage Door Opener
action: command
actionItem: Large_Garagedoor_Opener
actionCommand: ON
label: '=(items.Large_Garagedoor_Sensor.state == "OPEN") ? "close" : "open"'
icon: '=(items.Large_Garagedoor_Sensor.state == "CLOSED") ? "f7:house" : "f7:house_fill"'
iconColor: '=(items.Large_Garagedoor_Sensor.state == "CLOSED") ? "green" : "orange"'
Neither f7 nor material have a good icon for a garage door so I opted for flipping between a filled house and outline house icon and using color to indicate open/closed.
The lights and services widgets are built using the oh-repeater widget and are discussed more at A couple of simple oh-repeater examples. The tricky part with the lights is when you flip “tis the season” to ON it will show the Christmas light switches too. The “All Services Online” widget will show only those services or machines that are offline when they are determined to be offline by OH.
That’s all for now. Everything else in my home is automated instead of controlled and I intend this page to be more about control. I might add more to it at some point but these are the things used the most.
Locations
I’ve always liked architectural drawings and water colors so I settled on that as the theme for the Locations pages. Unfortunately I wasn’t able to find enough and had to resort to other artwork in a couple cases. I had to apply a 60% brightness filter to them though so the text and badges could be read. Each image was downloaded and put into the $OH_CONF/html page so they are always available.
An example YAML snippet showing both the brightness and loading an image from the html folder is as follows:
Garage:
- component: oh-location-card
config:
backgroundImage: /static/garage.jpg
backgroundImageStyle:
filter: brightness(60%)
invertText: false
As you can see, I ordered the locations in a way that make sense and inserted a divider where it makes sense. This is all done by clicking on the pencil icon in the upper right hand corner. The brightness setting needs to be added by editing the code. Everything else was configurable through the UI.
I won’t go into each and every card and will only show a couple of interesting ones.
Takeaways:
-
Notice that first line that says All Home Speakers. That corresponds to a Chromecast group that includes all the CC’s in the house. The widgets though are only shown when that speaker group is actively playing something. The rest of the time the list widgets are hidden.
-
Stuff that applies to the whole house are in this root location. So weather, the whole house power monitor, and presence are included here.
-
All but one of the icons come from the f7 set. Colors change based on the state of the Item.
Here you’ll notice an equipment with no points. In this case cerberos is the name of the RPi that I have in the garage that drives the garage door openers. If it falls off the network or my sensor_reporter falls off of MQTT they will show up as offline. Otherwise the widgets are hidden.
I also show this to show how two Items can be combined into one widget. In this case clicking on the widget will trigger the door opener and the sensor status is used to populate the badge, icon, and colors. Because I am able to combine the Items, I’ve removed the door trigger Item from the model entirely. Another option is to simply make that item’s widgets invisible.
the PeanutPlug Equipment runs the Christmas lights and doesn’t have any other job right now so the widget for it’s Point is hidden unless TisTheSeason is ON.
The Garage Door Item uses a material icon, the only non-f7 icon I use.
The Back Door widget is another one that combines more than one Item. In this case a sensor that indicates whether the door is open or closed, the status of the lock, and the ability to open the lock when clicking on the widget. You can see that the deadbolt is locked but the door itself is open (the deadbolt automatically locks after 30 seconds so this isn’t unusual).
You can also see some more equipment with hidden widgets.
In this example you can see my “poor man’s smart humidifier” setup. I’d like to combine these into one widget similar to what I’ve done for the doors but I’ve yet to figure out how to put a slider and a switch on the same row in a widget (suggestions are welcome). The Roku will show the active application if it’s playing something. When it’s on screensaver or home the widget is hidden.
NOTE: I need to customize the room to remove the HVAC badge from the card as it doesn’t really make sense here.
Equipment
When I started out with the model I started by over defining the equipment tags and ended up with a whole lot of cards that had one or two Points in them and were really similar things (e.g. I tagged my Google Home Hubs, Google Home Minis, and Chromecasts with different Equipment tags, but they are all really represented the same so I changed so they all use the same Equipment Tag). I think I have some more work to do here because I don’t see any reason to separate the Doors like that so will probably change them to all be the same Equipment tag so all the doors appear in the same card.
I couldn’t find nearly enough water color paintings to use the same types of images for the Equipment and Properties tabs so I use stock images for those. Again, I use the brightness 60% to make the text legible.
There really isn’t anything new to see when opening the cards. I will show what the Chromecast widgets look like when it’s actually playing something though.
Those who use Chromecast know there are dozens of Channels and therefore Items. I’m only using a handful and only four of those are part of the model. I use one widget to show several of them at the same time. This is another case where I’d like to merge some of these widgets further (e.g. add a mute button to the volume slider).
Properties
Again, there isn’t much to show here. I think I’ve done a pretty good job of flattening the tags so like things appear together. Take special note though that there is an Analyze All button on the cards on this page so this is a great place to, for example, see all your temperature Items on one chart without needing to create a Chart Page.
Lessons Learned
- Let the UI drive your model. After all, for now it’s the main thing that the model actually controls.
- Don’t be afraid to leave Items out of the model.
- Consider how the UI will be used. Logically it made sense to tag the home minis and home hubs with VoiceAssistant and the rest of the CCs as Receivers but in the end it didn’t make sense from the UI.
- Don’t be afraid to experiment and go back if it didn’t work out for you.
Note that all of the above was accomplished with basic to intermediate knowledge of Pages, F7 and widgets. With some expert knowledge I’m sure one could create something really impressive. But I do want everyone to see what could be accomplished with only some time and using the basics.
Good luck!
