Had a look at the code but it will take a lot of work to get more than 1 ghost thermostat working as there are many elements to it that will need to have unique names.
Without those changes every stat on the same tab will behave as one.
I asked author if they have any plans to allow more than 1 on stame tab.
You could put each stat on a different tab OK.
The actual stat function is easy enough to do in NR and you can use a standard gauge
I think that should be codeforum.org?
codeforum dot com redirects to
"A network of counterintuitive, compostable, and implausible value streams using dubious nictitative aspects blah blah blah".
i actually have them on separate tabs,
but they show up on same group
then i give them unique id's
and they show up in different groups like i want but they all change the original.
I had emailed the author first and had gotten no responses
yes my mistake it is .org
I would look at a different solution if I were you 
it is the only one that i figured out how to work with. i havent found any others that worked for cooling.
i need to look at the nest one a little more.
The temporary box came out good. I either need to find a different stat, or figure out what the global controls are
I would just think about the logic and use a simple gauge.
Is not just - If temp reading > "setpoint" turn on cooling ?
Yes, I was thinking same way.
Fell asleep reading up on function node and Javascript, it really is simple math logic.
Just have to word it correctly.
Once you get the basics working then you can style it up as much as you like -
These may be more useful for an industrial look
i have those working on my dashboard now lol.
my ultimate goal when everything is working the way i want is something more eyecandy like this.
With setpoint needle -
This was added near the top
style="--gauge-value:0; --gauge-value-secondary:0; --container-size:4; --gn-distance:13; --ga-tick-count:10; --ga-subtick-count:100; --g-unit:'°F'">
rest of chages are towards the end, but hard to show here, take a look
[{"id":"9884ee808c52bbca","type":"ui_template","z":"73a94477.15d104","group":"","name":"4x4 regular","order":22,"width":4,"height":4,"format":"<div class=\"g-wrapper g-wrapper-label-0\">\n\n <div id=\"{{'gauge_'+$id}}\" class=\"g-container\"\n style=\"--gauge-value:0; --gauge-value-secondary:0; --container-size:4; --gn-distance:13; --ga-tick-count:10; --ga-subtick-count:100; --g-unit:'°F'\">\n <div id=\"bgr\" class=\"g-body\">\n <div class=\"g-ring\">\n <div class=\"g-rivets\">\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n <div class=g-rivet></div>\n </div>\n <div class=\"g-plate\">\n <div class=\"g-ticks\">\n <div class=\"g-tick\" style=\"--ga-tick:1;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:10;\"></div>\n <div class=\"g-tick\" style=\"--ga-tick:11;\"></div>\n </div>\n <div class=\"g-ticks\">\n <div class=\"g-subtick\" style=\"--ga-tick:2;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:3;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:4;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:5;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:6;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:7;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:8;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:9;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:10;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:12;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:13;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:14;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:15;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:16;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:17;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:18;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:19;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:20;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:22;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:23;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:24;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:25;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:26;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:27;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:28;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:29;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:30;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:32;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:33;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:34;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:35;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:36;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:37;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:38;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:39;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:40;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:42;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:43;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:44;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:45;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:46;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:47;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:48;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:49;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:50;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:52;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:53;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:54;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:55;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:56;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:57;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:58;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:59;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:60;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:62;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:63;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:64;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:65;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:66;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:67;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:68;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:69;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:70;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:72;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:73;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:74;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:75;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:76;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:77;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:78;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:79;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:80;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:82;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:83;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:84;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:85;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:86;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:87;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:88;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:89;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:90;\"></div>\n\n <div class=\"g-subtick\" style=\"--ga-tick:92;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:93;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:94;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:95;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:96;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:97;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:98;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:99;\"></div>\n <div class=\"g-subtick\" style=\"--ga-tick:100;\"></div>\n </div>\n <div class=\"g-nums\">\n <div class=\"g-num\" style=\"--ga-tick:1;\">0</div>\n <div class=\"g-num\" style=\"--ga-tick:2;\">10</div>\n <div class=\"g-num\" style=\"--ga-tick:3;\">20</div>\n <div class=\"g-num\" style=\"--ga-tick:4;\">30</div>\n <div class=\"g-num\" style=\"--ga-tick:5;\">40</div>\n <div class=\"g-num\" style=\"--ga-tick:6;\">50</div>\n <div class=\"g-num\" style=\"--ga-tick:7;\">60</div>\n <div class=\"g-num\" style=\"--ga-tick:8;\">70</div>\n <div class=\"g-num\" style=\"--ga-tick:9;\">80</div>\n <div class=\"g-num\" style=\"--ga-tick:10;\">90</div>\n <div class=\"g-num\" style=\"--ga-tick:11;\">100</div>\n <div class=\"g-num\" style=\"--ga-tick:12;\">110</div>\n </div>\n <div class=\"g-label\">Temperature</div>\n <div class=\"g-needle\"></div>\n <div class=\"g-needle-secondary\"></div>\n <div class=\"g-needle-ring\"></div>\n <div id=\"{{'gauge_val_'+$id}}\" class=\"g-val\"></div>\n\n </div>\n </div>\n </div>\n </div>\n</div>\n<script>\n (function(scope) {\n let min = 0;\n let max = 100;\n scope.$watch('msg', function(msg) {\n // Do something when msg arrives\n if (msg) {\n if (msg.payload){\n const val = msg.payload\n const v = ((val - min) / (max - min)) * 100;\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value', v);\n document.getElementById('gauge_val_'+scope.$id).innerText = val.toFixed(1);\n }\n\n if (msg.setpoint){\n const setpoint = msg.setpoint\n const s = ((setpoint - min) / (max - min)) * 100;\n document.getElementById('gauge_'+scope.$id).style.setProperty('--gauge-value-secondary', s)\n }\n \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1290,"y":1640,"wires":[[]]},{"id":"053b142cfd0e41cc","type":"inject","z":"73a94477.15d104","name":"setpoint","props":[{"p":"setpoint","v":"30","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1070,"y":1640,"wires":[["9884ee808c52bbca"]]},{"id":"88115c353f50cb0b","type":"random","z":"73a94477.15d104","name":"","low":1,"high":"100","inte":"true","property":"payload","x":1060,"y":1600,"wires":[["9884ee808c52bbca"]]},{"id":"c22c505e161f0ad2","type":"inject","z":"73a94477.15d104","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"8","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":1050,"y":1560,"wires":[["88115c353f50cb0b"]]}]
hotnipi can sure make cool gages.
im going through a couple of crash courses on function node and javascript so i can just write my own function.
im almost there with it.
the gage stuff is on hold. I had help figuring out how to control cooling. Omg was I so overthinking it.
I'm sorry to answer just now but I've been very busy during this time.
To have multiple instances of the thermostat in the same tab, just change the name of the div element where the thermostat will be created and choose a unique one for each thermostat you use. The lines to change are:
and
chose a unique name for example "thermostat1" "thermostat2" etc...
someone asked me to add new statuses but I am not clear what you mean ... if you want to give me some examples I will see if I can implement it
I thought I had changed those 2 spots but i ended up with 3 in same group and all 3 controlled each other.. ill go back in and mess with flow. your Gauge looks better then my secondary solution.
ok i found a problem with multi istances of stat .... and i find a solution... give me some time to fix it
ok thanks, looking foward to the updates.
I tried to change any part that said "ghostmaster......"
and i still had all of them trying to run each other.
cheers,
Done,,, check new version... you don't need to change name at every stats.. it will generate unique name in automatic.
@ghostmaster75 It wasn't me that asked about modes, but in my case I could use this if it had Auto and Manual modes.
eg I only use for heating, so ring shows operation, but setpoint comes from a shedule. So mode would be "automatic" if user changes setpoint via gui then mode could read manual or user.
I guess best option would be to allow for custom entries for labels and icons.
With current mode sent out in payload.
Thanks
EDIT Actually I just had a look at your code and see that this shouldn't be difficult to alter myself, so I will have a play with it sometime.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks⢠or registeredŽ trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
