Skip to content

Example: JQuery

Jump to bottom Edit New page
Julian Knight edited this page Mar 7, 2023 · 13 revisions

UPDATE 2023-03-07: Completely rewritten for uibuilder v6.1.

This is a very simple example of using uibuilder with jQuery.

Please note that from v6+ of uibuilder, jQuery should actually rarely be useful when working with Node-RED and uibuilder. Much of what you might have wanted it for can be done natively. However, you may need to maintain older code or wish to make use of some jQuery extensions so there may still be some use-cases.

Note that I will assume your userDir is at ~/.node-red and that you haven't moved the uibuilder root folder from ~/.node-red/uibuilder/ which is the default.

Installation

  1. Install uibuilder using Node-RED's palette manager
  2. Add a uibuilder node, specify the url and deploy
  3. Amend the template files index.(html|js) according to the examples given here
  4. Add input and output nodes & re-deploy

Example Flow

[{"id":"51317a1ca60f92ef","type":"group","z":"ff9704678e3a4b61","name":"uibuilder jQuery example - copy index comments to the appropriate files \\n ","style":{"fill":"#e3f3d3","fill-opacity":"0.2","label":true,"color":"#000000"},"nodes":["ef2c6bdb83f45e40","f8176cc4d8409322","174c8a1a9edc3178","0e38f1543880aa12","29c3f512d2ec644d","1d65510c9840813a","84eb0817119a73dc","285ccf07b004b571","c7180b530618a6d0","35a6172746b88c5d","c0dbc5a2573731f5"],"x":134,"y":663,"w":712,"h":258},{"id":"ef2c6bdb83f45e40","type":"inject","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"Msg","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"msg-from-nr","payload":"A message from Node-RED","payloadType":"str","x":230,"y":760,"wires":[["35a6172746b88c5d"]]},{"id":"f8176cc4d8409322","type":"debug","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"std msg output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":735,"y":780,"wires":[],"l":false},{"id":"174c8a1a9edc3178","type":"debug","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"ctrl msg output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":735,"y":860,"wires":[],"l":false},{"id":"0e38f1543880aa12","type":"uibuilder","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"","topic":"","url":"uib-jquery-example","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.2.0-dev","showMsgUib":true,"x":580,"y":820,"wires":[["f8176cc4d8409322"],["174c8a1a9edc3178"]]},{"id":"29c3f512d2ec644d","type":"inject","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"Reload","props":[{"p":"_ui","v":"{\"method\":\"reload\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reload","x":230,"y":880,"wires":[["c0dbc5a2573731f5"]],"info":"Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself."},{"id":"1d65510c9840813a","type":"inject","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"Toggle Visible Msgs","props":[{"p":"_uib","v":"{\"command\":\"showMsg\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":800,"wires":[["35a6172746b88c5d"]]},{"id":"84eb0817119a73dc","type":"inject","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"Toggle Visible Status","props":[{"p":"_uib","v":"{\"command\":\"showStatus\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":840,"wires":[["c0dbc5a2573731f5"]]},{"id":"285ccf07b004b571","type":"comment","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"index.html - copy contents","info":"<!doctype html>\n<html lang=\"en\"><head>\n\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"icon\" href=\"../uibuilder/images/node-blue.ico\">\n\n    <title>jQuery Example - Node-RED uibuilder</title>\n    <meta name=\"description\" content=\"Node-RED uibuilder - jQuery Example\">\n\n    <!-- Your own CSS (defaults to loading uibuilders css)-->\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->\n    <script defer src=\"../uibuilder/vendor/jquery/dist/jquery.min.js\"></script>\n    <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n    <script defer src=\"./index.js\">/* OPTIONAL: Put your custom code in that */</script>\n    <!-- #endregion -->\n\n</head><body class=\"uib\">\n    \n    <h1 class=\"with-subtitle\">jQuery Example</h1>\n    <div role=\"doc-subtitle\">Using the uibuilder IIFE library.</div>\n\n    <div id=\"more\"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>\n\n</body></html>\n","x":490,"y":720,"wires":[]},{"id":"c7180b530618a6d0","type":"comment","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","name":"index.js - copy contents","info":"/** The simplest use of uibuilder client library\n * See the docs if the client doesn't start on its own.\n */\n\n$(document).ready(function () {\n\n    // Listen for incoming messages from Node-RED and action\n    uibuilder.onChange('msg', (msg) => {\n        console.log('msg received', msg)\n        // do stuff with the incoming msg\n        $('#more').text(msg.payload)\n    })\n    \n})\n","x":720,"y":720,"wires":[]},{"id":"35a6172746b88c5d","type":"junction","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","x":420,"y":780,"wires":[["0e38f1543880aa12"]]},{"id":"c0dbc5a2573731f5","type":"junction","z":"ff9704678e3a4b61","g":"51317a1ca60f92ef","x":420,"y":860,"wires":[["0e38f1543880aa12"]]}]

Example front-end files

index.html

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>jQuery Example - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - jQuery Example">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">jQuery Example</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

</body></html>

index.js

/** The simplest use of uibuilder client library
 * See the docs if the client doesn't start on its own.
 */

$(document).ready(function () {

    // Listen for incoming messages from Node-RED and action
    uibuilder.onChange('msg', (msg) => {
        console.log('msg received', msg)
        // do stuff with the incoming msg
        $('#more').text(msg.payload)
    })
    
})

Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.

Clone this wiki locally