Front End - Node Red - Camaras ip
Es una variante de front end node red ( https://flows.nodered.org/flow/a0b4ec53f4e6643d35fe62c37ba75326 ) , usamos las imagenes de las camaras para la selección y toma de instantanea.
[{"id":"34578d67.750202","type":"http in","z":"d787be9a.1521e","name":"","url":"/miscamaras","method":"get","upload":false,"swaggerDoc":"","x":200,"y":480,"wires":[["95c40e4e.b65ad"]]},{"id":"f9ac9d29.04578","type":"http in","z":"d787be9a.1521e","name":"","url":"/selCam","method":"post","upload":false,"swaggerDoc":"","x":220,"y":680,"wires":[["841aa894.3fa188","f6b4adac.291b5"]]},{"id":"841aa894.3fa188","type":"debug","z":"d787be9a.1521e","name":"","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"true","targetType":"full","x":860,"y":680,"wires":[]},{"id":"758ed210.fc23cc","type":"http response","z":"d787be9a.1521e","name":"","x":860,"y":620,"wires":[]},{"id":"c76c8a6e.29a3e8","type":"template","z":"d787be9a.1521e","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[type=image] {\n width: 22,5%;\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 box-shadow: 0 5px 25px #2EE06E\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\nimagen {\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":560,"y":560,"wires":[["51733909.25dbf8"]]},{"id":"95c40e4e.b65ad","type":"template","z":"d787be9a.1521e","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\").click(function() {\n buttonpressed = $(this).attr('id')\n }) \n })\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = 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 $(\"#instantanea\").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":400,"y":560,"wires":[["c76c8a6e.29a3e8"]]},{"id":"e94eff77.e3554","type":"http response","z":"d787be9a.1521e","name":"","statusCode":"","headers":{},"x":860,"y":560,"wires":[]},{"id":"12f5ecec.33fe13","type":"function","z":"d787be9a.1521e","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_cam/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse if(msg.payload.includes('living')){\n global.set('carpeta','Living');\n msg.payload = \"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse if(msg.payload.includes('palier')){\n global.set('carpeta','Palier');\n msg.payload = \"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse if(msg.payload.includes('fondo')){\n global.set('carpeta','fondo');\n msg.payload = \"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\";\n}\nelse if(str.includes('instantanea')){\n msg.url = msg.payload.replace('videostream','snapshot');\n return [null,msg];\n}\nreturn [msg,null];","outputs":2,"noerr":0,"x":630,"y":640,"wires":[["758ed210.fc23cc","841aa894.3fa188"],["1524f727.178f99","eed13f34.86f1b"]]},{"id":"f6b4adac.291b5","type":"json","z":"d787be9a.1521e","name":"","property":"payload","action":"","pretty":false,"x":410,"y":640,"wires":[["12f5ecec.33fe13"]]},{"id":"defce275.9ca57","type":"comment","z":"d787be9a.1521e","name":"MisCamaras","info":"","x":210,"y":400,"wires":[]},{"id":"22010c15.70aea4","type":"comment","z":"d787be9a.1521e","name":"/selCam","info":"","x":220,"y":600,"wires":[]},{"id":"3f1b04b6.2f9d8c","type":"comment","z":"d787be9a.1521e","name":"JavaScript","info":"","x":390,"y":480,"wires":[]},{"id":"2fa5d2a4.ae085e","type":"comment","z":"d787be9a.1521e","name":"css","info":"","x":560,"y":480,"wires":[]},{"id":"f75bbfcf.d3675","type":"comment","z":"d787be9a.1521e","name":"HMTL","info":"","x":700,"y":480,"wires":[]},{"id":"51733909.25dbf8","type":"template","z":"d787be9a.1521e","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 for=\"name\">Seleccione camara: </label>\n <div id=\"camaras\">\n <input type=\"image\" src=\"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\" id=\"comedor\" height=\"150\">\n <input type=\"image\" src=\"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\" id=\"living\" height=\"150\">\n <input type=\"image\" src=\"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\" id=\"palier\" height=\"150\">\n <input type=\"image\" src=\"http://ip_cam/videostream.cgi?user=usuario&pwd=clave\" id=\"fondo\" height=\"150\">\n </div>\n\n </form>\n</div>\n\n<div align=\"center\">\n <form method=\"post\" action=\"\" ajax=\"true\">\n \n <label for=\"name\">Imagen seleccionada. Toque la imagen para obtener una instantanea. </label>\n <div id=\"imagen\">\n <input type=\"image\" src=\"\" id=\"instantanea\" alt=\"Imagen seleccionada\">\n </div>\n </form>\n</div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>","x":700,"y":560,"wires":[["e94eff77.e3554"]]},{"id":"1524f727.178f99","type":"debug","z":"d787be9a.1521e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":850,"y":800,"wires":[]},{"id":"a35b0f0.5e2b0f","type":"comment","z":"d787be9a.1521e","name":"Tomar foto","info":"","x":940,"y":740,"wires":[]},{"id":"eed13f34.86f1b","type":"link out","z":"d787be9a.1521e","name":"","links":[],"x":835,"y":740,"wires":[]}]
