Matrix Theme for HABPanel

Andrew_Pawelski · July 8, 2017, 11:23am

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 · July 8, 2017, 12:06pm

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

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

pmpkk · July 8, 2017, 12:08pm

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 · July 8, 2017, 12:08pm

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 · July 8, 2017, 2:57pm

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 · July 9, 2017, 8:33pm

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 · July 11, 2017, 11:42pm

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 · July 12, 2017, 3:43am

Cool!

pmpkk · July 12, 2017, 11:07am

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 · July 12, 2017, 11:21am

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 · July 12, 2017, 12:00pm

@pmpkk

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

pmpkk · July 12, 2017, 12:11pm

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

gravidigit · July 12, 2017, 12:22pm

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

Michael_Stjerna · July 12, 2017, 3:34pm

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 · July 13, 2017, 3:38am

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

Pulli_Amarnath_Reddy · July 13, 2017, 9:15am

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 · July 13, 2017, 7:42pm

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

pahansen · July 13, 2017, 7:56pm

/static/example.css is the openHAB reference for the folder /html/example.css

Essentially they’re linking to the same directory. Your custom stylesheet will be located in /html but referenced in OH as /static.

The additional stylesheet box in habpanel is the right place to reference your custom css sheet.

s.simma · July 13, 2017, 7:59pm

Hi,
The name “static” is an alias for the path to the html folder (wherever it is)
e.g. if your css file name is “myTheme.css”, copy this file into your “…/html” folder.
In the additional styleshet fild enter “/static/myTheme.css” .

I hope this helps you.

vlad_aus · July 14, 2017, 12:20am

Looks Amazing !