Matrix Theme for HABPanel

Tutorials & Examples HABPanel Examples
, ,
22

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.

9 Likes
23

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

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>
1 Like
24

Cool!

25

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

26

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.

image.png2196×1130 202 KB

2 Likes
27

@pmpkk

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

28

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

29

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

30

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

31

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

32

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

33

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:

  1. Where do you reference the theme in HabPanel?
  2. Are you referring to the “/etc/openhab2/html” folder?
  3. 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

1 Like
34

/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.

35

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.

1 Like
36

Looks Amazing ! :slight_smile:

37

This looks amazing.
Can you provide the file structure for the related files?

As I understand, the theme.css and the tvAppIcons.svg go into /etc/openhab2/html

/etc/openhab2/html/
…
├── theme.css
└── tvAppIcons.svg

Which file stores the dashboard html code?
@pahansen mentioned here that the Roboto-Thin.ttf, Roboto-Regular.ttf, Roboto-Light.ttf files are also needed. Where should these files be placed?

Are any other files needed to reproduce this awesome layout on my side?
Thanks,
Avner

38

Thanks for the feedback! Give me a few hours and I’ll add step by step instructions to the original post!

2 Likes
39

Very good work. I’m starting with your css my dashboard and a custom font (ttf, not svg). Thank you for sharing. Can you post your car dashboard. I have a leaf and it san be a good start.

40

Re Spotify:

I cleaned up my code and added it here with some instructions:

41

Great! Many thanks @pmpkk