Hi!
I am looking for someone who can help me a little.
Trying to create a dynamic web page with external input for image to show and external text input
To be honest i "need" to finish it for tomorrow afternoon and i cannot find out how to fix it
I all ready made it possible to show image from a folder on my raspberry
The thing now is sending msg.payload with text and things.
As i understood good it works with json, so i send msg.payload.image and msg.payload.text, is this correct how to send it to the http websocket?
The final feeling it needs to be is like a powerpoint that shows different images with different text with it
All help is welcome, thanks a lot!!
Code i have so far thanks to an example:
[{"id":"8a044c96.cefbf","type":"inject","z":"fcb3022f.c357f8","name":"Tick every 5 secs","topic":"test","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"onceDelay":"","x":170,"y":1104,"wires":[["97aa92be.975cc8"]]},{"id":"28d3fec8.f3dc22","type":"websocket out","z":"fcb3022f.c357f8","name":"","server":"f850f2d3.e55e68","client":"","x":602,"y":1104,"wires":[]},{"id":"4b58cdb0.65717c","type":"http response","z":"fcb3022f.c357f8","name":"","statusCode":"","headers":{},"x":573,"y":1044,"wires":[]},{"id":"a3965324.f1cd48","type":"http in","z":"fcb3022f.c357f8","name":"","url":"/simple","method":"get","upload":false,"swaggerDoc":"","x":204,"y":1044,"wires":[["b021dfcf.4f4eb"]]},{"id":"b021dfcf.4f4eb","type":"template","z":"fcb3022f.c357f8","name":"Simple Web Page","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>Simple Live Display</title>\n <script type=\"text/javascript\">\n var ws;\n var wsUri = \"ws:\";\n var loc = window.location;\n console.log(loc);\n if (loc.protocol === \"https:\") { wsUri = \"wss:\"; }\n // This needs to point to the web socket in the Node-RED flow\n // ... in this case it's ws/simple\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"simple\",\"ws/simple\");\n\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n //var line = \"\"; // either uncomment this for a building list of messages\n ws.onmessage = function(msg) {\n var line = \"\"; // or uncomment this to overwrite the existing message\n // parse the incoming message as a JSON object\n var data = msg.data;\n console.log(data);\n // build the output from the topic and payload parts of the object\n line += \"<p>\"+msg.payload.foto+\"</p>\";\n // replace the messages div with the new \"line\"\n document.getElementById('messages').innerHTML = line;\n //ws.send(JSON.stringify({data:data}));\n }\n ws.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n //ws.send(\"Open for data\");\n console.log(\"connected\");\n }\n ws.onclose = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"not connected\";\n // in case of lost connection tries to reconnect every 3 secs\n setTimeout(wsConnect,3000);\n }\n }\n \n function doit(m) {\n if (ws) { ws.send(m); }\n }\n </script>\n <meta charset=\"UTF-8\">\n <style type=\"text/css\">\n body {\n\tbackground-image: url(background.jpg);\n\tbackground-repeat: no-repeat;\n}\n </style>\n </head>\n <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n <font face=\"Arial\">\n <h1>msg.payload</h1>\n <div id=\"messages\"></div>\n <button type=\"button\" onclick='doit(\"click\");'>Click to send message</button>\n <hr/>\n <div id=\"status\"></div>\n </font><img src=\"test.jpeg\" alt=\"\" width=\"860\" height=\"572\" align=\"middle\"/>\n </body>\n</html>\n","output":"str","x":401,"y":1044,"wires":[["4b58cdb0.65717c"]]},{"id":"97aa92be.975cc8","type":"function","z":"fcb3022f.c357f8","name":"format time nicely","func":"msg.payload = \"message\";\nmsg.payload.background = \"background.jpg\";\nmsg.payload.image = \"image.jpeg\";\nmsg.payload.text = \"Some text to show <br>With next line in it\"\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":1104,"wires":[["28d3fec8.f3dc22"]]},{"id":"74157d16.84a94c","type":"websocket in","z":"fcb3022f.c357f8","name":"","server":"f850f2d3.e55e68","client":"","x":389,"y":1156,"wires":[["3ad6d314.99879c"]]},{"id":"3ad6d314.99879c","type":"debug","z":"fcb3022f.c357f8","name":"","active":true,"console":"false","complete":"false","x":579,"y":1156,"wires":[]},{"id":"f850f2d3.e55e68","type":"websocket-listener","z":"fcb3022f.c357f8","path":"/ws/simple","wholemsg":"false"}]
