Hello Daniel,
Sent you a PM!
Frans
Daniel,
Strange behaviour as i saw you reading my PM but i never got the widgets or a reply. Does anyone else have received these widgets from Daniel? If so, please send me a PM so i can send my emailaddress…
Frans
Hey Posixx,
sorry for my late reply. I was on vacation. I’ll send you the widgets by afternoon 
@at all
I optimized the vacum cleaner widget.
Grafana battary graph changed to a Knob.
Roxy - Saugroboter.widget.json (18.0 KB)
greeting
Daniel
5 Likes
Tnx Daniel, got them!
Nice work.
Hey,
nice HABPanel theme. I really like it.
I want to use some custom svgs, which are not included in the package from squid ink. For example I want to use a svg including “XBOX ONE” and an icon including the xbox one logo.
For example: https://commons.wikimedia.org/wiki/File:Xbox_One_no_X.svg
and: https://commons.wikimedia.org/wiki/File:Xbox_one_logo.svg
Or the same for “Plex”, …
But I have no idea what to put in the AppIcons.svg or matrixicons.svg.
Thanks for your help.
I have been using the theme for awhile now and have everything running really well! One issue i have however is that I can’t get the Netatmo values to be visible in habpanel. I have everything working correctly in Paper UI but it doesn’t show the value in habpanel. Anyone know the fix for it?
Netatmo.items File
# Indoor Module
Number Netatmo_Indoor_Temperature "Temperature [%.1f %unit%]" <temperature> { channel = "netatmo:NAMain:a4cfe7a2:7$
Number:Dimensionless Netatmo_Indoor_Humidity "Humidity [%d %unit%]" <humidity> { channel = "netatmo:NAMa$
Number Netatmo_Indoor_Humidex "Humidex [%.0f]" <temperature_hot> { channel = "netatmo:NAMain:a4cfe7a2:70ee50175$
Number:Temperature Netatmo_Indoor_HeatIndex "HeatIndex [%.1f %unit%]" <temperature_hot> { channel = "netatmo:NAMain$
Number:Temperature Netatmo_Indoor_Dewpoint "Dewpoint [%.1f %unit%]" <temperature_cold> { channel = "netatmo:NAMain$
Number:Temperature Netatmo_Indoor_DewpointDepression "DewpointDepression [%.1f %unit%]" <temperature_cold> { channel = "netatmo:NAMain$
Number:Dimensionless Netatmo_Indoor_Co2 "Co2 [%d %unit%]" <carbondioxide> { channel = "netatmo:NAMain:$
Number:Pressure Netatmo_Indoor_Pressure "Pressure [%.1f %unit%]" <pressure> { channel = "netatmo:NAMain:a4cf$
Number:Pressure Netatmo_Indoor_AbsolutePressure "AbsolutePressure [%.1f %unit%]" <pressure> { channel = "netatmo:NAMain:a4cf$
Number:Dimensionless Netatmo_Indoor_Noise "Noise [%d %unit%]" <soundvolume> { channel = "netatmo:NAMain$
Number Netatmo_Indoor_WifiStatus "WifiStatus [%s]" <signal> { channel = "netatmo:NAMain:a4cfe7a2:70ee50$
DateTime Netatmo_Indoor_TimeStamp "TimeStamp [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" <calendar> { channel = "netatmo:NAMain:a4cfe7a2:7$
Location Netatmo_Indoor_Location "Location" <movecontrol> { channel = "netatmo:NAMain:a4cfe7a2:70ee50$
DateTime Netatmo_Indoor_LastStatusStore "LastStatusStore [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" <text> { channel = "netatmo:NAMain:a4cfe7a2$
# Outdoor Module
Number:Temperature Netatmo_Outdoor_Temperature "Temperature [%.1f %unit%]" <temperature> { channel = "netatmo:NAModu$
String Netatmo_Outdoor_TempTrend "TempTrend [%s]" <line> { channel = "netatmo:NAModule1:a4cfe7a2:020$
Number:Dimensionless Netatmo_Outdoor_Humidity "Humidity [%d %unit%]" <humidity> { channel = "netatmo:NAMo$
Number Netatmo_Outdoor_Humidex "Humidex [%.0f]" <temperature_hot> { channel = "netatmo:NAModule1:a4cfe7a2:020000$
Number:Temperature Netatmo_Outdoor_HeatIndex "HeatIndex [%.1f %unit%]" <temperature_hot> { channel = "netatmo:NAModu$
Number:Temperature Netatmo_Outdoor_Dewpoint "Dewpoint [%.1f %unit%]" <temperature_cold> { channel = "netatmo:NAModu$
Number:Temperature Netatmo_Outdoor_DewpointDepression "DewpointDepression [%.1f %unit%]" <temperature_cold> { channel = "netatmo:NAModu$
Number Netatmo_Outdoor_RfStatus "RfStatus [%.0f / 5]" <signal> { channel = "netatmo:NAModule1:a4cfe7a2:020$
Switch Netatmo_Outdoor_LowBattery "LowBattery [%s]" <siren> { channel = "netatmo:NAModule1:a4cfe7a2:020$
Number Netatmo_Outdoor_BatteryVP "BatteryVP [%.0f %%]" <battery> { channel = "netatmo:NAModule1:a4cfe7a2:020$
DateTime Netatmo_Outdoor_TimeStamp "TimeStamp [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" <calendar> { channel = "netatmo:NAModule1:a4cfe7a$
DateTime Netatmo_Outdoor_LastMessage "LastMessage [%1$td.%1$tm.%1$tY %1$tH:%1$tM]" <text> { channel = "netatmo:NAModule1:a4cfe7a2:$
Sure I didnt update all of the items since it wasnt working.
<div class="section">
<div class="title">Menu</div>
<div class="widget.wide">
<div class="controlGroup">
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Home Panel?kiosk=on']" ng-click="sendCmd('MENU_page', 'Home Panel?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sim-card"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Calendar?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Ground Control?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#drive-3"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Outdoor?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Outdoor?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#globe"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-System?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-System?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-Home 2?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-Home 2?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#right-play"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('MENU_page')=='P-All Lights Control?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-All Lights Control?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')=='P-HTPC Monitor?kiosk=on']" ng-click="sendCmd('MENU_page', 'P-HTPC Monitor?kiosk=on')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#sun"></use></svg></div>
</div>
</div>
</div>
<div class="section">
<div class="bigDash">
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Netatmo_Indoor_Temperature') | number:1}}</div>
<div class="sub">°f</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#thermometer-3"></use></svg></div>
<div class="value">feels like {{itemValue('Outside_Temperature') | number:1}} °f</div>
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#drop"></use></svg></div>
<div class="value">{{itemValue('Netatmo_Outdoor_Humidity') | number:0}} %</div>
</div>
</div>
<div class="bigDash">
<div class="top">
<div class="icon on"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
<div class="value">
<div class="main">{{itemValue('Netatmo_Outdoor_Temperature') | number:1}}</div>
<div class="sub">mm</div>
</div>
</div>
<div class="bottom">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
<div class="value">1h: {{itemValue('Netatmo_Outdoor_Temperature') | number:1}} mm</div>
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#umberla"></use></svg></div>
<div class="value">24h: {{itemValue('Netatmo_Rain_24Hours') | number:0}} mm</div>
</div>
</div>
<div class="bigDash">
<div class="top">
<div class="icon on wind"><div style="transform: rotate({{itemValue('Netatmo_Wind_Angle') | number:0}}deg);"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#navigate"></use></svg></div></div>
<div class="value">
<div class="main">{{itemValue('Netatmo_Wind_Strength') | number:0}}</div>
<div class="sub">km/h</div>
</div>
</div>
<div class="bottom">
<div class="icon off wind"><div style="transform: rotate({{itemValue('Netatmo_Wind_Angle') | number:0}}deg);"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#navigate"></use></svg></div></div>
<div class="value">{{itemValue('Netatmo_Wind_Angle') | number:0}} °</div>
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#wind"></use></svg></div>
<div class="value">{{itemValue('Netatmo_Gust_Strength') | number:0}} km/h ({{itemValue('Netatmo_Gust_Angle') | number:0}} °)</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#flat-tv"></use></svg></div></div>
<div class="title">TV</div>
<div class="controls">
<div class="widget" ng-if="itemValue('HarmonyHubHarmonyHub_')=='PowerOff'" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'PowerOff')">
<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">Power On</div>
</div>
<div class="widget" ng-if="itemValue('HarmonyHubHarmonyHub_')!='PowerOff'" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'PowerOff')">
<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">State: {{itemValue('HarmonyHubHarmonyHub_')}}</div>
</div>
<div class="widget" ng-if="itemValue('HarmonyHubHarmonyHub_')=='NULL'" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Watch Netflix')">
<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">Power</div>
</div>
<div class="widget" ng-class="{true: 'disabled'}[itemValue('HarmonyHubHarmonyHub_')=='PowerOff']">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
<div class="name">Input</div>
<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='Watch Netflix'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#netflix"></use></svg></div>
<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='Amazon Video'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#amazon"></use></svg></div>
<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='Youtube'"><svg viewBox="0 0 440 100"><use xlink:href="/static/matrix-theme/AppIcons.svg#youtube"></use></svg></div>
<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')=='com.webos.app.hdmi1''">PC<svg viewBox="0 0 180 180"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>
<div class="appLogo" ng-if="itemValue('HarmonyHubHarmonyHub_')!='Watch Netflix' && itemValue('HarmonyHubHarmonyHub_')!='Amazon Video' && itemValue('HarmonyHubHarmonyHub_')!='Start kodi' && itemValue('HarmonyHubHarmonyHub_')!=com.webos.app.hdmi1'">{{itemValue('LG_TV0_Application')}} {{itemValue('HarmonyActivity}}</div>
<div class="controlGroup">
<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Energy']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Energy')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoYoutube"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Launch spotify']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Launch spotify')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoAmazon"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Amazon Video']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Amazon Video')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#processor"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Watch Netflix']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Watch Netflix')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/matrixicons.svg#logoNetflix"></use></svg></div>
<div class="control" ng-class="{true: 'on'}[itemValue('HarmonyHubHarmonyHub_')=='Start kodi']" ng-click="sendCmd('HarmonyHubHarmonyHub_', 'Start kodi')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#flat-tv"></use></svg></div>
</div>
</div>
<div class="widget" ng-class="{true: 'disabled'}[itemValue('HarmonyHubHarmonyHub_')=='PowerOff']">
<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('HarmonyHubHarmonyHub_') * 100 | number:0}}</div></div>
<div class="controlGroup">
<div class="control" ng-click="sendCmd('HarmonyVizioTV', 'VolumeUp')"><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('HarmonyVizioTV', 'VolumeDown')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
<div class="control on" ng-if="itemValue('HarmonyVizioTV')=='Mute'" ng-click="sendCmd('HarmonyVizioTV', 'Mute')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#volume-close"></use></svg></div>
<div class="control" ng-if="itemValue('HarmonyVizioTV')!='ON'" ng-click="sendCmd('HarmonyVizioTV', 'ON')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
<div class="name">Now Playing<div class="value">{{itemValue('KodiHtpc_title')}}</div></div>
</div>
</div>
<div class="widget" ng-class="{true: 'disabled'}[itemValue('HarmonyHubHarmonyHub_')=='PowerOff']">
<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" ng-init="soundOptions=0" ng-click="soundOptions=1">Sound Options<svg viewBox="0 0 180 180"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
<div class="sceneGroup" ng-if="soundOptions==1">
<div class="scene" ng-click="sendCmd('HarmonyYamaha', 'DspStraight')">Straight</div>
<div class="scene" ng-click="sendCmd('HarmonyVizioTVActivity', 'InputHdmi1')">HDMI 1</div>
<div class="scene" ng-click="sendCmd('HarmonyYamaha', 'InputAudio')">App sounds</div>
<div class="scene" ng-click="sendCmd('HarmonyYamaha', 'DspMusic')">Music</div>
<div class="scene" ng-click="sendCmd('HarmonyYamaha', 'DspMovie')">Movie</div>
</div>
</div>
<div class="name" ng-init="remote=0" ng-click="remote=1">Enable Remotes</div>
<div ng-if="remote==1" ng-repeat="item in itemsInGroup('gharmony')">
<div class="widget">
<div class="name">{{item.label}}</div>
<div class="btn-group" dropdown-append-to-body="true"uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
{{item.state}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" style="overflow: auto; max-height:300px; overflow-x:hidden" aria-labelledby="single-button">
<dev ng-repeat="i in item.stateDescription.options">
<li role="menuitem"><a ng-click='sendCmd(item.name, i.value)'>{{i.label}}</a></li>
</dev>
</ul>
</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-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:0Fgi4meYzbrdICHkHe2VDj')">Instrumentals</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:63MEgFTAW3mZ27XRj9C1oi')">Wedding</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:1j7HdFPIKl1Atf5eGIu7zU')">Janet's Playlist</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:63ebBKesGNlpQI59OwvqQm')">Georges's Playlist</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:2JN0Y20RVrTX6BqaUCev5L')">Melo Moods</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:298wmtcMtvAIGzguQbSCZ4')">Dinner Tunes</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:7t53a5oPjxAHxadWHbR0aH')">Hip Hop Jams</div>
<div class="scene" ng-click="sendCmd('spotify_action', 'play spotify:user:spotify:playlist:2JTuSXxiV34S9iGo0Rw9aN')">90's Alternative</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" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
<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>
<div class="title"><div class="name">Color Lights</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gAll_Hue_Lights') | filter:query as filtered ">
<div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]== 0" ng-click="showHueSelect = !showHueSelect">
<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"><div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_rgb') + ')'}"></div><div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div><div class="hueSelectOptions"><a href="" ng-click="sendCmd(item.name, itemValue('SceneOffColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a><a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
<div ng-init="slider = { value: itemValue(item.name).split(',')[2], 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 ng-init='cpicker = {
"name": item.name,
"item": itemValue(item.name + '_rgb'),
"style": "aCKolor"
};slider = {
"name": "",
"item": itemValue(item.name),
"value": itemValue(item.name).split(',')[2],
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "",
"vertical": false
};switch = {
"name": "",
"item": itemValue(item.name),
"hidelabel": true,
"hideicon": false,
"hideonoff": true
}'>
<style>
.cl-switch .switch {
position: absolute;
top: 0;
width: 100%;
}
</style>
<widget-colorpicker ng-model="cpicker"></widget-colorpicker>
<widget-slider ng-model="cslider" ng-click="sendCmd(item.name, cslider.value)"></widget-slider>
</div>
</div>
</div>{{item.label}} </div>
</div>
<div class="widget" ng-if="item.type=='Color' && itemValue(item.name).split(',')[2]!=0" ng-click="showHueSelect = !showHueSelect">
<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"><div class="hue" ng-style="{'background': 'rgb(' + itemValue(item.name + '_rgb') + ')'}"></div><div class="hueSelect" ng-init="showHueSelect = false" ng-show="showHueSelect"><div class="hueSelectItem"></div><div class="hueSelectOptions"><a href="" ng-click="sendCmd(item.name, itemValue('SceneOffColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#cross-line"></use></svg></a><a href="" ng-click="sendCmd(item.name, color.hsb)" ng-repeat="color in hueColors" ng-style="{ 'background': color.hex }"></a><a href="" ng-click="sendCmd(item.name, itemValue('SceneColor'))"><svg viewBox="0 0 48 48" style="stroke: white; stroke-width: 3px;"><use xlink:href="/static/matrix-theme/matrixicons.svg#on"></use></svg></a>
<div ng-init="slider = { value: itemValue(item.name).split(',')[2], 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 ng-init='cpicker = {
"name": item.name,
"item": itemValue(item.name + '_rgb'),
"style": "aCKolor"
};slider = {
"name": "item.name",
"item": itemValue(item.name),
"value": itemValue(item.name).split(',')[2],
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "",
"vertical": false
};switch = {
"name": "item.name",
"item": itemValue(item.name),
"hidelabel": true,
"hideicon": false,
"hideonoff": true
}'>
<style>
.cl-switch .switch {
position: absolute;
top: 0;
width: 100%;
}
</style>
<widget-colorpicker ng-model="cpicker"></widget-colorpicker>
<widget-slider ng-model="cslider.value" ng-click="sendCmd(item.name, cslider.value)"></widget-slider>
</div>
</div>
</div> {{item.label }}</div>
</div>
</div>
</div>
</div>
<div class="section" ng-init="hueColors = [ { hsb: '0,0,100', hex: '#fff' }, { hsb: '74,78,100', hex: '#fecc2f' }, { hsb: '46,100,100', hex: '#f9a228' }, { hsb: '26,100,100', hex: '#f6621f' }, { hsb: '0,100,100', hex: '#db3838' }, { hsb: '273,100,100', hex: '#a363d9' }, { hsb: '201,100,100', hex: '#40a4d8' }, { hsb: '177,100,100', hex: '#33beb8' }, { hsb: '140,100,100', hex: '#b2c225' } ]">
<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>
<div class="title"><div class="name">Lights</div><div class="summary">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gAll_lights_Switch') | filter:query as filtered">
<div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='OFF'" ng-click="sendCmd(item.name, 'ON')">
<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}}</div>
</div>
<div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')">
<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}}</div>
</div>
<div class="widget" ng-if="item.type=='Switch' && itemValue(item.name)=='NULL'" ng-click="sendCmd(item.name, 'ON')">
<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}}</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#window"></use></svg></div></div>
<div class="title">Shutters</div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gGroundFloorShutters')">
<div class="widget wide">
<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">{{item.label}}<div class="value">{{item.value}}</div></div>
<div class="controlGroup">
<div class="control" ng-click="sendCmd(item.name, 'ON')"><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(item.name, 'STOP')"><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(item.name, 'OFF')"><svg viewBox="0 0 80 80"><use xlink:href="/static/matrix-theme/squidink.svg#down-arrow-2"></use></svg></div>
</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#connection-arw-l"></use></svg></div></div>
<div class="title">Rules</div>
<div class="controls">
<div class="widget" ng-if="itemValue('dinner_mode')=='OFF'" ng-click="sendCmd('dinner_mode', 'ON')">
<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">Dinner Mode</div>
<div class="valueGroup"><div class="value">{{itemValue('dinner_mode_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('dinner_mode_LUD') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('dinner_mode')=='ON'" ng-click="sendCmd('dinner_mode', 'OFF')">
<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">Dinner Mode</div>
<div class="valueGroup"><div class="value">{{itemValue('dinner_mode_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('dinner_mode_LUD') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('dinner_mode')=='NULL'" ng-click="sendCmd('dinner_mode', 'ON')">
<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">Dinner Mode</div>
<div class="valueGroup"><div class="value">{{itemValue('dinner_mode_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('dinner_mode_LUD') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('livingroom_blinds')=='OFF'" ng-click="sendCmd('livingroom_blinds', 'ON')">
<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">Living Room Blinds</div>
<div class="valueGroup"><div class="value">{{itemValue('livingroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_livingroom_blindsDown_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('livingroom_blinds')=='ON'" ng-click="sendCmd('livingroom_blinds', 'OFF')">
<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">Living Room Blinds</div>
<div class="valueGroup"><div class="value">{{itemValue('livingroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_livingroom_blindsDown_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('livingroom_blinds')=='NULL'" ng-click="sendCmd('livingroom_blinds', 'ON')">
<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">Living Room Blinds</div>
<div class="valueGroup"><div class="value">{{itemValue('livingroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_livingroom_blindsDown_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('good_night')=='OFF'" ng-click="sendCmd('good_night', 'ON')">
<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">Good Night</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_sofia_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sofia_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('good_night')=='ON'" ng-click="sendCmd('good_night', 'OFF')">
<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">Good Night</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_sofia_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sofia_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('good_night')=='NULL'" ng-click="sendCmd('good_night', 'ON')">
<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">Good Night</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_sofia_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sofia_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('bedroom_blinds')=='OFF'" ng-click="sendCmd('bedroom_blinds', 'ON')">
<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">Bedroom Blinds</div>
<div class="valueGroup"><div class="value">{{itemValue('bedroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sunset_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('bedroom_blinds')=='ON'" ng-click="sendCmd('bedroom_blinds', 'OFF')">
<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">Bedroom Blinds</div>
<div class="valueGroup"><div class="value">{{itemValue('bedroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sunset_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('bedroom_blinds')=='NULL'" ng-click="sendCmd('bedroom_blinds', 'ON')">
<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">Bedroom Blinds</div>
<div class="valueGroup"><div class="value">{{itemValue('bedroom_blinds_LUD') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_sunset_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('movie_lights')=='OFF'" ng-click="sendCmd('movie_lights', 'ON')">
<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">Movie Lights</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_morning_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_morning_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('movie_lights')=='ON'" ng-click="sendCmd('movie_lights', 'OFF')">
<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">Movie Lights</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_morning_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_morning_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('movie_lights')=='NULL'" ng-click="sendCmd('movie_lights', 'ON')">
<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">Movie Lights</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_morning_blinds_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_morning_blinds_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('media_center')=='OFF'" ng-click="sendCmd('media_center', 'ON')">
<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">Media Center</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('media_center')=='ON'" ng-click="sendCmd('media_center', 'OFF')">
<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">Media Center</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('media_center')=='NULL'" ng-click="sendCmd('media_center', 'ON')">
<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">Media Center</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('mood_lights')=='OFF'" ng-click="sendCmd('mood_lights', 'ON')">
<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">Mood Lights</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('mood_lights')=='ON'" ng-click="sendCmd('mood_lights', 'OFF')">
<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">Mood Lights</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('mood_lights')=='NULL'" ng-click="sendCmd('mood_lights', 'ON')">
<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">Mood Lights</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('netflix')=='OFF'" ng-click="sendCmd('netflix', 'ON')">
<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">Netflix</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('netflix')=='ON'" ng-click="sendCmd('netflix', 'OFF')">
<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">Netflix</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
<div class="widget" ng-if="itemValue('netflix')=='NULL'" ng-click="sendCmd('netflix', 'ON')">
<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">Netflix</div>
<div class="valueGroup"><div class="value">{{itemValue('rule_bmw_charge_check_TimeStamp') | date:'MMM d, HH:mm'}} last</div><div class="value">{{itemValue('rule_bmw_charge_check_Counter') | number:0}} executions</div></div>
</div>
</div>
</div>
I can not see any problem in your HTML code.
Is it working using a sitemap?
If you add a new widget, displaying only the value of one Netatmo item? Is this working?
I had a similar problem using the Netatmo binding. Do you have more than one Item defined? (Example: inside_co2_1 and inside_co2_2)
I solved my problem, when I comment all Netatmo items out, uninstalling the binding, disabling the automatic item linking in Paper-UI and then enabling uncomment the items in the item-file.
Hi Patrick,
First of all, thanks for this great theme.
It really looks amazing!
I’m currently finding out if i’m able to configure one single device.
So when i click a list or select play, that it always plays on the selected device.
Can you tell me if this even is possible, and if it is… how?
I had similar issues with compiling the icons into SVG. After alot of research I put this tutorial together.
2 Likes
Hi there! Maybe someone can help me here …
I’m adding item with ng-repeat, but i’m facing 2 problems:
- Sometimes they don’t get all shown, even though I can see that the logic to tell me how many are one is correct, so I assume they get lost somewhere
- They don’t appear in the order that I have them defined on my .items file.
I’m attaching an image and my code.
sonoff.items
//Pieza Emma
Switch PiezaEmma_Luz1 "Pieza Emma Luz 1" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Luz1:power" }
Switch PiezaEmma_Luz2 "Pieza Emma Luz 2" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Luz2:power" }
Switch PiezaEmma_LED "Pieza Emma LED" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_LED:power" }
Switch PiezaEmma_Pasillo "Pieza Emma Pasillo" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Pasillo:power" }
Switch PiezaEmma_Bathroom_Luz1 "Pieza Emma Bathroom Luz 1" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Bathroom_Luz1:power" }
Switch PiezaEmma_Bathroom_Luz2 "Pieza Emma Bathroom Luz 2" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Bathroom_Luz2:power" }
Switch PiezaEmma_Bathroom_LED "Pieza Emma Bathroom LED" <lighting> (gEmma, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaEmma_Bathroom_LED:power" }
//Pieza Chicos
Switch PiezaChicos_Luz1 "Pieza Chicos Luz 1" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Luz1:power" }
Switch PiezaChicos_Luz2 "Pieza Chicos Luz 2" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Luz2:power" }
Switch PiezaChicos_LED "Pieza Chicos LED" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_LED:power" }
Switch PiezaChicos_Pasillo "Pieza Chicos Pasillo" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Pasillo:power" }
Switch PiezaChicos_Bathroom_Luz1 "Pieza Chicos Bathroom Luz 1" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Bathroom_Luz1:power" }
Switch PiezaChicos_Bathroom_Luz2 "Pieza Chicos Bathroom Luz 2" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Bathroom_Luz2:power" }
Switch PiezaChicos_Bathroom_LED "Pieza Chicos Bathroom LED" <lighting> (gChicos, gCasa) [ "Lighting" ] { channel="mqtt:topic:mqtt_broker:PiezaChicos_Bathroom_LED:power" }
Also my widget code
<div class="section">
<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>
<div class="title">
<div class="name">Luces Emma</div><div class="summary">ON: {{(itemsInGroup('gEmma') | filter:{state:'ON'}).length}} de {{(itemsInGroup('gEmma')).length}}</div>
</div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gEmma') | filter:query as filtered">
<div class="widget wide" ng-if="itemValue(item.name)=='OFF'" ng-click="sendCmd(item.name, 'ON')">
<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}}</div>
</div>
<div class="widget wide" ng-if="itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')">
<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}}</div>
</div>
<div class="widget wide" ng-if="itemValue(item.name)=='NULL'" ng-click="sendCmd(item.name, 'ON')">
<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}}</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/matrixicons.svg#light_bulb"></use></svg></div>
</div>
<div class="title">
<div class="name">Luces Chicos</div><div class="summary">ON: {{(itemsInGroup('gChicos') | filter:{state:'ON'}).length}} de {{(itemsInGroup('gChicos')).length}}</div>
</div>
<div class="controls">
<div ng-repeat="item in itemsInGroup('gChicos') | filter:query as filtered">
<div class="widget wide" ng-if="itemValue(item.name)=='OFF'" ng-click="sendCmd(item.name, 'ON')">
<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}}</div>
</div>
<div class="widget wide" ng-if="itemValue(item.name)=='ON'" ng-click="sendCmd(item.name, 'OFF')">
<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}}</div>
</div>
<div class="widget wide" ng-if="itemValue(item.name)=='NULL'" ng-click="sendCmd(item.name, 'ON')">
<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}}</div>
</div>
</div>
</div>
</div>
Any pointers would be much appreciated.
I have the same question about the order. I was about to post the same thing
Ive tried the |orderby function in the ng-repeat. but it doesn’t work, apparently it only works with arrays.
any help on the order would be appreciated.
Also i have just tried your widget with my setup, and all of my lights are listed correctly So i would say its either a cache issue (clear cache on your browser).
Or a CSS file issue.
also. where you have your second section. Change filter:query as filtered to filter2:query as filtered
and
| filter:{state:‘ON’}).length}} to | filter2:{state:‘ON’}).length}}
so the numbers are correct.
My numbers are correct, the actually both have 7 items. i have the same chunk of code for around 13 different rooms, ranging from 1 to 13 item on each, and everytime the “summary” is correct, even the how many are on of all the lights, but the <div class="name">{{item.label}}</div> doesn’t show the same amount of items as in {{(itemsInGroup('gChicos')).length}}