Matrix Theme for HABPanel

I created a custom theme (available as of v2.1) for HabPanel and thought it would be nice to share.

It also looks good on mobile:

My primary objective was to have a slick interface that can run as a web app on my iPhone and iPads. The theme adapts to phone, tablet and desktop through responsive design.

Note, the icons are purchased from and I can’t share them here.

All files and detailed instructions can be found here:


Wow, that looks amazing! Thanks for sharing …

That looks fantastic. One question, how do you populate the rules panel details? Do you have virtual items which count up each time a rule is fired?

looks great, the only thing that bothers me, is that you display your system load in % :blush: :smile:

For others, you also need Roboto Thin, Roboto Light, and Roboto Regular font files to be placed in the /static folder.

Thanks very very much for sharing. It’s a great setup.

@pmpkk- this is awesome work!

Out of curiosity, in:

<div ng-repeat="item in itemsInGroup('gFirstFloorLights') | filter:query as filtered">

where is query defined? Did you inject additional code or did I miss something?

NB: A pull request to include at least the color palette as a standard theme would be very welcome :slight_smile:


the floor dashboard with the lights and shutters is beautiful ! I love the simplicity in the design !

No extra code injected. I just followed the instructions here:

What would you prefer? :slight_smile:

I created a switch, a numeric and a datetime item per rule and update and evaluate the state in the rule. This way I can consistently keep track of the execution count and time and display it. I also want the ability to turn rules off via HabPanel, hence the switch.

1 Like

the load values (1, 5, 15min) are system metrics which depend on your systems cpu count. If you have a single core system, a load of 1.0 is 100% cpu load. If you have a dual core system, the load of 2.0 would be 100% cpu load. A quad core system with a load of 2.0 would define a 50% load scenario.

So you can’t display the load values as percent - if you like to, you have to normalize the value to the number of cores :slight_smile:

See also:

1 Like

Hmmm. The default control in Paper UI for the CPU Load from the System Binding also displays % straight up. No normalization. Are you certain that the cores are not taken into account already in those values?

From the doc of the SystemInfo Binding:

Load = Load in percents for the last 1 minute

Hm! Then that would be a misuse of the unix “load” definition i think! But no, i’m not sure if the cores are in there or not :wink:

Thanks for sharing!

I’m trying to replicate your system panel - how do you get the load 1,5,15 and graphs? can you post your items?

1 Like

I use the systeminfo binding. You can find the items in the doc here:

For graphs, I use Grafana and InfluxDb, which is totally awesome. Then I expose the graphs via a direct link image. All running on Raspberry Pi 3.

Grafana and InfluxDb can be installed easily from the Openhabian config tool.

Here’s a how to:

1 Like

You can do this with the systeminfo binding:


Thing systeminfo:computer:openhab2 "openHAB2 Server" @ "Server" [interval_high=60, interval_medium=60]


Group                       Sys_OH2_CPUGraph
Number                      Sys_OH2_CPUGraphPeriod                      ""
Number                      Sys_OH2_CPULoad                             "Akt. Auslastung [%s%%]"                    <cpu>                                    (Sys_OH2_CPUGraph)                         { channel="systeminfo:computer:openhab2:cpu#load"} 
Number                      Sys_OH2_CPULoad1                            "Auslastung (1 Min) [%s%%]"                                                                                                     { channel="systeminfo:computer:openhab2:cpu#load1" }
Number                      Sys_OH2_CPULoad5                            "Auslastung (5 Min) [%s%%]"                                                                                                     { channel="systeminfo:computer:openhab2:cpu#load5" }
Number                      Sys_OH2_CPULoad15                           "Auslastung (15 Min) [%s%%]"                                                                                                    { channel="systeminfo:computer:openhab2:cpu#load15" }


    Frame label="CPU" {
        Text item=Sys_OH2_CPUName
        Text item=Sys_OH2_CPULoad {
            Frame label="CPU Auslastung" {
                Text item=Sys_OH2_CPULoad1
                Text item=Sys_OH2_CPULoad5
                Text item=Sys_OH2_CPULoad15
            Frame  {
                Switch item=Sys_OH2_CPUGraphPeriod label="Zeitraum" mappings=[0="Stunde", 1="Tag", 2="Woche"]
			        Chart item=Sys_OH2_CPUGraph period=h refresh=6000 visibility=[Sys_OH2_CPUGraphPeriod==0, Sys_OH2_CPUGraphPeriod=="Uninitialized"]
			        Chart item=Sys_OH2_CPUGraph period=D refresh=30000 visibility=[Sys_OH2_CPUGraphPeriod==1]
			        Chart item=Sys_OH2_CPUGraph period=W refresh=30000 visibility=[Sys_OH2_CPUGraphPeriod==2]

//edit: @pmpkk was faster :slight_smile:

Hi Patrick, what a great job. Thanks for sharing!
I have a question : what about the transparent background for the graphs? or how can you manage to have the same background color of the ?