SteelSeries and Node-Red

tmp768EYou 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):

[{"id":"8d862a4b.c1d588","type":"ui_template","z":"c552e8d2.712b48","group":"1e03a2b2.83a61d","name":"rgraph","order":1,"width":"6","height":"6","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar radial4;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\") radial4.setValueAnimated(msg.value);\n           if (typeof(msg.threshold) != \"undefined\") radial4.setThreshold(msg.threshold);\n           if (typeof(msg.odo) != \"undefined\")radial4.setOdoValue(msg.odo);  \n           if (typeof(msg.userLed) != \"undefined\") radial4.setUserLedOnOff(msg.userLed);  \n           if (typeof(msg.trend) != \"undefined\")\n            {\n                if (msg.trend==1)     radial4.setTrend(steelseries.TrendState.UP);\n                if (msg.trend==0)     radial4.setTrend(steelseries.TrendState.STEADY);\n                if (msg.trend==-1)    radial4.setTrend(steelseries.TrendState.DOWN);\n                if (msg.trend==-2)    radial4.setTrend(steelseries.TrendState.OFF);\n            }\n        });\n    })(scope);\n\n    var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),\n                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),\n                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],\n\n            // Define one area\n    areas = [steelseries.Section(75, 100, 'rgba(220, 0, 0, 0.3)')],\n\n    radial4 = new steelseries.Radial('canvasRadial4', {\n            gaugeType: steelseries.GaugeType.TYPE4,\n            size: 292,\n            section: sections,\n            area: areas,\n            titleString: \"Heating\",\n            unitString: \"Degrees C\",\n            threshold: 50,\n            thresholdRising: false,\n            userLedVisible: true,\n            useOdometer: true,\n            lcdVisible: true,\n            trendVisible: true\n        });\n                        \n    radial4.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);\n    radial4.setValueAnimated(0);\n    radial4.setThreshold(50);\n    radial4.blinkUserLed(0);\n    radial4.setOdoValue(0);\n\n\n</script>\n\n<canvas id=\"canvasRadial4\" width=\"401\" height=\"401\"></canvas>\n","storeOutMessages":true,"fwdInMessages":false,"x":490,"y":920,"wires":[[]]},{"id":"94d08897.6b6f78","type":"inject","z":"c552e8d2.712b48","name":"Set needle to 88","topic":"","payload":"88","payloadType":"num","repeat":"","crontab":"","once":false,"x":140,"y":700,"wires":[["a72af19d.e17e2"]]},{"id":"f5301eaa.f021d","type":"inject","z":"c552e8d2.712b48","name":"Set needle to 33","topic":"","payload":"33","payloadType":"num","repeat":"","crontab":"","once":false,"x":140,"y":740,"wires":[["a72af19d.e17e2"]]},{"id":"a72af19d.e17e2","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":720,"wires":[["8d862a4b.c1d588"]]},{"id":"cb9d2598.de4918","type":"inject","z":"c552e8d2.712b48","name":"Set threshhold to 60","topic":"","payload":"60","payloadType":"num","repeat":"","crontab":"","once":false,"x":150,"y":780,"wires":[["d1f505b0.62c9f8"]]},{"id":"b50f3ae1.7cbdd8","type":"inject","z":"c552e8d2.712b48","name":"Set threshold to 30","topic":"","payload":"30","payloadType":"num","repeat":"","crontab":"","once":false,"x":150,"y":820,"wires":[["d1f505b0.62c9f8"]]},{"id":"d1f505b0.62c9f8","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.threshold=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":800,"wires":[["8d862a4b.c1d588"]]},{"id":"cd9b1fe2.9c989","type":"inject","z":"c552e8d2.712b48","name":"Set user LED ON","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"x":140,"y":861,"wires":[["199bc0e7.607eff"]]},{"id":"59205954.a730c8","type":"inject","z":"c552e8d2.712b48","name":"Setuser LED OFF","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"x":150,"y":901,"wires":[["199bc0e7.607eff"]]},{"id":"199bc0e7.607eff","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.userLed=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":881,"wires":[["8d862a4b.c1d588"]]},{"id":"f13cc85.7df0038","type":"comment","z":"c552e8d2.712b48","name":"Example use of Steelseries Gauge","info":"","x":180,"y":660,"wires":[]},{"id":"ffa9ff04.4fc7f","type":"inject","z":"c552e8d2.712b48","name":"Trend UP","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"x":120,"y":940,"wires":[["2320de53.8b2e42"]]},{"id":"3c6f1b6f.e42924","type":"inject","z":"c552e8d2.712b48","name":"Steady","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"x":110,"y":980,"wires":[["2320de53.8b2e42"]]},{"id":"2320de53.8b2e42","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.trend=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":960,"wires":[["8d862a4b.c1d588"]]},{"id":"e0daa005.96fd5","type":"inject","z":"c552e8d2.712b48","name":"Down","topic":"","payload":"-1","payloadType":"num","repeat":"","crontab":"","once":false,"x":110,"y":1020,"wires":[["2320de53.8b2e42"]]},{"id":"893a4668.be5a78","type":"inject","z":"c552e8d2.712b48","name":"Off","topic":"","payload":"-2","payloadType":"num","repeat":"","crontab":"","once":false,"x":110,"y":1060,"wires":[["2320de53.8b2e42"]]},{"id":"a222fdf0.4934d","type":"inject","z":"c552e8d2.712b48","name":"ODO 50","topic":"","payload":"50","payloadType":"num","repeat":"","crontab":"","once":false,"x":120,"y":1100,"wires":[["f7bee9bf.d05478"]]},{"id":"7a3e24c1.17e7dc","type":"inject","z":"c552e8d2.712b48","name":"ODO 78.6","topic":"","payload":"78.6","payloadType":"num","repeat":"","crontab":"","once":false,"x":120,"y":1140,"wires":[["f7bee9bf.d05478"]]},{"id":"f7bee9bf.d05478","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.odo=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":1120,"wires":[["8d862a4b.c1d588"]]},{"id":"1e03a2b2.83a61d","type":"ui_group","z":"","name":"testy","tab":"f9bab960.c839b8","disp":true,"width":"6"},{"id":"f9bab960.c839b8","type":"ui_tab","z":"","name":"testy","icon":"dashboard"}]

19 thoughts on “SteelSeries and Node-Red

  1. Hi, Pete!
    Thanks for your work, it's marvelous!
    I think you have to correct a little mistake - forth input node should be named "Set threshold to 33" instead of "Set needle".
    And if you add a Comment node with link to steelseries on git (and to you blog entry) , your example will be better.

  2. Those of you who looked in this morning may notice some subtle changes! Had a phone call with a friend of mine, Jonathan and we got carried away - this is now the best of the lot so far... hit refresh so you don't miss anything.

  3. Hi Pete,
    Fantastic find, I really like the LCD displays as well as the very functional gauges.

    I've tried to get an LCD working but so far no joy, have you tried an LCD display?

  4. Hi Pete,

    2 tiny notes.

    1. I found that I needed to alter the flow to read: if (typeof(msg.value) != "undefined") radial4.setValue(msg.value); rather than 'setValueAnimated'

    Also if you want to use the Wind Direction guages you'll need 'tween-min.js' as well.

    Don't ask how I know this 🙂

    Good work - keep it up - please 🙂

    1. Hi John

      Yes I'd assumed you had tween-min.js in there already -in my script the tween file is the first one included.... If you use value rather than setvalueanimated- you won't get the animation. It does work...

      if (typeof(msg.value) != "undefined") radial4.setValueAnimated(msg.value);

      1. You're absolutely right Pete - part of the learning process 🙂

        I was wondering if any of the javascript types here might know the answer to two questions on the Wind Direction guages. I'm trying to convert them for use as wind direction and speed so I'd like to be able to hide the AveragePointer and, more trivially, the degree symbol in the lower (Average) LCD display. Any pointers would be great thank you.

        1. Look through the source code of the original library (not the compressed version) and you'll probably find something that looks like hiding the average pointer - try it - you have nothing to lose. There is no doc as this sadly was abandoned on favour by the look of it for JAVA (I just do NOT understand that AT ALL - as it involves installation of Java). If you find the correct statement do drop a line in here.

          What I'm finding is that SOME of the directives can be altered at run time, others not.

  5. Hello Pete, thanks. I have learned a lot from your blogs. Two problems that you might recognize:
    1. I have used your flow from the "SteelSeries and Node-Red", but it shows up in my browser only when I deploy first an extra emty flow and then delete it and deploy again, strange...
    2. Afther a while I got script errors in the browser.
    Node-Red is up to date, Firefox the browser.

Leave a Reply

Your email address will not be published. Required fields are marked *