install steelseries to node-red

[jim321]

i have posted examples with the steelseries gauges this is how to install the library  to use them

 install steelseries to node red


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/',

      httpStatic: '/home/pi/.node-red/public',

          ^^^^add this line.... ctrl+x y return ^^^^^

restart

should be ready to go
jim

[jim321]

added photo
i am just learning these there is no instructions how to create gauges.
you can read the steelseries script to get the variables you can change.
i am a hobbyist not a programmer so i would be limited on any help..
if you design any good ones or have info on use.. please post the node, info for others to use
here is the best info i have found.

https://harmoniccode.blogspot.com/2011/0...ition.html

[Sprokkie]

added photo
i am just learning these there is no instructions how to create gauges.
you can read the steelseries script  to get the variables you can change.
i am a hobbyist not a programmer so i would be limited on any help..
if you design any good ones or have info on use.. please post the node, info for others to use
here is the best info i have found.

https://harmoniccode.blogspot.com/2011/0...ition.html

Hi Jim,

can you share your code for the gauges ?

[jim321]

Code:

[{"id":"75ba000d.df946","type":"websocket in","z":"e5aeef45.36bba","name":"ws","server":"19b731c2.c64a4e","client":"","x":90,"y":160,"wires":[["d6f0da3a.1696d8","e77fc0.44f5404"]]},{"id":"d6f0da3a.1696d8","type":"jsonpath","z":"e5aeef45.36bba","expression":"$.updates..values[*]","split":false,"name":"Signal K delta values","x":260,"y":160,"wires":[["8470c9b.a87ca38"]]},{"id":"8470c9b.a87ca38","type":"function","z":"e5aeef45.36bba","name":"merge values","func":"var paths={};\nvar arrayLength = msg.payload.length;\nfor (var i = 0; i < arrayLength; i++) {\n    paths[msg.payload[i].path]=msg.payload[i].value;\n}\nmsg.payload = paths;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":160,"wires":[["4e838246.6c7bec","27320cc5.3b7054","6d391a5f.44ba14","c22a29b4.99d588","6c1ae04a.9cdc2","a815200f.a6728","3772e213.dcabfe","30d8e20b.b1c76e","fbc7c11d.b5496"]]},{"id":"4e838246.6c7bec","type":"function","z":"e5aeef45.36bba","name":"navigation.speedOverGround","func":"var signalk_key=\"navigation.speedOverGround\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n}","outputs":1,"noerr":0,"x":690,"y":100,"wires":[["188783a0.f53fec"]]},{"id":"188783a0.f53fec","type":"function","z":"e5aeef45.36bba","name":"m/s to knots","func":"msg.payload = Number(msg.payload)*1.94384\nreturn msg;","outputs":1,"noerr":0,"x":920,"y":100,"wires":[["9a47000f.5d61e"]]},{"id":"27320cc5.3b7054","type":"function","z":"e5aeef45.36bba","name":"navigation.position.latitude","func":"var signalk_key=\"navigation.position\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key][\"latitude\"];\n    return msg;\n}","outputs":1,"noerr":0,"x":189.00003814697266,"y":240.0000114440918,"wires":[["2adaab05.8f9684"]]},{"id":"c22a29b4.99d588","type":"function","z":"e5aeef45.36bba","name":"navigation.position.longitude","func":"var signalk_key=\"navigation.position\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key][\"longitude\"];\n    return msg;\n}","outputs":1,"noerr":0,"x":189.00003814697266,"y":280.0000114440918,"wires":[["a698d7e7.703258"]]},{"id":"6d391a5f.44ba14","type":"function","z":"e5aeef45.36bba","name":"navigation.courseOverGroundTrue","func":"var signalk_key=\"navigation.courseOverGroundTrue\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n}","outputs":1,"noerr":0,"x":710,"y":140,"wires":[["7e28895a.314f98"]]},{"id":"2adaab05.8f9684","type":"mqtt out","z":"e5aeef45.36bba","name":"lat","topic":"lat","qos":"0","retain":"","broker":"862fb990.7b75e8","x":389.00003814697266,"y":240.0000114440918,"wires":[]},{"id":"a698d7e7.703258","type":"mqtt out","z":"e5aeef45.36bba","name":"","topic":"lon","qos":"0","retain":"","broker":"862fb990.7b75e8","x":389.00003814697266,"y":280.0000114440918,"wires":[]},{"id":"a470c04d.ac521","type":"ui_template","z":"e5aeef45.36bba","group":"ff09b4e0.8ddba8","name":"Cog","order":2,"width":"4","height":"4","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar cog;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\")cog.setValueAnimated(msg.value);\n          \n        });\n    })(scope);\n\n    \n\n    cog = new steelseries.Compass('cog', {\n            gaugeType: steelseries.GaugeType.TYPE4,\n            \n            size: 190,\n           \n            //titleString: \"Charge\",\n            //unitString: \"AMPS\",\n           // threshold: 11.9,\n           // minValue: 0,\n           // maxValue:  10,\n           // thresholdRising: false,\n            //lcdVisible: true,\n           \n        });\n//cog.steelseries.BackgroundColor.(steelseries.BackgroundColor.WHITE); \n   cog.setFrameDesign(steelseries.FrameDesign.BRASS);\n   cog.setValueAnimated(0);                   \n   \n   //cog.setPointerType(steelseries.PointerType.TYPE9);\n    \n\n\n</script>\n\n<canvas id=\"cog\" width=\"190\" height=\"190\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1210,"y":140,"wires":[[]]},{"id":"7e28895a.314f98","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":930,"y":140,"wires":[["a470c04d.ac521"]]},{"id":"6cd2c6fd.5c87a8","type":"function","z":"e5aeef45.36bba","name":"math","func":"\nvar vout = 0.0;\nvar vin = 0.0;\nvar R1 = 30000.0;\nvar R2 = 7500.0; \nvar value= msg.payload;\n\n\n vout = (value * 5.0) / 1024.0; \n vin = vout / (R2/(R1+R2)); \n \n//vin.toFixed(1);\n\nmsg.payload=vin;\n\nreturn msg;","outputs":1,"noerr":0,"x":832.0000858306885,"y":272.00002098083496,"wires":[["14a1b3ed.ef718c"]]},{"id":"c9473acc.5ca188","type":"ui_template","z":"e5aeef45.36bba","group":"6d29a421.1030ac","name":"house","order":2,"width":"4","height":"4","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar house;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\")house.setValueAnimated(msg.value);\n          \n        });\n    })(scope);\n\n    \n\n    house = new steelseries.Radial('house', {\n            gaugeType: steelseries.GaugeType.TYPE2,\n            size: 190,\n           \n            titleString: \"HOUSE\",\n            unitString: \"VOLTS\",\n            threshold: 11.9,\n            minValue: 0,\n            maxValue:  15,\n            thresholdRising: false,\n            //lcdVisible: true,\n           \n        });\n      \n    house.setValueAnimated(0);                   \n    house.setFrameDesign(steelseries.FrameDesign.BRASS);\n    house.setPointerType(steelseries.PointerType.TYPE9);\n    \n\n\n</script>\n\n<canvas id=\"house\" width=\"190\" height=\"190\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1211.000072479248,"y":272.00002098083496,"wires":[[]]},{"id":"14a1b3ed.ef718c","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":952.0000858306885,"y":272.00002098083496,"wires":[["988fbefe.b29a3"]]},{"id":"b465b997.98b9d8","type":"mqtt in","z":"e5aeef45.36bba","name":"","topic":"outTopictemp","qos":"0","broker":"cca2e235.a30a2","x":648.0000858306885,"y":401.00002098083496,"wires":[["d4a78377.96a9e"]]},{"id":"d4a78377.96a9e","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":846.0002193450928,"y":400.00008964538574,"wires":[["674be684.ba6dd8"]]},{"id":"6bdd20a5.7fd11","type":"switch","z":"e5aeef45.36bba","name":"Is it nav data?","property":"msg.payload.updates.source.sentence","propertyType":"jsonata","rules":[{"t":"cont","v":"GLL","vt":"str"}],"checkall":"false","outputs":1,"x":401.0000228881836,"y":88.0000057220459,"wires":[["d08ef059.f4946"]]},{"id":"d08ef059.f4946","type":"change","z":"e5aeef45.36bba","name":"create msg.lat etc","rules":[{"t":"set","p":"LAT","pt":"msg","to":"payload.updates.values.value.latitude","tot":"jsonata"},{"t":"set","p":"LONG","pt":"msg","to":"payload.updates.values.value.longitude","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":60,"wires":[["734aee23.8b13e"]]},{"id":"734aee23.8b13e","type":"function","z":"e5aeef45.36bba","name":"Make JSON","func":"var mymsg = {\"name\":\"MyPlace\",\"lat\":msg.LAT,\"lon\":msg.LONG, icon:\"ship\",\niconColor:\"red\"};\n\nmsg.payload=mymsg;\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":60,"wires":[["172b591b.f3acc7","f2abdcf9.05ed"]]},{"id":"e77fc0.44f5404","type":"json","z":"e5aeef45.36bba","name":"","pretty":true,"x":230,"y":100,"wires":[["6bdd20a5.7fd11"]]},{"id":"55a7dc74.848fd4","type":"ui_template","z":"e5aeef45.36bba","group":"ff09b4e0.8ddba8","name":"Compass","order":1,"width":"4","height":"4","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar compass;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\")compass.setValueAnimated(msg.value);\n          \n        });\n    })(scope);\n\n    \n\n    compass = new steelseries.Compass('compass', {\n            gaugeType: steelseries.GaugeType.TYPE4,\n            \n            size: 190,\n            \n            rotateFace:  true,\n            //\n            //titleString: \"Charge\",\n            //unitString: \"AMPS\",\n           // threshold: 11.9,\n           // minValue: 0,\n           // maxValue:  10,\n           // thresholdRising: false,\n            //lcdVisible: true,\n           \n        });\n//cog.steelseries.BackgroundColor.(steelseries.BackgroundColor.WHITE); \n   compass.setFrameDesign(steelseries.FrameDesign.BRASS);\n   compass.setValueAnimated(0);                   \n   \n   //cog.setPointerType(steelseries.PointerType.TYPE9);\n    \n\n\n</script>\n\n<canvas id=\"compass\" width=\"190\" height=\"190\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1220.000316619873,"y":190.00005340576172,"wires":[[]]},{"id":"b08810c2.12c2b","type":"ui_template","z":"e5aeef45.36bba","group":"8dfd123a.747be","name":"speed","order":1,"width":"4","height":"4","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar speed;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\")speed.setValueAnimated(msg.value);\n          \n        });\n    })(scope);\n\n    \n\n    speed = new steelseries.Radial('speed', {\n            gaugeType: steelseries.GaugeType.TYPE2,\n            size: 190,\n           \n            titleString: \"SPEED\",\n            unitString: \"KNOTS\",\n            //threshold: 11.9,\n            minValue: 0,\n            maxValue:  10,\n            //thresholdRising: false,\n            //lcdVisible: true,\n           \n        });\n      \n    speed.setValueAnimated(0);                   \n    speed.setFrameDesign(steelseries.FrameDesign.BRASS);\n    speed.setPointerType(steelseries.PointerType.TYPE9);\n    \n\n\n</script>\n\n<canvas id=\"speed\" width=\"190\" height=\"190\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1211.000072479248,"y":100.0000057220459,"wires":[[]]},{"id":"9a47000f.5d61e","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":1070.0000648498535,"y":100.00000667572021,"wires":[["b08810c2.12c2b"]]},{"id":"13926839.d420c8","type":"ui_template","z":"e5aeef45.36bba","group":"8dfd123a.747be","name":"Horizon","order":2,"width":"4","height":"4","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar horizon;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n            if (typeof(msg.value) != \"undefined\")horizon.setValueAnimated(msg.value);\n           //if (typeof(msg.hor) != \"undefined\")horizon.setHorAnimated(msg.hor);\n           //if (typeof(msg.value) != \"undefined\")horizon.setValueAnimated(value);\n                                                                        // (msg.value);\n           //if (typeof(msg.roll) != \"undefined\")horizon.setRollAnimated(roll);\n          \n          \n        });\n    })(scope);\n\n    \n\n    horizon = new steelseries.Level('horizon', {\n            gaugeType: steelseries.GaugeType.TYPE4,\n            size: 190,\n           //textOrientationFixed: true,\n           //decimalsVisible:true,\n           //pointerColor:  ORANGE.\n           //foregroundType:\n           //backgroundVisible:false,\n           //foregroundVisible:false,\n           \n        });\n    horizon.setFrameDesign(steelseries.FrameDesign.BRASS);  \n    horizon.setValueAnimated(0);                   \n    \n    //level.setPointerType(steelseries.PointerType.TYPE9);\n    \n\n\n</script>\n\n<canvas id=\"horizon\" width=\"190\" height=\"190\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1216.0002365112305,"y":232.00005722045898,"wires":[[]]},{"id":"abb7117a.0fe4b","type":"ui_template","z":"e5aeef45.36bba","group":"8dfd123a.747be","name":"wind","order":3,"width":"4","height":"4","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar wind;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\")wind.setValueAnimated(msg.value);\n           if (typeof(msg.ave) != 'undefined')wind.setValueAnimatedAverage(msg.ave);\n        });\n    })(scope);\n\n    \n\n    wind = new steelseries.WindDirection('wind', {\n            gaugeType: steelseries.GaugeType.TYPE4,\n            size: 190,\n           lcdVisible: true,\n           titleString: \"Wind Direction\",\n           degreeScaleHalf: true,\n           pointSymbolsVisible: false,\n           lcdTitleStrings: ['DIRECTION', 'Speed'],\n           windspeed: true,\n        });\n      \n                      \n    wind.setFrameDesign(steelseries.FrameDesign.BRASS);\n    wind.setPointerTypeAverage(steelseries.PointerType.TYPE17);\n    wind.setPointerType(steelseries.PointerType.TYPE1);\n\n\n</script>\n\n<canvas id=\"wind\" width=\"190\" height=\"190\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1211.0003967285156,"y":350.0000820159912,"wires":[[]]},{"id":"cebeac5a.bbc86","type":"function","z":"e5aeef45.36bba","name":"heel","func":"msg.value=msg.payload;\n\nreturn msg;","outputs":"1","noerr":0,"x":1046.0000858306885,"y":232.00002098083496,"wires":[["13926839.d420c8"]]},{"id":"554eefa9.a5d42","type":"ui_template","z":"e5aeef45.36bba","group":"12cdd6bf.f05d09","name":"Tempwater","order":3,"width":"3","height":"6","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar tempwater;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\") tempwater.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    tempwater = new steelseries.Linear('tempwater', {\n            gaugeType: steelseries.GaugeType.TYPE2,\n            width: 140,\n            height: 300,\n            //size: 292,\n            section: sections,\n            area: areas,\n            titleString: \"Water\",\n            unitString: \"Degrees F\",\n            threshold: 80,\n            lcdVisible: true,\n           \n            //thresholdRising: false,\n           // userLedVisible: true,\n           // useOdometer: true,\n          //  lcdVisible: true,\n           // trendVisible: true\n        });\n                        \n    tempwater.setFrameDesign(steelseries.FrameDesign.BRASS);\n    tempwater.setValueAnimated(0);\n    tempwater.setPointerType(steelseries.PointerType.TYPE9);\n   // radial4.setThreshold(50);\n    //radial4.blinkUserLed(0);\n   // radial4.setOdoValue(0);\n\n\n</script>\n\n<canvas id=\"tempwater\" width=\"140\" height=\"300\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1228.000316619873,"y":391.0001049041748,"wires":[[]]},{"id":"d0a14ab.5edcdb8","type":"ui_template","z":"e5aeef45.36bba","group":"12cdd6bf.f05d09","name":"Tempin","order":2,"width":"3","height":"6","format":"<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n<script>\nvar tempout;\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.value) != \"undefined\") tempout.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    tempout = new steelseries.Linear('tempout', {\n            gaugeType: steelseries.GaugeType.TYPE2,\n            width: 140,\n            height: 300,\n            //size: 292,\n            section: sections,\n            area: areas,\n            titleString: \"Inside\",\n            unitString: \"Degrees F\",\n            threshold: 80,\n            lcdVisible: true,\n           \n            //thresholdRising: false,\n           // userLedVisible: true,\n           // useOdometer: true,\n          //  lcdVisible: true,\n           // trendVisible: true\n        });\n                        \n    tempout.setFrameDesign(steelseries.FrameDesign.BRASS);\n    tempout.setValueAnimated(0);\n    tempout.setPointerType(steelseries.PointerType.TYPE9);\n   // radial4.setThreshold(50);\n    //radial4.blinkUserLed(0);\n   // radial4.setOdoValue(0);\n\n\n</script>\n\n<canvas id=\"tempout\" width=\"140\" height=\"300\"></canvas>\n","storeOutMessages":true,"fwdInMessages":true,"x":1220.0002326965332,"y":314.0000629425049,"wires":[[]]},{"id":"6c1ae04a.9cdc2","type":"function","z":"e5aeef45.36bba","name":"electrical.batteries","func":"var signalk_key=\"electrical.batteries.house.voltage\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n    \n\n}","outputs":1,"noerr":0,"x":669.0001239776611,"y":272.0000419616699,"wires":[["6cd2c6fd.5c87a8"]]},{"id":"988fbefe.b29a3","type":"delay","z":"e5aeef45.36bba","name":"del","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1075.0000858306885,"y":272.00002098083496,"wires":[["c9473acc.5ca188"]]},{"id":"a815200f.a6728","type":"function","z":"e5aeef45.36bba","name":"compass","func":"var signalk_key=\"navigation.attitude.roll\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n    \n\n}","outputs":"1","noerr":0,"x":636.0001201629639,"y":231.0000400543213,"wires":[["421a2a85.6109f4"]]},{"id":"3772e213.dcabfe","type":"function","z":"e5aeef45.36bba","name":"Cabin Temp","func":"var signalk_key=\"environment.inside.temperature\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n    \n\n}","outputs":1,"noerr":0,"x":650.0001239776611,"y":312.00004386901855,"wires":[["73a438b6.cabb18"]]},{"id":"73a438b6.cabb18","type":"function","z":"e5aeef45.36bba","name":"K to F","func":"var temp = msg.payload;\n\nvalue = (temp * 9.0) / 5.0 - 459.67; \nmsg.payload=value;\nreturn msg; ","outputs":1,"noerr":0,"x":829.0001335144043,"y":314.0000591278076,"wires":[["dfc1d02.352ae3"]]},{"id":"dfc1d02.352ae3","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload; \nreturn msg;","outputs":1,"noerr":0,"x":1013.0001411437988,"y":314.0000591278076,"wires":[["d0a14ab.5edcdb8"]]},{"id":"30d8e20b.b1c76e","type":"function","z":"e5aeef45.36bba","name":"compass","func":"var signalk_key=\"navigation.headingMagnetic\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n    \n\n}","outputs":"1","noerr":0,"x":633.0001220703125,"y":192.00003623962402,"wires":[["d51f35ab.594888"]]},{"id":"d51f35ab.594888","type":"function","z":"e5aeef45.36bba","name":"Rad to Deg","func":"var rad = msg.payload;\nvar deg = rad * 180/3.14;\nmsg.payload=deg;\nreturn msg ;","outputs":1,"noerr":0,"x":790.0000858306885,"y":190.00002098083496,"wires":[["d5833ee0.68068"]]},{"id":"d5833ee0.68068","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":948.0001373291016,"y":190.00003147125244,"wires":[["55a7dc74.848fd4"]]},{"id":"421a2a85.6109f4","type":"function","z":"e5aeef45.36bba","name":"Rad to Deg","func":"var rad = msg.payload;\nvar deg = rad * 180/3.14;\nmsg.payload=deg;\nreturn msg ;","outputs":1,"noerr":0,"x":810.0000858306885,"y":231.00002098083496,"wires":[["cebeac5a.bbc86"]]},{"id":"203d7d34.b6b432","type":"function","z":"e5aeef45.36bba","name":"Water Temp","func":"var signalk_key=\"environment.water.temperature\";\n\nif(msg.payload.hasOwnProperty(signalk_key)){\n    msg.payload=msg.payload[signalk_key];\n    return msg;\n    \n\n}","outputs":1,"noerr":0,"x":646.0002040863037,"y":359.0000867843628,"wires":[["b50cc180.89a1f"]]},{"id":"91e7a25e.40654","type":"function","z":"e5aeef45.36bba","name":"","func":"msg.value=msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":1040.0000858306885,"y":358.00002098083496,"wires":[[]]},{"id":"b50cc180.89a1f","type":"function","z":"e5aeef45.36bba","name":"K to F","func":"var temp = msg.payload;\n\nvalue = (temp * 9.0) / 5.0 - 459.67; \nmsg.payload=value;\nreturn msg; ","outputs":1,"noerr":0,"x":876.0000858306885,"y":358.00002098083496,"wires":[["91e7a25e.40654"]]},{"id":"7a5f375a.67bc68","type":"ui_template","z":"e5aeef45.36bba","group":"b786a3e5.43271","name":"world","order":0,"width":"6","height":"6","format":"<iframe width=\"300\" height=\"300\" src=\"http://localhost:1880/worldmap/\" frameborder=\"0\" allowfullscreen></iframe>0","storeOutMessages":true,"fwdInMessages":false,"x":1211.0000705718994,"y":56.00000286102295,"wires":[[]]},{"id":"f2abdcf9.05ed","type":"worldmap","z":"e5aeef45.36bba","name":"","lat":"","lon":"","zoom":"","layer":"Esri Satellite","cluster":"","maxage":"","usermenu":"hide","layers":"hide","panit":"true","x":1058.166893005371,"y":56.33334159851074,"wires":[]},{"id":"674be684.ba6dd8","type":"ui_chart","z":"e5aeef45.36bba","name":"WaterTemp","group":"12cdd6bf.f05d09","order":0,"width":0,"height":0,"label":"WaterTemp","chartType":"line","legend":"false","xformat":"dd HH:mm","interpolate":"linear","nodata":"","ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"604800","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"x":1035.1669750213623,"y":397.6666946411133,"wires":[["554eefa9.a5d42"],[]]},{"id":"19b731c2.c64a4e","type":"websocket-listener","z":"","path":"ws://localhost:3000/signalk/v1/stream","wholemsg":"false"},{"id":"862fb990.7b75e8","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"ff09b4e0.8ddba8","type":"ui_group","z":"","name":"NAV 1","tab":"7b74c02d.8f955","order":1,"disp":true,"width":"4"},{"id":"6d29a421.1030ac","type":"ui_group","z":"","name":"Batterys","tab":"7b74c02d.8f955","order":4,"disp":true,"width":"4"},{"id":"cca2e235.a30a2","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"willTopic":"","willQos":"0","willPayload":"","birthTopic":"","birthQos":"0","birthPayload":""},{"id":"8dfd123a.747be","type":"ui_group","z":"","name":"NAV 2","tab":"7b74c02d.8f955","order":2,"disp":true,"width":"4"},{"id":"12cdd6bf.f05d09","type":"ui_group","z":"","name":"ENVIRONMENT","tab":"7b74c02d.8f955","order":5,"disp":true,"width":"6"},{"id":"b786a3e5.43271","type":"ui_group","z":"","name":"SECURITY","tab":"7b74c02d.8f955","order":6,"disp":true,"width":"12"},{"id":"7b74c02d.8f955","type":"ui_tab","z":"","name":"Engine","icon":"dashboard"}]

[*]
this should give you an idea of how to set them up..
there are things commented out on some..i have a cheat sheet somewhere if i find it i'll post it too.
you can look at the script to see some variables to use..

[sebba]

sudo nano /home/pi/.node-red/settings.js

Hello, 

In last versions there is not "/home/pi/.node-red"
I found settings.js in "/home/pi/.signalk/node_modules/node-red/settings.js"
Is this the right file to edit?

Thanks,
Seb

[jim321]

that seem's right, my install was on a stand alone node-red install before it was included in signalk

[ptalbot]

Hi @sebba and @sim321,

I have also the same settings.js in "/home/pi/.signalk/node_modules/node-red/settings.js" that I have edited the httpStatic line with httpStatic: '/home/pi/.node-red/public'
The image has been put in this directory
Node red dashboard can't find the image that I have setup in my ui_template <img src="Bilge.png" width="120px" />
What else I'm missing?

[jim321]

its been a long time ..
in this thread we were using a stand alone version of node-red.
now its an embedded ver. so the directories have changed i dont know where you need it now.
they do look good 
edit
httpStatic: '/home/pi/.node-red/public'
would be somewhere in
.signalk/node_red

[ptalbot]

Hi @jim321

I had figured out that httpStatic: '/home/pi/.node-red/public' was an old path. I also tried to use the path '/home/pi/.signalk/node_modules/@signalk/signalk-node-red/public' in the setting.js that but I still get error 404 in the log provided by the developer tools/network. If I use <img src="./public/Bilge.png" /> in the ui_template, the developer tools/network tells me that it expect the file to be in http://192.168.0.49:3000/plugins/signalk.../Bilge.png ; the file is there but not seen; this is a mystery.

[Blue Ocean]

If you have SignalK you should install the KIP plugin, it is great. And if you do, it includes the SteelSeries libraries already.
Add:

Code:

<base href="/@mxtommy/kip/">
<script src="assets/tween-min.js"></script>
<script src="assets/steelseries-min.js"></script>

on top of your template node and it works.

Maybe not the cleanest solution but it safes from installing duplicates.