Matrix Theme for HABPanel

Tags: #<Tag:0x00007f2fbad42088> #<Tag:0x00007f2fbad41ed0> #<Tag:0x00007f2fbad41c28>

Hi Christian,

did you ever accomplish the device / playlist dropdown with the new spotify binding? I’m now at the same point and tried a lot of things without success so far.

Many thanks!

if you’re new. start with the stock matrix theme and play from there. Get your head around how CSS Files work. HTML element tags and how to manipulate them. Check out Bootstrap and angular JS tutorials online too.
Theres no point me giving you my files. as they are custom to my items and will not work on your system.

Thank you for that, worked great :slight_smile:
The background color of the grafana graphs are now the same as the UI.
But I didn’t find a way to hide the grid of the graphs in grafana, as it is the case in your screenshots. Did a lot of research but hiding the grid of a graph seems not to be possible at the moment? How did you achieve that?

Many thanks!

Hi Herbie,

I am facing the same problem, I guess. Everything is working fine, except the grafana graphs…They just don’t update in the HABPanel, except when I hint the refresh button from safari-browser. Am I missing anything?
Hope you or someone else can help me.

In the meantime I’ve found a solution / workaround.
It’s probably not the right way to do it but for me it is working.
I’ve noticed that the selection widget from HabPanel works well for device / playlist selection, so I’ve just copied that in.
I can click on the playlist and device name which opens the overlay to select other items.


Widget Code:

<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
		<div class="name">Playlists</div>
       ng-init="modelPlaylists = {
          item: 'spotifyPlaylists',
          choices_columns: 1,
          choices_source: 'server',
          square: false,
    <div class="valueGroup"><div class="value"><widget-selection ng-model="modelPlaylists"></widget-selection></div></div>

Items from the updated spotify binding:
String spotifyPlaylists “Playlists [%s]” {channel=“spotify:player:user1:playlists”}
String spotifyDevices “Active device [%s]” {channel=“spotify:player:user1:devices”}

The design is not ideal but for me it’s sufficient.

1 Like

I had the same problem.
I found no solution for the habpanel.

I am using an android tablet to show the habpanel with the app habpanelviewer.
In openhab you can create a rule how often you want to reload the side.
This is also possible in the kioskbrowser, but there you always see a white background during the reload which made me crazy all the time.

Hello, could someone help me or send me a link explaining how to configure the topics in habpanel I am new to the community and in openhab


Did you update it to work with the new Spotify binding?
I don’t mind if it’s only a list of pre-defined playlists.
How did you do it with the Lg-Remote (for example).
A simple selection item that looks good and is mapped would be fine for me.
I am not that skilled with java. Thank you!

It’s all explained in the readme you find on github :slight_smile: just follow the link in the first post

Mine is based on a modified python script. LG remote is through the Logitech harmony binding.

hi i don’t mean the linked item channel i mean how did you achieve the selection in the habpanel theme :slight_smile: it’d be nice if you could share this!

You should find everything here.


Could you please share your transform file?
I will modify the template to match to the new pride theme a little better and share it if i am done :slight_smile:
It would save me some time if you don’t mind.


Did you get this working?
I am on a mac and my path is:
but when i open it i see this:

i only found this path.
my share older (usr/share) does not contain a grafana sub folder

Hi Jonas,

yes, send me a pm with your Email-Adress.


did you make any progress?
Somehow my graphs don’t seem to update even if i reload.
What exactly do i need to configure in grafana?
I chose 15 min refresh time. do i need to configure something else?
the graph changes in the graphana setting url but my embedded image does not so i think the image is not refreshed automatically. I marked the option i used to embed the image.
I think this is just a screenshot and nothing dynamic. but the other options won’t work for me. i just get a “file not found”-image

Hola que tal?.

Despues de mucho tiempo y ahora con mas tiempo para poder jugar con esto en mi nueva casa.

Les solicito información de como puedo cambiar los colores de los iconos SVG. para poder seguir avanzando.

Gracias de antemano.


Hello everybody,

Here are a few updates from my dashboard. Thanks again to Patrick for the perfect template

Weather, Calendar, Astro, Home-Temp


Living Room


Bedroom and bathroom with Popups for Air Cleaner and Heater

Hall and cellar

Vaccum Cleaner with Popup for Mode and Fan-Options

Flowers with Graph-Gallery


Network-Info with Popup for WLAN-Devices

Energy-Info with Popup


Hello Nognog,

fantastic config, would you mind share those, I would love to adapt them to my home! :wink:

I’ve sent u a PM :slight_smile:

Hey, I would like to have the config, too. Can you please post it here or send me via pm?