Ground Floor Widget.widget.json

{
    "template": "<div class=\"section\">\n\n\t<div class=\"bigDash\">\n\t\t<div class=\"top\">\n\t\t\t<div class=\"icon on\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#thermometer-3\"></use></svg></div>\n\t\t\t<div class=\"value\">\n\t\t\t\t<div class=\"main\">{{itemValue('Netatmo_Indoor_Temperature') | number:1}}</div>\n\t\t\t\t<div class=\"sub\">&#176C</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"bottom\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#direction-n\"></use></svg></div>\n\t\t\t<div class=\"value\">{{itemValue('Netatmo_Indoor_Pressure') | number:0}} hPa</div>\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#drop\"></use></svg></div>\n\t\t\t<div class=\"value\">{{itemValue('Netatmo_Indoor_Humidity') | number:0}} %</div>\n\t\t</div>\n\t\t<div class=\"bottom\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#tree-3\"></use></svg></div>\n\t\t\t<div class=\"value\">CO2 {{itemValue('Netatmo_Indoor_CO2') | number:0}} ppm</div>\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#volume\"></use></svg></div>\n\t\t\t<div class=\"value\">{{itemValue('Netatmo_Indoor_Noise') | number:0}} dB</div>\n\t\t</div>\n\t</div>\n\n</div>\n\n\n\n<div class=\"section\">\n\n\t<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>\n\t<div class=\"title\">TV</div>\n\t<div class=\"controls\">\n\n\n    <div class=\"widget\" ng-if=\"itemValue('LG_TV0_Power')=='OFF'\" ng-click=\"sendCmd('LG_TV0_Power', 'ON')\">\n      <div class=\"icon off\" ><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#off\"></use></svg></div>\n      <div class=\"name\">Power</div>\n    </div>\n\n    <div class=\"widget\" ng-if=\"itemValue('LG_TV0_Power')=='ON'\" ng-click=\"sendCmd('LG_TV0_Power', 'OFF')\">\n      <div class=\"icon on\" ><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#on\"></use></svg></div>\n      <div class=\"name\">Power</div>\n    </div>\n\n    <div class=\"widget\" ng-if=\"itemValue('LG_TV0_Power')=='NULL'\" ng-click=\"sendCmd('LG_TV0_Power', 'ON')\">\n      <div class=\"icon off\" ><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#none\"></use></svg></div>\n      <div class=\"name\">Power</div>\n    </div>                \n\n    <div class=\"widget\" ng-class=\"{true: 'disabled'}[itemValue('LG_TV0_Power')=='OFF']\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#flat-tv\"></use></svg></div>\n\t\t\t<div class=\"name\">Input</div>\n\t\t\t<div class=\"appLogo\" ng-if=\"itemValue('LG_TV0_Application_Name')=='Netflix'\"><svg viewBox=\"0 0 440 100\"><use xlink:href=\"/static/matrix-theme/AppIcons.svg#netflix\"></use></svg></div>        \n\t\t\t<div class=\"appLogo\" ng-if=\"itemValue('LG_TV0_Application_Name')=='Amazon'\"><svg viewBox=\"0 0 440 100\"><use xlink:href=\"/static/matrix-theme/AppIcons.svg#amazon\"></use></svg></div>        \n\t\t\t<div class=\"appLogo\" ng-if=\"itemValue('LG_TV0_Application_Name')=='Youtube'\"><svg viewBox=\"0 0 440 100\"><use xlink:href=\"/static/matrix-theme/AppIcons.svg#youtube\"></use></svg></div>        \n\t\t\t<div class=\"appLogo\" ng-if=\"itemValue('LG_TV0_Application_Name')=='Apple TV'\"><svg viewBox=\"0 0 440 100\"><use xlink:href=\"/static/matrix-theme/AppIcons.svg#appletv\"></use></svg></div>        \n\t\t\t<div class=\"appLogo\" ng-if=\"itemValue('LG_TV0_Application_Name')!='Netflix' && itemValue('LG_TV0_Application_Name')!='Amazon' && itemValue('LG_TV0_Application_Name')!='Youtube' && itemValue('LG_TV0_Application_Name')!='Apple TV'\">{{itemValue('LG_TV0_Application_Name')}}</div>        \n\t\t\t<div class=\"controlGroup\">\n\t\t\t\t<div class=\"control\" ng-class=\"{true: 'on'}[itemValue('LG_TV0_Application')=='youtube.leanback.v4']\" ng-click=\"sendCmd('LG_TV0_Application', 'youtube.leanback.v4')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#logoYoutube\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-class=\"{true: 'on'}[itemValue('LG_TV0_Application')=='amazon.global']\" ng-click=\"sendCmd('LG_TV0_Application', 'amazon.global')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#logoAmazon\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-class=\"{true: 'on'}[itemValue('LG_TV0_Application')=='com.webos.app.hdmi1']\" ng-click=\"sendCmd('LG_TV0_Application', 'com.webos.app.hdmi1')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#logoApple\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-class=\"{true: 'on'}[itemValue('LG_TV0_Application')=='netflix']\" ng-click=\"sendCmd('LG_TV0_Application', 'netflix')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#logoNetflix\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-class=\"{true: 'on'}[itemValue('LG_TV0_Application')=='com.webos.app.livetv']\" ng-click=\"sendCmd('LG_TV0_Application', 'com.webos.app.livetv')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#flat-tv\"></use></svg></div>\n\t\t\t</div>\n\t\t</div>\n    \n    <div class=\"widget\" ng-class=\"{true: 'disabled'}[itemValue('LG_TV0_Power')=='OFF']\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#volume\"></use></svg></div>\n\t\t\t<div class=\"name\">Volume<div class=\"value\">{{itemValue('LG_TV0_Volume') * 100 | number:0}}</div></div>\n\t\t\t<div class=\"controlGroup\">\n\t\t\t\t<div class=\"control\" ng-click=\"sendCmd('LG_TV0_VolumeUp', 'ON')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#top-arrow-2\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-click=\"sendCmd('LG_TV0_VolumeDown', 'ON')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#down-arrow-2\"></use></svg></div>\n\t\t\t\t<div class=\"control on\" ng-if=\"itemValue('LG_TV0_Mute')=='ON'\" ng-click=\"sendCmd('LG_TV0_Mute', 'OFF')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#volume-close\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-if=\"itemValue('LG_TV0_Mute')!='ON'\" ng-click=\"sendCmd('LG_TV0_Mute', 'ON')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#volume-close\"></use></svg></div>\n\t\t\t</div>\n\t\t</div>\n\n    <div class=\"widget\" ng-class=\"{true: 'disabled'}[itemValue('LG_TV0_Application_Name')!='Live TV' || itemValue('LG_TV0_Power')=='OFF']\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#flat-tv\"></use></svg></div>\n\t\t\t<div class=\"name\">Channel<div class=\"value\">{{itemValue('LG_TV0_ChannelName')}}</div></div>\n\t\t\t<div class=\"controlGroup\">\n\t\t\t\t<div class=\"control\" ng-click=\"sendCmd('LG_TV0_ChannelUp', 'ON')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#top-arrow-2\"></use></svg></div>\n\t\t\t\t<div class=\"control\" ng-click=\"sendCmd('LG_TV0_ChannelDown', 'ON')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#down-arrow-2\"></use></svg></div>\n\t\t\t</div>\n\t\t</div>\n    \n\t</div>\n\n</div>\n\n<div class=\"section\">\n\n\t<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>\n\t<div class=\"title\">Music</div>\n\t<div class=\"controls\">\n\n\t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#line-visuals\"></use></svg></div>\n\t\t\t<div class=\"name\">Track</div>\n\t\t\t<div class=\"appLogo\"><svg viewBox=\"0 0 440 100\"><use xlink:href=\"/static/matrix-theme/AppIcons.svg#spotify\"></use></svg></div>        \n\t\t\t<div class=\"valueGroup\">\n\t\t\t\t<div class=\"value\">{{itemValue('spotify_current_track')}}</div>\n\t\t\t\t<div class=\"value\">{{itemValue('spotify_current_artist')}}</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"music\">\n\t\t\t\t<div class=\"cover\" ng-style=\"{'background-image': 'url(' + itemValue('spotify_current_cover') + ')'}\"></div>\n\t\t\t\t<div class=\"playback\">\n\t\t\t\t\t<div class=\"playbackTime\">{{ 946684800000 + itemValue('spotify_current_progress')*1 | date:'mm:ss'}}</div>\n\t\t\t\t\t<div class=\"playbackBar\"><div class=\"playbackBarDone\" ng-style=\"{'width': itemValue('spotify_current_progress_percent') + '%'}\"></div></div>\n\t\t\t\t\t<div class=\"playbackTime\">{{ 946684800000 + itemValue('spotify_current_duration')*1 | date:'mm:ss'}}</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"controlGroup\">\n\t\t\t\t\t<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>\n\t\t\t\t\t<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>\n\t\t\t\t\t<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>\n\t\t\t\t\t<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>\n\t\t\t\t</div>\n\t\t\t</div>      \n\t\t</div>\n\n\n\t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#line-visuals\"></use></svg></div>\n\t\t\t<div class=\"name\">Play Lists</div>\n\t\t\t<div class=\"sceneGroup\">\n\t\t\t\t<div class=\"scene\" ng-click=\"sendCmd('spotify_action', 'play spotify:user:spotify:playlist:37i9dQZF1DX5OepaGriAIm')\">Women of Jazz</div>\n\t\t\t\t<div class=\"scene\" ng-click=\"sendCmd('spotify_action', 'play spotify:user:spotify:playlist:37i9dQZF1DWSJHnPb1f0X3')\">Cardio</div>        \n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#volume\"></use></svg></div>\n\t\t\t<div class=\"name\">Volume<div class=\"value\">{{itemValue('spotify_current_volume')}}</div></div>\n\t\t\t<div class=\"controlGroup\">\n\t\t\t\t<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>\n\t\t\t\t<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>\n\t\t\t</div>\n\t\t</div>\n\n \t\t<div class=\"widget\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#box\"></use></svg></div>\n\t\t\t<div class=\"name\">Device</div>\n     \t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('spotify_current_device')}}</div></div>\t\t\t\n\t\t</div>\n\n\t\t<div class=\"widget\" ng-click=\"sendCmd('spotify_forceupadte', 'ON')\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#double-arrow\"></use></svg></div>\n\t\t\t<div class=\"name\">Update</div>\n     \t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('spotify_lastConnectionDateTime') | date:'MMM d, HH:mm:ss'}}</div></div>\t\t\t\n\t\t</div>\n\n  </div>\n\n</div>\n\n<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' } ]\">\n\t<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>\n  <div class=\"title\"><div class=\"name\">Lights</div><div class=\"summary\">ON: {{ ( filtered | filter: { state: 'ON' } ).length }} of {{filtered.length}}</div></div>\n  <div class=\"controls\">\n\n  <div ng-repeat=\"item in itemsInGroup('gGroundFloorLights').concat(itemsInGroup('gGroundFloorHue')) | filter:query as filtered\">\n    \n    <div class=\"widget\" ng-if=\"item.type=='Color' && itemValue(item.name + '_rgb')=='0,0,0'\" ng-click=\"showHueSelect = !showHueSelect\">\n      <div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#off\"></use></svg></div>\n      <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, 'OFF')\"><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>\n</div></div>{{item.label}}</div>\n    </div>\n\n    <div class=\"widget\" ng-if=\"item.type=='Color' && itemValue(item.name + '_rgb')!='0,0,0'\" ng-click=\"showHueSelect = !showHueSelect\">\n      <div class=\"icon on\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#on\"></use></svg></div>\n      <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, 'OFF')\"><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>\n</div></div>{{item.label}}</div>\n    </div>\n\n    <div class=\"widget\" ng-if=\"item.type=='Switch' && itemValue(item.name)=='OFF'\" ng-click=\"sendCmd(item.name, 'ON')\">\n      <div class=\"icon off\" ><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#off\"></use></svg></div>\n      <div class=\"name\">{{item.label}}</div>\n    </div>\n\n    <div class=\"widget\" ng-if=\"item.type=='Switch' && itemValue(item.name)=='ON'\" ng-click=\"sendCmd(item.name, 'OFF')\">\n      <div class=\"icon on\" ><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#on\"></use></svg></div>\n      <div class=\"name\">{{item.label}}</div>\n    </div>\n\n    <div class=\"widget\" ng-if=\"item.type=='Switch' && itemValue(item.name)=='NULL'\" ng-click=\"sendCmd(item.name, 'ON')\">\n      <div class=\"icon off\" ><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/matrixicons.svg#none\"></use></svg></div>\n      <div class=\"name\">{{item.label}}</div>\n    </div>\n    \n  </div>\n\n  </div>\n</div>\n\n<div class=\"section\">\n\t<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>\n  <div class=\"title\">Shutters</div>\n  <div class=\"controls\">\n\n  <div ng-repeat=\"item in itemsInGroup('gGroundFloorShutters')\">\n\n \t\t<div class=\"widget wide\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#window\"></use></svg></div>\n\t\t\t<div class=\"name\">{{item.label}}<div class=\"value\">{{item.value}}</div></div>\n\t\t\t<div class=\"controlGroup\">\n\t\t\t\t<div class=\"control\" ng-click=\"sendCmd(item.name, 'UP')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#top-arrow-2\"></use></svg></div>\n\t\t\t\t<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>\n\t\t\t\t<div class=\"control\" ng-click=\"sendCmd(item.name, 'DOWN')\"><svg viewBox=\"0 0 80 80\"><use xlink:href=\"/static/matrix-theme/squidink.svg#down-arrow-2\"></use></svg></div>\n\t\t\t</div>\n\t\t</div>\n    \n  </div>\n\n  </div>\n</div>\n\n\n<div class=\"section\">\n\t<div class=\"sectionIconContainer\"><div class=\"sectionIcon\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#thermometer-3\"></use></svg></div></div>\n  <div class=\"title\">Climate</div>\n  <div class=\"controls\">\n\n\n \t\t<div class=\"widget wide\">\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#thermometer-3\"></use></svg></div>\n\t\t\t<div class=\"name\">Thermostat<div class=\"value\">27.2 &#176C</div></div>\n\t\t\t<div class=\"controlGroup\">\n\t\t\t\t<div class=\"control\">22</div>\n\t\t\t\t<div class=\"control\">24</div>\n\t\t\t\t<div class=\"control\">26</div>\n\t\t\t\t<div class=\"control\">28</div>\n\t\t\t</div>\n\t\t</div>\n    \n\n  </div>\n</div>\n\n\n",
    "name": "Ground Floor"
}