Example: JQuery

This is an example of using uibuilder with just JQuery. JQuery is included in the node installation by default. These are, in fact, the default master template files that are copied into your local folder (except for uibuilderfe.js which is normally left in the master src folder).

For simple use, JQuery is adequate to enable you to dynamically update the UI as messages come into the node and across to the front end over Socket.IO. For more advanced use, consider using a front-end library such as Moon or Riot, there are examples for these in the uibuilder WIKI.

Note that I will assume your userDir is at ~/.node-red which is the default.

1. Install uibuilder using npm

Open a terminal/command prompt, cd to ~/.node-red (most platforms including Windows PowerShell, %USERPROFILE%\.node-red for Windows cmd prompt).

npm install node-red-contrib-uibuilder moonjs --save

2. Restart Node-RED and add a uibuilder node with input and output nodes

After restarting Node-RED, import the flow given below and deploy. Note that the instance of the uibuilder node in the example flow has its URL set to uibuilder which is the default.

3. Copy/amend the template files

You should now have a folder ~/.node-red/uibuilder/uibuilder/src. You need to copy over the files shown below into that folder. You will be replacing the files that the deployment of the node has copied over for you.

4. Open the uibuilder URL

In your favourite browser, navigate to the /uibuilder url. If you are using default settings and running Node-RED on the same machine as the browser, this will be http://localhost:1880/uibuilder.

Now you can use the button in the web page to send a message back to Node-RED, the data will appear in the debug output pane. Then you can use the Inject node to send a message to the browser.

Example Flow

Import this to Node-RED and deploy.

Example front-end files

These go in ~/.node-red/uibuilder/moon/src

index.html

index.js

index.css