Matrix Theme for HABPanel

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 ! :smiley:

thanks

1 Like

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

@Dominic_Bialas

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

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…

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

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

9 Likes

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

Hi everyone,

I finally got around to upload the latest version to github!

Here are the changes:

  • Added a “Climate Control” section for thermostat items in the ground floor widget

  • Added “Color Light” control for lights (found in the ground floor widget):

  • Added a “Power Consumption” dashboard (found in the home widget):

  • Added my own icon as “Apple Touch Icon” for saving HabPanel to the iPhone/iPad home screen:

Enjoy :slight_smile:

5 Likes

@pmpkk

Hey Patrick,

this sounds great. just visited your GitHub account and noticed that the json files still are 12 days old and some files are from today.

Did you miss to upload the json files? Or misunderstand I something?

Hi Patrick, this theme is amazing. Thank you for all your hard work on it!

I’m really new to the software side of things, so setting up OpenHAB hasn’t been easy as I’m learning Linux and everything from scratch. But I’ve managed to install your Matrix theme and gotten to the point of adding widgets. The widget displays when ‘run’ but perhaps I’m missing something that isn’t allowing me to edit the widget?

This is what I see:

Other widgets if I make them myself, I see:

Ah, it’s 3am. I’m gonna call it a night and try again tomorrow!

Oops, I missed those two files. I uploaded them now! Thanks for pointing it out!

Hi @canuckcam, the widgets are “templates” (as in you need to make it your own and edit the details) but delivered as custom widgets (json).

You have two options to edit them:

  1. Click on the cogwheel in the custom widget management section, then click on the widget and edit the markup there.

  2. Create a new “template” widget and copy the markup from the custom widget.

In the markup, you need to look at the item names, group names, labels, etc. to customise it to your needs.

Unfortunately, I didn’t have the time yet to add configuration options as suggested by some here. When I get some time, I’ll try to do that, but for now they are just starting points that you need to make your own by editing the markup.

You can change the color of the graph in grafana by adding a series override. By default, you only get a few colors. In order to add you own, you need to export the dashboard as JSON, add your color manually into the JSON and then import again.

1 Like

Ahh! Got it. Thanks for the lightning fast reply!

Is there a text editor you’d recommend? The files that I’ve downloaded (and individually opened on GitHub) have the entire code in one line making for a long jumble. Just wanted to ask before I try to manually separate everything out to make it easier for me to edit.

Hi Patrick,
thanks for posting this. It really looks nice and the benefit of it being responsive is what makes it usable on all my devices at home! I no longer have to create different dashboards for mobile and tablet.
I have added menu like buttons to the section to be able to navigate between dashboards and also created a fritzbox call overview:


(And I changed the foreground color to improve WAF)
Regards,
Volker

Cool! :slight_smile:

Re the menu items – I navigate using the normal menu on the left (swipe dashboard to the left or touch hamburger icon). Does this not work for you?

What’s WAF? :slight_smile:

Menu navigation works, but this is faster and more obvious.
WAF=Women Acceptance Factor

@pmpkk Patrick I have changed a few things in your CSS to my own flavour but it seems I have lost the built in lables (or they are the same colour as the background) - any idea what element they would be?

1 Like

Looks like you changed the theme to “light” from “dark”, so you will need to change this override:

–widget-text-color: #a4a4a4;

in matrix-theme.css to black or something dark (or remove it alltogether).

Hope this helps!

@pmpkk thanks for giving this useful tutorial and for sharing the custom theme example code.
Can you please share how the items: rule_livingroom_blindsUp_TimeStamp, and rule_livingroom_blindsUp_Counter are defined in the .items file? (as well as how they are called in any other files, e.g. in the .sitemap file)
Thanks