HABPanel RELOADED - THEME / SKIN + Custom Widgets

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?

Thanks!

:+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;
}

Thnx!

That looks awesome! Really have to give it a try!

CSS file download has been updated.

Amazing looking theme, great job.
Would you mind sharing the design process for the theme? Do you use a program like dream weaver or type all the code, mainly for widgets, in HABPanel?

@erod998

Occasionally I’ll use Dreamweaver, but mostly I just use Chrome DevTools, id say you can do it all in DevTools, if you just want to modify an element then that’s super easy, you inspect the element you want to change, which brings up the css for it, you make your live edits, see how they look instantly, and when you’re happy, move the overrides to the css override file.

If you’re creating from scratch like I have with my custom widgets, I make them in the custom widget section of openhab, you can flick between code and preview there.

1 Like

Thank you! I am combining parts of your theme with the Matrix them to create some custom stuff and was curious on how do you did it.

Just put together a material design icon remote for Netflix, using Harmony.

When Netflix starts, the panel switches over to the Netflix dash and Alexa speaks “Netflix and chill”.

V2 Music dash using custom Chromcast Audio remote.

Hi gman, some lovely work.

I can see you’ve got some of your logging displayed there in HabPanel, Id love for you to share this. It would be very useful to display say the last 50 or so logs from OH2, saves going back to a terminal to view them!

Thank you
Kris

Thank you.

Frontail is what you need for the logging, and then you load up the frontail page url in a frame widget on the panel.

3 Likes