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 http://thesquid.ink/line-icons/ 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 % 
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 
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: https://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data
What would you prefer?
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.
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
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 
amazing!
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?
I use the systeminfo binding. You can find the items in the doc here:
http://docs.openhab.org/addons/bindings/systeminfo/readme.html
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:
You can do this with the systeminfo binding:
*.things
Thing systeminfo:computer:openhab2 "openHAB2 Server" @ "Server" [interval_high=60, interval_medium=60]
*.items
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" }
*.sitemap
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
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 ?
Cheers!