-
Notifications
You must be signed in to change notification settings - Fork 2
/
CT100.widget.json
47 lines (47 loc) · 13.7 KB
/
CT100.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
{
"name": "CT100",
"author": "BK Hobby (www.youtube.com/c/BKHobby)",
"description": "Widget for the CT100 Thermostat (based on Tim Rogers's ecobee Widget, adapted for the simpler CT100 controls)",
"settings": [
{
"type": "item",
"id": "hvac_mode",
"label": "HVAC Mode"
},
{
"type": "item",
"id": "temperature",
"label": "Temperature"
},
{
"type": "item",
"id": "humidity",
"label": "Humidity"
},
{
"type": "item",
"id": "desired_heat",
"label": "Desired Heat",
"default": "70"
},
{
"type": "item",
"id": "desired_cool",
"label": "Desired Cool",
"default": "70"
},
{
"type": "item",
"id": "hvac_opstate",
"label": "HVAC Operational State",
"default": "0"
},
{
"type": "item",
"id": "hvac_fanstate",
"label": "HVAC Fan State",
"default": "0"
}
],
"template": "<style>\n.ct100-table {\n width: 100%;\n height: 100%;\n padding: 10px;\n border: 0px;\n}\n.ct100-table td {\n border: 0px solid white;\n}\n\nbutton#single-button.mode {\n background-color: transparent;\n background-repeat:no-repeat;\n border: none;\n overflow: hidden;\n}\nimg.mode-icon {\n height: 40px;\n}\nul.dropdown-menu {\n text-align: center;\n background: transparent;\n border: 0px;\n} \nul.dropdown-menu li {\n border: 1px solid black;\n background: #fff;\n border-collapse: separate;\n border-radius: 5px;\n}\n \n.humidity-icon {\n height: 12px;\n}\n\n.temperature-row {\n height: 1px;\n padding: 0px;\n}\n.main-temperature-temp {\n font-size: 48px;\n text-align: right;\n line-height: 1em;\n width: 45%;\n}\n\n.humidity-row {\n text-align: center;\n}\n\n.remotesensor-row {\n text-align: center;\n}\n \n.main-temperature-sign {\n font-size: 24px;\n text-align: left;\n width: 30%;\n vertical-align: top;\n}\n\n.heatcool-value-table {\n text-align: center;\n border: 1px solid white;\n padding-left: 5px;\n padding-right: 5px;\n padding-top: 2px;\n padding-bottom: 2px;\n margin: auto;\n border-collapse: separate;\n border-radius: 5px;\n}\n\n.heatcool-value-table-text {\n color: #FFFFFF;\n border: 1px;\n padding-left: 5px;\n padding-right: 5px;\n padding-top: 2px;\n padding-bottom: 2px;\n white-space: nowrap;\n}\n\n.resume-table {\n text-align: center;\n border: 1px solid white;\n padding-left: 5px;\n padding-right: 5px;\n padding-top: 2px;\n padding-bottom: 2px;\n margin: auto;\n border-collapse: separate;\n border-radius: 5px;\n}\n\n.resume-table-text {\n color: #999999;\n border: 0px;\n padding-left: 5px;\n padding-right: 5px;\n padding-top: 2px;\n padding-bottom: 2px;\n white-space: nowrap;\n font-size: 90%;\n font-style: italic; \n}\n \nbutton.resume-schedule {\n color: #000;\n background: #fff;\n border-radius: 9px;\n width: 17px;\n height: 17px;\n text-align: left;\n padding: 0px;\n top: 5px;\n}\n\ni#resume-schedule.glyphicon.glyphicon-remove {\n top: -1px;\n left: -1px;\n}\n\ndiv.slider-div {\n height: 150px;\n width: 35px;\n}\n\ntd.slider-td {\n width: 50%;\n height: 100%;\n}\n \n#heat-slider {\n position: relative;\n display: inline-block;\n width: 100%;\n height: 100%;\n margin: 0 0 0 0;\n vertical-align: middle;\n align: left;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n#heat-slider .rz-pointer:after {\n position: absolute;\n top: 7px;\n left: 7px;\n width: 6px;\n height: 6px;\n background: #ffffff;\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n content: '';\n}\n \n#heat-slider .rz-pointer {\n top: -8px;\n z-index: 3;\n width: 20px;\n height: 20px;\n cursor: pointer;\n background-color: #FFAA00;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n border-radius: 10px;\n}\n \n#heat-slider .rz-bubble {\n bottom: 10px;\n padding: 1px 3px;\n color: #FFAA00;\n cursor: default;\n}\n\n#heat-slider .rz-bubble.rz-selection {\n top: 8px;\n}\n \n#heat-slider .rz-pointer.rz-active {\n z-index: 10;\n}\n\n#heat-slider .rz-pointer.rz-active:after {\n background-color: #FFAA00;\n}\n \n#heat-slider .rzslider.rz-vertical {\n position: relative;\n width: 4px;\n height: 100%;\n padding: 0;\n margin: 0 10px;\n vertical-align: baseline;\n}\n\n#heat-slider .rzslider.rz-vertical .rz-base {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n#heat-slider .rzslider.rz-vertical .rz-bar-wrapper {\n top: auto;\n left: 0;\n width: 16px;\n height: 100%;\n padding: 0 0 0 8px;\n margin: 0 0 0 -8px;\n}\n\n#heat-slider .rzslider.rz-vertical .rz-bar {\n bottom: 0;\n left: auto;\n width: 4px;\n height: 100%;\n}\n\n#heat-slider .rzslider.rz-vertical .rz-pointer {\n top: auto;\n bottom: 0;\n left: -8px !important;\n}\n\n#heat-slider .rzslider.rz-vertical .rz-bubble {\n bottom: 100px !important;\n left: -30px !important;\n margin-left: 3px;\n font-size: 250% \n}\n\n \n#heat-slider .rzslider.rz-vertical .rz-selection {\n top: auto;\n left: 8px !important;\n} \n\n#heat-slider .rzslider .rz-bar.rz-selection {\n background-color: #FFAA00;\n}\n\n#cool-slider {\n position: relative;\n display: inline-block;\n width: 100%;\n height: 100%;\n margin: 0 0 0 0;\n vertical-align: middle;\n align: left;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n#cool-slider .rz-pointer:after {\n position: absolute;\n top: 7px;\n left: 7px;\n width: 6px;\n height: 6px;\n background: #ffffff;\n -webkit-border-radius: 3px;\n -moz-border-radius: 3px;\n border-radius: 3px;\n content: '';\n}\n\n#cool-slider .rz-pointer {\n top: -8px;\n z-index: 3;\n width: 20px;\n height: 20px;\n cursor: pointer;\n background-color: #0db9f0;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n border-radius: 10px;\n}\n \n#cool-slider .rz-bubble {\n bottom: 10px;\n padding: 1px 3px;\n color: #0db9f0;\n cursor: default;\n}\n\n#cool-slider .rz-bubble.rz-selection {\n top: 8px;\n}\n \n#cool-slider .rz-pointer.rz-active {\n z-index: 10;\n}\n\n#cool-slider .rz-pointer.rz-active:after {\n background-color: #0db9f0;\n}\n \n#cool-slider .rzslider.rz-vertical {\n position: relative;\n width: 4px;\n height: 100%;\n padding: 0;\n margin: 0 10px;\n vertical-align: baseline;\n}\n\n#cool-slider .rzslider.rz-vertical .rz-base {\n width: 100%;\n height: 100%;\n padding: 0;\n}\n\n#cool-slider .rzslider.rz-vertical .rz-bar-wrapper {\n top: auto;\n left: 0;\n width: 16px;\n height: 100%;\n padding: 0 0 0 8px;\n margin: 0 0 0 -8px;\n}\n\n#cool-slider .rzslider.rz-vertical .rz-bar {\n bottom: 0;\n left: auto;\n width: 4px;\n height: 100%;\n}\n\n#cool-slider .rzslider.rz-vertical .rz-pointer {\n top: auto;\n bottom: 0;\n left: -8px !important;\n}\n\n#cool-slider .rzslider.rz-vertical .rz-bubble {\n bottom: -45px !important;\n left: -20px !important;\n margin-left: 3px;\n font-size: 250% \n}\n\n#cool-slider .rzslider.rz-vertical .rz-selection {\n top: auto;\n left: 8px !important;\n} \n\n#cool-slider .rzslider .rz-bar.rz-selection {\n background-color: #0db9f0;\n} \n</style>\n<table class=\"ct100-table\">\n <tr id=\"mode-row\">\n <td colspan=2 align=\"center\">\n <div class=\"hvacMode\" uib-dropdown>\n <button id=\"single-button\" class=\"mode\" uib-dropdown-toggle>\n <img class=\"mode-icon\" src=\"/static/images/ct100/{{itemValue(config.hvac_mode) | lowercase}}.png\"/>\n </button>\n <ul class=\"dropdown-menu\" uib-dropdown-menu role=\"menu\" aria-labelledby=\"single-button\">\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.hvac_mode, '1')\"><b>Heat</b></a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.hvac_mode, '2')\"><b>Cool</b></a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.hvac_mode, '3')\"><b>Auto</b></a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.hvac_mode, '0')\"><b>Off</b></a></li>\n </ul>\n </div>\n </td>\n <td rowspan=5 class=\"slider-td\" width=\"20%\" height=\"100%\" align=\"left\">\n <div class=\"slider-div\" ng-if=\"itemValue(config.hvac_mode) == '1'\">\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'F'\" \n ng-init='heatmodel={\"name\": \"Heat\", \"item\": config.desired_heat, \n \"vertical\" : \"true\", \"floor\" : 50, \"ceil\": 80, \"step\": 1,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"heatmodel\" id=\"heat-slider\"/>\n </div>\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'C'\"\n ng-init='heatmodel={\"name\": \"Heat\", \"item\": config.desired_heat, \n \"vertical\" : \"true\", \"floor\" : 18, \"ceil\": 25, \"step\": 0.5,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"heatmodel\" id=\"heat-slider\"/>\n </div>\n </div>\n <div class=\"slider-div\" ng-if=\"itemValue(config.hvac_mode) == '2'\">\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'F'\" \n \t\t\t\t\t\t\t\tng-init='coolmodel={\"name\": \"Cool\", \"item\": config.desired_cool, \n \"vertical\" : \"true\", \"floor\": 60, \"ceil\": 90, \"step\": 1,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"coolmodel\" id=\"cool-slider\"/>\n </div>\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'C'\"\n ng-init='coolmodel={\"name\": \"Cool\", \"item\": config.desired_cool, \n \"vertical\" : \"true\", \"floor\" : 20, \"ceil\": 30, \"step\": 0.5,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"coolmodel\" id=\"cool-slider\"/>\n </div>\n </div>\n <div class=\"slider-div\" ng-if=\"itemValue(config.hvac_mode) == '3'\">\n <table width=\"100%\" height=\"100%\"><tr>\n <td width=\"50%\">\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'F'\" \n \t\t\t\t\t\tng-init='heatmodel={\"name\": \"Heat\", \"item\": config.desired_heat, \n \"vertical\" : \"true\", \"floor\": 50, \"ceil\": 80, \"step\": 1,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"heatmodel\" id=\"heat-slider\"/>\n </div>\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'C'\"\n \t\t\t\t\t\tng-init='heatmodel={\"name\": \"Heat\", \"item\": config.desired_heat, \n \"vertical\" : \"true\", \"floor\": 18, \"ceil\": 25, \"step\": 0.5,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"heatmodel\" id=\"heat-slider\"/>\n </div>\n </td>\n <td width=\"50%\">\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'F'\" \n \t\t\t\t\t\tng-init='coolmodel={\"name\": \"Cool\", \"item\": config.desired_cool, \n \"vertical\" : \"true\", \"floor\": 60, \"ceil\": 90, \"step\": 1,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"coolmodel\" id=\"cool-slider\"/>\n </div>\n \t\t\t <div class=\"slider-div\" ng-if=\"itemValue(config.temperature).split('°')[1].substring(0,1) == 'C'\"\n \t\t\t\t\t\tng-init='coolmodel={\"name\": \"Cool\", \"item\": config.desired_cool, \n \"vertical\" : \"true\", \"floor\": 20, \"ceil\": 30, \"step\": 0.5,\n \"hidelabel\" : \"true\", \"hidelimits\": \"true\" }'>\n <widget-slider ng-model=\"coolmodel\" id=\"cool-slider\"/>\n </div>\n </td> \n </tr>\n </table>\n </div>\n </td>\n </tr>\n <tr><td colspan=2 class=\"humidity-row\">\n <img class=\"humidity-icon\" src=\"/static/images/ct100/drop.png\"/> {{itemValue(config.humidity)}}%</td>\n </tr> \n <tr class=\"temperature-row\">\n <td class=\"main-temperature-temp\">{{itemValue(config.temperature)}}</td>\n\t\t\t<td class=\"main-temperature-sign\">\n <div> </div>\n\t\t\t</td>\n </tr>\n <tr id=\"opstate-row\">\n <td colspan=2 align=\"center\">\n Opstate {{itemValue(config.hvac_opstate)}}<br/>\n <img class=\"mode-icon\" src=\"/static/images/ct100/{{itemValue(config.hvac_opstate) | lowercase}}.png\"/>\n </td>\n \t</tr>\n \t<tr id=\"fanstate-row\">\n <td colspan=2 align=\"center\">\n Fan state {{itemValue(config.hvac_fanstate)}}<br/>\n <img class=\"mode-icon\" src=\"/static/images/ct100/{{itemValue(config.hvac_fanstate) | lowercase}}.png\"/>\n </td>\n \t</tr>\n</table>"
}