RGraph en Node Red
Medición de temperatura/humedad con sonoff th 10 y sonda Si7021, sin flashear.
Node red es un servidor http que se ejecuta sobre node.js, por ello podemos utilizar todo tipo de framework (marco de trabajo) para http, en el ejemplo usamos RGraph de uso gratuito y código abierto, con gráficos en java script, basado en lienzo HTML5 y actualmente también en SVG. El termómetro es en SVG, el higrómetro un lienzo HTML5, y el tercero es un ejemplo de como podemos customizar o modificar los componentes del framework. Las librerias de RGraph están en /home/pi/.node-red/RGraph/libraries y en el archivo "/home/pi/.node-red/settings.js" la variable "httpStatic" se setea a " httpStatic: '/'" .
La indicación de la temperatura, cambia de color rojo/verde al compás de la lectura de los valores. El código de los gráficos (instrumentos), son ejemplos de la página oficial de RGraph.
[{"id":"81d19eab.21008","type":"ui_template","z":"d787be9a.1521e","group":"b4ef605f.7699b","name":"termometro","order":1,"width":6,"height":7,"format":"\n <script src=\"/home/pi/.node-red/RGraph/libraries/RGraph.svg.common.core.js\"></script>\n <script src=\"/home/pi/.node-red/RGraph/libraries/RGraph.svg.gauge.js\"></script>\n \n <link href=\"https://unpkg.com/gridjs/dist/theme/mermaid.min.css\" rel=\"sttext-align:center;ylesheet\" />\n\n <h3>RGraph Svg Demo</h3>\n <h5>-Termómetro<div style=\"color:{{msg.color}}; text-align:center;\">{{msg.temperatura}} º C</div></h5>\n \n <div align=\"center\">\n \n <div id=\"chart-container\" style=\"width: 250px; height: 250px\"></div>\n\n </div>\n\n<script>\n\n var termometro = null,\n dato = 0;\n\nfunction drawGraph (){\n if (! termometro) {\n var termometro = new RGraph.SVG.Gauge({\n id: 'chart-container',\n innerMin: 0,\n innerMax: 50,\n outerMin: 0,\n outerMax: 50,\n value: dato,\n options: {\n adjustable: true,\n scaleInnerUnitsPost: '',\n centerpinRadius: 10,\n labelsIngraphUnitsPost: '',\n labelsIngraphDecimals: 1,\n colors: ['red','blue'],\n }\n });\n }\n else {\n RGraph.SVG.clear(termometro.svg);\n }\n termometro.draw();\n} drawGraph();\n\n(function(scope){ \n scope.$watch('msg', function(msg) {\n if (msg.temperatura) { \n dato = msg.temperatura;\n drawGraph();\n }\n });\n })(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":1540,"wires":[[]]},{"id":"bff3702e.59daa","type":"inject","z":"d787be9a.1521e","name":"","topic":"","payload":"","payloadType":"date","repeat":"5","crontab":"","once":true,"onceDelay":"1","x":570,"y":1700,"wires":[["e4bf79c9.1f8a98"]]},{"id":"fb75c693.dccaf8","type":"debug","z":"d787be9a.1521e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"temperatura","targetType":"msg","x":1010,"y":1480,"wires":[]},{"id":"60c255f3.fd288c","type":"ui_template","z":"d787be9a.1521e","group":"b4ef605f.7699b","name":"higrómetro","order":2,"width":6,"height":7,"format":"<html>\n\n <script src=\"/home/pi/.node-red/RGraph/libraries/RGraph.common.core.js\"></script>\n <script src=\"/home/pi/.node-red/RGraph/libraries/RGraph.gauge.js\"></script>\n \n <link href=\"https://unpkg.com/gridjs/dist/theme/mermaid.min.css\" rel=\"stylesheet\" />\n\n <h3>RGraph Canvas Demo</h3>\n <h5>Higrómetro<div style=\"color:red; text-align:center;\">{{msg.humedad}} %</div></h5>\n\n <div align=\"center\">\n \n <canvas id=\"cvs1\" width=\"250\" height=\"250\">[No canvas support]</canvas>\n\n </div>\n\n<script>\n\n var gauge1 = new RGraph.Gauge({\n id: 'cvs1',\n min: 0,\n max: 100,\n value: 46,\n options: {\n }\n }).draw();\n\n(function(scope){ \n scope.$watch('msg', function(msg) {\n if (msg.humedad) { \n gauge1.value = msg.humedad;\n gauge1.draw();\n }\n });\n })(scope);\n\n</script>\n</html>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":1620,"wires":[[]]},{"id":"13774857.b11698","type":"ui_template","z":"d787be9a.1521e","group":"b4ef605f.7699b","name":"velocimetro","order":3,"width":6,"height":7,"format":"<html>\n\n <script src=\"/home/pi/.node-red/RGraph/libraries/RGraph.common.core.js\"></script>\n <script src=\"/home/pi/.node-red/RGraph/libraries/RGraph.gauge.js\"></script>\n \n <link href=\"https://unpkg.com/gridjs/dist/theme/mermaid.min.css\" rel=\"stylesheet\" />\n\n <h3>RGraph Canvas Demo Custom</h3>\n <h5>Velocímetro</h5>\n\n <div align=\"center\">\n \n <canvas id=\"cvs\" width=\"250\" height=\"250\">[No canvas support]</canvas>\n\n </div>\n\n<script>\n\n var dato = [180,25];\n\n var gauge = new RGraph.Gauge({\n id: 'cvs',\n min: 0,\n max: 200,\n value: dato,\n options: {\n marginLeft: 15,\n marginRight: 15,\n marginTop: 15,\n marginBottom: 15,\n\n // Configure the top titles appearance\n titleTop: 'Air Speed',\n titleTopSize: 22,\n titleTopFont: 'Impact',\n titleTopColor: 'white',\n titleTopSize: 24,\n titleTopItalic: true,\n \n // Configure the bottom titles appearance\n titleBottom: 'Knots',\n titleBottomSize: 14,\n titleBottomItalic: true,\n titleBottomFont: 'Impact',\n titleBottomColor: '#ccc',\n titleBottomPos: 0.4,\n\n // The rest of the configuration for the Gauge chart - the needle,\n // centerpin, tickmarks and the border\n colorsRanges: [[160,200,'rgba(255,0,0,1)'], [120,160,'rgba(255,255,0,0.95']],\n backgroundColor: 'black',\n backgroundGradient: true,\n centerpinColor: '#666',\n needleSize: [null, 50],\n needleColors: ['Gradient(transparent:white:white:white:white:white)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],\n textColor: 'white',\n tickmarksLargeColor: 'white',\n tickmarksMediumColor: 'white',\n tickmarksSmallColor: 'white',\n borderOuter: '#666',\n borderInner: '#333'\n }\n }).draw().responsive([\n {maxWidth:null,css:{'float':'right'},parentCss:{textAlign:'none','float': 'right'}},\n {maxWidth:600,css:{'float':'none'},parentCss:{textAlign:'center','float': 'none'}}\n ]);\n\n(function(scope){ \n scope.$watch('msg', function(msg) {\n if (msg.velocidad) { \n gauge.value = msg.velocidad;\n gauge.draw();\n }\n });\n })(scope);\n\n</script>\n</html>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":990,"y":1700,"wires":[[]]},{"id":"e4bf79c9.1f8a98","type":"function","z":"d787be9a.1521e","name":"velocidad","func":"msg.velocidad = [40,120];\nreturn msg;","outputs":1,"noerr":0,"x":800,"y":1700,"wires":[["13774857.b11698"]]},{"id":"1d509e9a.f9ae11","type":"ewelink-temperature-humidity","z":"d787be9a.1521e","name":"Humedad-Temperatura-Criadero","deviceId":"xxxxxxxxx","auth":"xxxxxxxxxx","x":450,"y":1600,"wires":[["dfcf7371.99426"]]},{"id":"dfcf7371.99426","type":"function","z":"d787be9a.1521e","name":"Temperatura / Humedad","func":"var temp_hum = Object.values(msg.payload);\nmsg.temperatura = parseFloat(temp_hum[1]);\nif(flow.get(\"color\") == \"verde\"){\n flow.set(\"color\",\"rojo\");\n msg.color = \"red\";\n}\nelse {\n flow.set(\"color\",\"verde\");\n msg.color = \"green\";\n}\nnode.send(msg,null);\nmsg.humedad = parseFloat(temp_hum[2]);\nreturn [null,msg];","outputs":2,"noerr":0,"x":750,"y":1600,"wires":[["81d19eab.21008","fb75c693.dccaf8","cef531de.51b85"],["60c255f3.fd288c"]]},{"id":"1783a6b4.a30829","type":"inject","z":"d787be9a.1521e","name":"","topic":"","payload":"","payloadType":"date","repeat":"5","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":1600,"wires":[["1d509e9a.f9ae11"]]},{"id":"82c23505.c7d918","type":"function","z":"d787be9a.1521e","name":"variable color","func":"flow.set(\"color\",\"verde\");\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":1680,"wires":[[]]},{"id":"cef531de.51b85","type":"function","z":"d787be9a.1521e","name":"variable temperatura","func":"flow.set(\"temperatura\",msg.temperatura);\nreturn msg;","outputs":1,"noerr":0,"x":740,"y":1540,"wires":[["2a5b417.939eabe"]]},{"id":"2a5b417.939eabe","type":"debug","z":"d787be9a.1521e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":740,"y":1460,"wires":[]},{"id":"b4ef605f.7699b","type":"ui_group","z":"","name":"","tab":"9584992c.47d2f8","disp":true,"width":"18","collapse":false},{"id":"7a2356bf.dde1d8","type":"ewelink-credentials","z":""},{"id":"9584992c.47d2f8","type":"ui_tab","z":"","name":"criadero temperatura / humedad","icon":"dashboard","disabled":false,"hidden":false}]
