My New OH3 frontend

See my new OH3 frontend completely created with the built-in UI for OH3 and working perfect on PC, Tablet & iPhone

Animated gif:



@Benny_Dormaels Access to the ressource on Google Drive is denied.

should be available to view by everyone now

Looks great! :heart_eyes:

1 Like

Which programming approach did you use?

WOW!!! Looks very cool.

Let me guess, you had some spare time due to lockdown?

1 Like

What do you mean by programming approach ?

  • I have multiple zwave devices
  • All my thermostats are from Netatmo
  • I have HUE lights
  • Sonos speakers
  • etc.
    All connected via bindings in OH3 & Node-red (via RemoteOpenHab binding to OH2 as there is no Nodered node yet for OH3 which works)

The dashboard has been completely build via YAML (the default OH3 widget editor) with multiple expressions

I have not used any rules as I use Node-red

The new User Interface from OH3 is so powerful that I don’t need HabPanel, BasicUI or an iOS app anymore.
The F7 framework (and icons) are the best choice that OH3 have made in my opinion :slight_smile:

I also use Grafana for creating graphs as this is more powerful that the OH3 graphs.


So that’s created automatically from proper grouping of the devices?

Nice :slightly_smiling_face:

Do you mind sharing your YAML-Code?
That way I´d like to use that as a starting-point to see what is possible with the new UI.

1 Like

attached the yaml code
yaml.txt (67.4 KB)


… both, what you did and what can be done.
Thank you for sharing!

OH3 UI looks grate the way you make it. My concern is the difficulty to make an automation (make rules).
I am coming from the automation industry using PLCs. So in OH2 I preferred to use the NODE RED rules to make automation’s .(I abandoned really using OH2 and use only the embedded NODE RED).
I will be more that happy to see OH3 to make a step forward on the automation direction (one guy suggested python. Not a bad idea really. A version of python is started using inside CODESYS in PLCs).
So I am waiting a bit to see all goodies in OH3 and start making home automation with our M10CUBE project . A perfect solution for our Home Automation needs. It is made because of our needs in Automation and not having money or marketing in mind. That is why it is a community open hardware project.
We are going heavy tests on sensor board (M10SE0101) at the moment
I/Os boards testing will follow
You are welcome to ask any more info
Definitely the OH3 UI I saw today it was grate to drive me again into OH3.

Thats impressive of what can be achieved, I admin I am struggling ( must read more docs ) , More examples are needed for the OH3 setup and interfaces, Thankyou

I’m fully with you!

How do you embed the Grafana graphs in the UI?
I started with the image widget until I failed to find an option to refresh the image e.g. once a minute…

Any idea how to get refresh working?

You have 2 options:

  • You can create a page where you put a widget called “Web Frame Card” which is available as of Release 1
  • You create a label card where your action is an external URL

Very nice, although I would want to do a cleaner overview page with sub pages myself, it’s cool to see what you have done, thanks a lot!

Now that’s interesting. The binding page says that the valves are not supported, and indeed don’t work for me. Are you using old valves that don’t use energy API?


My Netatmo valves are the newest ones that do use the energy API.
I’m controlling the Thermostat itself via the OpenHab binding which works perfect.

For the valves itself I use NodeRed which has a Netatmo plugin where I can control the valves each separately.

Ah, See. That’s what I also resorted to, thanks and sorry for OT

I can’t get Grafana links to show in the Web Frame Card, neither rendered image nor the normal link.
Did this work for you?

This works, however does not provide a refresh option except for manually refreshing the page. Moreover, I’m looking into a solution without external URL.

I was looking at your YAML code above and found a Grafana implementation there:

                          - component: oh-list-item
                              title: Statistieken
                              action: navigate
                              listButton: true
                              actionUrlSameWindow: true
                              actionPage: page:page_526998b15c

actionUrl: there is no option to add a url in the list item. Did you add this manually in the code?

actionUrlSameWindow: I’m not given that option either…

With “action: navigate” you navigate to the action page…
What is the purpose of the URL with regards to “action: navigate”?

actionPage: Can you please share the YAML of that page?