Would really appreciate if you would share your code 
This looks very nice! 
Here are the code, i have just adjusted it so it works for me. All credits should go to @pmpkk , @Michael_Stjerna and @unparagoned
<div class="section">
<div class="controls">
<div class="widgetMenu">
<div class="col1">
<div class="name">Sound</div>
</div>
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#round-clock"></use></svg></div>
<div class="name">{{itemValue('CurrentDate') | date:'HH:mm'}}</div>
</div>
</div>
<div class="widgetMenu2">
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#light_bulb"></use></svg></div>
<div class="name">{{itemValue('gLandetLightON')}} / 6</div>
</div>
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#window"></use></svg></div>
<div class="name">{{itemValue('gLandetWindowOpen')}} / 4</div>
</div>
<div class="col2">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#door-2"></use></svg></div>
<div class="name">{{itemValue('gLandetDoorOpen')}} / 5</div>
</div>
</div>
<div class="widget.wide">
<div class="controlGroup">
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='System?kiosk=on']" ng-click="sendCmd('MENU_page', 'System?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#drive"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Calendar?kiosk=on']" ng-click="sendCmd('MENU_page', 'Calendar?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#calendar"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Wifi?kiosk=on']" ng-click="sendCmd('MENU_page', 'Wifi?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-adaptor"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Music?kiosk=on']" ng-click="sendCmd('MENU_page', 'Music?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='HomeControl?kiosk=on']" ng-click="sendCmd('MENU_page', 'HomeControl?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#home-3"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='ESP?kiosk=on']" ng-click="sendCmd('MENU_page', 'ESP?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='Weather?kiosk=on']" ng-click="sendCmd('MENU_page', 'Weather?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sunset"></use></svg></div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#line-visuals"></use></svg></div></div>
<div class="title">Music</div>
<div class="controls">
<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">Track</div>
<div class="appLogo"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#spotify"></use></svg></div>
<div class="valueGroup">
<div class="value">{{itemValue('spotify_current_track')}}</div>
<div class="value">{{itemValue('spotify_current_artist')}}</div>
</div>
<div class="music">
<div class="cover" ng-style="{'background-image': 'url(' + itemValue('spotify_current_cover') + ')'}"></div>
<div class="playback">
<div class="playbackTime">{{ 946684800000 + itemValue('spotify_current_progress')*1 | date:'mm:ss'}}</div>
<div class="playbackBar"><div class="playbackBarDone" ng-style="{'width': itemValue('spotify_current_progress_percent') + '%'}"></div></div>
<div class="playbackTime">{{ 946684800000 + itemValue('spotify_current_duration')*1 | date:'mm:ss'}}</div>
</div>
<div class="controlGroup">
<div class="control" ng-click="sendCmd('spotify_action', 'next')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-2"></use></svg></div>
<div class="control" ng-click="sendCmd('spotify_action', 'play')" ng-if="itemValue('spotify_current_playing')!='ON'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
<div class="control" ng-click="sendCmd('spotify_action', 'pause')" ng-if="itemValue('spotify_current_playing')=='ON'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#stop_1_"></use></svg></div>
<div class="control" ng-click="sendCmd('spotify_action', 'previous')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-2"></use></svg></div>
</div>
</div>
</div>
<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">Play Lists</div>
<div class="sceneGroup">
<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_context_uri')=='spotify:user:spotify:playlist:37i9dQZF1DWTh5RC6ek3nb']" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:37i9dQZF1DWTh5RC6ek3nb')">Hits 2018</div>
<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_context_uri')=='spotify:user:spotify:playlist:37i9dQZF1DWSJHnPb1f0X3']" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:37i9dQZF1DWSJHnPb1f0X3')">Cardio</div>
</div>
</div>
<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('spotify_current_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>
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#box"></use></svg></div>
<div class="name">Devices</div>
<div class="sceneGroup" ng-init="deviceList = $eval(itemValue('spotify_device_list'))">
<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_device_id')==device.id]" ng-repeat="device in deviceList" ng-click="sendCmd('spotify_current_device_id', device.id);sendCmd('spotify_action', 'transfer_playback')">{{device.name}}</div>
</div>
</div>
<div class="widget" ng-click="sendCmd('spotify_forceupadte', 'ON')">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#double-arrow"></use></svg></div>
<div class="name">Update</div>
<div class="valueGroup">
<div class="value">{{itemValue('spotify_lastConnectionDateTime') | date:'MMM d, HH:mm:ss'}}</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#sound2"></use></svg></div></div>
<div class="title">Sonos</div>
<div class="controls">
<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">Radio</div>
<div class="appLogo"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/Old_sonos.png"></use></svg></div>
<div class="valueGroup">
<div class="value">{{itemValue('str_sonos_kitchen_currenttrack')}}</div>
<div class="value">{{itemValue('str_sonos_kitchen_currentartist')}}</div>
</div>
<div class="music">
<div class="cover" ng-style="{'background-image': 'url(' + itemValue('str_sonos_kitchen_currentalbumarturl') + ')'}"></div>
<div class="playback">
</div>
<div class="controlGroup">
<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'NEXT')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-arrow-2"></use></svg></div>
<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'PLAY')" ng-if="itemValue('Sonos_State')!='PLAYING'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'PAUSE')" ng-if="itemValue('Sonos_State')=='PLAYING'"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#stop_1_"></use></svg></div>
<div class="control" ng-click="sendCmd('pl_sonos_kitchen_control', 'PREVIOUS')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#left-arrow-2"></use></svg></div>
</div>
</div>
</div>
<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">Radio Stations</div>
<div class="sceneGroup">
<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'P3 99.7 (Populärmusik)')">P3</div>
<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'P4 Gävleborg 102.0 (Sportsnack)')">P4</div>
<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'RIX FM 104.9 (Populärmusik)')">RIX FM</div>
<div class="scene" ng-click="sendCmd('str_sonos_kitchen_radio', 'NRJ Sweden 105.1 (Populärmusik)')">NRJ</div>
</div>
</div>
<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="slider-div" ng-init='volumeModel={"name": "VOLUME", "item": "dim_sonos_kitchen_volume",
"floor" : 0, "ceil": 30, "step": 1, "hidelabel" : "true", "hidelimits": "true" }'>
<widget-slider ng-model="volumeModel"/>
</div>
</div>
</div>
</div>
</div>
1 Like
Thank you very much! I’ve tried this before, without 100% results. So I hope your code will be the solution
Hey,
realy nice job, but i have a small Problem. I cant display all my Network-Devices of the Group “gNetwork”.
What’s the Problem?
<div class="section">
<div class="sectionIconContainer"><div class="sectionIcon"><svg viewBox="0 0 200 200"><use xlink:href="/static/matrix-theme/squidink.svg#wlan"></use></svg></div></div>
<div class="title"><div class="name">WLAN - Geräte</div><div class="summary">Online: {{(itemsInGroup('gNetwork') | filter:{state:'OPEN'}).length}} von 20</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gNetwork') | filter:query as filtered">
<div class="widget" ng-if="(item.type=='Contact') && (itemValue(item.name)=='Open')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#off"></use></svg></div>
<div class="name">{{item.label}} : {{item.Value}} ✅</div>
</div>
<div class="widget" ng-if="(item.type=='Contact') && (itemValue(item.name)=='CLOSED')">
<div class="icon on" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></div>
<div class="name">{{item.label}} : {{item.Value}} ✖</div>
</div>
<div class="widget" ng-if="(item.type=='Contact') && (itemValue(item.name)=='NULL')">
<div class="icon off" ><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/matrixicons.svg#none"></use></svg></div>
<div class="name">{{item.label}} : {{item.Value}} ✖</div>
</div>
</div>
</div>
</div>
Thx
1 Like
Hi!
as i can see the conde:
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#box"></use></svg></div>
<div class="name">Devices</div>
<div class="sceneGroup" ng-init="deviceList = $eval(itemValue('spotify_device_list'))">
<div class="scene" ng-class="{true:'on', false:''}[itemValue('spotify_current_device_id')==device.id]" ng-repeat="device in deviceList" ng-click="sendCmd('spotify_current_device_id', device.id);sendCmd('spotify_action', 'transfer_playback')">{{device.name}}</div>
</div>
</div>
is responsible for the device selection.
I tried to add that to my code but it does not show any devices (just the speaker icon 
)
Did you make changes to the matrix-theme.css file too or did you make any changes in another file?
I’d love to get the device selection up and running
thank you
If you run this command “python /etc/openhab2/scripts/spotify.py get_devices”
you should see your spotify devices on your network, start with that so we now that you have the script on right place
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: Get Devices
Successfully posted state to OpenHab: spotify_device_list = [{"name": "Echo Dot v-rum", "volume_percent": 50, "is_private_session": false, "is_active": false, "is_restricted": false, "type": "Speaker", "id": "c3923b6e16fc1876ef2f6e6749ce065686605777"}]
[{"name": "Echo Dot v-rum", "volume_percent": 50, "is_private_session": false, "is_active": false, "is_restricted": false, "type": "Speaker", "id": "c3923b6e16fc1876ef2f6e6749ce065686605777"}]
Successfully posted state to OpenHab: spotify_lastConnectionDateTime = 2018-06-10T04:57:53+0000
Done in 0.421875 seconds
Good day to everybody.
I have problem with recently purchased SquidInk icons. In particular I can’t find at all icons named “double-arrow”, “line-visuals” and other icons named differently than shown in the symbols list. Only I encounter this problem?
yes, it shows all of my devices.
any further advice? thanks so far!
I experienced the same on some icons. they are there though.
you can look at your folder and see the correct name and then edit the html code directly in the HabPanel!
It’s sad, because sometimes it’s hard to say by name what icon should be used.
I will add my .css here tonight when i’m home from work.
Sorry that i did forget this last night but here is the .css i use
matrix-theme.css (34.6 KB)
1 Like
Hi, this tutorial is great. I learnt a lot just by following this. However here is my first question.
I followed the instruction to include a Grafana graph in a Home widget for my DemoPanel. However, the graph is not automatically updated every-time I reload the page. It always shows the data between a fixed period of time. I realized that it is because the direct link rendered image contained a fixed time range.
Is there a method to overcome this? I mean get the graph to show the data from the exact previous 24 hours? Thanks.
You have to amend the link to your grafana installation. It needs to contain relative time values. Something like this.
&Start=now-1d&end=now
1 Like
Has anyone worked out how to get a number of lights that are on showing in this theme? I can see the matrix theme by @pmpkk shows lights that are ON in the group but I am looking for something that will do dimmers AND ON/OFF lights
Thanks, I tried that, it worked. Also, when i removed both start=… end=…, it also worked quite well. I suppose the default values for Start is ‘now-24h’ and for end is ‘now’.
How du you control the Buttons ?
1 Like
Hello,
Unfortunately, my dynamic icon is not displayed. I have the following code:
<div class="widget">
<div class="icon on"><svg viewBox="0 0 200 200"><use xlink:href="{{'/static/matrix-theme/squidink.svg#' + itemValue('SeasonName')}}"></use></svg></div>
<div class="name">Aktuelle Jahreszeit:</div>
<div class="valueGroup"><div class="value">{{itemValue('SeasonName')}}</div></div>
</div>
</div>
The icon file is in the correct path and the states are “SPRING, SUMMER, WINTER, AUTUMN” are also set. I have emptied the cache from chrome too, unfortunately without success
what am I doing wrong?