Matrix Theme for HABPanel

[tailor (Christian)]

@aletor

Hi Christian, sorry for the delay. I didn’t worked on Openhab since almost one month. I add this to my todo when I’ll have time to work on it. Sure I’ll let you know when I’ll able to fix it.

@aletor Hi Alexandre

I’m still curious about any progress concerning the slider.
I’ve also tried to implement the slider but the result was not satisfying

Thank you very much in advance.

[Florian_Mulatz]

Hey Guys,

Maybe a really dumb question but I don’t get it

I’ve one Group of Lights on my dining table and want to switch them as a group item. In the ground-floor widget there is the following declaration (of course updated with my own item/group names )

 <div ng-repeat="item in itemsInGroup('gLivingRoom').concat(itemsInGroup('gDiningTable')) | filter:query as filtered"> 

As it is - i get every single Bulb of this group as a separate item. In my case it makes no sense to switch one of them. Therefore I want to - as mentioned - switch all of them at a time.

When I leave out the

.concat(itemsInGroup('gDiningTable'))

then I only can see my light-strip but the dining-table (which is a group member of gLivingRoom) is missing. Is there anything I oversee?

BR & thx for any hint

[Pim_Verschueren]

Hi,

Great job, I love the panel. Just one question, I can’t get the playlist to load, what is the item name for the current playlist as spotify_current_playlist us not returning anything.

[Alexandersen (Christian Alexandersen)]

Hi pmpkk

I try to use your HabPanel - great work.

But i have som problem for example with your Spotify webconnect api

I gone through your description and to the point where i run Spotify.py

Then i get this.

Successfully got state from OpenHab: spotify_client_id
Successfully got state from OpenHab: spotify_client_secret
Successfully got state from OpenHab: spotify_access_token
Successfully got state from OpenHab: spotify_refresh_token
Successfully got state from OpenHab: spotify_token_issued
Successfully got state from OpenHab: spotify_token_expiry
-- Calling Service: Update
 -> Failure:  <type 'exceptions.ValueError'>
Error posting state to OpenHab: spotify_lastConnectionDateTime (HTTP Response State could not be parsed: 2017-12-26T08:10:05+0000)
Done in 0.503720998764 seconds

This is what the OpenHab log says

2017-12-26 09:16:52.995 [ome.event.ItemCommandEvent] - Item 'spotify_forceupadte' received command ON

2017-12-26 09:16:53.024 [vent.ItemStateChangedEvent] - spotify_forceupadte changed from NULL to ON

2017-12-26 09:16:53.768 [ome.event.ItemCommandEvent] - Item 'spotify_forceupadte' received command ON

2017-12-26 09:16:54.320 [WARN ] [rest.core.internal.item.ItemResource] - Received HTTP PUT request at 'items/spotify_lastConnectionDateTime/state' with an invalid status value '2017-12-26T08:16:54+0000'.

2017-12-26 09:16:54.464 [INFO ] [lipse.smarthome.model.script.Spotify] - Successfully got state from OpenHab: spotify_client_id

Successfully got state from OpenHab: spotify_client_secret

Successfully got state from OpenHab: spotify_access_token

Successfully got state from OpenHab: spotify_refresh_token

Successfully got state from OpenHab: spotify_token_issued

Successfully got state from OpenHab: spotify_token_expiry

Error posting state to OpenHab: spotify_lastConnectionDateTime (HTTP Response State could not be parsed: 2017-12-26T08:16:54+0000)

2017-12-26 09:16:55.202 [WARN ] [rest.core.internal.item.ItemResource] - Received HTTP PUT request at 'items/spotify_lastConnectionDateTime/state' with an invalid status value '2017-12-26T08:16:55+0000'.

Can you maybe give a hint?

Regards
Christian

[Boogieman (Marco)]

First of all, this is a great custom theme and everything works fine for me.

And here comes the big “but”.
I am really to stupid to get the icons to work. Tried both ways, manually and with the script, but no one works for me.
Is there a way (i know there is one, but i don’t know how) to use “normal” stored single svgs in matrix-theme?

[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