Matrix Theme for HABPanel

pmpkk · 2017-07-06 19:59:01 UTC

From the doc of the SystemInfo Binding:

Load = Load in percents for the last 1 minute

spy0r · 2017-07-06 20:08:17 UTC

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

AV_HomeAuto · 2017-07-07 23:29:47 UTC

amazing!
Thanks for sharing!

Andrew_Pawelski · 2017-07-08 11:23:51 UTC

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

pmpkk · 2017-07-08 12:06:35 UTC

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

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

pmpkk · 2017-07-08 12:08:17 UTC

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:

Simson · 2017-07-08 12:08:54 UTC

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

AV_HomeAuto · 2017-07-08 14:57:11 UTC

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!

pmpkk · 2017-07-09 20:33:51 UTC

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.

herbus · 2017-07-11 23:42:32 UTC

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">&#176C</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}} &#176C</div>

AV_HomeAuto · 2017-07-12 03:43:40 UTC

Cool!

pmpkk · 2017-07-12 11:07:11 UTC

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

pmpkk · 2017-07-12 11:21:53 UTC

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.

gravidigit · 2017-07-12 12:00:38 UTC

@pmpkk

is the spotify integration a binding or a widget template? thanks

pmpkk · 2017-07-12 12:11:27 UTC

It’s just a python script calling the web connect API.

gravidigit · 2017-07-12 12:22:10 UTC

Ok nice, is it published on github or so on? thanks

Michael_Stjerna · 2017-07-12 15:34:57 UTC

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

herbus · 2017-07-13 03:38:14 UTC

Much appreciated. Removed fill and stroke and updated CSS took care of the rest. Thanks again!!

Pulli_Amarnath_Reddy · 2017-07-13 09:15:45 UTC

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

FredRoot · 2017-07-13 19:42:15 UTC

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:

Where do you reference the theme in HabPanel?
Are you referring to the “/etc/openhab2/html” folder?
I have seen that HabPanel Settings has a option to add “additional stylesheet” but the path should be “/static/xx.css”.

I don’t have a /static folder. Can someone please provide the full path.

Regards