So, what’s those round things with numbers in them? No, not more gauges – but CONTROLS – a finger control for DIY Nest Displays! Well, several of them in fact.
Thanks to lots of work and some great feedback you'll see in here not to mention a little inspiration, we can now both input to the knob and output from it. This has SO much potential (not this example but the general idea - we can use most JQUERY controls in here ). We have had SO many issues along the way, interaction between knobs, not saving on refresh etc… lots of people have contributed – including ideas from the guys at IBM -and today, reader Jorgen Antonsen provided the last piece of the puzzle.
So here is the library – demos in there – I picked the second demo – and I really think it is a winner. Here’s what we did:
Now… you could create in there, say, folders for js and css like I did originally – but that would be a mistake – because they’ll conflict with the directories that Node-Red itself uses… so I called mine myjs and mycss.
Looking at the source of that page link I sent you, you’ll find a link to jquery.knob.min.js – grab that – and put it in the myjs folder. Now you have it available.
Here is what I put in my test page to bring up the nice (now simplified) controls you see above. The second template is merely a duplicate of the first and so on – the ability to SCALE to the size of the template is new – and I’ve used 98% instead of 100% in the code because though 100% worked here in the demo – on my phone one of the knobs resized at 100% - now it is perfect. I’d like to hear from anyone who gets a different result.
So - if you SET either of these controls by using the mouse/finger, they will set outputs... and survive a refresh. Spot on.
Manual injection will update the display without sending anything out of the template – while finger/mouse control of the knob will send output values out of the node. This is the expected behaviour.
Variations on these controls can be used to set temperature, time bands (see the other examples) and so much more and once we all understand how this is working – using other JQUERY controls should be easy.
Now – you see in the code above where it says data width and height 100% – that causes issues for the standard template – but as we’ve already cleared out all the padding from the template – why not go the whole hog and get rid of any scroll bars… Beware of altering data-thickness – that is what causes a problem if too thick (just make the item a little smaller).
This needs to go into a style – in a template BEFORE our knobs..
I’ve manually altered some colours – but I’m looking forward to someone coming up with a means to separately inject msg.fsColour so we can dynamically change this depending on value (thermostats!)
Been a good day, really.
Meanwhile, if you want MORE buttons – check out this flow to put into Node-Red… on a page all on it’s own I suggest.
This should get you going! See image on the right