if the WebPage is called with "/webserialTest?ESPIP=192.168.0.5" and open,
- how to refresh automatically at receipt of a payload from an MQTT IN (or in the exemple from an Inject)
- how to add/append the payload to the textarea element id="serialOutput" of the WebPage
[
{
"id": "2db16cc512a1eea6",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "34d8eca15e7cec65",
"type": "template",
"z": "2db16cc512a1eea6",
"name": "HTML",
"field": "payload",
"fieldType": "msg",
"format": "handlebars",
"syntax": "mustache",
"template": "<!DOCTYPE html>\n<head>\n <title>NodeRed WebPage</title>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>ESP32 Serial Monitor</title>\n <style>\n html {\n font-family: Arial, Helvetica, sans-serif;\n text-align: left;\n }\n h1 {\n font-size: 1.8rem;\n color: white;\n text-align: center;\n }\n h2 {\n font-size: 1.5rem;\n font-weight: bold;\n color: #143642;\n }\n h3 {\n font-size: 1.0rem;\n font-weight: bold;\n color: #143642;\n }\n .topnav {\n overflow: hidden;\n background-color: #143642;\n } \n .button {\n padding: 15px 50px;\n font-size: 24px;\n text-align: center;\n outline: none;\n color: #fff;\n background-color: #0f8b8d;\n border: none;\n border-radius: 5px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-tap-highlight-color: rgba(0,0,0,0);\n }\n .button:active {\n background-color: #0f8b8d;\n box-shadow: 2 2px #CDCDCD;\n transform: translateY(2px);\n } \n\n </style>\n</head>\n\n<script type = \"text/javascript\">\n window.onload = function() {\n addEvents();\n }\n \n function addEvents() {\n //list all events\n //addEvent(document.getElementById('state08.2.update'), 'click', updateState082);\n } \n function addEvent(element, evnt, funct){\n if (element.attachEvent)\n return element.attachEvent('on'+evnt, funct);\n else\n return element.addEventListener(evnt, funct, false);\n }\n\n function input_update(newID, newVal) {\n switch(newVal) {\n case \"0\":\n case \"1\":\n case \"2\":\n input_post(newID, newVal);\n break; \n case \"C\":\n document.getElementById(\"serialOutput\").textContent = \"\";\n break;\n default:\n document.getElementById('serialInput').value = \"Invalid entry\";\n } \n }\n function input_post(newID, newVal) {\n fetch(\"http://192.168.0.4:1880/WebSerialPost\", {\n method: \"POST\", \n body: JSON.stringify({newID, newVal}),\n headers: { \"Content-type\": \"application/json; charset=UTF-8\" } })\n .then((response) => response.json())\n .then((json) => window.location.reload()); \n }\n\n</script>\n\n<body>\n <div class=\"topnav\">\n <h1>ESP32 WebSerial Monitor</h1>\n </div>\n\n <p>Return ...... : <a href=\"/wsHC\">Home Control</a></p>\n <p>Return ...... : <a href=\"/wsESPSU\">ESP Set up</a></p><br> \n\n <input type=\"text\" id=\"serialESP\" size=\"15\" style=\"font-weight: bold\" value=\"{{global.WebSerial_ESPIP}}\" readonly> <br><br>\n\n <input type=\"text\" id=\"serialInput\" size=\"15\" style=\"background-color: lightyellow\" >\n <input type=\"submit\" id=\"btn.update\"\n onclick=\"input_update(serialESP.value,serialInput.value)\" value=\"Send\" />\n <p>...0: No Serial, 1: Serial Monitor, 2: WebSerial</p> \n <p>...C: Clear output</p> \n\n\n <textarea id=\"serialOutput\" rows=\"20\" cols=\"80\" style=\"resize: vertical;\">{{payload}}</textarea>\n <script>\n document.getElementById(\"serialOutput\").scrollTop = document.getElementById(\"serialOutput\").scrollHeight;\n </script> \n</body>\n</html>\n",
"output": "str",
"x": 650,
"y": 140,
"wires": [
[
"b813a0a187b74073"
]
]
},
{
"id": "578a752513284892",
"type": "http in",
"z": "2db16cc512a1eea6",
"name": "",
"url": "/webserialTest",
"method": "get",
"upload": false,
"swaggerDoc": "",
"x": 150,
"y": 140,
"wires": [
[
"1881c5d0437ef961"
]
]
},
{
"id": "1881c5d0437ef961",
"type": "change",
"z": "2db16cc512a1eea6",
"name": "set globals",
"rules": [
{
"t": "set",
"p": "WebSerial_ESPIP",
"pt": "global",
"to": "payload.ESPIP",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 370,
"y": 140,
"wires": [
[
"34d8eca15e7cec65"
]
]
},
{
"id": "b813a0a187b74073",
"type": "http response",
"z": "2db16cc512a1eea6",
"name": "",
"statusCode": "",
"headers": {},
"x": 810,
"y": 140,
"wires": []
},
{
"id": "f54810bd7f204107",
"type": "function",
"z": "2db16cc512a1eea6",
"name": "",
"func": "//to be completed : publish to proper ESP\n\nvar pl = msg.payload;\npl = pl.newVal;\nmsg.payload = pl;\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 360,
"y": 220,
"wires": [
[
"ad5c33a9c7282915"
]
]
},
{
"id": "ad5c33a9c7282915",
"type": "mqtt out",
"z": "2db16cc512a1eea6",
"name": "",
"topic": "esp32/WebSerialSts",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "407a01e4.6b637",
"x": 700,
"y": 220,
"wires": []
},
{
"id": "2b63344ff190b039",
"type": "http in",
"z": "2db16cc512a1eea6",
"name": "",
"url": "/WebSerialPost",
"method": "post",
"upload": false,
"swaggerDoc": "",
"x": 160,
"y": 220,
"wires": [
[
"f54810bd7f204107"
]
]
},
{
"id": "a60f5d2f3a4146d8",
"type": "function",
"z": "2db16cc512a1eea6",
"name": "function 4",
"func": "// to be completed : split originator, time, msg...\n\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 360,
"y": 300,
"wires": [
[
"34d8eca15e7cec65",
"08e40401717a1f28"
]
]
},
{
"id": "b0e1f46f8c9c2f11",
"type": "mqtt in",
"z": "2db16cc512a1eea6",
"name": "",
"topic": "esp32/WebSerialMsg",
"qos": "2",
"datatype": "auto-detect",
"broker": "407a01e4.6b637",
"nl": false,
"rap": true,
"rh": 0,
"inputs": 0,
"x": 160,
"y": 300,
"wires": [
[
"a60f5d2f3a4146d8"
]
],
"info": "Bentel will activate a contactor when in mode \"Awake and Up\". This contactor is connected to 05_ESP32 pin 31.\n05_ESP32 will MQTT-publish to topic \"05_esp32/stateBentel\".\nNR will MQTT-publish \"on\" to topic 08_esp32/FOSCAM\n08_ESP32 will MQTT-subscribe to NR topic 08_esp32/FOSCAM, and set Relais 1 and switch the CAM off. "
},
{
"id": "485726a8968ee836",
"type": "inject",
"z": "2db16cc512a1eea6",
"name": "Log 1 qdfqery",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Log 1 qdfqery",
"payloadType": "str",
"x": 210,
"y": 360,
"wires": [
[
"a60f5d2f3a4146d8"
]
]
},
{
"id": "21ba2788d01a1d23",
"type": "inject",
"z": "2db16cc512a1eea6",
"name": "Log123 ldldldldldldldl",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Log123 ldldldldldldldl",
"payloadType": "str",
"x": 230,
"y": 420,
"wires": [
[
"a60f5d2f3a4146d8"
]
]
},
{
"id": "08e40401717a1f28",
"type": "debug",
"z": "2db16cc512a1eea6",
"name": "debug 133",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 670,
"y": 300,
"wires": []
},
{
"id": "407a01e4.6b637",
"type": "mqtt-broker",
"name": "",
"broker": "localhost",
"port": "1883",
"clientid": "",
"autoConnect": true,
"usetls": false,
"protocolVersion": "4",
"keepalive": "60",
"cleansession": true,
"birthTopic": "",
"birthQos": "0",
"birthPayload": "",
"birthMsg": {},
"closeTopic": "",
"closePayload": "",
"closeMsg": {},
"willTopic": "",
"willQos": "0",
"willPayload": "",
"willMsg": {},
"sessionExpiry": ""
}
]
