Matrix Theme for HABPanel

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 !

Avner · July 14, 2017, 6:51am

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

pmpkk · July 14, 2017, 8:20am

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

furax54 · July 14, 2017, 1:47pm

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.

pmpkk · July 14, 2017, 7:24pm

Re Spotify:

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

Budo · July 14, 2017, 8:54pm

Great! Many thanks @pmpkk

gravidigit · July 14, 2017, 10:06pm

@pmpkk Nice work! Thanks for sharing!

coasting · July 15, 2017, 6:17am

Fantastic template!

However struggeling to get the SVG icons displayed. All files are at the right place… Also tried the tvAppIcons.svg file you provided, but the icons just arent painted. What am I doing wrong? Any hint? Any chance that you upload your complete template?

Confectrician · July 15, 2017, 10:40pm

Did you purchase the icons that are mentioned in first post?

Avner · July 16, 2017, 2:02am

I want to manage the dashboard html directly and not via the habpanel web interface.
Where is the location of the dashboard html files?
Can you provide a file structure example (as requested here) that could then be backed up and restore?
Thanks,
Avner

Confectrician · July 16, 2017, 9:58am

I know that you purchased them.
This post was a question, to @coasting, who had problems with the icons.

pmpkk · July 16, 2017, 1:36pm

I realized after I hit send

FredRoot · July 16, 2017, 2:51pm

Hi All,

I have successfully added the themes.css to my HabPanel. pmpkk, thanks again for sharing.

I know pmpkk has bought the custom icons, but I’m trying to add my own custom icons and I cannot figure out what this statement in the original post mean:

Is “svg viewBox = xxxx” is the size of the icon?
What does “/static/button.svg#thermometer” mean? Is the icon name button.svg? if so what does #thermometer mean?
How will the folder structure for this icon look like?
If I can get my custom icons to display, can I also use the smarthome-set (widget-icon iconset=“‘smarthome-set’” icon=“‘temperature’” size=“60”) for some of the other icons?

pmpkk · July 16, 2017, 3:02pm

Hey,

I’m putting together a tutorial on how to add your own icons to the theme, stay tuned.

In the meantime:

In a single svg file you can have many symbols (or icons). They are accessed via an id. If you open the svg file (for example the tvAppIcons file) you will see the different symbols identified by id. Those ids are the ones after the hashtag.

The view box attribute is used to specify the size of the drawing board in respect to the paths/objects. When displayed in HTML they can be sized by CSS to any size.

coasting · July 16, 2017, 4:13pm

I meanwhile managed it. The SVG file(s) need to have a specific structure, as coloring of the SVG icons is done in theme.css by means of STROKE or FILL parameters. Here below is a basic sprite SVG file using some SVG icons from the Smart House Icon Set (Roman Malashkov https://dribbble.com/shots/2084609-Smart-House-Icon-Set-Free). You can edit the SVG sprites with a editor like Notepad++.

Hope same is of help to others facing the same problem.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<symbol id="drop">
	<g>
		<path d="M4,20 C4,13.7372206 9.31149107,10.9606699 15.0029824,1.68773079 C15.5,1 16.5,1 17.0240493,1.73848329 C22.7239959,11.0422428 28,13.7458429 28,20 C28,26.627417 22.627417,32 16,32 C9.372583,32 4,26.627417 4,20 Z M14.9662304,5.01303063 C12.6849824,7.94803148 7.55258291,15.1489689 7.43611882,15.3380026 C6.44520133,16.9463678 6,18.343598 6,20 C6,25.5228475 10.4771525,30 16,30 C21.5228475,30 26,25.5228475 26,20 C26,18.34381 25.5574243,16.9556938 24.5697394,15.3573542 C24.4844847,15.2193893 19.3264043,7.97081698 17.0502563,5.01835622 C16.4935872,4.29628389 15.5249676,4.2941722 14.9662304,5.01303063 Z M16,27.5447247 C16,28.0447247 15.2619671,28.0225103 14.9257293,27.9794225 C11.3214673,27.5175477 8.46745417,24.6572016 8.01523409,21.0499283 C7.98381871,20.7993338 7.95268975,20 8.45268973,20 C8.95268972,20 9.03600925,21.1280442 9.03600925,21.1280442 C9.50185782,24.1265527 11.8708617,26.4955566 14.8693702,26.9614051 C14.8693702,26.9614051 16,27.0447247 16,27.5447247z">
		</path>
	</g>
</symbol>
<symbol id="power">
	<g>
		<path d="M16,32 C24.836556,32 32,24.836556 32,16 C32,7.163444 24.836556,0 16,0 C7.163444,0 0,7.163444 0,16 C0,24.836556 7.163444,32 16,32 L16,32 Z M16,30 C8.2680135,30 2,23.7319865 2,16 C2,8.2680135 8.2680135,2 16,2 C23.7319865,2 30,8.2680135 30,16 C30,23.7319865 23.7319865,30 16,30 L16,30 Z M12.2575393,17.7112593 L12.1868707,17.7112593 C11.0779698,17.7112593 10.6478221,16.9467914 11.2212184,16.0037726 L16.4805582,7.35415962 C17.67876,5.38357359 18.0624739,5.55948915 17.3376772,7.746963 L15.7252918,12.6132252 C15.3772095,13.6637556 15.9942825,14.5048291 17.0992511,14.5048291 L20.1977772,14.5048291 L20.1846183,14.5177121 L20.2552868,14.5177121 C21.3641878,14.5177121 21.7943355,15.2821799 21.2209392,16.2251988 L16.1844844,24.5082506 C14.864477,26.6791606 14.4411534,26.4839632 15.241777,24.0676402 L16.7168658,19.6157462 C17.0649481,18.5652158 16.447875,17.7241422 15.3429064,17.7241422 L12.2443804,17.7241422 L12.2575393,17.7112593 L12.2575393,17.7112593z">
		</path>
	</g>
</symbol>
<symbol id="sun">
    <g>
		<path d="M10.7878017,28.5833599 L10.7878017,28.5833599 C9.97956177,28.2485759 9.4161758,28.2142601 8.29387705,28.3294851 C7.147197,28.4472132 6.68503398,28.4437606 5.9948931,28.1848231 C5.52665568,28.0091428 5.09503731,27.7224543 4.6862915,27.3137085 C4.27754569,26.9049627 3.99085724,26.4733443 3.81517687,26.0051069 C3.55623942,25.314966 3.55278681,24.852803 3.67051494,23.706123 C3.78573987,22.5838242 3.75142407,22.0204382 3.41664014,21.2121983 C3.15165448,20.5724663 2.80939234,20.1202916 2.29849594,19.6618451 C2.19130602,19.5656595 2.07903528,19.4706346 1.92664559,19.3458637 C1.99434961,19.4012972 1.62189171,19.0978662 1.52833472,19.0196686 C0.480903976,18.1441953 0,17.3440478 0,16 C0,14.6559522 0.480903976,13.8558047 1.52833472,12.9803314 C1.62189171,12.9021338 1.99434961,12.5987028 1.92664559,12.6541363 C2.07903528,12.5293654 2.19130602,12.4343405 2.29849594,12.3381549 C2.80939234,11.8797084 3.15165448,11.4275337 3.41664014,10.7878017 C3.75142407,9.97956177 3.78573987,9.4161758 3.67051494,8.29387705 C3.55278681,7.147197 3.55623942,6.68503398 3.81517687,5.9948931 C3.99085724,5.52665568 4.27754569,5.09503731 4.6862915,4.6862915 C5.09503731,4.27754569 5.52665568,3.99085724 5.9948931,3.81517687 C6.68503398,3.55623942 7.147197,3.55278681 8.29387705,3.67051494 C9.4161758,3.78573987 9.97956177,3.75142407 10.7878017,3.41664014 C11.4275337,3.15165448 11.8797084,2.80939234 12.3381549,2.29849594 C12.4343405,2.19130602 12.5293654,2.07903528 12.6541363,1.92664559 C12.5987028,1.99434961 12.9021338,1.62189171 12.9803314,1.52833472 C13.8558047,0.480903976 14.6559522,0 16,0 C17.3440478,0 18.1441953,0.480903976 19.0196686,1.52833472 C19.0978662,1.62189171 19.4012972,1.99434961 19.3458637,1.92664559 C19.4706346,2.07903528 19.5656595,2.19130602 19.6618451,2.29849594 C20.1202916,2.80939234 20.5724663,3.15165448 21.2121983,3.41664014 C22.0204382,3.75142407 22.5838242,3.78573987 23.706123,3.67051494 C24.852803,3.55278681 25.314966,3.55623942 26.0051069,3.81517687 C26.4733443,3.99085724 26.9049627,4.27754569 27.3137085,4.6862915 C27.7224543,5.09503731 28.0091428,5.52665568 28.1848231,5.9948931 C28.4437606,6.68503398 28.4472132,7.147197 28.3294851,8.29387705 C28.2142601,9.4161758 28.2485759,9.97956177 28.5833599,10.7878017 C28.8483455,11.4275337 29.1906077,11.8797084 29.7015041,12.3381549 C29.808694,12.4343405 29.9209647,12.5293654 30.0733544,12.6541363 C30.0056504,12.5987028 30.3781083,12.9021338 30.4716653,12.9803314 C31.519096,13.8558047 32,14.6559522 32,16 C32,17.3440478 31.519096,18.1441953 30.4716653,19.0196686 C30.3781083,19.0978662 30.0056504,19.4012972 30.0733544,19.3458637 C29.9209647,19.4706346 29.808694,19.5656595 29.7015041,19.6618451 C29.1906077,20.1202916 28.8483455,20.5724663 28.5833599,21.2121983 C28.2485759,22.0204382 28.2142601,22.5838242 28.3294851,23.706123 C28.4472132,24.852803 28.4437606,25.314966 28.1848231,26.0051069 C28.0091428,26.4733443 27.7224543,26.9049627 27.3137085,27.3137085 C26.9049627,27.7224543 26.4733443,28.0091428 26.0051069,28.1848231 C25.314966,28.4437606 24.852803,28.4472132 23.706123,28.3294851 C22.5838242,28.2142601 22.0204382,28.2485759 21.2121983,28.5833599 C20.5724663,28.8483455 20.1202916,29.1906077 19.6618451,29.7015041 C19.5656595,29.808694 19.4706346,29.9209647 19.3458637,30.0733544 C19.4012972,30.0056504 19.0978662,30.3781083 19.0196686,30.4716653 C18.1441953,31.519096 17.3440478,32 16,32 C14.6559522,32 13.8558047,31.519096 12.9803314,30.4716653 C12.9021338,30.3781083 12.5987028,30.0056504 12.6541363,30.0733544 C12.5293654,29.9209647 12.4343405,29.808694 12.3381549,29.7015041 C11.8797084,29.1906077 11.4275337,28.8483455 10.7878017,28.5833599 L10.7878017,28.5833599 Z M11.1704851,27.6594803 C13.8221355,28.7578299 13.5852426,31 16,31 C18.4147574,31 18.1778645,28.7578299 20.8295149,27.6594803 C23.4811653,26.5611308 24.8991104,28.3140931 26.6066017,26.6066017 C28.3140931,24.8991104 26.5611308,23.4811653 27.6594803,20.8295149 C28.7578299,18.1778645 31,18.4147574 31,16 C31,13.5852426 28.7578299,13.8221355 27.6594803,11.1704851 C26.5611308,8.51883469 28.3140931,7.10088964 26.6066017,5.39339828 C24.8991104,3.68590692 23.4811653,5.43886924 20.8295149,4.34051967 C18.1778645,3.2421701 18.4147574,1 16,1 C13.5852426,1 13.8221355,3.2421701 11.1704851,4.34051967 C8.51883469,5.43886924 7.10088964,3.68590692 5.39339828,5.39339828 C3.68590692,7.10088964 5.43886924,8.51883469 4.34051967,11.1704851 C3.2421701,13.8221355 1,13.5852426 1,16 C1,18.4147574 3.2421701,18.1778645 4.34051967,20.8295149 C5.43886924,23.4811653 3.68590692,24.8991104 5.39339828,26.6066017 C7.10088964,28.3140931 8.51883469,26.5611308 11.1704851,27.6594803 L11.1704851,27.6594803 Z M16,26 C10.4771525,26 6,21.5228475 6,16 C6,10.4771525 10.4771525,6 16,6 C21.5228475,6 26,10.4771525 26,16 C26,21.5228475 21.5228475,26 16,26 L16,26 Z M16,24 C20.418278,24 24,20.418278 24,16 C24,11.581722 20.418278,8 16,8 C11.581722,8 8,11.581722 8,16 C8,20.418278 11.581722,24 16,24 L16,24z">
		</path>
    </g>
</symbol>
</svg>

marcel_verpaalen · July 16, 2017, 6:08pm

Hi,
I like also the glowing battery icon you did.
Any hint how that one can be done