Matrix Theme for HABPanel

pmpkk · July 23, 2017, 2:38pm

How about something like this:

coasting · July 23, 2017, 2:58pm

Looks very good
Are the buttons responsive, i.e. setting and showing the set temperature? I guess the left number shall represent the actual temp. Further optional settings would be a button to toggle the auto-mode of the thermostat and a label showing the window state (open/closed), but this seems to be an easy part I could do myself.

Very nice! Can you share the code?

Dominic_Bialas · July 23, 2017, 5:38pm

so, tried it with the local link. result is:

HTTP ERROR: 500

Problem accessing /static/matrix-theme/original-svgs/Weather_dark-moon.svg. Reason:

/etc/openhab2/html/matrix-theme/original-svgs/Weather_dark-moon.svg (Permission denied)

Powered by Jetty://

at the moment the permissions are:

-rwx------ 1 openhabian openhabian    801 Jan  7  2015 youtube-with-circle.svg

which permissions are needed?

pmpkk · July 23, 2017, 5:43pm

You should set the read permission to all!

Dominic_Bialas · July 23, 2017, 6:06pm

thank you, Patrick.

after a sudo chmod -R a+r /etc/openhab2/html/matrix-theme/original-svgs

now i get the following result:

Done in 120.657310963 seconds 96 symbols created

pmpkk · July 23, 2017, 6:46pm

Victory!

Dominic_Bialas · July 25, 2017, 3:20am

Hello Patrick,
after solving the first problem - the next appears

I´m trying to use the grafana graphs, but can´t get them work.

The adress is:
http://192.168.178.115:3000/dashboard/db/outdoor_temp?orgId=1&from=1500930423933&to=1500952023934&theme=dark

and this looks like this:

but after using this adress in the theme, it looks like this (i typed the url in for the outdoor graph only):

could you help me one again?

edit:

the webconsole says the following:
GET
http://192.168.178.115:3000/dashboard/db/outdoor_temp [HTTP/1.1 200 OK 71ms]

pmpkk · July 25, 2017, 7:42am

A couple of things:

First – There are different ways to get your grafana graphs into habpanel. One is to embedd the dashboard. I don’t like that option because it’s too crowded and slow. Instead I output a barebones image (in the share menu of grafana there is a “output as direct image” (or similar). It looks like you are using your embedd-link as the image href. That won’t work. Either you embed (iframe) or you use an img-tag with the image link.

In my case, those image links look like this:

http://openhabianpi.local:3000/render/dashboard-solo/db/mini-graphs?orgId=1&panelId=1&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00

Here’s more info on how to output the “image”:

http://docs.grafana.org/reference/sharing/#direct-link-rendered-image

Second – Grafana needs to authenticate the user. I wasn’t able to make it work without authentication (even setting anonymous access to true). So, on every device that you access your habpanel, you have to first log in to grafana (looks like that’s not your problem though here).

Hope this helps!

coasting · July 25, 2017, 9:46am

Hey Patrick

Did you meanwhile finish the thermostat theme and can you upload it to your github folder? Thx!

herbus · July 25, 2017, 10:16pm

Do the habpanel grafana graphs refresh as they are updated or only when you switch dashboards? I was playing around quite a bit and thought they were refreshing, but now that I have just left the panel alone they seem to be static until I switch/reload the dashboard. Using a Safari add to home screen link on an iPad.

herbus · July 26, 2017, 2:50am

Not sure about the refresh. Just made a rule to have it switch to another dashboard, using ‘switch dashboard with item value’, and then immediately back to the main dashboard 15 minutes after every outside temperature update. Not too eloquent, but it seems to work for now.

andresfischer · July 26, 2017, 3:33am

Hi Patrick. Thank you for sharing all of this knowledge!
I just need some help to get the icon-thing done… This is how it looks on my hubPanel. I couldn’t follow your guide to get it done.

Also the script is working great, but it doesn’t get automatically updated. I just need to press UPDATE to get the current song artist and the current album cover.

(sorry about my english)

Dominic_Bialas · July 27, 2017, 4:19am

@pmpkk and @herbus

Could you tell me where the index.html is located?

romainalca · July 27, 2017, 2:51pm

Excellent work !!! I love this panel.
I integrated on my different floor and it’s perfect.

I have one question : Is it possible to integrate a pilot wire (fil pilote in french) for electronic radiator with this specific style ?
It’s my final request !

thanks

romainalca · July 27, 2017, 2:53pm

OWWWW !!!
That’s what i am looking for ! Can you give your json about this please ???

herbus · July 27, 2017, 3:01pm

@Dominic_Bialas

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

Dominic_Bialas · July 28, 2017, 4:05am

Hey guys,

just another grafana related question. Is ist possible to hack the line color also?
In my case the green of the matrix theme is different from the standard green of the grafana dark theme. Could this even be included in the mygrafana.css ?

WOuld be pleased to hear from you…

Dibbler42 · July 28, 2017, 9:59am

Hi There,

really great stuff. Having 2 weeks of holidays left i will strt today to implement the matrix theme and i try to use the knx-uf-iconset.

Has anybody thought about a floor map that could be included at each level? Something like JSFloorPlan with additional icons …

Thomas

kubawolanin · July 28, 2017, 10:16am

I’m working on a openHAB/HABPanel floorplan solution based on this demo
Lots of work ahead of me but I’ll share my progress when it’s time.

Simson · July 28, 2017, 11:06am

The demo looks great and nice to hear, that someone ia working on that topic.- Looking forward to see your first examples.