Outdoor Widget.widget.json

{
    "template": "<div class=\"section\">\n\n  \t<div class=\"bigDash\">\n    <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_Outdoor_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#thermometer-3\"></use></svg></div>\n\t\t\t<div class=\"value\">feels like {{itemValue('Netatmo_Outdoor_Humidex') | number:0}} &#176C</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_Outdoor_Humidity') | number:0}} %</div>\n\t\t</div>\n\t</div>\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#umberla\"></use></svg></div>\n\t\t\t<div class=\"value\">\n\t\t\t\t<div class=\"main\">{{itemValue('Netatmo_Rain_Current') | number:1}}</div>\n\t\t\t\t<div class=\"sub\">mm</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#umberla\"></use></svg></div>\n\t\t\t<div class=\"value\">1h: {{itemValue('Netatmo_Rain_1Hour') | number:0}} mm</div>\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#umberla\"></use></svg></div>\n\t\t\t<div class=\"value\">24h: {{itemValue('Netatmo_Rain_24Hours') | number:0}} mm</div>\n\t\t</div>\n\t</div>  \n\n  <div class=\"bigDash\">\n\t\t<div class=\"top\">\n      <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>\n\t\t\t<div class=\"value\">\n\t\t\t\t<div class=\"main\">{{itemValue('Netatmo_Wind_Strength') | number:0}}</div>\n\t\t\t\t<div class=\"sub\">km/h</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"bottom\">\n      <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>\n\t\t\t<div class=\"value\">{{itemValue('Netatmo_Wind_Angle') | number:0}} &#176</div>\n\t\t\t<div class=\"icon off\"><svg viewBox=\"0 0 48 48\"><use xlink:href=\"/static/matrix-theme/squidink.svg#wind\"></use></svg></div>\n\t\t\t<div class=\"value\">{{itemValue('Netatmo_Gust_Strength') | number:0}} km/h ({{itemValue('Netatmo_Gust_Angle') | number:0}} &#176)</div>\n\t\t</div>\n\t</div>  \n\n</div>\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#stars\"></use></svg></div></div>\n\t<div class=\"title\">Astro</div>\n\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#half-light\"></use></svg></div>\n\t\t\t<div class=\"name\">Sunrise</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('Sunrise_Time') | date:'HH:mm'}}</div></div>\t\t\t\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#shade\"></use></svg></div>\n\t\t\t<div class=\"name\">Sunset</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('Sunset_Time') | date:'HH:mm'}}</div></div>\t\t\t\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#sun\"></use></svg></div>\n\t\t\t<div class=\"name\">Daylight</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('Daylight_Duration') | number:0}} min</div></div>\t\t\t\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#globe\"></use></svg></div>\n\t\t\t<div class=\"name\">Sun Azimuth</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('Sun_Azimuth')}}&#176</div></div>\t\t\t\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#sun-nwave\"></use></svg></div>\n\t\t\t<div class=\"name\">Sun Elevation</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('Sun_Elevation')}}&#176</div></div>\t\t\t\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#half-moon\"></use></svg></div>\n\t\t\t<div class=\"name\">Moon Phase</div>\n\t\t\t<div class=\"valueGroup\"><div class=\"value\">{{itemValue('Moon_Percent')}}%</div></div>\t\t\t\n\t\t</div>\n\n\t</div>\n\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/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('gOutdoorLights') | filter:query as filtered\">\n\n    <div class=\"widget wide\" ng-if=\"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 wide\" ng-if=\"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 wide\" ng-if=\"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",
    "name": "Outdoor Widget"
}