Matrix Theme for HABPanel

Tags: #<Tag:0x00007fd311b40f50> #<Tag:0x00007fd311b40e10> #<Tag:0x00007fd311b40cd0>

(Romain ALCARAZ) #143

Excellent work !!! I love this panel.
I integrated on my different floor and it’s perfect.

I have one question : Is it possible to integrate a pilot wire (fil pilote in french) for electronic radiator with this specific style ?
It’s my final request ! :smiley:


(Romain ALCARAZ) #144

That’s what i am looking for ! Can you give your json about this please ??? :wink:

(Herbie Villachez) #145



(Dominic Bialas) #146

Hey guys,

just another grafana related question. Is ist possible to hack the line color also?
In my case the green of the matrix theme is different from the standard green of the grafana dark theme. Could this even be included in the mygrafana.css ?

WOuld be pleased to hear from you…

(Thomas Bail) #147

Hi There,

really great stuff. Having 2 weeks of holidays left i will strt today to implement the matrix theme and i try to use the knx-uf-iconset.

Has anybody thought about a floor map that could be included at each level? Something like JSFloorPlan with additional icons …


(Kuba Wolanin) #148

I’m working on a openHAB/HABPanel floorplan solution based on this demo :wink:
Lots of work ahead of me but I’ll share my progress when it’s time.

( ) #149

The demo looks great and nice to hear, that someone ia working on that topic.- Looking forward to see your first examples.

(Patrick) #150

Hi everyone,

I finally got around to upload the latest version to github!

Here are the changes:

  • Added a “Climate Control” section for thermostat items in the ground floor widget

  • Added “Color Light” control for lights (found in the ground floor widget):

  • Added a “Power Consumption” dashboard (found in the home widget):

  • Added my own icon as “Apple Touch Icon” for saving HabPanel to the iPhone/iPad home screen:

Enjoy :slight_smile:

(Dominic Bialas) #151


Hey Patrick,

this sounds great. just visited your GitHub account and noticed that the json files still are 12 days old and some files are from today.

Did you miss to upload the json files? Or misunderstand I something?

(Phil) #152

Hi Patrick, this theme is amazing. Thank you for all your hard work on it!

I’m really new to the software side of things, so setting up OpenHAB hasn’t been easy as I’m learning Linux and everything from scratch. But I’ve managed to install your Matrix theme and gotten to the point of adding widgets. The widget displays when ‘run’ but perhaps I’m missing something that isn’t allowing me to edit the widget?

This is what I see:

Other widgets if I make them myself, I see:

Ah, it’s 3am. I’m gonna call it a night and try again tomorrow!

(Patrick) #153

Oops, I missed those two files. I uploaded them now! Thanks for pointing it out!

(Patrick) #154

Hi @canuckcam, the widgets are “templates” (as in you need to make it your own and edit the details) but delivered as custom widgets (json).

You have two options to edit them:

  1. Click on the cogwheel in the custom widget management section, then click on the widget and edit the markup there.

  2. Create a new “template” widget and copy the markup from the custom widget.

In the markup, you need to look at the item names, group names, labels, etc. to customise it to your needs.

Unfortunately, I didn’t have the time yet to add configuration options as suggested by some here. When I get some time, I’ll try to do that, but for now they are just starting points that you need to make your own by editing the markup.

(Patrick) #155

You can change the color of the graph in grafana by adding a series override. By default, you only get a few colors. In order to add you own, you need to export the dashboard as JSON, add your color manually into the JSON and then import again.

(Phil) #156

Ahh! Got it. Thanks for the lightning fast reply!

Is there a text editor you’d recommend? The files that I’ve downloaded (and individually opened on GitHub) have the entire code in one line making for a long jumble. Just wanted to ask before I try to manually separate everything out to make it easier for me to edit.

(Volker Bier) #157

Hi Patrick,
thanks for posting this. It really looks nice and the benefit of it being responsive is what makes it usable on all my devices at home! I no longer have to create different dashboards for mobile and tablet.
I have added menu like buttons to the section to be able to navigate between dashboards and also created a fritzbox call overview:

(And I changed the foreground color to improve WAF)

(Patrick) #158

Cool! :slight_smile:

Re the menu items – I navigate using the normal menu on the left (swipe dashboard to the left or touch hamburger icon). Does this not work for you?

What’s WAF? :slight_smile:

(Volker Bier) #159

Menu navigation works, but this is faster and more obvious.
WAF=Women Acceptance Factor

(Andrew Pawelski) #160

@pmpkk Patrick I have changed a few things in your CSS to my own flavour but it seems I have lost the built in lables (or they are the same colour as the background) - any idea what element they would be?

(Patrick) #161

Looks like you changed the theme to “light” from “dark”, so you will need to change this override:

–widget-text-color: #a4a4a4;

in matrix-theme.css to black or something dark (or remove it alltogether).

Hope this helps!

(gymbowfits) #162

How did you create items that return the RGB values of the hue lights rather than HSB values, so that you can do things like the following:

ng-style="{'background': 'rgb(' + itemValue( + '_rgb') + ')'}"

I’ve tried using an item transform on a hue light channel, but couldn’t get that to work.