Matrix Theme for HABPanel

[joehester36]

I cannot get the spotify python script to run successfully, any suggestions?

[dastrix80 (Kris K)]

You need to install the python module called ‘requests’

[Christopher_Hemmings]

Thought i would share some photos of my setup

This is all on desktop and tablet.
I have a different setup for mobile, the menu bar up top is reduced to a single menu option
The widgets stack.
The alarm keypad in incomplete. still need to link the zones up top with the actual zones open

.

[brucelee114 (Bruce Lee)]

Your dashboard is so awesome. I am super newbie to html/css. If you dont mind, can you please share your dashboard code?

[Benedikt_Weber (Benedikt)]

Hi Christian,

did you ever accomplish the device / playlist dropdown with the new spotify binding? I’m now at the same point and tried a lot of things without success so far.

Many thanks!

[Christopher_Hemmings]

if you’re new. start with the stock matrix theme and play from there. Get your head around how CSS Files work. HTML element tags and how to manipulate them. Check out Bootstrap and angular JS tutorials online too.
Theres no point me giving you my files. as they are custom to my items and will not work on your system.

[Benedikt_Weber (Benedikt)]

Thank you for that, worked great
The background color of the grafana graphs are now the same as the UI.
But I didn’t find a way to hide the grid of the graphs in grafana, as it is the case in your screenshots. Did a lot of research but hiding the grid of a graph seems not to be possible at the moment? How did you achieve that?

Many thanks!

[Kennedys (Fabian)]

Hi Herbie,

I am facing the same problem, I guess. Everything is working fine, except the grafana graphs…They just don’t update in the HABPanel, except when I hint the refresh button from safari-browser. Am I missing anything?
Hope you or someone else can help me.

[Benedikt_Weber (Benedikt)]

In the meantime I’ve found a solution / workaround.
It’s probably not the right way to do it but for me it is working.
I’ve noticed that the selection widget from HabPanel works well for device / playlist selection, so I’ve just copied that in.
I can click on the playlist and device name which opens the overlay to select other items.

Widget Code:

<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div>
		<div class="name">Playlists</div>
 
  <ng-container 
       ng-init="modelPlaylists = {
          item: 'spotifyPlaylists',
          choices_columns: 1,
          choices_source: 'server',
          square: false,
          };
          ">
			 
    <div class="valueGroup"><div class="value"><widget-selection ng-model="modelPlaylists"></widget-selection></div></div>
  </ng-container>
  </div>

Items from the updated spotify binding:
String spotifyPlaylists “Playlists [%s]” {channel=“spotify:player:user1:playlists”}
String spotifyDevices “Active device [%s]” {channel=“spotify:player:user1:devices”}

The design is not ideal but for me it’s sufficient.

[chiefe (hendrik)]

I had the same problem.
I found no solution for the habpanel.

I am using an android tablet to show the habpanel with the app habpanelviewer.
In openhab you can create a rule how often you want to reload the side.
This is also possible in the kioskbrowser, but there you always see a white background during the reload which made me crazy all the time.

[diomar_indelep (diomar nuñez)]

Hello, could someone help me or send me a link explaining how to configure the topics in habpanel I am new to the community and in openhab

[Jonas88 (Jonas)]

Hi!

Did you update it to work with the new Spotify binding?
I don’t mind if it’s only a list of pre-defined playlists.
How did you do it with the Lg-Remote (for example).
A simple selection item that looks good and is mapped would be fine for me.
I am not that skilled with java. Thank you!

[Jonas88 (Jonas)]

It’s all explained in the readme you find on github just follow the link in the first post

[unparagoned]

Mine is based on a modified python script. LG remote is through the Logitech harmony binding.

[Jonas88 (Jonas)]

hi i don’t mean the linked item channel i mean how did you achieve the selection in the habpanel theme it’d be nice if you could share this!

[unparagoned]

You should find everything here. https://github.com/unparagoned/openhab_spotify-webconnect-api

[Jonas88 (Jonas)]

Great!

Could you please share your transform file?
I will modify the template to match to the new pride theme a little better and share it if i am done
It would save me some time if you don’t mind.

[Jonas88 (Jonas)]

Hi!

Did you get this working?
I am on a mac and my path is:
usr/local/cellar/grafana/6.3.3/share/grafana/public/views/index.html
but when i open it i see this:

i only found this path.
my share older (usr/share) does not contain a grafana sub folder

[Nognog (Daniel N.)]

Hi Jonas,

yes, send me a pm with your Email-Adress.

[Jonas88 (Jonas)]

Hi!

did you make any progress?
Somehow my graphs don’t seem to update even if i reload.
What exactly do i need to configure in grafana?
I chose 15 min refresh time. do i need to configure something else?
the graph changes in the graphana setting url but my embedded image does not so i think the image is not refreshed automatically. I marked the option i used to embed the image.
I think this is just a screenshot and nothing dynamic. but the other options won’t work for me. i just get a “file not found”-image