From the doc of the SystemInfo Binding:
Load = Load in percents for the last 1 minute
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!
Thanks!
I couldn’t get the “transparent” option to work in the PNG output, it keeps rendering the background with the background color of the UI.
So I added a little “hack” to grafana, introducing a custom theme option:
Edit the “index.html” file in grafana and add this line under the “title” tag:
<link rel="stylesheet" href="http://openhabianpi.local:8080/static/mygrafana.css" type="text/css">
Make sure you restart the Grafana service so the new HTML file is loaded!
Then, you can add a mygrafana.css file into your openhab html folder:
@charset "UTF-8";
.panel-container {
background-color: #19201c !important;
border: 0px solid #292929 !important;
}
This way grafana’s background of the charts matches my background and when the direct link image is rendered it looks perfect.
Wow. This is some seriously cool work. Thanks so much for sharing. I have most of it figured out and got those icons as they look great. I am having trouble getting the CSS applied to the svg icons.
I figured out which icons I need and changed their ids accordingly. Then I ran them through spritesh to merge them into button.svg. They all appear, but the colours are off…as in not being overridden by the CSS.
I gave it a good try, but can’t get this part figured out. Help would be appreciated
From theme.css
}
.section .icon.off svg {
fill: #565f58;
}
.section .icon.on svg {
fill: #26bf75;
}
(I played around with stroke to get the grey (the icons were originally showing up as black) since I couldn’t override and I also got rid of fill=“none”, but no dice. I also tried referencing the css from within the svg, but that didn’t help. It is weird…the circle of the thermometer is green, suggesting that the css is working, but the rest is grey.
<?xml-stylesheet type="text/css" href="theme.css" ?>
<g id="thermometer1">
<g>
<line stroke="#565f58" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" x1="24" y1="24" x2="24" y2="35"/>
<path fill="none" stroke="#565f58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M28,31.1V7c0-2.2-1.8-4-4-4h0c-2.2,0-4,1.8-4,4v24.1c-2.7,1.6-4.4,4.7-3.9,8.2c0.5,3.5,3.5,6.3,7,6.7c4.8,0.5,8.9-3.2,8.9-7.9
C32,35,30.4,32.5,28,31.1z"/>
<circle cx="24" cy="38" r="5"/>
<line stroke="#565f58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33" y1="6" x2="35" y2="6"/>
<line stroke="#565f58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33" y1="11" x2="35" y2="11"/>
<line stroke="#565f58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33" y1="16" x2="35" y2="16"/>
<line stroke="#565f58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33" y1="21" x2="35" y2="21"/>
</g>
And from the dashboard
<div class="section">
<div class="bigDash">
<div class="description">Outdoor</div>
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/button.svg#thermometer1"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Outdoor_Temp_Back') | number:1}}</div>
<div class="sub">°C</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/button.svg#thermometer1"></use></svg></div>
<div class="value">feels like {{itemValue('xxxx') | number:0}} °C</div>
Cool!
Hi Herbie,
The original SVG files from squidink are styled slightly different. They use stroke instead of fill. Unfortunately, they have a fill and stroke attribute set, which can’t be overwritten using CSS, so you’ll have to remove it from the SVG files, such as:
<g id="cd">
<circle stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" cx="24" cy="24" r="21.5"/>
<path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M18.0510807,29.9489193
c-3.2854986-3.2854977-3.2854986-8.6123409,0-11.8978386"/>
<path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M15.7376108,32.2623901
c-4.5631914-4.5631924-4.5631914-11.9615879,0-16.5247803"/>
<path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M13.4241419,34.5758591
c-5.8408847-5.8408871-5.8408847-15.3108311,0-21.1517181"/>
<path stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M11.110673,36.889328
c-7.1185784-7.1185799-7.1185784-18.6600761,0-25.778656"/>
<circle stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" cx="24" cy="24" r="5"/>
</g>
I updated the theme.css file to work with the original SVG files also (using stroke). Redownload it and it should work
I added a TV dashboard and a Music dashboard as well:
The TV dashboard is based on ConnectSDK for LG TV
The Music dashboard is based on a custom integration into Spotify’s Web Connect API.
It’s just a python script calling the web connect API.
Ok nice, is it published on github or so on? thanks
Hi
Can you please share/explain the script for the Spotify. I have been looking for some solution to get the integration as you have on the native app where you can select output device and handle the volume.
Many thanks
//Michael Stjerna
Much appreciated. Removed fill and stroke and updated CSS took care of the rest. Thanks again!!
It’s awesome to see custom theme. How I could access it custom theme. I did that that theme.css file and tvAppIcons.svg files placed into html folder. But I am unable to access it custom theme…in my habpanel
Hello pmpkk,
I’m a total noob with HabPanel and I like your theme. Thank you for sharing it.
In your first post you stated:
I don’t have a /static folder. Can someone please provide the full path.
Regards