Change the colour of a web page background
Creates a web page which listens on a WebSocket for a colour to be received. I used this to create some interactive art made up of a number of screens that could all be controlled via WebSockets.
[{"id":"e4afc60a.f69dc8","type":"inject","z":"e24a8c12.420558","name":"Red","topic":"","payload":"red","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":190,"y":260,"wires":[["6d611f1c.d810f"]]},{"id":"6d611f1c.d810f","type":"websocket out","z":"e24a8c12.420558","name":"","server":"db6f982c.51d3d","client":"","x":460,"y":260,"wires":[]},{"id":"db656810.a408e","type":"http response","z":"e24a8c12.420558","name":"","x":590,"y":120,"wires":[]},{"id":"369ccc47.50e924","type":"http in","z":"e24a8c12.420558","name":"","url":"/colour","method":"get","upload":false,"swaggerDoc":"","x":221,"y":120,"wires":[["9c3d2b13.7579d"]]},{"id":"9c3d2b13.7579d","type":"template","z":"e24a8c12.420558","name":"Simple Web Page","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE HTML>\n<html>\n <head>\n <title>Colour 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/colour\n wsUri += \"//\" + loc.host + loc.pathname.replace(\"colour\",\"ws/colour\");\n\n function wsConnect() {\n console.log(\"connect\",wsUri);\n ws = new WebSocket(wsUri);\n ws.onmessage = function(msg) {\n console.log(msg.data);\n var colour = msg.data;\n //document.getElementById('body').backgoundColour = colour;\n document.body.style.backgroundColor = colour;\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 \n </script>\n </head>\n <body onload=\"wsConnect();\" onunload=\"ws.disconnect();\">\n <font face=\"Arial\">\n <div id=\"messages\"></div>\n \n <div id=\"status\">Unknown</div>\n </font>\n </body>\n</html>\n","output":"str","x":418,"y":120,"wires":[["db656810.a408e"]]},{"id":"df7ece07.c51288","type":"inject","z":"e24a8c12.420558","name":"Green","topic":"","payload":"green","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":190,"y":300,"wires":[["6d611f1c.d810f"]]},{"id":"38572521.e0c5fa","type":"inject","z":"e24a8c12.420558","name":"Yellow","topic":"","payload":"yellow","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":190,"y":340,"wires":[["6d611f1c.d810f"]]},{"id":"efffc54f.a17ed8","type":"comment","z":"e24a8c12.420558","name":"Make our page aviable at http://[Node-RedAddress]:1880/colour","info":"","x":370,"y":80,"wires":[]},{"id":"6978a5f.6073b5c","type":"comment","z":"e24a8c12.420558","name":"Javascript on the page listens on the websocket /ws/colour ","info":"","x":880,"y":120,"wires":[]},{"id":"b27c054b.9e2f98","type":"comment","z":"e24a8c12.420558","name":"Send the name of the colour to the websocket /ws/colour where it is picked up by the listening web page above","info":"","x":520,"y":200,"wires":[]},{"id":"db6f982c.51d3d","type":"websocket-listener","z":"e24a8c12.420558","path":"/ws/colour","wholemsg":"false"}]
