Tag Archives: Node Red and Web Socket control of ESP8266 by MQTT

Web Sockets Web Page Part 3

For this to make sense you should look at Websockets Web Page Part 1 and Websockets Web Page Part 2 first.

In this final section I add styling to the page  and also change the code so that you can send a partial message  i.e. {“my_input”:”Hello”} without affecting other parts of the page.

So in order to demonstrate this latest version you’ll need to go make yourself a theme (actually only one file needed for this – the css file) and put it in a directory called themes under the page shown here.

You’ll also need to change the Node-Red to this…

node-red

You’ll see here that I have to two experimental injects… and also I pull out the incoming web socket data – process the SWITCH and send a command off to one of my boards via MQTT to turn a light on or off, so NOW our simply page as well as looking pretty, actually DOES something. It does not take too much of a stretch of the imagine to ponder how to replace those injects with status info from, say an input or an MQTT input etc..

Here’s what my new page looks like…

new page

The process commands box looks like this..

process

As you can see – I’m merely taking the input message – and parsing it – and I’m only interested in “my_switch”… I return in this case a message to turn my ESP8266-board relay output on or off.

Here is the code for the page – don’t forget to set the WS to your Node-Red websocket and don’t forget the theme data…

[github file="/scargill/various/blob/master/blog2.html"]

Note a link to a second page – as yet doing nothing but basically you can build a multi-page app all in one html file… check out Jquery Mobile site – or click the link in the page.

Facebooktwittergoogle_pluspinterestlinkedin