Matrix Theme for HABPanel

[bennYx0x (Benjamin)]

Check out my post regarding this error:

openHAB integration to Spotify Web Connect API (player)

I also encountered this issue. It seems that some behaviour changed. You can notice that the milliseconds are gone in the timestamp, which create the error. You need to modify the following line (in my script line 478) in the Spotify script: def updateConnectionDateTime(self): self.oh.sendCommand('spotify_lastConnectionDateTime',time.strftime("%Y-%m-%dT%H:%M:%S.000+0000",time.gmtime(time.time()))) notice the .000 after %S.

[Boogieman (Marco)]

No solution for me?

[coeffee (Bastian)]

Hi all,

this “hack” doesn’t work for me.
Maybe Grafana changed something in their code?

Is it possible to change the grafana css file directly?

Thank you!

[klayman (John Doe)]

Hi,

just starting with the theme and was wondering how to best edit the json files. I’m using visual studio code editor with the openHAB plug in / extension, but for the json files it only shows glibberish, unformatted code

Thanks,
Klayman

[Boogieman (Marco)]

Hi,
i am playing with this great theme, and so, i changed the music widget for my own needs. I am using two sonos player in my house. My problem is, that they are using a dimmer item controlling volume. Can someone help me what i have to change here:

<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
		<div class="name">Volume<div class="value">{{itemValue('dim_sonos_bad_volume')}}</div></div>
		<div class="controlGroup">
    <div class="control" ng-click="sendCmd('spotify_action', 'volume_up')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#top-arrow-2"></use></svg></div>
			<div class="control" ng-click="sendCmd('spotify_action', 'volume_down')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
		</div>
	</div>

Volume up/down are useless commands for a dimmer. Can someone please explain me how to integrate a slider for my needs?

EDIT:

One more thing: Is it possible to hide header (Description and burger item)??

[Boogieman (Marco)]

Volume Slider problem solved for me. For sure its not the most beautiful code, but it works

<div class="controlGroup">
				<div ng-init="slider_kitchen = {
            'item': 'dim_sonos_kitchen_volume',
            'vertical': false,
            'floor': 0,
            'ceil': 100,
            'step': 2,
            'precision': 1,
            'unit': '%',
            'hidelabel': true,
            'hidelimits': false,
            'hidepointer': false,
            'showticks': false,
            'bigslider': false
            }">
         <widget-slider ng-model="slider_kitchen"/>

but the “hiding header problem” still exists. Any solution?

[tailor (Christian)]

Nice, could you please share the code for your sonos template? Thanks

[klayman (John Doe)]

Sorry guys, I have to bug you again. How do you edit the widget.json files? If I try to open it in a code editor, its just 2 or 3 veeeery long lines and totally unformatted… Thanks!!

[Saracen (Tom)]

@klayman

Sorry guys, I have to bug you again. How do you edit the widget.json files? If I try to open it in a code editor, its just 2 or 3 veeeery long lines and totally unformatted… Thanks!!

• On the HABpanel sidebar at the bottom, next to the date, click on the settings icon.

• In the right hand box, click on Custom Widgets Manage >

• On the page of widgets listed, click on the one you want to edit.

• Clock on the code tab to see the json code.

[Boogieman (Marco)]

Sure, but all credits @pmpkk i only changed his multimedia widget. Hope its ok for you?

<div class="section">

<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/music.svg#music"></use></svg></div></div>
<div class="title">Bad</div>
<div class="controls">

	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/note.svg#note"></use></svg></div>
		<div class="name">Track</div>
		<div class="appLogo"><svg viewBox="0 0 1000 400"><use xlink:href="/static/matrix-theme/squidink.svg#sonos"></use></svg></div>       
		<div class="valueGroup">
			<div class="value">{{itemValue('str_sonos_bad_currenttrack')}}</div>
			<div class="value">{{itemValue('str_sonos_bad_currentartist')}}</div>
		</div>

		<div class="music">
			<div class="cover" ng-style="{'background-image': 'url(' + itemValue('str_sonos_bad_currentalbumarturl') + ')'}"></div>
			<div class="playback">
				
			</div>
		</div>      
	</div>


	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/playlist.svg#playlist"></use></svg></div>
		<div class="name">Sender</div>
		<div class="sceneGroup">
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'Radio Salü')">Salue</div>
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'UNSERDING')">Unser Ding</div>
    <div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'Classic Rock Radio')">Rock</div>
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'SR 1')">SR 1</div>
    <div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'RPR 1')">RPR 1</div>
			<div class="scene" ng-click="sendCmd('str_sonos_bad_radio', 'ENERGY Digital')">Energy</div>
		</div>
	</div>

	<div class="widget">
		<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/icons/volume.svg#volume"></use></svg></div>
  <div class="name">Lautstärke<div</div></div>
		<div class="controlGroup">
    <div ng-init="slider_bad = {
        'item': 'dim_sonos_bad_volume',
        'vertical': false,
        'floor': 0,
        'ceil': 100,
        'step': 2,
        'precision': 1,
        'unit': '%',
        'hidelabel': true,
        'hidelimits': false,
        'hidepointer': false,
        'showticks': false,
        'bigslider': false
        }">
     <widget-slider ng-model="slider_bad"/>
    </div>
    <div class="controlGroup">
      <div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'NEXT')" ><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/next.svg#next"></use></svg></div>
				<div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'PAUSE')"><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/pause.svg#pause"></use></svg></div>
      <div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'PLAY')"><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/play.svg#play"></use></svg></div>
      <div class="control" ng-click="sendCmd('pl_sonos_bad_control', 'PREVIOUS')"><svg viewBox="0 0 66 55"><use xlink:href="/static/matrix-theme/icons/prev.svg#prev"></use></svg></div>
     </div>
		</div>
	</div>

Really no one able to hide the header?

P.S. for a working favourite channel list, you also have to put the channels you want in your sonos app to favorites.

[therebel (Mike)]

Hi Bogieman,

you just have to put a ?kiosk=on behind the URL an the Description and also the menu on the left will disappear.
To get them back, for editing etc. just change it to ?kiosk=off

You can give it to the variable you use to switch the dashboards.

ng-click=“sendCmd(‘DashSwitch’, ‘Schalter?kiosk=on’)”

[Boogieman (Marco)]

Great! Thx for that

[klayman (John Doe)]

Hey, thanks for the help with how to edit the widgets. I’m just starting with website development, so please be forgiving
I can find a funny behaviour with my KNX dimmers: After replacing your hue code with a slider as suggested in this thread above, the KNX dimmer appears twice if it is set to 0 or OFF. As soon as it is at 1% or above, the copy disappears. If I go back to 0, it appears again.

This is the code:

<div class="widget" ng-if="((item.type=='Dimmer' && (itemValue(item.name)=='0' || itemValue(item.name)=='OFF')) || (item.type=='Group' && (itemValue(item.name)=='OFF' || itemValue(item.name)=='NULL'))) && itemValue(item.name + '_color')=='N/A'">
  <div class="icon off" ng-click="sendCmd(item.name, 'ON')"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
  <div class="name" ng-click="showHueSelect = !showHueSelect">
    <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
    <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
      <div class="hueSelectOptions">
        <!-- Brightness slider bar -->
        <div ng-init="slider = { value: 0, options: { floor: 0, ceil: 100, step: 1, showSelectionBar: true } };"></div>
        <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options" ng-click="sendCmd(item.name, slider.value)"></rzslider>
      </div>
    </div>
    {{item.label}}
  </div>
</div>

<div class="widget" ng-if="((item.type=='Dimmer' && itemValue(item.name)>'0') || (item.type=='Group' && itemValue(item.name)=='ON')) && itemValue(item.name + '_color')=='N/A'">
  <div class="icon on" ng-click="sendCmd(item.name, 'OFF')"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
  <div class="name" ng-click="showHueSelect = !showHueSelect">
    <div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_color') + ')'}"></div>
    <div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div>
      <div class="hueSelectOptions">
        <div ng-init='model={"item": item.name, "floor": 0, "ceil": 100, "step":1}'>
          <widget-slider ng-model="model" />
        </div>          
      </div>
    </div>
    {{item.label}}
  </div>
</div>

Any idea how to fix this? Thanks…

[Rob911 (Rob)]

Hello,

Can someone help me the mini graphs get to work?
I have installed influxDb with grafan.

When I’m adding my graph to the Sytem Widget it won’t work.

Here is what I have put in

src="http://pi:3000/dashboard-solo/db/mini-graphspanelId=1&orgId=1&from=1516109468297&to=1516714268298&width=450&height=200\” >

The only thing I can see is a question mark. Grafana and habpanel are on the same host. Is there anything with user or login that I’ve to set? Or do I have to set special options to the graph?

If I try the link with my browser I can see the graph.

[K4nape]

Hello,

Maybe some one have this problem? Look this icon

[kevinshane (shane kevin)]

Please someone help a noob guy, I would like to have the light section icon go to “lights up” when one of the lights being turned on, when all lights off, the icon stay in grey, how to code this one?

 <div class="sectionIconContainer">
    <div class="sectionIcon">
      <svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#light_bulb"></use></svg>    
    </div>  
  </div>

Please help, thank you so much

Shane

[Boogieman (Marco)]

How did you inserted the icons?
Via squidink.svg like pmpkk said?

Are there “stroke-width” informations in the svgs you inserted?
You should “play” with them. Try stroke-width="1" or perhaps stroke-width="0".

Which icons do you use?

[K4nape]

Hi Boogieman,

squidlink.svg:

And for buttons something that’s wrong

[Boogieman (Marco)]

Delete stroke="#000000" complete and see what happens.

The buttons problem should be solved if you click them for the first time.

[K4nape]

@Boogieman

Delete stroke="#000000" complete and see what happens.

The buttons problem should be solved if you click them for the first time.

My buttons, so big i don’t undarstand.
I delleted, but nothing.