A simple example of an Overview Page

Tags: #<Tag:0x00007fc916019528>

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!

27 Likes

Thank you for sharing that example and even more for explaining your thoughts that led to this. Great source for beginners :slight_smile:

2 Likes

Thanks Rich,

I find I have more bookmarked posts from you to go back to than any other contributor. Similar to @eikowagenknecht I very much appreciate the amount of detail you put in to both technical how-to, but also the ideas and thought processes. Also, the acknowledgement that you redo things because it didn’t quite work out first time is encouragement for those following in your wake. I have only tinkered with my pages view, but you have inspired me to put some more time into it.

And on a more general note to the OH developers, I have found version 3 to be much more stable for my upgraded instance. Very few glitches, and having zwave light switch rules that respond all the time (except when I am tinkering) is great for family happiness :slight_smile:

Thanks @rlkoshak for your contributions. I always look forward to your tutorials. One question I have is that my overview shows the “Openhab Log Viewer” and the “Openhabian help” pages when the “Other Apps” icon, located on the upper right side, is selected. I would like to restrict the visibility of these pages to only the administrators and not the users. I searched the community and the UI documentation but didn’t see information on where I could restrict the visibility.

I don’t think you can.

Thanks for the quick reply. If I can’t restrict the visibility, how do I remove the “Openhab Log Viewer” and the “Openhabian help” pages from the “Other Apps” icon? I didn’t see them listed in your tutorial

I don’t use them so I don’t know. I think there is a config file to that add external stuff like the log viewer. For stuff that’s part of OH like BasicUI you have to remove the add-on.

This “Other Apps” drawer is basically the new version of what used to be the OH2 “dashboard” i.e. a way of launching the interfaces that register themselves in the framework, therefore it inherited its features and limitations. You cannot restrict the visibility based on roles, because they didn’t exist at the time.

Look in services/runtime.cfg in your configuration folder for lines beginning with org.openhab.core.ui.tiles and remove them as necessary.

I commented them out in the runtime.cfg file located in /etc/openhab/services folder on my rPi, stopped the service using “sudo /bin/systemctl stop openhab.service,” and rebooted the rPi but it did not make a difference.

#org.openhab.core.ui.tiles:openhabiandocs-link-name=openHABian Help
#org.openhab.core.ui.tiles:openhabiandocs-link-url=https://www.openhab.org/docs/installation/openhabian.html
#org.openhab.core.ui.tiles:frontail-link-name=openHAB Log Viewer
#org.openhab.core.ui.tiles:frontail-link-url=http://IPaddress:9001

image

Maybe the config is still there even if they are not supplied by the .cfg file anymore.

Try config:list | grep org.openhab.core.ui.tiles in the console, and if there’s something,
config:delete org.openhab.core.ui.tiles

1 Like

This is also located in:

/var/lib/openhab/config/org/openhab/core/ui/tiles.config

Try to look in that file and remove unwanted items. Maybe it will help you.

1 Like

For some reason, I’m unable to get into the openhab console despite resetting my console password in openhabian

I commented out the lines and rebooted my rPi and it worked! Thanks!

These apps dont appear on my linux (debian) installation. Is there a way to make them visible there, also?

I believe you could. You could start first by adding the below lines to the services/runtime.cfg file located in your configuration folder. Replace the “IPaddress” phrase with the actual IP address of your openhab instance.

org.openhab.core.ui.tiles:openhabiandocs-link-name=openHABian Help
org.openhab.core.ui.tiles:openhabiandocs-link-url=https://www.openhab.org/docs/installation/openhabian.html
org.openhab.core.ui.tiles:frontail-link-name=openHAB Log Viewer
org.openhab.core.ui.tiles:frontail-link-url=http://IPaddress:9001

You may need to reboot your openhab instance to see if it took. If not, then you’ll need to check if /var/lib/openhab/config/org/openhab/core/ui/tiles.config exists and if so, then modify it as well.

Rich, this is super helpful. Thanks for posting this.