Custom Theme in HabPanel 2.1 Example

skin
theme
stylesheet
Tags: #<Tag:0x00007f6ce57657d8> #<Tag:0x00007f6ce5765620> #<Tag:0x00007f6ce5765490>

(Patrick) #1

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

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:

The results are:

It also looks good on mobile:


Examples of HABPanel Solutions
openHAB integration to Spotify Web Connect API (player)
Habpanel widgets on Tablets/Smartphone
Fritzbox call overview
Restore Habpanel settings from files
Using HABpanel on iPhone/iPad
HAI OmniLink Bindings HELP
How to make dashboard responsive
Examples of HABPanel Solutions
(Tom Araya) #2

Wow, that looks amazing! Thanks for sharing …


(Ben Jones) #3

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?


(Stefan) #4

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


(Paul Hansen) #5

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.


(Yannick Schaus) #6

@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:


(Angelos) #7

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


(Patrick) #8

No extra code injected. I just followed the instructions here: https://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data


(Patrick) #9

What would you prefer? :slight_smile:


(Patrick) #10

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.


(Stefan) #11

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: https://en.wikipedia.org/wiki/Load_(computing)


(Patrick) #12

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?


(Patrick) #13

From the doc of the SystemInfo Binding:

Load = Load in percents for the last 1 minute


(Stefan) #14

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:


(AV Home Auto) #16

amazing!
Thanks for sharing!


(Andrew Pawelski) #17

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


(Patrick) #18

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

http://docs.openhab.org/addons/bindings/systeminfo/readme.html


(Patrick) #19

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:


( ) #20

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 :slight_smile:


(AV Home Auto) #21

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!