Nest-style central heating controller in Node-RED

Nice widget though it does have a couple of UX issues.

  • Firstly, the ambient and target temperature lines are identical so you cannot tell which is which - what happens if the abient temperature goes above the target for example - confusion. This could be fixed by making them slightly different through thickness/length (colour as well but not on its own for the sake of colour-blind folk).

  • The drag action stops if the cursor moves outside the widget. When it is near the edge of the window, this can be well before reaching the max/min values. Really, it should stay active while the mouse-button is pressed.

The other thing is that I don't think you need image files - certainly the chevrons should be available in a font, quite probably the standard unicode set. The M should be reproducible with some CSS magic. Alternatively, you might want to look at converting them into data: urls as they are all pretty small. Using SVG versions would be even better so that they resize adaptively.

Anyway, just a few thoughts. Really nice dashboard though.

Julian, thanks for your comments, starting at the bottom working up,

I agree 100% regarding your comments about the image files using .png images, its not ideal.

The drag action is not present in the code I posted ! , I agree the original didn't work properly, and as the adjustments to the target temperature needed to be controlled by the ramp thermostat and manually by the up / down chevrons, the drag action was redundant so I removed it, I am not sure if you are familiar with the Nest app see image 1 but that is how adjustments are made on that.

With regard to ambient and target temperature lines, I don't agree, that's actually how the Nest app works, if the target temperature is below ambient temperature then there is no call for heat to the boiler see image 2
if the target temperature is above the ambient temperature then its clear that theirs a call to the boiler for heat see image 3

image1
Image2 image3

Just to be clear I didn't write the code for the 'Nest like dashboard widget' the code its based on a Codepen by Dal Hundal: https://codepen.io/dalhundal/pen/KpabZB I just modified it a bit to suit my purpose with my very limited ability.