'Soft' buttons on a web page to control something via Node-RED


#1

I bought myself a book on jQuery and Ajax for Christmas.
Here's a write-up on my first attempt at writing some jQuery that interfaces to Node-RED.

The index.txt file must be renamed as index.html (as Discourse does not allow this type of file to be uploaded).

It's a simple piece of html that links in jquery and sketch.js.
The eight 'soft' buttons have unique 'id's.
e.g. "turnREDon", "turnREDoff", etc...

The index.html and sketch.js files can reside on any webpage on your local network.

The sketch.txt file must be renamed to sketch.js (as Discourse does not allow this type of file to be uploaded).

The sketch.js file defines the destination URL where the command will be sent.
Note: Change this URL to match where Node-RED is running.
The jquery is failrly straightforward. It tags the 'soft' buttons' click event with an action.
For example, it sends... command:"redOn" when the turnREDon button is clicked.

One of the advantages of jQuery and Ajax is you can send or submit a command without the need for a "Submit" button on your webpage and without leaving the html page.

The simple Node-RED flow uses an HTTP-In node to collect the command, while the function nodes perform a simple decode of the received command.

In this simple example, node.status (in each function node) is used to show what's going on.
In a real application you could drive an LED, relay, etc...

At this moment in time I have no immediate use for this.
It's like a lot of things in life... you've just got to do it - because you can!!!

I hope someone finds a use for this after all my hard work.
Please let me know if you do.

Happy New Year.

html-page

node-RED-flow

index.txt (729 Bytes)

sketch.txt (792 Bytes)

NR-flow.txt (1.9 KB)


#2

My uibuilder WIKI has a simple example of using uibuilder with just JQuery alone. Much easier than fighting with another front-end library if all you need are some fairly straight-forward interactions.


#3

Thanks Julian for the heads-up on that.
I'll take a look later.


#4

I really appreciate sharing these getting started posts. I've never been interested in html and programming webpages, but I'm starting to see the virtue of them if for no other reason than the cross-platform utility they bring.

So far I've met my simple UI needs with the node-red dashboard, but as my non-techie friends get interested in my AI enhanced security system, I realize I need some kind of UI so local parameters -- like netcam IPs, Email server setup, sms numbers, etc can be set.

Learning of new possibilities with examples is tremendous!