# Db2 thermostat gui

**URL:** https://discourse.nodered.org/t/db2-thermostat-gui/93885
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [12 December 2024 19:12 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885 "2024-12-12T19:12:34Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [12 December 2024 19:12 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/1 "2024-12-12T19:12:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [12 December 2024 19:18 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/2 "2024-12-12T19:18:53Z")

</div>

Any pointer to original maybe?

---

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [12 December 2024 20:58 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/3 "2024-12-12T20:58:33Z")

</div>

When it get home I'll upload what I got

---

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [12 December 2024 23:08 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/4 "2024-12-12T23:08:51Z")

</div>

here's my flow

```auto
[
    {
        "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

 ![thermo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/52ca8e92ca4460a2763b6111f8e3c2edf1596f58.jpeg)

---

<div class="post-metadata">

### Author: ![maxuser74](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/maxuser74/32/70109_2.png) [@maxuser74](https://discourse.nodered.org/u/maxuser74)
#### Post date: [17 December 2024 19:51 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/5 "2024-12-17T19:51:59Z")

</div>

Ahah nice ... this is my design !  
I am currently working on the Dashboard 2 version you can see below  
😉

 ![Screenshot 2024-12-17 alle 22.12.22](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/8/a8d11c49d34a0fef97dbc121b9c0b3648a186beb.png)

---

<div class="post-metadata">

### Author: ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)
#### Post date: [17 December 2024 23:28 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/6 "2024-12-17T23:28:19Z")

</div>

Aha!!! First , thanks for the code, obviously used it. Second, if you get DB2 running I'd love to steal, oops, get a copy.

---

<div class="post-metadata">

### Author: ![xx\_Nexus\_xx](https://avatars.discourse-cdn.com/v4/letter/x/54ee81/32.png) [@xx\_Nexus\_xx](https://discourse.nodered.org/u/xx_Nexus_xx)
#### Post date: [18 December 2024 05:22 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/7 "2024-12-18T05:22:48Z")

</div>

+1 on the copy 🤣

---

<div class="post-metadata">

### Author: ![maxuser74](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/maxuser74/32/70109_2.png) [@maxuser74](https://discourse.nodered.org/u/maxuser74)
#### Post date: [18 December 2024 18:38 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/8 "2024-12-18T18:38:43Z")

</div>

For sure!  
I'll have a little bit more time on Christmas holidays, so I will be working on it more...i think ! 😉

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [17 January 2025 18:38 UTC](https://discourse.nodered.org/t/db2-thermostat-gui/93885/9 "2025-01-17T18:38:57Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.