I showed just a basic and not too pretty page with buttons that would control real items, in my case via Websockets on a Raspberry Pi, firing off MQTT (also on the Pi) to ESP8266 modules (using our own code based around TuanPMs MQTT project).

Well, I’ve been doing a bit more playing around – here’s a better way to make the buttons – but all based on the previous article so you’ll need to read that first. I’ve also added a second page – merely to show you how that is done easily – and you could expand that ad-infinitum – but I’ve ALSO shown how to get information back in from the same web socket as I was asked about this aspect. It’s very easy (there was a time when I was terrified of the subject).

So first of all this time my Node-Red code is slightly different – I’ve separated off the incoming websocket node from the outgoing one – as long as they refer to the same item they don’t have to be joined together.

So in this version – the same code in “process commands” – as instructions from the web page go out to MQTT to control various gadgets. See other blog item.

Here, a Timestamp (standard Node-Red item) pushes out a timestamp every second – and another function converts that into a simple string as payload – which is then sent back, every second, to the web page. Normally you might send JSON data back for further parsing in the web page but in this case it’s a simple string.

And so to the web page itself: I’ve improved it some way as you’ll see as I figured out how to get 4 buttons wide (trivial – I just didn’t spot it in jQuery Mobile the last time around).

As you can see it is quite pretty, has a page button near the top to switch to another page (which is empty as yet so I won’t show it here but it will be obvious in the code how it works and how you can keep adding more. I’m not happy about the look of the paging button but it’ll do for now.

Then way down at the bottom left – you’ll see a timestamp – that is coming from Node-Red and is in this case updating every second. It COULD be status information – or anything – but for the purpose of demonstration (and it’s also nice to know that something is actually working by visual feedback like this) it is just a string as described above.

I wish I could figure out a simple additional class to colour these buttons individually instead of making themes for each button type – perhaps someone else could contribute here.

So now this is a quite reasonable control page with the option for more pages (not going to get any more buttons on this page). I did think of having Node-Red return a string with the states of the various outputs and changing the buttons accordingly – but that would not have made for easy reading. Anyone implementing this will soon figure out how to add such functionality. Instead of returning simple text, it would make sense to similarly send back jSon as there is a very easy to use function to split this up.

Recall too from the previous blog that I’ve implemented (in the .htaccess file) simple password protection not shown here and not of much use locally but pretty essential if you want to control from outside.

Here is the web page code for the above, note I’ve changed the name of the websocket to /myapp3 – could have called it anything, really. See the “onmessage” function – you don’t get any easier than this. There you go… https://bitbucket.org/snippets/scargill/AGMq5

Update: 23/08/2015 – there is a better way to do navigation in jQuery mobile (I’m still learning) but it seems incomplete. A slide-in-from-the-left menu system is easy to create – but if you try to make one menu system for all pages – there is no formatting – I guess this will be available in a future version – however, replicating a menu system for each page has it’s advantages as you can disable the current page link!

Here is a version with the awful button missing hence saving some space on the page. So this is a little like the swipe side menu in NETIO except I’ve implemented it by touching the top title bar because swiping doesn’t work too well on a PC and you might be testing this in a normal browser!!!

The title bar is sitting doing nothing anyway, so why not.

Actually I like this – on a typical phone you could easily get half a dozen pages and some explanatory text or imagery in that side menu… hell, you could even get some more buttons in there and a logo!

Welcome

Hi - I'm Pete and this is my technology blog. It is BIG. Use the search box below or check out the archives and other links below - be sure to SHARE what you like using the social media buttons.

Please register or log in - the top menu changes a lot when you are part of the party... and once in, don't forget to tick the box so you will get email follow-ups to comments.

I am tied to no organisation - I do this for the joy of learning. Maintaining a blog of this size takes a lot of work and I hope you find my contributions useful - if you want to help fund my gadget habit or buy me a coffee - here is a link.

Disclaimer: Because I have no idea of your level of technical skill or the requirements of your country laws in terms of electricity supply etc., I accept no responsibility for any damage caused through following advice in these pages. When dealing with mains voltages you should satisfy yourself that whatever you are doing is safe and if unsure, seek advice from someone who is sure.

Notice: I'm always happy to offer advice on stuff I've written - and indeed take advice. If I can help in any way just let me know but PLEASE don't ask me how to program in C/PASCAL/NODE/etc. There are many resources out there - if you want to program and can't - there's always Google.

Newsletter

The blog will send you occasional emails containing links to recent posts. No ads and your email will not be given to third parties. There's an un-subscribe link on each email. Invalid names will be deleted.

Links

EE Times | Electronic Engineering TimesEE Times connects the global electronics community through news, analysis, education, and peer-to-peer discussion around technology, business, products and design