HABPanel RELOADED - THEME / SKIN + Custom Widgets

Is the code available?

I’m still tweaking at the moment, I want it to be a fully featured Kodi remote. Then if there’s interest, the plan is to release it as a stand alone widget.


I think there’d be a lot of mileage as a generic media player with image art.

1 Like

Maybe I’ll make 2 variants then. Basic generic media player, and a Kodi version with the extra buttons.


So here it is running as a generic video player, generic music player, and then finally the Kodi version, which I can’t finish yet due to having trouble updating the Kodi binding. Everything stopped working when I did so.

I want to add progress bars for the music player and Kodi, and some other small bits, but other than that, the generic one is ready to go, if someone wants to test it.

I want to know if it runs smooth on slower tablets, as there’s a lot of transitions and fancy visuals, which usually slow down on low end tablets.

Does anyone know how I go about uploading widgets for the gallery in openhab?

Looks like you need to tag the thread #widgetgallery and attach the JSON to the first post or like to a GitHub repo.

1 Like

KODI version…

1 Like

Hi, I really like your setup. Can you share the json files to your dashboards like the lighting, climate, cctv and network. I’d really like to try to set this up

Yeah it’d be nice if you could share some of the other widgest as well, i.e. Kodi, the log text box, etc.

Also what exactly are you showing on the timeline below the color widgets on the “Lighting” page? I like the way it looks, but dont know what I’d show on a timeline thats lighting related. Maybe when they were on and off? Can this be done through the built-in HABPanel timeline widget?


Kodi binding is broke for me since updating to 2.4.0. soon as that’s fixed I can test and finish the Kodi remote.

The log text box is just the standard iframe widget linked to frontail.

The graph at the bottom is Grafana, it’s showing motion and external light levels. Not much use but it looked cool.

You can achieve the same look using my CSS file and the standard widgets.

1 Like

quick question - the links to various devices on the bottom row(s) of your network page, are those just links to the admin/mgmt pages of the various devices / services?

Thanks so far!

They were linked to the network binding to show when the device was offline, but I got rid of them all now as they showing online even when they weren’t. Very hit or miss.

I have something similar running on my magicmirror (https://github.com/MichMich/MagicMirror).

How were you doing it?

Look here for the plugin doing the network device status scanning code:

Its doing it via an arp scan via mac addresses. Works really well. The only thing that is a bit flaky is android phones because theyll put the wifi connection to sleep and look “offline” if they’re not active after like 30 seconds or something. There used to be a setting in the wifi settings to disable this behavior but I believe they got rid of it around 8.0-8.1

I can do that but it means merging the code with your own in “/habpanel/index.html#/settings/localconfig”
It might be cleaner for you to just set those up from scratch yourself for only what you need, as my lighting screen is so full with stuff, that it only fits on a PC screen, if you load that up on a tablet without changing display scaling options, it won’t fit unfortunately.

They are standard sliders, knobs, switches and colour pickers, using my css override, they should look for you, how they do on my screenshots.

Here’s how it looks behind the scenes:

Using network:pingdevice with the Network Binding https://docs.openhab.org/addons/bindings/network/readme.html
Each item was just a switch to the Pingable network device, the icon lights up when the device is online on the network and looks dim when they’re offline, but as I said, very unreliable. I never did any setup with the binding though, I’m sure there is more reliable ways to do it with the binding.

You can download the generic media widget here:

1 Like

I really like this theme but the side menu on the left is eating up a lot of real estate at the moment.

I noticed a “pin” in the lower left corner indicating this menu is capable of " auto hiding" but it does not seem to do anything.

Should it " auto hide" or is there anything i can do to make it so?


:+1: for music and network screen.
Is it possible to get a karaf/shell terminal tab? I know its a lot of work, but it would make me feel I am in Matrix universe.

There’s a line of code in the CSS that’s keeping the menu locked where it is, as that’s how I preferred it for my own panel, as I kept moving the menu by mistake everytime I touched anything.

I can’t remember off hand which line it is, so I’ll take a look when I’m home.

@snoekieboe Removing the following from my css file will allow the menu to hide again.

.container {
    left: 265px;
    width: calc(100% - 265px);

.header a[title="Menu"] {
    display: none;