Matrix Theme for HABPanel

Tags: #<Tag:0x00007f0e908459b8> #<Tag:0x00007f0e908457b0> #<Tag:0x00007f0e90845198>

(Minh Nguyen) #404

Hi, this tutorial is great. I learnt a lot just by following this. However here is my first question.
I followed the instruction to include a Grafana graph in a Home widget for my DemoPanel. However, the graph is not automatically updated every-time I reload the page. It always shows the data between a fixed period of time. I realized that it is because the direct link rendered image contained a fixed time range.
Is there a method to overcome this? I mean get the graph to show the data from the exact previous 24 hours? Thanks.

(Sebastian) #405

You have to amend the link to your grafana installation. It needs to contain relative time values. Something like this.


(Andrew Pawelski) #406

Has anyone worked out how to get a number of lights that are on showing in this theme? I can see the matrix theme by @pmpkk shows lights that are ON in the group but I am looking for something that will do dimmers AND ON/OFF lights

(Minh Nguyen) #407

Thanks, I tried that, it worked. Also, when i removed both start=… end=…, it also worked quite well. I suppose the default values for Start is ‘now-24h’ and for end is ‘now’.

(Thomas) #408

How du you control the Buttons ?

(Daniel N.) #409

Unfortunately, my dynamic icon is not displayed. I have the following code:

    <div class="widget">
      <div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="{{'/static/matrix-theme/squidink.svg#' + itemValue('SeasonName')}}"></use></svg></div>
			<div class="name">Aktuelle Jahreszeit:</div>
			<div class="valueGroup"><div class="value">{{itemValue('SeasonName')}}</div></div>			


The icon file is in the correct path and the states are “SPRING, SUMMER, WINTER, AUTUMN” are also set. I have emptied the cache from chrome too, unfortunately without success

what am I doing wrong?

(Thomas) #412

i have a question about the Temp.
My Code looks like

<div class="bigDash">
	<div class="description">Temperature</div>
   <div class="top">
		<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
		<div class="value">
			<div class="main">{{itemValue('KChe_Temperatur') | number:2}}</div>
			<div class="sub"></div>

But, the | number:2 donst work. I dont see anythink.
If i use without the | number:2 the number is to big.


(Kris K) #415

hi all ive managed to get the graphs visible for the system info, is there a way I can move the graph to one side? its cut off in the frame on the far right.

Does anyone also know the RGB values used for the Grafana graphs?

(Vincent Regaud) #416

What do you mean?
You can change some colours in Grafana but the options are limited unfortunately.

(Kris K) #417

Well, the new Grafana has a custom field with a huge color picker , so the options are limitless.

Im trying to work out what patrick used for his theme . I looked in the CSS file but its not really clear to me what i’d use.

(Vincent Regaud) #418

Try them out in:

(Kris K) #419

Yes, but trying to find Patricks one :smiley: as seen here:

(Kris K) #420

Worked it out :slight_smile:
26bf75 is the hex code you need if anyone wants to change the series override colors in grafana!

(Kris K) #422


You’d mentioned you got the Light Bulb to glow.

Did you have a different icon? Can you show me how this works as I’d like to use the same solution. Thankyou!

(Kris K) #423

@tailor & @Michael_Stjerna was this solved?

(wolf_from_the_north) #424

nobody ?
4 months later still same result, only running openhab 2.3 now.
Anyone running this theme on a synology or other device then a raspberry pi ?

(Vincent Regaud) #425

Maybe if you ask your question again it will be answered, it kind of got lost in time.
I don’t code html nor css. Can get my head around it or I would help

(wolf_from_the_north) #426

Well when i follow the tutorial i gwt so far by importin the json files used and adapting them so it uses my items.
But the css is not beeing applied alltough its configured correctly, text becomes blue and the items are always arranged vertical, not as in the screenshot on post one. I see many people here successfully using it and i am still failing. I would suspect that when using the standard json files without special modification ( and correct settings : total width and no container wrap) it would allready appear almost looking like the screenshot. If you take a look at my previous screens you can clearly see it totally not in line and showing blue values instead of green ones.

(Patrick) #427

You have to set the css file in the settings of habpanel. Have you done that?

(wolf_from_the_north) #428

Yes as described in the manual on github.
My openhab static location is set.