Front End - Node Red - Camaras web ip.
Node red es un servidor http sobre node.js, su interface gráfica estandar es el Dashboard, pero podemos crear nuestra propia interface gráfica con una pagina web que funcionará como front end del back end node red. El front end nos permite seleccionar la camara web ip y mostrarla, y podemos además obtener instantaneas que se guardan en un pendrive.
[{"id":"fcea73a9.2e998","type":"http in","z":"a2e09d45.9206f","name":"","url":"/miscamaras","method":"get","upload":false,"swaggerDoc":"","x":150,"y":1600,"wires":[["c9e82c61.a7316"]]},{"id":"5220df8f.d217f","type":"http in","z":"a2e09d45.9206f","name":"","url":"/selCam","method":"post","upload":false,"swaggerDoc":"","x":130,"y":1880,"wires":[["1916a304.3c99ad","aebcda0c.1c3fa8"]]},{"id":"1916a304.3c99ad","type":"debug","z":"a2e09d45.9206f","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":770,"y":1880,"wires":[]},{"id":"29c63ff5.6e75b","type":"http response","z":"a2e09d45.9206f","name":"","x":770,"y":1820,"wires":[]},{"id":"d096e3c0.bc37c","type":"template","z":"a2e09d45.9206f","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[type=text] {\n width: 100%;\n padding: 12px 20px;\n margin: 8px 0;\n display: inline-block;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n}\n\ninput[type=submit] {\n width: 200px;\n background-color: #4CAF50;\n color: white;\n padding: 14px 20px;\n margin: 8px 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\ninput[type=button] {\n width: 200px;\n background-color: #ff7533;\n color: white;\n padding: 14px 20px;\n margin: 8px 0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\ninput[type=submit]:hover {\n background-color: #45a049;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}\n\nform {\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 3px;\n box-shadow: 0 5px 25px #2EE06E\n}\n\nimg {\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 3px;\n width: 90%;\n height: 380px;\n box-shadow: 0 5px 25px #2EE06E\n}","x":470,"y":1760,"wires":[["dc50fc0.9194a08"]]},{"id":"c9e82c61.a7316","type":"template","z":"a2e09d45.9206f","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"$(document).ready(function(e) {\n \n var buttonpressed;\n \n $(function() {\n $(\"input[type=submit]\").click(function() {\n buttonpressed = $(this).attr('value')\n }) \n })\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize()+buttonpressed;\n var form_url = \"/selCam\";\n var form_method = $(this).attr(\"method\");\n \n $(\"#loadingimg\").show();\n \n $.ajax({\n url: form_url, \n type: form_method, \n data: form_data, \n cache: false,\n success: function(returnhtml){\n $(\"#camara\").attr(\"src\",returnhtml);\n// $(\"#result\").html(returnhtml);\n// $(\"#example-table\").tabulator(\"setData\", html(returnhtml));\n// $(\"#loadingimg\").hide();\n// $(\"#example-table\").show();\n } \n }); \n });\n \n});\n","x":310,"y":1760,"wires":[["d096e3c0.bc37c"]]},{"id":"1be2e606.1c676a","type":"http response","z":"a2e09d45.9206f","name":"","statusCode":"","headers":{},"x":770,"y":1760,"wires":[]},{"id":"dc50fc0.9194a08","type":"template","z":"a2e09d45.9206f","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n <title>Mis Camaras</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n\n<div align=\"center\">\n <form method=\"post\" action=\"\" ajax=\"true\">\n\n <label>Seleccionar Camara</label>\n <input list=\"camaras\" name=\"misCamaras\" /></label>\n <datalist id=\"camaras\">\n <option value=\"Comedor\">\n <option value=\"Living\">\n <option value=\"Palier\">\n <option value=\"Fondo\">\n </datalist>\n \n <input type=\"submit\" value=\"Seleccionar\">\n <input type=\"submit\" value=\"Instantanea\">\n \n </form>\n</div>\n\n<div align=\"center\"><img src=\"\" id=\"camara\"/></div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>","x":610,"y":1760,"wires":[["1be2e606.1c676a"]]},{"id":"4fda026.af876fc","type":"comment","z":"a2e09d45.9206f","name":"Login Form","info":"","x":130,"y":1680,"wires":[]},{"id":"4b13f085.0ba31","type":"function","z":"a2e09d45.9206f","name":"return msg.payload to client","func":"var str = msg.payload;\nif(msg.payload.includes('Comedor')){\n global.set('carpeta','Comedor');\n msg.payload = \"http://ip_cam1/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse if(msg.payload.includes('Living')){\n global.set('carpeta','Living');\n msg.payload = \"http://ip_cam2/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse if(msg.payload.includes('Palier')){\n global.set('carpeta','Palier');\n msg.payload = \"http://ip_cam3/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse {\n global.set('carpeta','Fondo');\n msg.payload = \"http://ip_cam4/videostream.cgi?user=usuario&pwd=clave\";\n}\nif(str.includes('Instantanea')){\n msg.url = msg.payload.replace('videostream','snapshot');\n return [null,msg];\n}\nreturn [msg,null];","outputs":2,"noerr":0,"initialize":"","finalize":"","x":540,"y":1840,"wires":[["29c63ff5.6e75b","1916a304.3c99ad"],["6b2c5073.b54ef"]]},{"id":"aebcda0c.1c3fa8","type":"json","z":"a2e09d45.9206f","name":"","property":"payload","action":"","pretty":false,"x":330,"y":1840,"wires":[["4b13f085.0ba31"]]},{"id":"49a7ae0f.58fc6","type":"comment","z":"a2e09d45.9206f","name":"MisCamaras","info":"","x":130,"y":1520,"wires":[]},{"id":"bd8d38b5.6ef118","type":"comment","z":"a2e09d45.9206f","name":"Form Submission","info":"","x":140,"y":1800,"wires":[]},{"id":"69a3e3d6.4b8b7c","type":"comment","z":"a2e09d45.9206f","name":"JavaScript","info":"","x":300,"y":1680,"wires":[]},{"id":"d8236ff6.9cd64","type":"comment","z":"a2e09d45.9206f","name":"css","info":"","x":470,"y":1680,"wires":[]},{"id":"250fe729.f95808","type":"comment","z":"a2e09d45.9206f","name":"HMTL","info":"","x":610,"y":1680,"wires":[]},{"id":"6b2c5073.b54ef","type":"link out","z":"a2e09d45.9206f","name":"","links":["bc70332a.1259"],"x":735,"y":1940,"wires":[]}]
