A simple example of using one of the SteelSeries Canvas gauges in Node-Red Desktop.
This assumes you have set up a folder in Node-Red for Javascript libraries - I call mine "myjs" to avoid conflict with Node-Red JS libraries.
You should attempt to use this in conjunction with the blog entry http://tech.scargill.net/steelseries-and-node-red/ as there are some simple prerequisites such as two library files.
| [{"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"}] |
Hi Pete, I have tried and tried and no matter what I always get a blank canvas. I have done these steps:
download
https://github.com/HanSolo/SteelSeries-Canvas
make a folder in node red /home/pi/.node-red/public/myjs
copy steelseries min js and tween min js to the myjs folder
edit settings
sudo nano /home/pi/.node-red/settings.js
look for this
// By default, all user data is stored in the Node-RED install directory. To
// use a different location, the following property can be used
//userDir: '/home/pi/.node-red/',
I have also added the 'public/myjs' directory under .node-red as well.
Can you give me some advice?
Thank you!