Skip to content

Instantly share code, notes, and snippets.

@solyarisoftware

solyarisoftware/flows_solyaris.json

Last active July 20, 2018 09:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save solyarisoftware/ebb70e72ae445e4fa67832049a68988b to your computer and use it in GitHub Desktop.
Save solyarisoftware/ebb70e72ae445e4fa67832049a68988b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flows_solyaris.json
[{"id":"82fb6859.2fa9a8","type":"tab","label":"HTTP server /date /datesub","disabled":false,"info":""},{"id":"4c772c0e.fcaa34","type":"tab","label":"cyclic hello word","disabled":true,"info":""},{"id":"b828739b.f802","type":"tab","label":"HML5 example","disabled":true,"info":""},{"id":"c871b554.2443c8","type":"subflow","name":"fill date in json","info":"","in":[{"x":189,"y":205,"wires":[{"id":"58b037d7.1fabf8"}]}],"out":[{"x":1084,"y":511,"wires":[{"id":"48e192e4.258cdc","port":0}]}],"inputLabels":["http request"],"outputLabels":["http body response"]},{"id":"a7411cf7.6b66f","type":"ui_group","z":"4c772c0e.fcaa34","name":"Default","tab":"","disp":true,"width":"6","collapse":false},{"id":"384a7db3.911292","type":"ui_tab","z":"4c772c0e.fcaa34","name":"Home","icon":"dashboard"},{"id":"5aedcd04.ececb4","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#0094CE","value":"#0094CE","edited":false},"page-titlebar-backgroundColor":{"value":"#0094CE","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1bbfff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0094ce","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"2d8ae679.1e343a","type":"inject","z":"4c772c0e.fcaa34","name":"Hello World!","topic":"","payload":"Hello World!","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":320,"wires":[["23fa8021.652fa"]]},{"id":"23fa8021.652fa","type":"debug","z":"4c772c0e.fcaa34","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":530,"y":400,"wires":[]},{"id":"8b8c838f.102b8","type":"http in","z":"82fb6859.2fa9a8","name":"","url":"/date","method":"get","upload":false,"swaggerDoc":"","x":212,"y":241,"wires":[["35548c0.a11d074"]]},{"id":"d2c76432.bfcbf8","type":"template","z":"82fb6859.2fa9a8","name":"costruisci json","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{ \"Hello\": {{ date }} }","x":657,"y":348,"wires":[["ca820f0a.6ca37","ceb648e8.cffd38"]]},{"id":"ca820f0a.6ca37","type":"change","z":"82fb6859.2fa9a8","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"application/json","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":910,"y":400,"wires":[["29e5185b.aad428"]]},{"id":"29e5185b.aad428","type":"http response","z":"82fb6859.2fa9a8","name":"","statusCode":"","headers":{},"x":1123,"y":423,"wires":[]},{"id":"35548c0.a11d074","type":"function","z":"82fb6859.2fa9a8","name":"calcola data attuale","func":"msg.date = new Date()\nreturn msg;","outputs":1,"noerr":0,"x":415,"y":289,"wires":[["d2c76432.bfcbf8","40daa417.7ca25c"]]},{"id":"ceb648e8.cffd38","type":"debug","z":"82fb6859.2fa9a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":910,"y":300,"wires":[]},{"id":"927f8e18.0e5c2","type":"comment","z":"82fb6859.2fa9a8","name":"GET http://localhost:1880/date","info":"bla bla bla\n","x":272,"y":204,"wires":[]},{"id":"40daa417.7ca25c","type":"debug","z":"82fb6859.2fa9a8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"date","x":640,"y":200,"wires":[]},{"id":"d28798b8.b6abf8","type":"http in","z":"b828739b.f802","name":"","url":"/mysite","method":"get","upload":false,"swaggerDoc":"","x":150,"y":320,"wires":[["ef3c7946.423f08"]]},{"id":"1b7d0e57.e3f222","type":"http in","z":"b828739b.f802","name":"","url":"/mysitepost","method":"post","swaggerDoc":"","x":420,"y":700,"wires":[["4788ff29.98ca3","51605a16.4245c4"]]},{"id":"ef3c7946.423f08","type":"function","z":"b828739b.f802","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":320,"wires":[["803ab3e.b5b2d5"]]},{"id":"4788ff29.98ca3","type":"debug","z":"b828739b.f802","name":"mysitepost","active":true,"console":"false","complete":"payload","x":1060,"y":700,"wires":[]},{"id":"f533dcd2.a2a46","type":"http response","z":"b828739b.f802","name":"","statusCode":"","headers":{},"x":1080,"y":660,"wires":[]},{"id":"565f40ae.2b7e2","type":"template","z":"b828739b.f802","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[type=text], select {\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: 100%;\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=submit]:hover {\n background-color: #45a049;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}","x":650,"y":560,"wires":[["201aeb99.5ce2b4"]]},{"id":"803ab3e.b5b2d5","type":"template","z":"b828739b.f802","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\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 $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});","x":490,"y":560,"wires":[["565f40ae.2b7e2"]]},{"id":"169c0146.b399af","type":"http response","z":"b828739b.f802","name":"","x":930,"y":560,"wires":[]},{"id":"201aeb99.5ce2b4","type":"template","z":"b828739b.f802","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n <title>My Site</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n \n\n <h2>Using CSS to style an HTML form with AJAX POST and Node-RED</h2>\n <h4><a href=\"http://www.internetoflego.com\">Internet of LEGO</a></h4>\n\n<div>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <label for=\"fname\">First Name</label>\n <input type=\"text\" id=\"fname\" name=\"firstname\">\n\n <label for=\"lname\">Last Name</label>\n <input type=\"text\" id=\"lname\" name=\"lastname\">\n\n <label for=\"country\">Country</label>\n <select id=\"country\" name=\"country\">\n <option value=\"uk\">United Kingdom</option>\n <option value=\"canada\">Canada</option>\n <option value=\"usa\">USA</option>\n </select>\n \n <input type=\"submit\" value=\"Submit\">\n </form>\n</div>\n<div>\n <span id=\"result\"></span>\n</div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>","x":790,"y":560,"wires":[["169c0146.b399af"]]},{"id":"ee3697c4.c66c48","type":"comment","z":"b828739b.f802","name":"Login Form","info":"","x":490,"y":520,"wires":[]},{"id":"572f052b.7aa73c","type":"function","z":"b828739b.f802","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":660,"wires":[["f533dcd2.a2a46"]]},{"id":"b83447d7.75b8e8","type":"comment","z":"b828739b.f802","name":"Inject msg object properties","info":"","x":360,"y":280,"wires":[]},{"id":"51605a16.4245c4","type":"json","z":"b828739b.f802","name":"","property":"payload","action":"","pretty":false,"x":620,"y":660,"wires":[["572f052b.7aa73c"]]},{"id":"edc0f6c8.f48248","type":"comment","z":"b828739b.f802","name":"Website","info":"","x":130,"y":240,"wires":[]},{"id":"369d30cf.13cea","type":"comment","z":"b828739b.f802","name":"Form Submission","info":"","x":410,"y":640,"wires":[]},{"id":"83d33480.db3878","type":"comment","z":"b828739b.f802","name":"Node-RED Public Site - README","info":"This Flow demonstrates how to create\na simple frontend webpage with Node-RED.\n\nThe public facing page consists of the \nclient side JavaScript, CSS and HTML. \n\nThe important technique is how the mustache \ntemplates are used. Each template will set the\n\"property\" relative to the content. \n\nThe CSS node sets the \"msg.payload.style\" property.\nThe JavaScript node sets the \"msg.payload.script\" property.\nThe HTML node then includes these properties \n<script>{{{payload.script}}}</script>\n<style>{{{payload.style}}}</style>\n\n\nThis example was created by http://www.InternetofLEGO.com\n\n","x":500,"y":180,"wires":[]},{"id":"48e192e4.258cdc","type":"template","z":"c871b554.2443c8","name":"costruisci json","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{ \"Hello\": {{ date }} }","x":680,"y":383,"wires":[["746f03b5.98a77c"]]},{"id":"58b037d7.1fabf8","type":"function","z":"c871b554.2443c8","name":"calcola data attuale","func":"msg.date = new Date()\nreturn msg;","outputs":1,"noerr":0,"x":438,"y":324,"wires":[["48e192e4.258cdc","70e7cf2c.52a81"]]},{"id":"746f03b5.98a77c","type":"debug","z":"c871b554.2443c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":906,"y":307,"wires":[]},{"id":"70e7cf2c.52a81","type":"debug","z":"c871b554.2443c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"date","x":694,"y":167,"wires":[]},{"id":"195d91d.d78a36e","type":"http in","z":"82fb6859.2fa9a8","name":"","url":"/datesub","method":"get","upload":false,"swaggerDoc":"","x":228,"y":478,"wires":[["11a45e9.b6fd2a1"]]},{"id":"e4066547.e1e3c8","type":"change","z":"82fb6859.2fa9a8","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"application/json","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":818,"y":556,"wires":[["e1195c02.f0c03"]]},{"id":"e1195c02.f0c03","type":"http response","z":"82fb6859.2fa9a8","name":"","statusCode":"","headers":{},"x":1032,"y":592,"wires":[]},{"id":"e4324fa5.b8d03","type":"comment","z":"82fb6859.2fa9a8","name":"GET http://localhost:1880/datesub","info":"bla bla bla\n","x":298,"y":441,"wires":[]},{"id":"11a45e9.b6fd2a1","type":"subflow:c871b554.2443c8","z":"82fb6859.2fa9a8","name":"","x":580,"y":520,"wires":[["e4066547.e1e3c8"]]},{"id":"c2ba7913.e9e408","type":"inject","z":"4c772c0e.fcaa34","name":"","topic":"","payload":"Started!","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":260,"y":100,"wires":[["587b3211.5f229c"]]},{"id":"587b3211.5f229c","type":"debug","z":"4c772c0e.fcaa34","name":"","active":true,"console":"false","complete":"false","x":570,"y":100,"wires":[]},{"id":"bfbe7e9f.fd1c2","type":"comment","z":"4c772c0e.fcaa34","name":"all'avvio dell'stanza Node-RED","info":"https://cookbook.nodered.org/basic/trigger-on-start","x":330,"y":60,"wires":[]},{"id":"54710912.858aa8","type":"comment","z":"4c772c0e.fcaa34","name":"evento triggerato cliccando","info":"https://cookbook.nodered.org/basic/trigger-on-start","x":330,"y":280,"wires":[]}]
Raw
nodered-examples.json
[{"id":"4c772c0e.fcaa34","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"82fb6859.2fa9a8","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"b828739b.f802","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"46aa9d1b.3f7404","type":"tab","label":"Flow 4","disabled":false,"info":""},{"id":"c871b554.2443c8","type":"subflow","name":"fill date in json","info":"","in":[{"x":189,"y":205,"wires":[{"id":"58b037d7.1fabf8"}]}],"out":[{"x":1084,"y":511,"wires":[{"id":"48e192e4.258cdc","port":0}]}],"inputLabels":["http request"],"outputLabels":["http body response"]},{"id":"a7411cf7.6b66f","type":"ui_group","z":"4c772c0e.fcaa34","name":"Default","tab":"","disp":true,"width":"6","collapse":false},{"id":"384a7db3.911292","type":"ui_tab","z":"4c772c0e.fcaa34","name":"Home","icon":"dashboard"},{"id":"5aedcd04.ececb4","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#0094CE","value":"#0094CE","edited":false},"page-titlebar-backgroundColor":{"value":"#0094CE","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1bbfff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0094ce","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"2d8ae679.1e343a","type":"inject","z":"4c772c0e.fcaa34","name":"Hello World!","topic":"","payload":"Hello World!","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":316,"y":240,"wires":[["23fa8021.652fa"]]},{"id":"23fa8021.652fa","type":"debug","z":"4c772c0e.fcaa34","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":863,"y":204,"wires":[]},{"id":"8b8c838f.102b8","type":"http in","z":"82fb6859.2fa9a8","name":"","url":"/date","method":"get","upload":false,"swaggerDoc":"","x":212,"y":241,"wires":[["35548c0.a11d074"]]},{"id":"d2c76432.bfcbf8","type":"template","z":"82fb6859.2fa9a8","name":"costruisci json","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{ \"Hello\": {{ date }} }","x":657,"y":348,"wires":[["ca820f0a.6ca37","ceb648e8.cffd38"]]},{"id":"ca820f0a.6ca37","type":"change","z":"82fb6859.2fa9a8","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"application/json","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":924,"y":390,"wires":[["29e5185b.aad428"]]},{"id":"29e5185b.aad428","type":"http response","z":"82fb6859.2fa9a8","name":"","statusCode":"","headers":{},"x":1123,"y":423,"wires":[]},{"id":"35548c0.a11d074","type":"function","z":"82fb6859.2fa9a8","name":"calcola data attuale","func":"msg.date = new Date()\nreturn msg;","outputs":1,"noerr":0,"x":415,"y":289,"wires":[["d2c76432.bfcbf8","40daa417.7ca25c"]]},{"id":"ceb648e8.cffd38","type":"debug","z":"82fb6859.2fa9a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":883,"y":272,"wires":[]},{"id":"927f8e18.0e5c2","type":"comment","z":"82fb6859.2fa9a8","name":"GET http://localhost:1880/date","info":"bla bla bla\n","x":272,"y":204,"wires":[]},{"id":"40daa417.7ca25c","type":"debug","z":"82fb6859.2fa9a8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"date","x":671,"y":132,"wires":[]},{"id":"d28798b8.b6abf8","type":"http in","z":"b828739b.f802","name":"","url":"/mysite","method":"get","upload":false,"swaggerDoc":"","x":320,"y":462,"wires":[["ef3c7946.423f08"]]},{"id":"1b7d0e57.e3f222","type":"http in","z":"b828739b.f802","name":"","url":"/mysitepost","method":"post","swaggerDoc":"","x":340,"y":662,"wires":[["4788ff29.98ca3","51605a16.4245c4"]]},{"id":"ef3c7946.423f08","type":"function","z":"b828739b.f802","name":"msg.url = \"mysitepost\";","func":"msg.url = \"mysitepost\";\nreturn msg;","outputs":1,"noerr":0,"x":560,"y":462,"wires":[["803ab3e.b5b2d5"]]},{"id":"4788ff29.98ca3","type":"debug","z":"b828739b.f802","name":"mysitepost","active":true,"console":"false","complete":"payload","x":980,"y":662,"wires":[]},{"id":"f533dcd2.a2a46","type":"http response","z":"b828739b.f802","name":"","statusCode":"","headers":{},"x":1000,"y":622,"wires":[]},{"id":"565f40ae.2b7e2","type":"template","z":"b828739b.f802","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"input[type=text], select {\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: 100%;\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=submit]:hover {\n background-color: #45a049;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}","x":720,"y":562,"wires":[["201aeb99.5ce2b4"]]},{"id":"803ab3e.b5b2d5","type":"template","z":"b828739b.f802","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\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 $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});","x":560,"y":562,"wires":[["565f40ae.2b7e2"]]},{"id":"169c0146.b399af","type":"http response","z":"b828739b.f802","name":"","x":1000,"y":562,"wires":[]},{"id":"201aeb99.5ce2b4","type":"template","z":"b828739b.f802","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n <head>\n <title>My Site</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n \n\n <h2>Using CSS to style an HTML form with AJAX POST and Node-RED</h2>\n <h4><a href=\"http://www.internetoflego.com\">Internet of LEGO</a></h4>\n\n<div>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <label for=\"fname\">First Name</label>\n <input type=\"text\" id=\"fname\" name=\"firstname\">\n\n <label for=\"lname\">Last Name</label>\n <input type=\"text\" id=\"lname\" name=\"lastname\">\n\n <label for=\"country\">Country</label>\n <select id=\"country\" name=\"country\">\n <option value=\"uk\">United Kingdom</option>\n <option value=\"canada\">Canada</option>\n <option value=\"usa\">USA</option>\n </select>\n \n <input type=\"submit\" value=\"Submit\">\n </form>\n</div>\n<div>\n <span id=\"result\"></span>\n</div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>","x":860,"y":562,"wires":[["169c0146.b399af"]]},{"id":"ee3697c4.c66c48","type":"comment","z":"b828739b.f802","name":"Login Form","info":"","x":520,"y":522,"wires":[]},{"id":"572f052b.7aa73c","type":"function","z":"b828739b.f802","name":"return msg.payload to client","func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":622,"wires":[["f533dcd2.a2a46"]]},{"id":"b83447d7.75b8e8","type":"comment","z":"b828739b.f802","name":"Inject msg object properties","info":"","x":530,"y":422,"wires":[]},{"id":"51605a16.4245c4","type":"json","z":"b828739b.f802","name":"","property":"payload","action":"","pretty":false,"x":540,"y":622,"wires":[["572f052b.7aa73c"]]},{"id":"edc0f6c8.f48248","type":"comment","z":"b828739b.f802","name":"Website","info":"","x":300,"y":382,"wires":[]},{"id":"369d30cf.13cea","type":"comment","z":"b828739b.f802","name":"Form Submission","info":"","x":330,"y":602,"wires":[]},{"id":"83d33480.db3878","type":"comment","z":"b828739b.f802","name":"Node-RED Public Site - README","info":"This Flow demonstrates how to create\na simple frontend webpage with Node-RED.\n\nThe public facing page consists of the \nclient side JavaScript, CSS and HTML. \n\nThe important technique is how the mustache \ntemplates are used. Each template will set the\n\"property\" relative to the content. \n\nThe CSS node sets the \"msg.payload.style\" property.\nThe JavaScript node sets the \"msg.payload.script\" property.\nThe HTML node then includes these properties \n<script>{{{payload.script}}}</script>\n<style>{{{payload.style}}}</style>\n\n\nThis example was created by http://www.InternetofLEGO.com\n\n","x":630,"y":282,"wires":[]},{"id":"48e192e4.258cdc","type":"template","z":"c871b554.2443c8","name":"costruisci json","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{ \"Hello\": {{ date }} }","x":680,"y":383,"wires":[["746f03b5.98a77c"]]},{"id":"58b037d7.1fabf8","type":"function","z":"c871b554.2443c8","name":"calcola data attuale","func":"msg.date = new Date()\nreturn msg;","outputs":1,"noerr":0,"x":438,"y":324,"wires":[["48e192e4.258cdc","70e7cf2c.52a81"]]},{"id":"746f03b5.98a77c","type":"debug","z":"c871b554.2443c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":906,"y":307,"wires":[]},{"id":"70e7cf2c.52a81","type":"debug","z":"c871b554.2443c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"date","x":694,"y":167,"wires":[]},{"id":"195d91d.d78a36e","type":"http in","z":"82fb6859.2fa9a8","name":"","url":"/datesub","method":"get","upload":false,"swaggerDoc":"","x":228,"y":478,"wires":[["11a45e9.b6fd2a1"]]},{"id":"e4066547.e1e3c8","type":"change","z":"82fb6859.2fa9a8","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"application/json","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":818,"y":556,"wires":[["e1195c02.f0c03"]]},{"id":"e1195c02.f0c03","type":"http response","z":"82fb6859.2fa9a8","name":"","statusCode":"","headers":{},"x":1032,"y":592,"wires":[]},{"id":"e4324fa5.b8d03","type":"comment","z":"82fb6859.2fa9a8","name":"GET http://localhost:1880/datesub","info":"bla bla bla\n","x":298,"y":441,"wires":[]},{"id":"11a45e9.b6fd2a1","type":"subflow:c871b554.2443c8","z":"82fb6859.2fa9a8","name":"","x":588,"y":499,"wires":[["e4066547.e1e3c8"]]}]
Raw
subflow-example.json
[{"id":"48e192e4.258cdc","type":"template","z":"c871b554.2443c8","name":"costruisci json","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{ \"Hello\": {{ date }} }","x":680,"y":383,"wires":[["746f03b5.98a77c"]]},{"id":"58b037d7.1fabf8","type":"function","z":"c871b554.2443c8","name":"calcola data attuale","func":"msg.date = new Date()\nreturn msg;","outputs":1,"noerr":0,"x":438,"y":324,"wires":[["48e192e4.258cdc","70e7cf2c.52a81"]]},{"id":"746f03b5.98a77c","type":"debug","z":"c871b554.2443c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":906,"y":307,"wires":[]},{"id":"70e7cf2c.52a81","type":"debug","z":"c871b554.2443c8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"date","x":694,"y":167,"wires":[]}]
Raw
subflow-example_formatted.json
[
{
"id":"82fb6859.2fa9a8",
"type":"tab",
"label":"HTTP server /date /datesub",
"disabled":false,
"info":""
},
{
"id":"4c772c0e.fcaa34",
"type":"tab",
"label":"cyclic hello word",
"disabled":true,
"info":""
},
{
"id":"b828739b.f802",
"type":"tab",
"label":"HML5 example",
"disabled":true,
"info":""
},
{
"id":"c871b554.2443c8",
"type":"subflow",
"name":"fill date in json",
"info":"",
"in":[
{
"x":189,
"y":205,
"wires":[
{
"id":"58b037d7.1fabf8"
}
]
}
],
"out":[
{
"x":1084,
"y":511,
"wires":[
{
"id":"48e192e4.258cdc",
"port":0
}
]
}
],
"inputLabels":[
"http request"
],
"outputLabels":[
"http body response"
]
},
{
"id":"a7411cf7.6b66f",
"type":"ui_group",
"z":"4c772c0e.fcaa34",
"name":"Default",
"tab":"",
"disp":true,
"width":"6",
"collapse":false
},
{
"id":"384a7db3.911292",
"type":"ui_tab",
"z":"4c772c0e.fcaa34",
"name":"Home",
"icon":"dashboard"
},
{
"id":"5aedcd04.ececb4",
"type":"ui_base",
"theme":{
"name":"theme-light",
"lightTheme":{
"default":"#0094CE",
"baseColor":"#0094CE",
"baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
"edited":true,
"reset":false
},
"darkTheme":{
"default":"#097479",
"baseColor":"#097479",
"baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
"edited":false
},
"customTheme":{
"name":"Untitled Theme 1",
"default":"#4B7930",
"baseColor":"#4B7930",
"baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
},
"themeState":{
"base-color":{
"default":"#0094CE",
"value":"#0094CE",
"edited":false
},
"page-titlebar-backgroundColor":{
"value":"#0094CE",
"edited":false
},
"page-backgroundColor":{
"value":"#fafafa",
"edited":false
},
"page-sidebar-backgroundColor":{
"value":"#ffffff",
"edited":false
},
"group-textColor":{
"value":"#1bbfff",
"edited":false
},
"group-borderColor":{
"value":"#ffffff",
"edited":false
},
"group-backgroundColor":{
"value":"#ffffff",
"edited":false
},
"widget-textColor":{
"value":"#111111",
"edited":false
},
"widget-backgroundColor":{
"value":"#0094ce",
"edited":false
},
"widget-borderColor":{
"value":"#ffffff",
"edited":false
},
"base-font":{
"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
}
}
},
"site":{
"name":"Node-RED Dashboard",
"hideToolbar":"false",
"allowSwipe":"false",
"allowTempTheme":"true",
"dateFormat":"DD/MM/YYYY",
"sizes":{
"sx":48,
"sy":48,
"gx":6,
"gy":6,
"cx":6,
"cy":6,
"px":0,
"py":0
}
}
},
{
"id":"2d8ae679.1e343a",
"type":"inject",
"z":"4c772c0e.fcaa34",
"name":"Hello World!",
"topic":"",
"payload":"Hello World!",
"payloadType":"str",
"repeat":"",
"crontab":"",
"once":false,
"onceDelay":0.1,
"x":290,
"y":320,
"wires":[
[
"23fa8021.652fa"
]
]
},
{
"id":"23fa8021.652fa",
"type":"debug",
"z":"4c772c0e.fcaa34",
"name":"",
"active":true,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"payload",
"x":530,
"y":400,
"wires":[
]
},
{
"id":"8b8c838f.102b8",
"type":"http in",
"z":"82fb6859.2fa9a8",
"name":"",
"url":"/date",
"method":"get",
"upload":false,
"swaggerDoc":"",
"x":212,
"y":241,
"wires":[
[
"35548c0.a11d074"
]
]
},
{
"id":"d2c76432.bfcbf8",
"type":"template",
"z":"82fb6859.2fa9a8",
"name":"costruisci json",
"field":"payload",
"fieldType":"msg",
"format":"handlebars",
"syntax":"mustache",
"template":"{ \"Hello\": {{ date }} }",
"x":657,
"y":348,
"wires":[
[
"ca820f0a.6ca37",
"ceb648e8.cffd38"
]
]
},
{
"id":"ca820f0a.6ca37",
"type":"change",
"z":"82fb6859.2fa9a8",
"name":"Set Headers",
"rules":[
{
"t":"set",
"p":"headers",
"pt":"msg",
"to":"{}",
"tot":"json"
},
{
"t":"set",
"p":"headers.content-type",
"pt":"msg",
"to":"application/json",
"tot":"str"
}
],
"action":"",
"property":"",
"from":"",
"to":"",
"reg":false,
"x":910,
"y":400,
"wires":[
[
"29e5185b.aad428"
]
]
},
{
"id":"29e5185b.aad428",
"type":"http response",
"z":"82fb6859.2fa9a8",
"name":"",
"statusCode":"",
"headers":{
},
"x":1123,
"y":423,
"wires":[
]
},
{
"id":"35548c0.a11d074",
"type":"function",
"z":"82fb6859.2fa9a8",
"name":"calcola data attuale",
"func":"msg.date = new Date()\nreturn msg;",
"outputs":1,
"noerr":0,
"x":415,
"y":289,
"wires":[
[
"d2c76432.bfcbf8",
"40daa417.7ca25c"
]
]
},
{
"id":"ceb648e8.cffd38",
"type":"debug",
"z":"82fb6859.2fa9a8",
"name":"",
"active":true,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"payload",
"x":910,
"y":300,
"wires":[
]
},
{
"id":"927f8e18.0e5c2",
"type":"comment",
"z":"82fb6859.2fa9a8",
"name":"GET http://localhost:1880/date",
"info":"bla bla bla\n",
"x":272,
"y":204,
"wires":[
]
},
{
"id":"40daa417.7ca25c",
"type":"debug",
"z":"82fb6859.2fa9a8",
"name":"",
"active":false,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"date",
"x":640,
"y":200,
"wires":[
]
},
{
"id":"d28798b8.b6abf8",
"type":"http in",
"z":"b828739b.f802",
"name":"",
"url":"/mysite",
"method":"get",
"upload":false,
"swaggerDoc":"",
"x":150,
"y":320,
"wires":[
[
"ef3c7946.423f08"
]
]
},
{
"id":"1b7d0e57.e3f222",
"type":"http in",
"z":"b828739b.f802",
"name":"",
"url":"/mysitepost",
"method":"post",
"swaggerDoc":"",
"x":420,
"y":700,
"wires":[
[
"4788ff29.98ca3",
"51605a16.4245c4"
]
]
},
{
"id":"ef3c7946.423f08",
"type":"function",
"z":"b828739b.f802",
"name":"msg.url = \"mysitepost\";",
"func":"msg.url = \"mysitepost\";\nreturn msg;",
"outputs":1,
"noerr":0,
"x":390,
"y":320,
"wires":[
[
"803ab3e.b5b2d5"
]
]
},
{
"id":"4788ff29.98ca3",
"type":"debug",
"z":"b828739b.f802",
"name":"mysitepost",
"active":true,
"console":"false",
"complete":"payload",
"x":1060,
"y":700,
"wires":[
]
},
{
"id":"f533dcd2.a2a46",
"type":"http response",
"z":"b828739b.f802",
"name":"",
"statusCode":"",
"headers":{
},
"x":1080,
"y":660,
"wires":[
]
},
{
"id":"565f40ae.2b7e2",
"type":"template",
"z":"b828739b.f802",
"name":"CSS",
"field":"payload.style",
"fieldType":"msg",
"format":"html",
"syntax":"mustache",
"template":"input[type=text], select {\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: 100%;\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=submit]:hover {\n background-color: #45a049;\n}\n\ndiv {\n border-radius: 5px;\n background-color: #f2f2f2;\n padding: 20px;\n}",
"x":650,
"y":560,
"wires":[
[
"201aeb99.5ce2b4"
]
]
},
{
"id":"803ab3e.b5b2d5",
"type":"template",
"z":"b828739b.f802",
"name":"JavaScript",
"field":"payload.script",
"fieldType":"msg",
"format":"javascript",
"syntax":"plain",
"template":"$(document).ready(function(e) {\n \n $(\"form[ajax=true]\").submit(function(e) {\n \n e.preventDefault();\n \n var form_data = $(this).serialize();\n var form_url = $(this).attr(\"action\");\n var form_method = $(this).attr(\"method\").toUpperCase();\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 $(\"#result\").html(returnhtml); \n $(\"#loadingimg\").hide(); \n } \n }); \n \n });\n \n});",
"x":490,
"y":560,
"wires":[
[
"565f40ae.2b7e2"
]
]
},
{
"id":"169c0146.b399af",
"type":"http response",
"z":"b828739b.f802",
"name":"",
"x":930,
"y":560,
"wires":[
]
},
{
"id":"201aeb99.5ce2b4",
"type":"template",
"z":"b828739b.f802",
"name":"HTML",
"field":"payload",
"fieldType":"msg",
"format":"handlebars",
"syntax":"mustache",
"template":"<html>\n <head>\n <title>My Site</title>\n <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\">\n <meta charset=\"utf-8\">\n <script src=\"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js\"></script>\n <style>{{{payload.style}}}</style>\n </head>\n \n\n <h2>Using CSS to style an HTML form with AJAX POST and Node-RED</h2>\n <h4><a href=\"http://www.internetoflego.com\">Internet of LEGO</a></h4>\n\n<div>\n <form method=\"post\" action=\"/{{url}}\" ajax=\"true\">\n <label for=\"fname\">First Name</label>\n <input type=\"text\" id=\"fname\" name=\"firstname\">\n\n <label for=\"lname\">Last Name</label>\n <input type=\"text\" id=\"lname\" name=\"lastname\">\n\n <label for=\"country\">Country</label>\n <select id=\"country\" name=\"country\">\n <option value=\"uk\">United Kingdom</option>\n <option value=\"canada\">Canada</option>\n <option value=\"usa\">USA</option>\n </select>\n \n <input type=\"submit\" value=\"Submit\">\n </form>\n</div>\n<div>\n <span id=\"result\"></span>\n</div>\n\n</body>\n</html>\n<script>{{{payload.script}}}</script>",
"x":790,
"y":560,
"wires":[
[
"169c0146.b399af"
]
]
},
{
"id":"ee3697c4.c66c48",
"type":"comment",
"z":"b828739b.f802",
"name":"Login Form",
"info":"",
"x":490,
"y":520,
"wires":[
]
},
{
"id":"572f052b.7aa73c",
"type":"function",
"z":"b828739b.f802",
"name":"return msg.payload to client",
"func":"msg.payload = 'The following data was submitted and available in the msg.payload: '+msg.payload;\nreturn msg;",
"outputs":1,
"noerr":0,
"x":810,
"y":660,
"wires":[
[
"f533dcd2.a2a46"
]
]
},
{
"id":"b83447d7.75b8e8",
"type":"comment",
"z":"b828739b.f802",
"name":"Inject msg object properties",
"info":"",
"x":360,
"y":280,
"wires":[
]
},
{
"id":"51605a16.4245c4",
"type":"json",
"z":"b828739b.f802",
"name":"",
"property":"payload",
"action":"",
"pretty":false,
"x":620,
"y":660,
"wires":[
[
"572f052b.7aa73c"
]
]
},
{
"id":"edc0f6c8.f48248",
"type":"comment",
"z":"b828739b.f802",
"name":"Website",
"info":"",
"x":130,
"y":240,
"wires":[
]
},
{
"id":"369d30cf.13cea",
"type":"comment",
"z":"b828739b.f802",
"name":"Form Submission",
"info":"",
"x":410,
"y":640,
"wires":[
]
},
{
"id":"83d33480.db3878",
"type":"comment",
"z":"b828739b.f802",
"name":"Node-RED Public Site - README",
"info":"This Flow demonstrates how to create\na simple frontend webpage with Node-RED.\n\nThe public facing page consists of the \nclient side JavaScript, CSS and HTML. \n\nThe important technique is how the mustache \ntemplates are used. Each template will set the\n\"property\" relative to the content. \n\nThe CSS node sets the \"msg.payload.style\" property.\nThe JavaScript node sets the \"msg.payload.script\" property.\nThe HTML node then includes these properties \n<script>{{{payload.script}}}</script>\n<style>{{{payload.style}}}</style>\n\n\nThis example was created by http://www.InternetofLEGO.com\n\n",
"x":500,
"y":180,
"wires":[
]
},
{
"id":"48e192e4.258cdc",
"type":"template",
"z":"c871b554.2443c8",
"name":"costruisci json",
"field":"payload",
"fieldType":"msg",
"format":"handlebars",
"syntax":"mustache",
"template":"{ \"Hello\": {{ date }} }",
"x":680,
"y":383,
"wires":[
[
"746f03b5.98a77c"
]
]
},
{
"id":"58b037d7.1fabf8",
"type":"function",
"z":"c871b554.2443c8",
"name":"calcola data attuale",
"func":"msg.date = new Date()\nreturn msg;",
"outputs":1,
"noerr":0,
"x":438,
"y":324,
"wires":[
[
"48e192e4.258cdc",
"70e7cf2c.52a81"
]
]
},
{
"id":"746f03b5.98a77c",
"type":"debug",
"z":"c871b554.2443c8",
"name":"",
"active":true,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"payload",
"x":906,
"y":307,
"wires":[
]
},
{
"id":"70e7cf2c.52a81",
"type":"debug",
"z":"c871b554.2443c8",
"name":"",
"active":false,
"tosidebar":true,
"console":false,
"tostatus":false,
"complete":"date",
"x":694,
"y":167,
"wires":[
]
},
{
"id":"195d91d.d78a36e",
"type":"http in",
"z":"82fb6859.2fa9a8",
"name":"",
"url":"/datesub",
"method":"get",
"upload":false,
"swaggerDoc":"",
"x":228,
"y":478,
"wires":[
[
"11a45e9.b6fd2a1"
]
]
},
{
"id":"e4066547.e1e3c8",
"type":"change",
"z":"82fb6859.2fa9a8",
"name":"Set Headers",
"rules":[
{
"t":"set",
"p":"headers",
"pt":"msg",
"to":"{}",
"tot":"json"
},
{
"t":"set",
"p":"headers.content-type",
"pt":"msg",
"to":"application/json",
"tot":"str"
}
],
"action":"",
"property":"",
"from":"",
"to":"",
"reg":false,
"x":818,
"y":556,
"wires":[
[
"e1195c02.f0c03"
]
]
},
{
"id":"e1195c02.f0c03",
"type":"http response",
"z":"82fb6859.2fa9a8",
"name":"",
"statusCode":"",
"headers":{
},
"x":1032,
"y":592,
"wires":[
]
},
{
"id":"e4324fa5.b8d03",
"type":"comment",
"z":"82fb6859.2fa9a8",
"name":"GET http://localhost:1880/datesub",
"info":"bla bla bla\n",
"x":298,
"y":441,
"wires":[
]
},
{
"id":"11a45e9.b6fd2a1",
"type":"subflow:c871b554.2443c8",
"z":"82fb6859.2fa9a8",
"name":"",
"x":580,
"y":520,
"wires":[
[
"e4066547.e1e3c8"
]
]
},
{
"id":"c2ba7913.e9e408",
"type":"inject",
"z":"4c772c0e.fcaa34",
"name":"",
"topic":"",
"payload":"Started!",
"payloadType":"str",
"repeat":"",
"crontab":"",
"once":true,
"onceDelay":"",
"x":260,
"y":100,
"wires":[
[
"587b3211.5f229c"
]
]
},
{
"id":"587b3211.5f229c",
"type":"debug",
"z":"4c772c0e.fcaa34",
"name":"",
"active":true,
"console":"false",
"complete":"false",
"x":570,
"y":100,
"wires":[
]
},
{
"id":"bfbe7e9f.fd1c2",
"type":"comment",
"z":"4c772c0e.fcaa34",
"name":"all'avvio dell'stanza Node-RED",
"info":"https://cookbook.nodered.org/basic/trigger-on-start",
"x":330,
"y":60,
"wires":[
]
},
{
"id":"54710912.858aa8",
"type":"comment",
"z":"4c772c0e.fcaa34",
"name":"evento triggerato cliccando",
"info":"https://cookbook.nodered.org/basic/trigger-on-start",
"x":330,
"y":280,
"wires":[
]
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment