You should read the previous blog entry before this one – as the principles are the same as are some of the details such as the location of your /myjs folder for Node-Red – so read the other article first. This guage IMHO is the best yet!
To run the example on the right here you should get the SteelSeries library. 2 minified JS files is all you need.
See flow below… you will need the following incoming variables – all done for you in the example but of course you’ll want to customise…
msg.value // the value of the pointer – in this case 0-100
msg.threshold // the value of the red threshold indicator
msg.userLed // if true the green user LED will be flashing. You can turn this off if you don’t need it. I’ll use it to indicate a dehumidifier is running.
If the value is less than the threshold, the red LED will flash. This can be inverted in the code. If msg.userLed is true the green LED will be flashing.
I’ve ALSO added as you can see separate ODOMETER (msg.odo - you could have LCD instead) and a trending UP/DOWN/STEADY/OFF indicator and demo controls – discovering what is available on this gauge is half the battle!!
Everything is configurable, I’ve brought out what I think is useful – the rest is buried in steelseries.js which comes with the package – there is no documentation as such. All you need to store in your myjs library is steelseries-min.js and tween-min.js – but is it worth it? SURE IS - this is a wonderful device… I can’t wait to get one on a nice large display on the wall.
I’m thinking general use to show temperature, odometer could show humidity, green user LED for dehumidifier on, RED light for heating on and the trending indicator to show maybe whether the heat is on the way up or down – though that much should be obvious from whether the heating is on or not… maybe a use I’ve not thought of yet. Or not – you can turn it off if you want. Wonderful.
Prerequisites: Far too often in blogs like this we “assume” that everyone is keeping up – if not – may I suggest a quick look at this page I put up specifically to give a little background – which might help explain this article.
Looking for help: If anyone knows how to get rid of that chrome frame - DO let me know. frameVisible=false makes it hide but does not expand the gauge to fill in the space -in other words you are still left with an invisible frame - the only article I can find suggests this should not be the case - but it is. Given a small 3*3 frame size I'm after all the resolution I can get).
Here is my code for the example above (also available here):