Last few steps to transition to DB2, the biggest hurdle is a thermostat page. In db1 someone was kind enough to provide one they had made and I am not getting this thing ported over to db2. I have no artistic ability and worse coding skills. Does anyone have a db2 thermostat they would be willing to share? I have the underlying code it's the GUI I need.
Thanks
1 Like
Any pointer to original maybe?
When it get home I'll upload what I got
here's my flow
[
{
"id": "23d32c0dea175a73",
"type": "ui_template",
"z": "8ed576ccafab6085",
"group": "afce36b797db043a",
"name": "Thermostat Template",
"order": 1,
"width": "6",
"height": "4",
"format": "<style>\n . {\n box-sizing: border-box;\n font-family: \"Roboto\", \"Helvetica Neue\", sans-serif;\n }\n\n .container {\n display: flex;\n width: 100%;\n height: 100%;\n background-color: #303030;\n }\n\n\n .centerme {\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n margin: 4px;\n }\n\n .roundme {\n border: 2px solid black;\n border-radius: 8px;\n background-color: #222222;\n box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n background: rgb(5, 5, 5);\n background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%);\n margin: 3px;\n }\n\n .roundme2 {\n border: 2px solid black;\n border-radius: 8px;\n background-color: #222222;\n box-shadow: inset 2px 2px 3px 4px rgba(0, 0, 0, 0.1);\n background: rgb(5, 5, 5);\n margin: 3px;\n }\n\n .blank {\n border: #303030;\n border-radius: 8px;\n background-color: #303030;\n box-shadow: inset 2px 2px 3px 4px #303030;\n background: #303030;\n background: linear-gradient(135deg, #303030 0%, #303030);\n margin: 3px;\n }\n\n .a1 {\n /* background-color:red; */\n height: 25px;\n margin-bottom: 1px;\n font-size: 16px;\n color: #6689A1;\n padding-bottom: 4px;\n border-bottom: 2px solid #DD7F00;\n\n }\n\n .a2 {\n /* background-color:red; */\n height: 100%;\n margin-top: 1px;\n font-size: 60px;\n color: #D7DBDD;\n\n }\n\n .b1 {\n color: #6689A1;\n height: 25px;\n margin-bottom: 1px;\n font-size: 16px;\n padding-bottom: 4px;\n border-bottom: 2px solid #DD7F00;\n }\n\n .b2 {\n height: 100%;\n margin-top: 1px;\n font-size: 28px;\n color: #D7DBDD;\n }\n\n .gradient-2 {\n background: linear-gradient(135deg, rgba(5, 5, 5, 1) 0%, rgba(42, 42, 42, 1) 100%) padding-box,\n linear-gradient(to right, #F16F0F, #F43700) border-box;\n margin-top: 14px;\n border-radius: 20px;\n border: 6px solid transparent;\n }\n\n .red_color {\n color: #FF0000;\n }\n\n .grey_color {\n color: #444444;\n }\n\n .green_color {\n color: #008000;\n }\n\n .blue_color {\n color: #00DAF4;\n }\n\n\n .otstatus {\n padding-left: 6px;\n padding-top: 2px;\n font-size: 14px;\n\n }\n\n @keyframes fire {\n from {\n color: #FF5B33;\n }\n\n 50% {\n color: #FFAC33;\n }\n\n to {\n color: #FF5B33;\n }\n }\n\n .on_fire {\n animation-name: fire;\n animation-duration: 2000ms;\n animation-iteration-count: infinite;\n }\n\n @keyframes water {\n from {\n color: #ADD8E6;\n }\n\n 50% {\n color: #0000CD;\n }\n\n to {\n color: #ADD8E6;\n }\n }\n\n .on_water {\n animation-name: water;\n animation-duration: 2000ms;\n animation-iteration-count: infinite;\n }\n</style>\n\n<div class=\"container\" layout=\"column\">\n <div layout=\"row\" flex=\"80\">\n <div layout=\"column\" flex=\"50\" class=\"roundme\">\n <div class=\"a1 centerme\">Temp Ambient</div>\n <div class=\"a2 centerme\" ng-class=\"temp_amb_status\" ng-model=\"temp_amb_status\"\n ng-bind-html=\"temp_amb_ | number: 1\"></div>\n </div>\n\n <div flex=\"50\" layout=\"column\">\n <div flex=\"70\" layout=\"row\">\n\n <div layout=\"column\" flex=\"60\" class=\"roundme\">\n <div class=\"b1 centerme\">Temp Set</div>\n <div class=\"b2 centerme\" ng-bind-html=\"temp_set_ | number: 1\"></div>\n </div>\n\n <div flex=\"40\" layout=\"column\">\n <div flex=\"50\" class=\"centerme roundme\" ng-click=\"click_power();\">\n <md-icon md-font-icon=\"power_settings_new\" style=\"font-size:32px\" ng-class=\"power_status_icon\">\n </md-icon>\n </div>\n <div flex=\"50\" class=\"centerme roundme\">\n <md-icon md-font-icon=\"local_fire_department\" style=\"font-size:32px\"\n ng-class=\"heating_status_icon\"></md-icon>\n </div>\n </div>\n\n </div>\n\n <div layout=\"row\" style=\"height:100% \">\n <div layout=\"row\" style=\"height:100%\">\n <md-button flex=\"20\" class=\"centerme blank\"\">\n\t\t\t\t\t</md-button>\n </div>\n\t\t\t\n <div layout=\" row\" style=\"height:100%\">\n <md-button flex=\"100\" class=\"centerme roundme\" ng-click=\"click_temp_minus()\">\n <md-icon md-font-icon=\"remove\" style=\"color:white;font-size:32px\"></md-icon>\n </md-button>\n </div>\n\n <div layout=\"row\" style=\"height:100%\">\n <md-button flex=\"20\" class=\"centerme blank\"\">\n </md-button>\n </div>\n\t\t\t\t\n <div layout=\" row\" style=\"height:100% \">\n <md-button flex=\"100\" class=\"centerme roundme\" ng-click=\"click_temp_plus()\">\n <md-icon md-font-icon=\"add\" style=\"color:white;font-size:32px\"></md-icon>\n </md-button>\n </div>\n </div>\n\n </div>\n </div>\n\n\n\n <div layout=\"row\" style=\"height:25% \">\n\n\n <div layout=\"row\" style=\"height:100%;width: 85%; margin: 3px 3px 10px 3px\">\n <md-button flex=\"100\" class=\"centerme roundme\" ng-click=\"click_fan()\">\n <md-icon md-font-icon=\"wind_power\" style=\"font-size:32px\" ng-class=\"fan_icon\"></md-icon>\n </md-button>\n </div>\n <div layout=\"row\" style=\"height:100%;width: 15%; margin: 3px 3px 10px 3px\">\n <md-button flex=\"100\" class=\"centerme roundme\" ng-click=\"click_units()\">\n <md-icon md-font-icon=\"settings\" style=\"font-size:32px\" ng-class=\"units_icon\"></md-icon>\n </md-button>\n </div>\n\n\n </div>\n\n <script>\n (function(scope) {\n\n scope.$watch('msg', function(msg) \n {\n\n if(msg.fan == \"on\") {\n scope.fan_icon = \"on_water\";\n }\n if(msg.fan == \"off\") {\n scope.fan_icon = \"grey_color\";\n }\n\n if(msg.error==0) {\n scope.units_icon = \"green_color\";\n }\n if(msg.error==1) {\n scope.units_icon=\"red_color\";\n }\n\t\t\t\n // scope.units_icon = \"grey_color\";\n\t\t\n if(msg.hasOwnProperty('temp_set')) {\n scope.temp_set_ = msg.temp_set;\n }\n\n if(msg.hasOwnProperty('temp_amb')) {\n scope.temp_amb_ = msg.temp_amb;\n }\n\n if(msg.heating_status==\"true\") {\n scope.temp_amb_status=\"gradient-2\";\n }\n if(msg.heating_status==\"false\") {\n scope.temp_amb_status=\"\";\n } \n \n\n // Power status check \n if(msg.power_status==true) {\n scope.power_status_icon=\"blue_color\";\n }\n if(msg.power_status==false) {\n scope.power_status_icon=\"grey_color\";\n } \n\n // Heating status check\n if(msg.heating_status==1) {\n scope.power_status_icon=\"red_color\";\n }\n \n // Flame status check\n if(msg.flame_status==true) {\n scope.heating_status_icon=\"on_fire\";\n }\n if(msg.flame_status==false) {\n scope.heating_status_icon=\"grey_color\";\n }\n // End flame status check //\n\n return;\n }); \n\n scope.click_power = function() {\n scope.send({ \"payload\": \"power\"});\n }\n\n scope.click_temp_plus = function() {\n scope.send({ \"payload\": \"temp_plus\"});\n }\n\n scope.click_temp_minus = function() {\n scope.send({ \"payload\": \"temp_minus\"});\n }\n\t\n scope.click_fan = function() {\n scope.send({ \"payload\": \"fan\"});\n\t\n }\n\n scope.click_units = function() {\n scope.send({ \"payload\": \"units\"});\n\t\n }\n \n})(scope);\n\n </script>",
"storeOutMessages": false,
"fwdInMessages": false,
"resendOnRefresh": false,
"templateScope": "local",
"className": "",
"x": 880,
"y": 200,
"wires": [
[
"530403cdf77c6e33",
"fa15a7ef6e2a05a3"
]
]
},
{
"id": "530403cdf77c6e33",
"type": "function",
"z": "8ed576ccafab6085",
"name": "Thermostat logic",
"func": "var Units = flow.get(\"Units\");\nif (typeof Units == 'undefined') {\n Units = \"F\";\n}\nvar Fan = flow.get(\"HouseFan\");\nvar power_status = flow.get('power_status');\nvar temp_set = flow.get('temp_set'); \nvar temp_amb = flow.get('temp_amb');\nvar heating_status = flow.get('heating_status');\nvar flame_status = flow.get('flame_status');\nvar msg2 = { payload: \"payload\", topic: \"topic\" }\nvar SensorError = flow.get(\"error\");\n\nif(msg.hasOwnProperty('flame_status')){\n flow.set('flame_status',msg.flame_status);\n}\n\nif(msg.payload==\"power\"){\n power_status = !power_status;\n flow.set('power_status',power_status);\n}\n\nif (msg.payload == \"units\") {\n if (Units == \"F\") {\n Units = \"C\";\n } else if (Units == \"C\") {\n Units = \"F\";\n } else {\n Units == \"C\";\n }\n flow.set('Units', Units);\n}\n\nif(msg.payload==\"temp_plus\"){\n temp_set = temp_set + 0.5;\n if (temp_set > 25){\n temp_set = 25;\n }\n flow.set('temp_set',temp_set);\n}\n\nif(msg.payload==\"temp_minus\"){\n temp_set = temp_set - 0.5;\n if (temp_set < 10) {\n temp_set = 10;\n }\n flow.set('temp_set',temp_set);\n}\n\nif(power_status){\n if(heating_status)\n {\n if (temp_set <= temp_amb+0.2) {\n heating_status = false;\n }\n }\n else\n {\n if (temp_set > temp_amb+0.2) {\n heating_status = true;\n }\n } \n\n flow.set('heating_status', heating_status);\n}\nelse{\n heating_status = false;\n flow.set('heating_status', heating_status); \n}\n\nmsg.power_status = flow.get('power_status');\nmsg.temp_amb = flow.get('temp_amb');\nmsg.temp_set = flow.get('temp_set');\nmsg.flame_status = flow.get('flame_status');\nmsg.heating_status = flow.get('heating_status');\nmsg.fan = Fan;\nmsg.error = SensorError;\n\nif (Units == \"F\") {\n let Amb = flow.get(\"temp_amb\");\n let W = cToF(Amb);\n let X = W.toFixed(2);\n msg.temp_amb = X;\n\n let Set = flow.get(\"temp_set\");\n W = cToF(Set);\n X = W.toFixed(2);\n msg.temp_set = X; \n}\n\nfunction cToF(num) {\n var f = ((num * 1.8) + 32);\n return f;\n}\n\n\nif (flow.get('heating_status')) {\n msg2.payload = 1;\n} else {\n msg2.payload = 0;\n}\n\nreturn [msg, msg2];",
"outputs": 2,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 870,
"y": 260,
"wires": [
[
"23d32c0dea175a73"
],
[
"4f926106307346ef"
]
]
},
{
"id": "4f926106307346ef",
"type": "function",
"z": "8ed576ccafab6085",
"name": "fix payload",
"func": "let Z = msg.payload;\n\nmsg = {\n payload: Z,\n topic: \"heat\",\n}\n\nnode.status({ fill: \"blue\", shape: \"dot\", text: \"heat \" + msg.payload });\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 900,
"y": 320,
"wires": [
[
"5a3d53a2495c999a"
]
]
},
{
"id": "afce36b797db043a",
"type": "ui_group",
"name": "Thermostat",
"tab": "51cf16f79fb635b9",
"order": 1,
"disp": false,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "51cf16f79fb635b9",
"type": "ui_tab",
"name": "Thermo",
"icon": "fa-thermometer",
"order": 1,
"disabled": false,
"hidden": false
}
]
here's a screenshot
2 Likes
Ahah nice ... this is my design !
I am currently working on the Dashboard 2 version you can see below
1 Like
Aha!!! First , thanks for the code, obviously used it. Second, if you get DB2 running I'd love to steal, oops, get a copy.
2 Likes
+1 on the copy 
2 Likes
For sure!
I'll have a little bit more time on Christmas holidays, so I will be working on it more...i think !
1 Like
