Phone home screen Light Control
This flow uses Webhooks to control things. This example uses it to turn on and off lights from your local WIFI.
Contact
Alex Trostle - GitHub - Email - LinkedIn - Instagram - My Website
Adding Flow
Get this flow by copying it from below and going to the Node-RED side bar and clicking the import button.
Dependencies
NONE! Only uses the general Node-RED nodes
Usage
This flow can be used through any browser on Node-REDs WIFI network.
Navigate the address of your flow editor and copy and paste the http://192.168.1.142:1880/ portion of the address into a new tab. At the end add a lightson or lightsoff to control the outputs. The whole address should look something like http://192.168.1.142:1880/lightson or http://192.168.1.142:1880/lightsoff
This can be used from your phones homescreen by adding shortcuts of these two webpages on your homescreen.
What needs changed to run
- Nothing! Just delete the MQTT Out nodes and the flow will run with no modifications! You could also configure the MQTT out node and the flow would run as well
How it works
- Creates an HTTP Endpoint
- Uses a
Websocket innode to listen to that endpoint - Determines an action based on response
Flow
Copy and paste it!
[{"id":"bedaf8e6.af8308","type":"group","z":"fa831242.967b3","name":"Please donate to Alex! @https://flows.nodered.org/user/Alextros00","style":{"stroke":"#ff0000","fill":"#000000","label":true,"label-position":"n","color":"#ffffff"},"nodes":["a5dd158.e182fe8","4e4dcc7c.28d884","583d6839.0270a8","9ef9dd11.73eb1","b38e56e9.16fca8","eb58ad24.f1651","4302fe38.65505","ae03a40d.054298","a079f69b.513a18","55e10085.51dc","c9bbe5ae.9dde38","bd2a5419.7353a8","e93e5be.ef517a8","de981369.2a1fa","a2cd8691.438638","c8d1fb1c.99f0f8"],"x":2143,"y":859,"w":583,"h":342},{"id":"a5dd158.e182fe8","type":"http response","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","statusCode":"","headers":{},"x":2610,"y":940,"wires":[]},{"id":"4e4dcc7c.28d884","type":"http in","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","url":"/lightson","method":"get","upload":false,"swaggerDoc":"","x":2241,"y":940,"wires":[["583d6839.0270a8"]]},{"id":"583d6839.0270a8","type":"template","z":"fa831242.967b3","g":"bedaf8e6.af8308","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(\"lightson\",\"ws/lightson\");\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.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n ws.send(\"0\");\n console.log(\"connected\");\n window.close();\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>Alex's Lights Control</h1>\n <div id=\"messages\"></div>\n <hr/>\n <div id=\"status\">unknown</div>\n </font>\n </body>\n</html>\n","x":2439,"y":940,"wires":[["a5dd158.e182fe8"]]},{"id":"9ef9dd11.73eb1","type":"websocket in","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","server":"78e85eb8.6d6b8","client":"","x":2249,"y":1000,"wires":[["bd2a5419.7353a8"]]},{"id":"b38e56e9.16fca8","type":"comment","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"TURN ALL LIGHTS ON","info":"","x":2409,"y":900,"wires":[]},{"id":"eb58ad24.f1651","type":"http response","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","statusCode":"","headers":{},"x":2610,"y":1080,"wires":[]},{"id":"4302fe38.65505","type":"http in","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","url":"/lightsoff","method":"get","upload":false,"swaggerDoc":"","x":2241,"y":1080,"wires":[["ae03a40d.054298"]]},{"id":"ae03a40d.054298","type":"template","z":"fa831242.967b3","g":"bedaf8e6.af8308","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(\"lightsoff\",\"ws/lightsoff\");\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.onopen = function() {\n // update the status div with the connection status\n document.getElementById('status').innerHTML = \"connected\";\n ws.send(\"0\");\n console.log(\"connected\");\n window.close();\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":2439,"y":1080,"wires":[["eb58ad24.f1651"]]},{"id":"a079f69b.513a18","type":"websocket in","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","server":"d27ca68e.383ee8","client":"","x":2249,"y":1140,"wires":[["55e10085.51dc"]]},{"id":"55e10085.51dc","type":"function","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"determine action","func":" msg = {payload: '1', topic: 'esp/to/esp10'};\n return [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":2440,"y":1140,"wires":[["de981369.2a1fa","c8d1fb1c.99f0f8"]]},{"id":"c9bbe5ae.9dde38","type":"comment","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"TURN ALL LIGHTS OFF","info":"","x":2419,"y":1040,"wires":[]},{"id":"bd2a5419.7353a8","type":"function","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"determine action","func":" msg = {payload: '1', topic: 'esp/to/esp10'};\n return [msg];","outputs":1,"noerr":0,"initialize":"","finalize":"","x":2440,"y":1000,"wires":[["e93e5be.ef517a8","a2cd8691.438638"]]},{"id":"e93e5be.ef517a8","type":"debug","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":2610,"y":980,"wires":[]},{"id":"de981369.2a1fa","type":"debug","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":2610,"y":1120,"wires":[]},{"id":"a2cd8691.438638","type":"mqtt out","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","topic":"","qos":"","retain":"","x":2590,"y":1020,"wires":[]},{"id":"c8d1fb1c.99f0f8","type":"mqtt out","z":"fa831242.967b3","g":"bedaf8e6.af8308","name":"","topic":"","qos":"","retain":"","x":2590,"y":1160,"wires":[]},{"id":"78e85eb8.6d6b8","type":"websocket-listener","z":"","path":"ws/lightson","wholemsg":"false"},{"id":"d27ca68e.383ee8","type":"websocket-listener","z":"","path":"/ws/lightsoff","wholemsg":"false"}]
