pmpkk
(Patrick)
July 5, 2017, 7:42pm
1
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:
92 Likes
Budo
(Tom)
July 5, 2017, 8:27pm
2
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?
spy0r
(Stefan)
July 6, 2017, 6:06am
4
looks great, the only thing that bothers me, is that you display your system load in %
pahansen
(Paul Hansen)
July 6, 2017, 9:16am
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.
ysc
(Yannick Schaus)
July 6, 2017, 10:44am
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
2 Likes
Dim
(Angelos)
July 6, 2017, 10:53am
7
the floor dashboard with the lights and shutters is beautiful ! I love the simplicity in the design !
pmpkk
(Patrick)
July 6, 2017, 7:27pm
8
pmpkk
(Patrick)
July 6, 2017, 7:29pm
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.
1 Like
spy0r
(Stefan)
July 6, 2017, 7:41pm
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
See also: https://en.wikipedia.org/wiki/Load_(computing)
1 Like
pmpkk
(Patrick)
July 6, 2017, 7:56pm
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?
pmpkk
(Patrick)
July 6, 2017, 7:59pm
13
From the doc of the SystemInfo Binding:
Load = Load in percents for the last 1 minute
spy0r
(Stefan)
July 6, 2017, 8:08pm
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
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?
1 Like
pmpkk
(Patrick)
July 8, 2017, 12:06pm
18
I use the systeminfo binding. You can find the items in the doc here:
http://docs.openhab.org/addons/bindings/systeminfo/readme.html
pmpkk
(Patrick)
July 8, 2017, 12:08pm
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:
Store your openHAB item states in an InfluxDB time-series datastore and create highly customizable diagrams with Grafana . These diagrams can in return be included in your sitemap as images.
[image]
Following this guide, you will install InfluxDB and Grafana, make openHAB store data in an InfluxDB database, make Grafana fetch data from the InfluxDB database and draw diagrams. Finally you can include these diagrams in your openHAB sitemap.
Table of Content
Starting Point
InfluxDB Installation…
1 Like
Simson
( )
July 8, 2017, 12:08pm
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
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!