Yesterday I have found this nice peace of code work form Dal Hundal. After playing around decided to port it in NODE-RED so more people could use it and this great peace of work could be used without diving deeper into html and java-script. This became my favorite thermostat widget for my house room temperature control so far i came across on the net.
Fully responsive design. Touch enabled set-point makes it even more cool. Press and hold finger over and it will activate set point sliding function.
Also it has several display modes like heating, cooling and away. It makes it more intractable and user intuitive. For more ECO friendly there is possible to turn on and off that little green leaf.
Let’s try to port this in Node-red. Data exchange is based on topics. You can can push separate payloads with specific topic. If you change the set-point in the web browser it will trigger back payload to node-red with topic “target_temperature” and a value.
- ambient_temperature, target_temperature are numeric (21.5) payloads.
- hvac_state is string (off, heating, cooling) payload.
- has_leave, away are boolean (true, false) payloads.
If you familiar with CSS and JAVA there are more stuff to customize, colors, ranges etc.
Some options in JAVA script:
options = {
diameter: options.diameter || 400,
minValue: options.minValue || 10, //Minimum value for target temperature
maxValue: options.maxValue || 30, //Maximum value for target temperature
numTicks: options.numTicks || 200, //Number of tick lines to display around the dial
onSetTargetTemperature: options.onSetTargetTemperature || function() {}, // Function called when new target temperature set by the dial
};
Widget can be rendered anywhere in the page. You just have to include div with thermostat ID.
<div id="Mythermostat"></div>
var nest = new thermostatDial(document.getElementById('Mythermostat')
IF you have more than one thermostat widget make sure they have unique names to avoid rendering wrong data to wrong divs.
Update 13.08.2019
Thanks everyone for input and bug reports!
Finally got time to move the project to Github.
Data persistence on UI load and style problems are fixed.
Please report bugs on github for better followup.
https://github.com/automatikas/Node-red-Nest-thermostat
Thanks for this – it makes customising the code much easier.
I’m having problems refreshing the display after changing tabs on the dashboard. The ambient temp updates every minute, so that’s not too bad, but the target temp is static and does not re-load. I’m currently using MQTT as the store for these settings, and it only seems to publish on change. Have you found a way to get around this?
Good point S and welcome as the first commented!
in my case i’m pushing JSON directly from thermostats more frequently so there is no notable first update delay.
But i think workaround will be to use GLOBAL variable in node-red. Try to create a function after you receive MQTT message store values to global variable, then read value from global and to push to thermostat widget.
It does something similar in node-red dashboard text/value fields (it loads last value in the browser even if there is no MQTT message), but template node does not store last value so you have to take care manually.
Very nice Widget.
What is the License of this Code? May I use it in some project?
core code is not my i just ported it to node-red, as far as i know there is no licence.
just include the copyright text from creator page.
http://codepen.io/dalhundal/details/KpabZB#details-tab-license
Hello! I would like to say thanks for share this Nest interface ported to NODE-Red. I always loved NEST hardware and interface and finally I´ve Integrated into a DIY solution to work as my house IOT Thermostat which runs on RaspberryPi as server for MQTT Broker/NODE-Red and a ITEAD WiFi Relay (https://www.itead.cc/inching-self-locking-wifi-wireless-switch.html) hacked with Temp/Hum Sensor running ESPurna Firmware to monitoring room temperature/hum and set the desired with Nest interface.
Some Pics:
https://twitter.com/AlexCorvis84/status/930949683379343360
Also, I´m suffering the same behaviour as user @smadds detailed. All is working fine, but when I login into UI Dashboard from another device, the the target temp is static and does not re-load with the previous value I set from different device and it is set as minimum-default.
I will try to integrate the tip you metioned about adding a function and save the value as GLOBAL in NODE-Red.
I´ll keep you updated. Meanwhile, let me say BIG THANKS again!
Setting global variables does fix it. I tried to hack the code to just “render()” if any unrecognised topic was sent to the template, but didn’t work. The ui control node is helpful, since it outputs when browsers join, leave AND change tabs 🙂
My flow, if it’s of any interest, is here: https://gist.github.com/smadds/c27acc599cb9d8c983c5696c27fedd02
It works with a 7-day timer here: https://gist.github.com/smadds/0d9f1038185796899ccc836d272f3e3d
Ohh nice idea Simon. Thanks for feedback!
Hi II created a global varable that holds the temperature from MQTT (updates every 30 Seconds) then edited the nest template at line 613 ish :-
scope.$watch(‘msg’, function(data) {
//console.log(data.topic+” “+data.payload);
//if (data.topic == “ambient_temperature”) {
nest.ambient_temperature = (global.get (“OurRoomAmbient”));
…………..
It dosn’t work and i didn’t really expect it to be that easy (i am a noob at script), but could this be sort of pointing in right direction ? I am using it in conjunction with ramp-thermostat.. a great node.
I would suggest to use @smadds approach and use “UI control” block to trigger and load persistent value in to widget. It is easy to mage that way not checking several hundreds of code lines 😉 every time you want to change something.
You just have to push data in block and you will get the output. You have to make on periodical and on UI change update push messages.
As periodical updates is not big deal to make, UI changes can be make with UI change block as Simon mentioned.
https://gist.github.com/smadds/c27acc599cb9d8c983c5696c27fedd02
Thanks i will give it a go later tonight. I will leave the code alone..over 600 lines to break!
also is there any issues with using multiple instances, I need 12!
To reload settings on connect make a function block with this code.
if(msg.payload == “connect” || msg.payload == “lost”)
return RED.util.cloneMessage(context.get(“state”));
context.set(“state”, RED.util.cloneMessage(msg) );
return msg;
Connect to the input your input message and the “UI Control”, connect the output to the nest. You need one per nest input.
It just stores the last message it got (cloned so it stays the same) and then send it when ui events are received (again a clone in case it changes).
You can have more than one in a page but for each one you must change the id of the div at the top, in the css and the reference to it in the javascript at the bottom (in the call to getElemtentById).
Hi, did you update your blog post since these comments were made? The reason is that I have just imported your flow, and my new target temp seems to show fine on a second device, or when I refresh the page on the first device. The only thing that doesn’t have the updated value is the ambient temp (opposite to user @smadds) which is to be expected, as this value is just coming from an inject node… presumably if this were hooked up to a heating system it would update regularly.
By the way, have you got this working with the actual Nest hardware, using node-red-contrib-nest? If so could you post your flow? I’m struggling a lot with trying to work out when, how, and how often to get values from Nest API and how to set target temps etc. back to the Nest device!
Cheers
Mat
Hi
just loaded a new pi with latest version of node red (v0.19.5) and the leaf is no longer green, it goes the same color as the color set in node red theme, horrible blue as default.
Is there a simple way to make the leaf stay green no matter what the theme settings are.
I have tried changing:
.dial__ico__leaf {
fill: #00ff00;
This seems to have no effect, as you can proberbly guess i am not too good at scripts.
Great Widget! I have 12 of them running on one page!
Many Thanks.
There’s default svg path styling in NR dashboard now:
.nr-dashboard-theme .nr-dashboard-template path
So you’ll need to update the CSS to have more specificity to keep leaf green, so change:
.dial__ico__leaf {
to:
.dial path.dial__ico__leaf {
That should work.
I see i need to clean the things up and update the article code. I have and example to make the things easy with widget persistence. @waako thank’s for the input! I’ll try to find some time next week.
Really great article man…
I already have an roundSlider (https://github.com/soundar24/roundSlider) plugin where one of the user requested this type of UI. And I have done the similar UI with customization (just POC), you can refer the below demo:
https://jsfiddle.net/soundar24/58qudfnL/
He also expected to use this in node-red dashboard, but at that time I am not aware of this. If possible you can contribute to integrate this, or write a similar article for a better understanding.
Because, this can be highly customizable, so this might help to most of the people. You can checkout my jsFiddle public profile where I have done many customization:
https://jsfiddle.net/user/soundar24/fiddles/
Thanks 🙂
Hi Andrius,
Very good addition to my Node-Red themostat control thankyou for your work. I modified the ” .dail_ico_leaf { ” section as suggested by waako. The only other problem was the persistence when loading the nest ui.
I solved the persistence issue by adding “scope.send({topic: ‘target_initial’, payload: 10 });” shown below. Now when the UI loads up in a browser it triggers a msg at the output of the UI template. I intercept the msg with a function node and pull the setpoint, temperature, Away and hvac_state persistance data from a flow context and route it into the input of the UI template.
Now when I first load the UI template in my browser its populated ready to view.
This is the only mods I have done so far to your UI template in your original flow that you posted.
/* ==== */
(function(scope) {
scope.send({topic: ‘target_initial’, payload: 10 });
var nest = new thermostatDial(document.getElementById(‘thermostat’),{
onSetTargetTemperature: function(v) {
scope.send({topic: “target_temperature”, payload: v});
}
});
Thanks
Hey all
I came easier way to work around the issue by using globals and sending one json payload to widget with all data at the same time. Persistence on UI hold last payload only so the best is to feed all data at the same time. How ever needed small workaround for scope$watch as it was triggering change on load as values are null before script get real data.
all updates are are now pushed to Github:
https://github.com/automatikas/Node-red-Nest-thermostat
If any one can test and give feed back would be great!
Thanks
Andrius
You did a great job. I have just one question: How i can make this to work with 0.1′ resolution? Now the temperatures are displayed in 0.5′ resolution and also the set of target temperature is done with 0.5′ resolution. I want to use this in some applications where 0.1′ resolution is needed. Thank you.
Hi you have to modify two function for it:
Find and modify these two function. Modified code below.
shoot from another thermostat just to confirm that it works.
/*
* RENDER - target temperature
*/
function renderTargetTemperature() {
//lblTarget_text.nodeValue = Math.floor(self.target_temperature);
lblTarget_text.nodeValue = self.target_temperature;
if (self.target_temperature % 1 != 0) {
//lblTarget_text.nodeValue += '⁵';
}
var peggedValue = restrictToRange(self.target_temperature, options.minValue, options.maxValue);
degs = properties.tickDegrees * (peggedValue - options.minValue) / properties.rangeValue - properties.offsetDegrees;
if (peggedValue > self.ambient_temperature) {
degs += 8;
} else {
degs -= 8;
}
var pos = rotatePoint(properties.lblTargetPosition, degs, [properties.radius, properties.radius]);
attr(lblTarget, {
x: pos[0],
y: pos[1]
});
}
/*
* RENDER - ambient temperature
*/
function renderAmbientTemperature() {
lblAmbient_text.nodeValue = Math.floor(self.ambient_temperature);
//setClass(lblAmbientHalf, 'shown', self.ambient_temperature % 1 != 0);
lblAmbientHalf_text.nodeValue = (self.ambient_temperature % 1).toFixed(1).substring(2);
setClass(lblAmbientHalf, 'shown', true);
}
Hi Andrius,
Could you share the flow that corresponds to the last image you shared in this last message?
Thank you very much
Sorry, not for public use this time. That’s part of commercial product. Get in contact with me if you are interested in it.