Hi @olir,
I’m also looking for implementing the Xiaomi Robot. The functions of your Widget working instantly at my setup. Do you already found a way to get a nice view of the Widget ? Tanks for your code and further help!
Best, Marco
Short question, are these graphs/images automatically refreshing, even if the page is not reloaded manually? If yes, how did you set ip up, with jquery/ajax?
After some hours of finding out why my Spotify widget did not show like your post i finally fixed it. Luckily i have not so much hair left to become gray 
2 Likes
Hey,
can you send me the Code for the Device Selection?
Geetz
Nog
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