As 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.

The 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 what is now called the Home Control 2018 blog (quickly before I come up with a reason to change that to 2019). Lots of links in there to code for Esp8266s (ESP-GO) 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.

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.

All 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

https://tech.scargill.net/yourls/gauges

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.

I’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.

When 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…

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

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).

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!

Auto-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.