Matrix Theme for HABPanel

Hola que tal?.

Despues de mucho tiempo y ahora con mas tiempo para poder jugar con esto en mi nueva casa.

Les solicito información de como puedo cambiar los colores de los iconos SVG. para poder seguir avanzando.

Gracias de antemano.

Saludos

Hello everybody,

Here are a few updates from my dashboard. Thanks again to Patrick for the perfect template

Weather, Calendar, Astro, Home-Temp


Multimedia

Living Room

Kitchen

Bedroom and bathroom with Popups for Air Cleaner and Heater



Hall and cellar

Vaccum Cleaner with Popup for Mode and Fan-Options


Flowers with Graph-Gallery

System-Info

Network-Info with Popup for WLAN-Devices

Energy-Info with Popup

20 Likes

Hello Nognog,

fantastic config, would you mind share those, I would love to adapt them to my home! :wink:

I’ve sent u a PM :slight_smile:

Hey, I would like to have the config, too. Can you please post it here or send me via pm?

I have temperature as UoM (QuantityType Temperature). The ‘… | Number:1’ formatting doesn’t work. How should that be stated for these item types?

Can you explain this for a svg / css noob… what did you change, so the icons dont display that fat? I cant get them as thin as in your screens…

thx for help!
Mark

just delete the stroke-width attribute from the svg you want to include. it is handled globally when you use the matrix theme.
delete the stroke attribute as well as you want the color to be set globally as well.

ok great, will give that a try!
thx

Hi FredRoot!
I’m in trouble starting a new custom template…
I need a 240x200pixel template for an older device…

I have your same 3 questions…

May you please help me ?
Thanks,
Alex

Hi,
Thanks i have purchased already fontawsome and i cannot use them :confused:
Could you post a simple procedure please ?

Craig,

I am trying to use an iframe like you, as I can not continue to use the direct link rendered image on a Rpi4. I can, however, not get the the iframe to load - it says that “IP of my Pi” refused the connection. Did you do something special to make this work?
Cheers and thanks:-)

<div class="graph">
			<iframe src="http://192.168.1.9:3000/d-solo/GQ_FyRRRz/windspeed?orgId=1&from=1571993567181&to=1572079967181&panelId=2" width="450" height="200" frameborder="0"></iframe>
			<div class="legend">Last 24 hours</div>
    </div>

Skærmbillede 2019-10-26 kl. 11.04.09

Hi i have managed to install squid icon but it doesnt appear in the select of the widget conf i can only choose standard icon from openhab .
Do you know how to fix that ?

1 Like

@sapster77 sorry for the delayed reply…
I don’t recall doing anything out of the ordinary to get the graphing to load as an iframe. I’m running a Debian VM under ESXI for my openHAB setup though, and not an RPi. Since I posted that the battery in my Pixel C which I was using for editing and setting up the Matrix-themed Habpanel has since stopped holding a useable charge and I retired it. In my haste to replace it along with breaking my openHAB install (multiple times) I lost my HABPanel setup and have not rebuilt it.
If I think of anything I may have done at the time I’ll be sure to let you know.

Sorry I could not be of any help…

Craig

Hi!
Thanks a lot for your reply, I’ll keep searching:-)

Hi Christopher

Your Template is very nice.
How did you made the menu on the top?
BR
Miro

Hi all

Can somebody explain me how to set-up the menu_page working?
Thank you for your help

Hello,
I am fighting to place two embed graphs next to each other centralized and can not make it.
I wish they could be responsive. In case of scale they will change position - go down.
Using original matrix-theme.css

Visualization:

Widget:

<div class="section">
	<div class="sectionIconContainer">
		<div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#graph"></use></svg></div>
	</div>
	
	<div class="title">Graphs</div>
		<div class="graph">
			<iframe src="http://192.168.1.114:3000/d-solo/Xr707_gRk/raspberry-pi?orgId=1&refresh=1m&from=1574542079156&to=1575146879156&panelId=2" width="500" height="250" frameborder="0"></iframe> 
		</div>
    <div class="graph">
			<iframe src="http://192.168.1.114:3000/d-solo/Xr707_gRk/raspberry-pi?orgId=1&refresh=1m&from=1574542079156&to=1575146879156&panelId=3" width="500" height="250" frameborder="0"></iframe> 
		</div>
</div>

I appreciate your support!

Hi,
index.html of grafana you can find here (based on RP3 and openhabian):

sudo nano /usr/share/grafana/public/views/index.html

Unfortunately I am not able to get the effect. :frowning:
Anybody succeeded?

Hi, is it possible to get the widgets? It’s awesome.

Kind regards
Timo

Hi,

Off - Icon isn’t working on my HABPanel
ON does work, so matrixicons.svg is available.