Category Archives: Thermostat

A Thermostat Weekend

tmp3C7AAs I make changes and I don’t want to bore readers – I’m adding sections at the top of this article and moving earlier versions of the stat down the page. If you are new to this you might want to start at the bottom at the point in this blog entry marked “The Old Ways”.

The Newer Ways: You will read below about last weekend’s work on the thermostat control – here is the link to the current code which now also handles a de-humidifier (not on a timed basis) and a heating using indicators built into the gauge (my thanks to the author for his help). The image on the left depicts the latest version.

Mobile Thermostat panel by Peter ScargillThe New Ways: This is about a DIY Thermostat in Node-Red – if you want to read about how I got to this point, start at “The Old Ways” then come back up here. If not, read on. Here's a short video. So – you want a thermostat using Node-Red Dashboard (remember you can set all of that up on a variety of hardware alternatives using the script – which turns your little SBC into a potentially powerful central control system for IOT). Here it is.  You should be familiar with Node-Red, Node-Red dashboards and flows. If you need to know more about home control you could read all about it in the Home Control 2016 blog (quickly before I come up with a reason to change that to 2017). Lots of links in there to code for Esp8266s etc.

I’m assuming you have sensors and a relay board to control the heating and all you need is the pretty bit with glue in the middle, understand basic heating and are ready to go.

Here it is on the left – two days of solid graft. With this magic screen you can set up an entire week’s heating, controllable at hourly intervals – in a minute if that. Each hour can be poked with finger or mouse, adjusted and at the touch of a button replicated to the next hour. Similarly a whole day’s settings can be instantly replicated to the next day etc. You have control of the automatic temperature, with manual override as well as frost and stat settings and all on one colourful screen.

And if you don’t like it – it’s all there in source in Node-Red – what could be easier.  I must’ve made a dozen variations as you’ll see in “The Old Ways” before coming to this – what’s really exciting is that some of the control and display elements of Node-Red Dashboard are getting easier as I go along – at first I seemed to get no-where, now, the sky seems like the limit.

So – each of those coloured elements represents one of the 24 hours of the day – simply select by touch (the black bar will light up purple) an move left or right using the bottom arrows. The COPY button next to it will replicate an hour in the next one if you have selected an hour – or will copy a whole day if you’ve selected DAY. You can select frost and away settings and adjust temperatures there. On the top of the display is your actual temperature – and settings to adjust the SET temperature – and away from hours (>) to days (>>).  A is for automatic! When you have the settings the way you want them – use the disk icon to save or use the cancel icon to revert back to what you had before you started. That’s it – nothing else.  The data (a very small amount) is stored in your /home/pi directory but of course you can change that.

And here’s the flow you’ll be looking at – complete with lots of test buttons.

flow for the thermostat

This is slightly different to the code I’ve put up as I’m now monitoring actual temperature (the purple MQTT node top right – in the demo code I have kept the demo buttons).

The left side is entirely test material, storing values from your temperature and humidity sensors (the latter is not used as I ran out of room to display – maybe this week I’ll re-think the sizes slightly. I’m also pondering expanding the hour-day idea to hour-day-zone as I have two heating systems here but that will be later and I’ll leave this code intact).

Note: You’ll see some icons here – I’ve not distributed then as I’m not 100% sure of their copyright status – if you look around and look at an earlier blog talking about icons and .png files – there are no shortages of decent transparent .png icons for you to use – there are also a bunch of them built into Angular.

Temperature display from the new thermostatAll seems to work – in Chrome on the PC and on my HTC phone the displays are identical. Now – if anyone would care to ponder improvements – maybe find enough room in that right corner to get some more info…. do write in with ideas and code.

HOLD THE PHONE: I think I’m in love… check this beauty out on the right – found it HERE and modified the colours, text and size – a true work of art - quick modification in a browser and I changed parameters to make it do temperature (originally speed) change colour – etc…  I have it working in a simple local web page but sadly when I put it in a template right now – I get a white screen… I’m at a bit of a loss as to why.. if anyone wants to step in here….. it is so lovely it would be a shame to miss.

And finally: The original gauge here had a grey display with decimal points. I needed to get rid of those as I’m dealing in integers. I contacted the author Mykhailo Stadnyk

At the end of that – two new parameters – valueInt:2 and valueDec:0 gave me what I wanted – a simple integer degrees printout.

If you are using my flows – and creating directories etc, always remember that Linux and Javascript are case-sensitive – don’t go making directories/files  in upper-case and addressing them in lower-case.

Oh – LEDS -  I just found this – lovely CSS LEDs  - I need to figure out how to add one into the canvas.. I’ve also asked hr writer of that gauge if he’d consider adding in an optional LED indicator for me (boiler active).

The Old Ways: Here is where this all started.

As it happens, a few days ago, reader Antonio pointed me to a little ESP8266 Thermostat – well, some code for it anyway, using one of those little 120*180 displays.

ESP8266 stat gave me ideasI’m not that partial to Arduino development but I grabbed the code and stuck it on my hardware. Some great ideas there – but the implementation using a rotary encoder left something to be desired – and the code doesn’t support MQTT – and minus temperatures messed the display up. Oh and it seems to be partly in Italian and partly in English. Oh and a good but not especially long-lasting sensor is sitting right next to warm electronics and a warm display.

Don’t get me wrong, a STERLING effort and no doubt it will go on to be very good – but it wasn’t quite what I was looking for. It certainly fired me up.

As you all by now know I’m an MQTT/Node-Red/Mobile phone kind of guy and so armed with my new knowledge of Node-Red Desktop I sat down with coffee on Friday morning and started to put together some new thermostat code (as if I needed more). One of the things I really liked about the ESP code was the timing page you see above. I have 5 time zones per day which can be any temperature – different at the weekend – but not without it’s issues – what if the weekend is not your “special” time for example – and it needs lots of controls.

This on the other hand was simple. I got to thinking – but if it was on a touch screen you would not have all that selecting nonsense and what about replicating settings for every day and….

And so it was that I sat down with a gallon of coffee and did what I always do – plough in with the code long before I’ve put a plan together. Sometimes it works, sometimes it doesn’t. Hey, I’m a one-man team!

Templates on Node-Red: Well, this time it did and I’m chuffed, but before getting into this – a quick lesson on using TEMPLATES in Node-Red Desktop.

Templates are easy – pretty much you can make a web page in a template – you can even have includes and JQuery comes with the deal.  The problem I’ve always had in the past is getting stuff in and out of the template – the examples given really don’t help and I spent HOURS trying to get to grips with this.

Scargill's very first Node-Red thermostatWhen we were messing with buttons (see other blog entries) I got a lot of help from folk, most of it I understood, getting variables into the Template I most definitely did not – but it worked and now the light is coming on.  Remember the good old days of ASP programming and other server-side interpreted coding – you had this code on the server which was NOT in the same space as the code in the web page. Well, this is similar.

The likes of msg.payload sits in Node-red along with global variables, context variables  etc. They do NOT reside in run-time Javascript on the web page and that had me going in circles for ages. Well, there is a way around it, digging through the code we ended up with for the buttons I extracted this and modified it a little…

scope.$watch('msg', function(msg) {
// do stuff in here with msg… which includes any part of msg, even arrays etc.

So here we are on the web page – in a script tag – and we drop this in. I know – what the HELL is scope (yes I know what variable scope is). I can’t tell you in detail but I can tell you it works perfectly!  As soon as you inject the normal Node-Red msg (entire) object into the template – where that // comment is above, you can use the lot inside that function, calling javascript functions etc. Note that in typical examples elsewhere – inside that function you’d see the word data – and I’d previously then used “data.payload” etc. – however, keeping the name the same (msg) makes it easier.

Along with the ability to fire out information back to Node-Red with this and similar for buttons..

ng-click="send({payload: 'hello world'})"

The first attempt: With that realisation I started on my new little thermostat. The most COMPLICATED page is that of settings – and the project above that I really liked - got me started as gives you 24 settings every day of the week. FANTASTIC – but I had to make it easy. Now, it is REALLY easy. You can set up programs for the entire week in a minute.

Over on the right – you see my FIRST interpretation of this – yes, it works – I just don’t have a relay fastened up yet to DO something.

Ok –  the colours were not that subtle – don’t be awkward – I only started on Friday morning after a fear-filled, anaesthetic-devoid double-crown fitting at the dentists via a 90+ mile round trip. – yes, I was brave though it nearly reduced me to tears – so bear that in mind before criticising my colour taste  - I’ve change it as you’ll see later. The buttons are simply Angular buttons with png images inserted.

So – you can touch/click on any of the timings – or temperature, or day and using the up and down buttons (they’ll end up as left and right arrows) you can change the temperature from one of the presets for that time or the time slot you are playing with or the day. The black line under the relevant item will turn purple (for now).

Scargill's very first Node-Red thermostat flow

If you want to replicate the setting on subsequent hours, press/touch the copy button as often as you need (auto-increment). If you want to replicate the LOT, click on the DAY and then on the copy button and you’ll start whizzing through the days (auto-increment), coping the entire 24-hour schedule across – you can then tweak bits later. When you are happy you’ve not messed anything up – press the save button.

Now this lot is simply stored in an array – 24*7 bytes plus 4 bytes for the temperatures – so as an array, stored on SD it takes up almost no room – by using a 2-level array you could EASILY expand this into different ZONEs – so as well as a DAY field you’d have a ZONE field and a copy operation would copy the whole lot to the next zone –  etc. Seriously this is a DODDLE to set up.

Finally a cancel button…which simply restores the array from SD – that function is also called at power up to get the values in the first place. I could probably do with a timeout on saving to avoid the (admittedly small) write to SD on every change. Still – not something you’d do a lot of.

So now we have a non-volatile global array with all the info in (I jammed the temperature settings on to the end of the array) – a separate page will show the temperature with a nice pretty dial, let you change manually up and down that for a given time – what, 4 hours before reverting to auto? and of course you’d want to show the humidity and pressure – very important they are all super accurate so I’m thinking a single BME280 would do the lot for you!!!

And that’s it – the output of “process heat” is simply the required heat value, sent out every minute. I picked a minute – could be 5 minutes – if you are working with, say, an oil boiler you really don’t want to be changing things rapidly. You can use this value to display in another page as the “set” temperature and to compare with the REAL temperature to decide what to do with, say, a relay.  Options might include a manual override – which should time out after a couple of hours maybe – and maybe a longer-term override in case you want shopping or are away for a couple of days in which case you might want to go to the lowest setting (offset zero in the global array) for some period. Normally for manual override you’d simply ADD your override figure to the automatic figure – i.e. 2 degrees WARMER or COOLER. My next job will be to do a nice job of the main stat display page.

The main page will no doubt also feature the local weather forecast – again from a previous article. One could even add a complete week’s predictions with icons.

More on this in near future – here is the current FLOW for this (no support and it WILL change in time) so you can just drop it in into Node-Red. Aren’t you glad you adopted the latter!

Scargill's very first Node-Red thermostatAuto-learning

To do auto-learning I think I’d change this – instead of 4 fixed temperatures I’d allow arbitrary temperature between, say 14c and 26c for every time slot (could do that now)…

Now, given THAT you could maintain a separate array – and every time someone makes a manual change – this would added to the second array (initially zero in all values).

After, say 4 weeks, you could divide the array down by, say, 4 (so that X degrees updated on the same hour for all 4 weeks would show up as one change) – and merely ADD that to the main array – clearing the second array. That way the system would have learned from the last 4 weeks changes but be ready to adapt to another 4 weeks changes etc. That’s one way – without getting too silly about it can you think of a more USEFUL way of adapting?

Thermostat – The Return of the Stat: Well, it had to happen – once I started writing about this – I started thinking how DAFT that 4-temperature limit is – and so  - well, I changed it a bit…   a lot, actually.

The panels now gives full control for every hour of the week but because of the copy system, it still takes only a moment to set the entire week up and it did occur to me that it would be a doddle to extend this to a ZONE system with umpteen zones, even.

I’ve also spent ages working on colours so as you can see – as you adjust the temperatures, the colour changes per degree and it’s quite pretty.  And there is status help.

I’ve added in frost and away settings as you’ll need those for the front panel controls (up, down, set away, set frost).

I have to say, it looks beautiful on my screen. I’ve stripped out a lot of  CSS and put classes in to make the code at least partly readable. There’s a timeout on all the message that appear when you press buttons – should be 5 seconds but right now they vary a little – any Javascript experts - feel free to take a look at the function – but it all works well enough.

Here’s the second flow – this supersedes my first attempt.  Oh you’ll need to find some images – and change links accordingly. On my Pi2 I have a directory /home/pi/.node-red/public/myicons with a ton of folders in there with png images in them – well you have to make use of all that space.  You’ll need to find your own – there are many out there – make sure they are transparent. But then – if you’re working with Node-Red and Dashboard, it really is worth setting yourself up with a good selection of icons and images anyway.

Oh – the data… in “Process controls” you’ll see that we’re looking at an array of 168 bytes plus 2 bytes to store frost and away temperatures – that’s it. See later articles as this has all been improved.


Thermostat Progress

Nextion Node-Red Thermostat

I’m quite chuffed. Having finally managed to make a new working Node-Red on a Pi2, with a copy of all my work, so that I’m no longer losing sleep over losing the lot, I can finally start to get more ambitious with my thermostat over at Hollyberry Cottage.

I’ve had this design for a little white – a Nextion display (400*240) talking serially to the Raspberry Pi2 which is controlling the heating. The big lettering is obvious – the current temperature with humidity in small text underneath the temperature. To the right is a manual control. At the top a menu system, down at the bottom the weather outside according to the open weather node on the Pi2’s Node-Red.

tmp4AD3Status – W/E changes from week to weekend depending on the day and also indicated whether or not the heating is in manual override mode (right hand controls).

Then there is the time and date but I wanted more… and the little sliders available to Node-Red you see in the coloured area. One is being used as a level – the other two, simply on/off indicators. The orange bar decreases in length over time showing the amount of time left in the current program (5 program times and temperatures a day – separate at the weekend – I’ll do more when I Node-Red-UI gets to using less space for controls).

The two little blocks on the right are just for fun and change once a second. The first one is merely an indication that the unit is functioning – the second is more fun. I have an installation of Node-Red in Spain – and that has a one-second ticker which broadcasts in MQTT. I pick up that message and depending on the state, alternate the right block between 100% on (green) and 0% (black) – Hence at a glance if it is flashing, all is well in my Spanish installation.

I plan to make much more use of those simple level indicators both for analogue values and just on-off – improved visually by some static background frames I’ve yet to define.

All great fun. Oh and I have JUST thought of another great idea but I need room for a button – a speech button to read out the information and more using the Ivona speech flow I blogged about some time ago in here.

The thermost at Hollyberry Cottage controls an ESP8266 relay to the heating and reads temperature and humidity from a DHT22 module attached to an ESP8266 and transmitting the info back to Node-Red via MQTT. The next improvement will be to put sensors in different parts of the house – for example when asleep we’re not concerned with how warm or cold it is in the living room, we only care about the bedroom temperature – so it makes sense to attach input selection to the various timing periods as well of course as temperature.

As soon as I get my new office (currently a concrete based sitting under the snow) in place in a matter of weeks I plan to make a much expanded user interface using the 7” display which has 4 times the pixel area to work with.

This just keeps getting better.


Thermostat Christmas Wishes

Still ploughing away with the thermostat side of my home control. Having had working code for some time now using ESP8266 modules (and hopefully soon the odd ESP32 device) to control things with Node-Red on the Raspberry Pi acting as the central controller and in charge of mobile and serial UIs, I’ve been making changes with the advent of the relatively new BLINK app and even newer (to me) node-red-contrib-ui. (All of this is running live).

I also had complaints from my wife that the heating was too high up overnight. At an early stage I’d made the decision to have 2 on-off times in the day, so 2 periods of peak heat and the rest of the time off-peak. This has been working for some time – but it occurred to this week what a stupid way to control the heating that is.. and so yesterday I completed an upgrade to 5 PROGRAMS a day (with 5 separate ones for the weekend). So now armed with up to 5 program times and 5 temperature settings I have WAY more control over the heating.

Blynk backgroundI use Nextion displays for the wall (serial) talking directly to the Pi. Their editor is currently very primitive and the graphics not that good, especially in the smaller displays like mine (400*240). I should say at this point that I think the hardware is very good value for money – but like SO many projects they start with good intentions then other stuff gets in the way – so right now editor progress is slow. So – I make my own backgrounds in PowerPoint (NEVER under-estimate PowerPoint).

As you can see – on one small page I’ve managed to get all the weekday controls and some extras – on another page I have the weekend controls. Simple enough – this is just a .PNG graphic which acts as a background then I use the Nextion controls to make hotspots and dump in simple text values. It’s a compromise but it looks good.

On mobile phones however things are not so easy  - you want a few simple controls – fine but many of the UIs out there do not lend themselves to displays with this much information – which is why I’ve abandoned so many in the past. I’m still hoping the Blynk guys come up with more – but it seems to me that again, right now I’ve not seen new toys for that system for AGES (I should also point out that there is a reconnect issue with Blink and the otherwise excellent node-red-contrib-blynk nodes – I should also point out that the very helpful author of the latter thinks he has a fix and is just waiting for the Blynk guys to incorporate his fixes – if you’re working on this – do write to Blynk and ask them to merge in his changes ASAP.

node-red-contrib-uiMeanwhile there is the increasingly flexible node-red-contrib-ui – and I think this might be the one – the author Andrei is working very hard on this right now but visually it leaves something to be desired and I think the community could help there as his code (if you know where to look) lends itself to CSS modding as essentially this is not an APP but a web sockets page running under Node-Red.

On the left you see my current control page. It works (as of last night) but there is just SO much wastenode-red-contrib-uid space. A good start would be to go full-screen but on Android Chrome – I just cannot get this to happen – I suspect you must need something in the page header.

So my wish-list would be firstly to eliminate the cluttering menu (Chrome’s menu). From there I suspect it is down to some CSS.  On simple LED controls it is possible to get two items on a line – but right now with individual nodes it is one per line.  A simply tick box option might be the way around this but it is down to convincing Andrei of the need (and after all like many of us he’s doing this for fun so it’s not like we can insist.

As you can see, in my Christmas wish list version of the control, space is used FAR more efficiently. And it is needed because I plan to do SO much more with the stat.

Right now – I read the temperature in the living room – and act accordingly – but this is silly – at night who cares what the temperature in the living room is – I want the BEDROOM temperature monitored etc.. so ultimately each of the 5 programs will be able to select from one of 3 sensors. Great but creates more nightmares for the UI  - so flexibility of sizing here is the key and right now we don’t have that.

Today we have node-red-contrib-ui with basic examples of use  - what would be really nice would be a complete guide to CSS possibilities for dummies along with example controls using the “template” control to supplement existing controls – I think we might have to chip in and help Andrei with that. Right now I know how to change that green “controls” menu background colour – and that’s about it.

I’ll finish by thanking the authors of node-red-contrib-blynk and node-red-contrib-ui for their work so far and encourage them to keep going – so many possibilities.  Thoughts welcome.