Web Sockets Web Page Part 2

For this to make sense, you really should read the original websockets item first (which has just been updated)– as this is a follow up.

So now, having made my first web sockets web page I started to wonder about the mechanics of getting information out of the page – and into it. That is – how could I make that slider move programmatically – could I simply send information into the web socket and have it change the page dynamically?

Well… yes. Here’s the modified test in Node Red…

So we have our two web socket nodes – input attached to output… anything coming in from the page would go back out. But could I inject changes?  As it happens the information I have going through is a simple block of JSON of the form:

{“my_input”:””, “my_slider”,””,”my_switch”,””}

That is, the input field and by one now slider and one flick switch on the page. Oh and an image just to test that too. So here is the page…

Just a little more ambitious than the first one (which is why you should look at the earlier blog first)…

So I have my WS in and out – and when a change occurs on the page – that JSON block will pass into “ws in” and out through “ws out”  – so it is entirely reasonable to experiment with injecting that info into the middle… see my 2 grey inject nodes which pass the following information..

The first “Inject ON” passes a string {“my_input”:”Hello”,”my_slider”:”40″,”my_switch”:”on”}

The second “Inject OFF” passes {“my_input”:”Goodbye”,”my_slider”:”60″,”my_switch”:”off”}

Here is the page itself – only marginally more complex than before..  and in addition I have a couple of images called light0.png and light1.png stored in an icons directory just below where this page is stored i.e. (var/www/app/index.html)

[github file=”/scargill/various/blob/master/blog1.html”]

The main page is in the bottom half – you’ll see my_input, my_slider and my_switch – the latter made possible thanks to the inclusion of JQuery mobile. If you can run this – you’ll see that moving the slider or entering text into the text box has no effect until you press update, whereas clicking the switch has an immediate effect. Note that as the switch changes state, the image (which does not appear at first as I’ve not put a default in there – trivial) changes as well.  Once you’re happy playing with that – try pressing the two injector buttons in Node-Red – the page will instantly update itself. Look at the DEBUG window in Node-Red when doing any of this and you’ll  see the simple JQuery string being passed around.

And that should be enough to start someone who like me, until a couple of days ago had never played with web sockets, thinking about what kind of wonderful control pages they could make. If you make this available externally via your router – do put in some security – and that’s another matter.

MEANWHILE I’ve been having a look at Martin Harizanov’s stand-alone 3 relay ESP8266 board, taking advice from Espressif as to a small modification to their development board, finally getting my head around an external drive for the Raspberry Pi and more – but that will wait for another time.

And now Websockets Web Page Part 3