Help on http page / project

#1

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"}]
0 Likes

#2

also been checking and trying examples from Peter scargill's blog but i get error and it is not connecting.
It is all ready from few years ago, maybe outdated or should it still work?

0 Likes

#3

This simple example works
https://flows.nodered.org/flow/8666510f94ad422e4765

0 Likes

#4

thanks Dave,

Been trying and playing with this one too.
But i cannot find out how to display more data.

I gues this below is doing the magic from payload to the page

            // parse the incoming message as a JSON object
            var data = msg.data.firstName;
            //console.log(data);
            // build the output from the topic and payload parts of the object
            line += "<p>"+data+"</p>";

the msg.payload is msg.payload = {"firstName":"John", "lastName":"Doe"}
The code above gives undefined.

when i try this i also get undifned
// parse the incoming message as a JSON object
var data = msg.data;
//console.log(data);
// build the output from the topic and payload parts of the object
line += "

"+data.firstName+"

";
0 Likes

#5

Still trying to find out how it works...
First surprise for me start with msg.dat but i send msg.payload to the socket...
I gues it receives a payload as data then...

but still looks like magic to my, any help would be really appreciated!

0 Likes

#6

re data - That's just the choice of the ws library - https://github.com/websockets/ws/blob/master/doc/ws.md#event-message
so just as we choose to use payload as the basic node-red message they have chosen data.
It will only output text so that then needs to be parsed back into JSON so you can then access the parts inside your message... here is an updated example to play with

[{"id":"5e839b9f.945c34","type":"inject","z":"d511095d.512808","name":"Click to send","topic":"test","payload":"{\"firstName\":\"John\",\"lastName\":\"Doe\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":"","hide":false,"x":175,"y":1755,"wires":[["fa352ba8.ff08f8"]]},{"id":"f67df72f.1b6918","type":"websocket out","z":"d511095d.512808","name":"","server":"e50d0cae.0a935","client":"","x":575,"y":1755,"wires":[]},{"id":"7fb4f672.97d358","type":"http response","z":"d511095d.512808","name":"","x":545,"y":1695,"wires":[]},{"id":"3216c4ab.79852c","type":"http in","z":"d511095d.512808","name":"","url":"/simple","method":"get","swaggerDoc":"","x":175,"y":1695,"wires":[["620efad0.80a694"]]},{"id":"620efad0.80a694","type":"template","z":"d511095d.512808","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 = JSON.parse(msg.data);\n                //console.log(data);\n                // build the output from the topic and payload parts of the object\n                line += \"<p><b>Firstname</b> \"+data.firstName+\"</p>\";\n                line += \"<p><b>Lastname</b> \"+data.lastName+\"</p>\";\n                // replace the messages div with the new \"line\"\n                document.getElementById('messages').innerHTML = line;\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    </script>\n    </head>\n    <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n        <font face=\"Arial\">\n        <h1>Simple Live Display</h1>\n        <div id=\"messages\"></div>\n        <hr/>\n        <div id=\"status\">unknown</div>\n        </font>\n    </body>\n</html>\n","x":375,"y":1695,"wires":[["7fb4f672.97d358"]]},{"id":"fa352ba8.ff08f8","type":"json","z":"d511095d.512808","name":"","property":"payload","action":"","pretty":false,"x":380,"y":1755,"wires":[["f67df72f.1b6918"]]},{"id":"e50d0cae.0a935","type":"websocket-listener","z":"d511095d.512808","path":"/ws/simple","wholemsg":"false"}]
1 Like

#7

Thank a lot for helping me with th example!
Now i can go on :wink:

Have a nice day!

0 Likes