-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHomematic-Heater.widget.json
50 lines (50 loc) · 13.3 KB
/
Homematic-Heater.widget.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{
"name": "Homematic Heizung",
"settings": [
{
"type": "string",
"id": "modalId",
"default": "modal1",
"description": "unique ID when using more than one of this widgets"
},
{
"type": "checkbox",
"id": "showtitle",
"label": "Show Room title",
"default": false
},
{
"type": "string",
"id": "title",
"label": "Title"
},
{
"type": "icon",
"id": "backdrop",
"label": "Icon"
},
{
"type": "item",
"id": "item",
"label": "Room Item",
"description": "Please select a Heater (like hm-rpc.1.000XXXXXXXXX)"
},
{
"type": "choice",
"label": "Select persistence instance",
"id": "persistence",
"choices": "None,sql.0,history.0,influxdb.0",
"description": "Enable chart display by selecting an persistence instance here."
},
{
"type": "string",
"id": "quickValues",
"label": "Quick select",
"default": "16 18 20 22",
"description": "List of temperature values for quick selection"
}
],
"author": "Robert Gröber",
"description": "Homematic heater display and control",
"template": "<!--\n Heater widget for habpanel in iobroker using Homematic devices\n\n Author: Robert Gröber\n Version: 1.0\n\n-->\n<style>\n .homematic-wrapper {\n cursor: pointer;\n \tposition:relative;\n \tz-index:99;\n }\n .heat-demand, \n\t.temperature {\n \tdisplay:inline-block;\n \tfont-size: 3vw;\n }\n .temperature .unit {\n \tfont-size: 2vw;\n }\n .set-temperature {\n \tfont-size: 1.4vw;\n color: #0db9f0;\n }\n\t.mode-selection, .boost-selection, .heater-mode, .profile-selection {\n \tfont-size: 1.4vw;\n }\n .low-batt .glyphicon {\n \tcoor: red;\n }\n .mode-selection, .boost-selection, .profile-selection {\n \theight: 250px;\n }\n \n widget-icon.window-open {\n filter: invert(75%) sepia(100%) hue-rotate(350deg) saturate(10000%);\n }\n \n .close { height: 50px; }\n \n .quick { }\n \n .icon-manual {\n display: inline-block;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAItSURBVFhH7ZZNiE5RHIcPY4caIV9Ng7JCKcmUfMVs7GxYWChJKZ+xkA0lNSsUShY+0ixtWIiihFKUz1IsbBT5KBRSxPOc877Nmxo557xDU556mv//TO89v3vuvefeMNzZgdfxOI5z4G+yH3/geXyDt3AV7sJlOCRsxYd4BT/jXpQ5aBg1jH+3Y1txcg98Em826jUoU9B+c+xC6MNPqWwfnnl/KsNI/IIbYxdCNxpgfuzSJbBf3HAsVvMYj6QyjMD3uCl2AwEWxS5N+h0d01foZarCFTiWyjAKP+BgAZai/W6cgQ/wKlaRE2AF2k+IXQg78V0qy8kJsBLtJ8cu3cD/JIBPh/hIvk1lOf8D/BrACby24p1u790vvWg/NXYFATyjbbgWfeblETYDyCFcmMowBk9gV+wGnoJJscsM4G7mNuoSe5AbaIg72BrgdxhoOTbDZwVww7iNLvMsdMs91Rg7iiVkBfBan0tlZAm6Et/woAMFZAXYgk44MXYJt1THvO4lZAXoQN/pLnsrZ3FDKrPJCiDr0DOeGbt6sgPIM7yUymp8pLMDtH5U1LIHX6YyD7/9nqayCu+ne6nMYzq6Ci5hDc+xdA8J+9AQbs8lzEN/39y2i7iPT9DdMRd30KLlb2UafsRrONqBP+QwevZzY1fJbHyN3s3rsRMHw+X2neLkqx1oF+PxNHrgr+h74wKeQXfKy/gC/f9dXIBDgh8aroLfAE7qddaLeAB7cDgQwk846KEsGi9ZhgAAAABJRU5ErkJggg==);\n \twidth: 32px;\n height: 32px;\n filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(70deg) brightness(95%) contrast(80%);\n }\n \n .icon-clock {\n display: inline-block;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADHUlEQVRYhaWXT0gVURTGvzuIhMTjIS5ERCQiWkSIhYsWEVSblhEREdEqwkUEhUS7aCHRIiSiRUSroIiIgojoHxEVIWESESGkZhESYWZmJvJrMXfwvvvuzFzrrGbO/c73nXvm/jljFGlAg6RNkrZL6pa0SlKzpETSd0kfJb2W9FDSI2PM71juMuEW4BTwhXibAgaA9v8RToBeS/avNgecBBqXK14F7uaQLgLDwA3HdwcYBBZyYgaBjljxNuBtgGQEOAK0WlwD8BWYd3xV4AAwFIj/DKyLmbkvPgscJl2EPr4zREr6+fYB3zyuL0BnnnhiS+naOLC+IOG1QHfBeEegGkPAihD4YEC88LsBT4CJEkwVeOVxn/ZBFfs93bJ3FRHbuBFgPgLXBkw6/PPAahdw3Muwr4zUxmWk9SWtx+7yNC5lAwkw6gxMELlvSfc5QHMEVsALr8rVRNJGSZ0O9oIx5k8EYaOkbOZNZXhjjCSddVxNknYkkjZ72KtlZNZW5jwX2W1JP533rYmkDY7jgzHmQyRZJec51+wF9dxxdSVKb7XMxoDS2QCS5G6lgZh1YxfrJ8fVIeC9tzrnKDhcLNE66m1XSUwr9SfjVBLAhnwxmKNA0WJMgnHASyejh0C1TN1uqeuBKtwEcicANAGXHfykgGuOY6RM3CFLgC3ABS+JcyVx9xzsoIA+j6AzNgmH9Bhpn5DZsRxcIzDj4C4K6PESOL7cBCz5XtIzHpvMzgBmp6e1JyvluOMcZ7kt1JLANmDa8swAa5wxAU8dnVmgkg2e8DILljAyiS7S+2QR6CmY/SU3qErtHp2loBGJSKLFm30rtV31gjuegQ55GY7yP231Em+FtCl17UwImFDfCY9S1kgWi7cFxN+Q1z8AzcA7L6CoKe0A1gb8AnZT2wVh31f7eD+4PZAEpHdGL9BicYkldNvyCrA/MOtMPG5dkS6i+wESSBfQEHDF8d0CnrF0Dvg2DKwqV65NIrGln84hjbF5oJ+InrGsGv3Uf88imwbOE3Gsm2Uk0iBpi6Stqv09l6QfksaU/p4/lvTAGPMrhvcvqLlKj5NrlGYAAAAASUVORK5CYII=);\n \twidth: 32px;\n height: 32px;\n filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);\n }\n \n</style>\n\n<div ng-init=\"config.id=config.item.replace('.','')\"/>\n\n<script type=\"text/ng-template\" id=\"modal-heater\">\n <a class=\"btn btn-default close\" ng-click=\"$close()\">close</a>\n <div class=\"container\">\n \n <div ng-if=\"config.persistence != 'None'\">TODO Chart</div>\n <!-- Chart \n <div ng-if=\"config.persistence != 'None'\" ng-init='data={\n \"name\": \"Temperature\",\n \"sizeX\": 12,\n \"sizeY\": 6,\n \"item\": \"sql.0\",\n \"type\": \"chart\",\n \"row\": 6,\n \"col\": 0,\n \"charttype\": \"interactive\",\n \"period\": \"D\",\n \"axis\": {\n \"y\": {\n \"includezero\": true\n }\n },\n \"series\": [\n {\n \"axis\": \"y\",\n \"display_line\": true,\n \"display_area\": true,\n \"item\": config.item + \".1.ACTUAL_TEMPERATURE\",\n \"name\": \"Actual Temperature\",\n \"color\": \"#FF0000\"\n },\n {\n \"axis\": \"y\",\n \"display_line\": true,\n \"display_area\": true,\n \"item\": config.item + \".1.SET_POINT_TEMPERATURE\",\n \"name\": \"Actual Temperature\",\n \"color\": \"#FF0000\"\n }\n \n ]\n }'/>\n \n <widget-chart ng-if=\"config.persistence != 'None'\" ng-model=\"data\" />-->\n \n \n <!-- Set Point -->\n <div class=\"col-sm-12\" ng-init=\"setpointmodel={ \n name: 'Setpoint', \n item: config.item + '.1.SET_POINT_TEMPERATURE', \n floor: 0, \n ceil: 30, \n step: 0.5,\n hidelabel: true,\n bigslider: true,\n unit: '°C'\n }\">\n <widget-slider ng-model=\"setpointmodel\"></widget-slider>\n </div>\n \n <!-- quick values -->\n <div ng-init=\"quick=config.quickValues.split(' ')\"></div>\n <div class=\"quick col-sm-12\" ng-if=\"quick.length > 0\">\n <ul>\n <li ng-repeat=\"val in quick\" class=\"col-sm-{{12/quick.length}}\">\n <button class=\"btn btn-primary\" \n ng-click=\"sendCmd(config.item+'.1.SET_POINT_TEMPERATURE', val)\">{{val}} °C</button>\n </li>\n </ul>\n </div>\n \n <div ng-if=\"itemValue(config.item + '.1.LEVEL')\" class=\"heater-level\">\n <span>Level: {{itemValue(config.item + '.1.LEVEL')}}</span>\n </div>\n \n <!-- Mode -->\n <div class=\"col-sm-4\">\n <div class=\"box\">\n <div class=\"box-content mode-selection\" ng-init=\"modemodel={\n name: 'Mode',\n item: config.item + '.1.SET_POINT_MODE',\n square: true,\n choices_columns: 2,\n choices_source: 'csv',\n no_highlight: true,\n hidestate: false,\n choices: '0=Auto,1=Manual'\n };\">\n <widget-selection ng-model=\"modemodel\"></widget-selection>\n </div>\n </div>\n </div>\n \n <!-- Profile -->\n <div class=\"col-sm-4\">\n <div class=\"box\">\n <div class=\"box-content profile-selection\" ng-init=\"profilemodel={\n name: 'Profile',\n item: config.item + '.1.ACTIVE_PROFILE',\n square: true,\n choices_columns: 1,\n choices_source: 'csv',\n no_highlight: true,\n hidestate: false,\n choices: '1,2,3'\n };\">\n <widget-selection ng-model=\"profilemodel\"></widget-selection>\n </div>\n </div>\n </div>\n\n <!-- Boost -->\n <div class=\"col-sm-4\">\n <div class=\"box\">\n <div class=\"box-content boost-selection\" ng-init=\"boostmodel = {\n name: 'Boost',\n item: config.item + '.1.BOOST_TIME',\n square: true,\n choices_columns: 3,\n choices_source: 'csv',\n no_highlight: true,\n hidestate: false,\n choices: '0=Off,60=1 minute,300=5 minutes,3600=1 hour'\n };\">\n <widget-selection ng-model=\"boostmodel\"></widget-selection>\n </div>\n </div>\n </div>\n \n </div>\n</script>\n<div ng-init=\"winOpen = itemValue(config.item + '.1.WINDOW_STATE') == 1 || itemValue(config.item + '.1.STATE') == 1\"/>\n<widget-icon ng-if=\"config.backdrop\" iconset=\"config.backdrop_iconset\" icon=\"config.backdrop\"\n backdrop=\"true\" center=\"true\"></widget-icon>\n\n<div class=\"homematic-wrapper\" ng-click=\"openModal('modal-heater', true, 'lg')\" ng-class=\"{window-open: winOpen}\">\n <div class=\"room-title\" ng-if=\"config.showtitle\">\n \t<h2>{{config.title}}</h2> <span>{{config.name}}</span>\n </div>\n\n <!-- Heat Demand Icon -->\n <div class=\"heat-demand\" ng-if=\"itemValue(config.item + '.1.LEVEL') > 1\">\n {{itemValue(config.item + '.1.LEVEL')}}\n <!--img width=\"16px\" height=\"16px\" ng-src=\"assets/icons/eclipse-smarthome-classic/fire.svg\" title=\"fire\" src=\"assets/icons/eclipse-smarthome-classic/fire.svg\" /-->\n </div>\n \n <!-- Window Icon -->\n <!--div class=\"window-open\" ng-if=\"itemValue(config.item + '.1.WINDOW_STATE') == 1 || itemValue(config.item + '.1.STATE') == 1\">\n <img width=\"16px\" height=\"16px\" ng-src=\"assets/icons/freepik-household/window-5.svg\" title=\"window open\" src=\"assets/icons/freepik-household/window-5.svg\" />\n </div-->\n <widget-icon class=\"window-open\" ng-if=\"itemValue(config.item + '.1.WINDOW_STATE') == 1 || itemValue(config.item + '.1.STATE') == 1\" size=\"16\" inline=\"true\" iconset=\"'freepik-household'\" icon=\"'window-5'\" ></widget-icon>\n \n <!-- Display Temperature -->\n <div class=\"temperature\">{{'%.1f' | sprintf:itemValue(config.item + '.1.ACTUAL_TEMPERATURE')}}<span class=\"unit\">°C</span></div> \n <div class=\"set-temperature\">{{'%.1f' | sprintf:itemValue(config.item + '.1.SET_POINT_TEMPERATURE')}}<span class=\"unit\">°C</span></div> \n\n <!-- Display Mode -->\n <div class=\"heater-mode\" ng-if=\"itemValue(config.item + '.1.SET_POINT_MODE') == 0\">\n \t<span><i class=\"icon-clock\"></i>Auto {{itemValue(config.item + '.1.ACTIVE_PROFILE')}}</span>\n </div>\n <div class=\"heater-mode\" ng-if=\"itemValue(config.item + '.1.SET_POINT_MODE') == 1\">\n \t<span><i class=\"icon-manual\"></i>Manual</span>\n </div>\n \n <!-- Display Boost -->\n <div class=\"low-batt\" ng-if=\"itemValue(config.item + '.0.LOW_BAT') == 'true'\">\n <i class=\"glyphicon glyphicon-exclamation-sign\" ></i>\n <span class=\"boost-remaining\">LOW BATTERY</span>\n </div>\n \n\t<!-- Display Boost -->\n <div class=\"boost-remaining\" ng-if=\"itemValue(config.item + '.1.BOOST_MODE') == 'true'\">\n <i class=\"glyphicon glyphicon-fire\" alt=\"boosting\"></i>\n <span class=\"boost-remaining\">Boosting {{itemValue(config.item + '.1.BOOST_TIME')}} sec</span>\n </div>\n\n</div>"
}