🌐 UIBUILDER: Development updates for next release (v7.5.0)

Share Your Nodes
1

It's that time to share some info on what's happening in the world of UIBUILDER. :blush:

v7.5 will have a number of improvements, so far:

  • Updates to the front-end router library

    • A new menu-generator along with new router config options. You will be able to auto-generate navigation route menu's, both horizontal and vertical, anywhere on-page. The menu's will be responsive and accessible.
    • Along with the generator, there will be improvements to the layout and styling of the menus.

  • Two new Editor actions are being added to make it super-easy to open a uibuilder web page or open the IDE code editor for the uibuilder instance.

  • In addition to the menu improvements, the default style sheet will have:

    • Updated table headers - making table headers sticky automatically - great for long data tables.
    • The accent-color has been updated to use the default secondary color instead of the brand color.
    • summary elements now get the cursor set to pointer.

On the development side, there are the usual tidy-ups of code. A continual gradual renaming of libraries/modules to match whether they are CommonJS/Script or ES Module's. New ESBUILD configurations also being used which improves robustness of the build processes.

Also under way for the uibuilder front-end client library are some experimental features. Specifically a new "reactive" feature that, when complete, will bring some of the reactive data features you are used to with front-end frameworks like VueJS but, of course, not needing a framework as they leverage vanilla HTML/JavaScript. Not quite sure whether that will be ready for v7.5.

Reactive variables mean that you can update a variable in JavaScript (or remotely from Node-RED) and the UI will update automatically.

2 Likes
2

I've also done some additional work on the styles. Namely to improve the default text contrast slightly and improve form elements:

image
image895×1102 49.6 KB

image
image899×1107 48.5 KB

(Note that for both images, the cursor was hovering over the "Home Summary" menu item).

And yes, I really am working on some theme editor forms. :smiley:

3 Likes
3

Some more exciting things beginning to work their way towards the next release now.

Firstly, if you are using uibuilder's custom Express web server (rather than the one defined by Node-RED), you can now specify a .public folder which is mounted as the root URL. So ~/.node-red/uibuilder/.public/index.html would be served up as the / url path. Not needed, of course, if using Node-RED's built-in server since you can specify a public folder in settings.js.

Next, for anyone creating single-page apps using the uibRouter library, a simple auto-menu feature is added. Currently only generates a horizontal, single-level navigation menu but will eventually be expanded for multi-level and vertical menus. No coding required for this. Just an HTML element to act as the parent and an updated route configuration.

Next big thing is an experimental version of the client library. This lets me play with more esoteric and exciting features for he front-end without messing up the actual client. Some interesting experiments under way at the moment. These may or may not make it to v7.5:

  • A new template feature which lets you do something like this in your HTML file:

          <template id="greeting-template">
          <h3>{{title}}</h3>
          <p>Hello {{user.name}}, you have {{user.notifications}} notifications.</p>
          <p>Today is {{date}}.</p>
      </template>
      
      <div uib-template="#greeting-template" id="template-output">
          <!-- Template will be rendered here -->
      </div>

  • Some extended attributes not dissimilar to VueJS

    • usb-bind: <p>Hello, <span uib-bind="userName">World</span>!</p> - binds content to a JavaScript variable.
    • usb-show: <div uib-show="showGreeting" style="display: none;">HELLO</div> - binds to a boolean variable for showing/hiding content.

  • Some nicer popover dialogue boxes - for use with newer browsers.

2 Likes
4

Now I'm feeling more confident with UIbuilder, creating a SPA layout instead of individual instances is next on my list!

Hope it makes v7.5.0 as I need all the help I can get :joy:

5

Yes, the basic one will certainly be in v7.5 - the bells and whistles (multi-level menus, vertical menu's and tabbed interfaces) will probably not. So just a single layer.

Here is an example of the output:

<header>
        <h1 class="with-subtitle">Home Panel: <uib-var variable="uibrouter_CurrentTitle" id="uib-var-1">Theme Editor</uib-var></h1>
        <div role="doc-subtitle">Using the UIBUILDER IIFE &amp; router libraries</div>
        
        <div id="menu1" style="position: relative;">
            <nav aria-label="Main Menu" class="horizontal" aria-expanded="false">
                <button class="menu-toggle" aria-expanded="false">
                <svg viewBox="0 0 0.8 0.8" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0.1 0.15h0.6a0.05 0.05 0 0 1 0 0.1H0.1a0.05 0.05 0 1 1 0 -0.1m0 0.2h0.6a0.05 0.05 0 0 1 0 0.1H0.1a0.05 0.05 0 1 1 0 -0.1m0 0.2h0.6a0.05 0.05 0 0 1 0 0.1H0.1a0.05 0.05 0 0 1 0 -0.1"></path>
                </svg>
                </button>
                <ul class="routemenu" role="menubar">
                    <li role="none"><a role="menuitem" href="#theme" data-route="theme" class="currentRoute" aria-current="page">Theme Editor</a></li>
                    <li role="none"><a role="menuitem" href="#route01" data-route="route01">Home Summary</a></li>
                    <li role="none"><a role="menuitem" href="#wanted" data-route="wanted">To Do</a></li>
                </ul>
            </nav>
        </div>
</header>

It is everything inside the div - the div itself is the placeholder. So you can easily manually create a menu for now.

This is the JavaScript that configures the routes in the example above:

const routerConfig = {
    defaultRoute: 'route01',
    hide: true,
    routes: [
        { id: 'theme', src: './fe-routes/theme-editor.html', type: 'url', 
            title: 'Theme Editor', description: 'Theme editor.' },
        { id: 'route01', src: './fe-routes/route01.html', type: 'url', 
            title: 'Home Summary', description: 'A summary view of the home.' },
        { id: 'wanted', src: './fe-routes/wanted.html', type: 'url', 
            title: 'To Do', description: 'My to do list for this site.' },
    ],
    routeMenus: [
        {
            id: 'menu1',
            menuType: 'horizontal',
            label: 'Main Menu',
        },
    ],
}

const router = new UibRouter(routerConfig)
6

What is the purpose of the button in the menu?

<button class="menu-toggle" aria-expanded="false">
<svg viewBox="0 0 0.8 0.8" xmlns="http://www.w3.org/2000/svg">
<path d="M0.1 0.15h0.6a0.05 0.05 0 0 1 0 0.1H0.1a0.05 0.05 0 1 1 0 -0.1m0 0.2h0.6a0.05 0.05 0 0 1 0 0.1H0.1a0.05 0.05 0 1 1 0 -0.1m0 0.2h0.6a0.05 0.05 0 0 1 0 0.1H0.1a0.05 0.05 0 0 1 0 -0.1"></path>
</svg>
</button>
7

As it says - it is a menu toggle button. :smiley:

Hint: try reducing the width of your display. :wink:

8

Further updates:

On further reflection, some of the features I was thinking about that mirror front-end frameworks like VueJS do not actually appear to be that useful for UIBUILDER. Specifically the uib-bind and uib-show extended attributes. This is because the uib-topic attribute already means that we can update elements dynamically simply by sending a message with the right topic. This can be done not only from Node-RED but also from front-end code with uibuilder.set('msg', {...}). Showing and hiding can be done with a simple CSS Class change. We don't need to have a uib-on (replicating things like Vue's @ binding) either since we can either use the normal attributes to reference a function or we can use JavaScript event handling. This all fits in better with UIBUILDER's principal of following HTML standards and not inventing a new framework. KISS :smiley:

So instead of adding complexity, we simply need to make use of what is already there. I will document this better.

What is now in progress is a long-awaited improvement to the main uibuilder node. To enable easier running of build scripts on your front-end code. So if you want to optimise or you really do want/need to use a framework - Svelte for example - you won't have to have a remote terminal session running just to run the build process. A new tab called "Scripts" will be available:

image
image634×505 17 KB

The scripts are defined in the instance's package.json file as normal when using npm. However, install and update are also included as these are built-in npm scripts.

Obviously you can do a lot more than simply run a build script. npm lets you run pretty much anything you put into the command. Output from the command will be available to view directly.

You can change the list of scripts simply by editing the package.json file:

image
image639×637 28.7 KB

So this feature will let you do anything you like to your uibuilder instance folders and files.

9

The code for running your build scripts is now complete and tested.

There is 1 caveat in that you need to keep the uibuilder node's config panel open in the Editor if you want the option of cancelling a long-running task from the panel. Otherwise, you would need to cancel it manually. You can, however, switch between tabs in the open panel.

Needs a bit of testing on Linux as well, the code for killing long-running tasks has been borrowed from a 3rd-party node.js module though so it should work fine.

All updates have been pushed to the v7.5.0 branch on GitHub if you want to try it out for yourself.

I've learned quite a bit through this enhancement. I'll be applying those lessons to other parts of the code. Notably discovering a node.js feature AsyncLocalStorage which is great for managing API calls that need to run an async task dependency.

These classes are used to associate state and propagate it throughout callbacks and promise chains. They allow storing data throughout the lifetime of a web request or any other asynchronous duration. It is similar to thread-local storage in other languages.

AsyncLocalStorage in Node.js is a utility for storing and accessing data that is scoped to a particular asynchronous execution context — essentially, it lets you keep track of values across async function calls without having to manually pass them around.

JavaScript in Node is single-threaded but highly asynchronous. Normally, when you call await or use callbacks, the execution jumps to a different part of the event loop, and any local variables you had aren’t accessible unless you explicitly pass them along. AsyncLocalStorage solves this by letting you associate some data with the current async chain and retrieve it later from anywhere in that chain.

Anyway, completion of this brings us a big step closer to the release of v7.5.0

1 Like
10

Sorry, been a bit quiet on the announcements as I've been working on some weather displays and some new experiments.

A couple of experiments will be promoted to v7.5.0

New Information Overlay Panel

I think you will find this a LOT better than the current message box features. There is still room for those (one to be a modal message overlay and one to trigger an OS "toast" style messages).

image
image899×1198 83.8 KB

Mutiple messages, defaults to a 5sec display then goes away but optionally can keep on screen with manual cancel. Different types that set colour and icons (and title if not provided): info, success, warning, error.

Example Node-RED function that will exercise the feature:

// set x to be a random integer between 0 and 3
const x = Math.floor(Math.random() * 4)
// random null or 5
const auto = Math.random() < 0.5 ? null : 5
const myIcon = Math.random() < 0.5 ? undefined : '👍'
const showTime = Math.random() < 0.5 ? true : false

const types = ['info', 'success', 'warning', 'error']

msg._uib = {
    // The command for the uibuilder client to execute
    "command": "showOverlay", // Show an information overlay panel
    // The options passed to the command (@since v7.5.0)
    "options": {
        // Optional. Defaults to type
        "title": "Test from Node-RED",
        // Optional. Sets the icon, colour (and heading if not provided)
        //   info, success, warning, error (default: info)
        "type": types[x],
        // Optional. Either null for manual close or
        //    number of seconds
        "autoClose": auto,

        // Optional. Defaults provided for each type
        "icon": myIcon,
        // Optional. Defaults to true
        // "time": true,
        // Optional. Will use msg.payload if not supplied.
        // "content": "This is some content, <b>can be</b> <i>HTML</i>",
    },
    // By default, the client returns a confirmation.
    // Set this to true to prevent that.
    "quiet": true,
}

msg.payload = `This is some text to display. <p> It <u>can</u> contain <b style="color:purple;">HTML</b> as well</p>
  <div>
    Type: ${types[x]}, autoClose: ${auto}, icon override: ${myIcon}
  </div>
`

return msg

Improvements to the router (SPA) auto-menu

I found that the auto-menu's ability to automatically collapse to a hamburger icon wasn't quite smart enough to handle long menus. So there will be some additional JavaScript that measures the length of the menu and collapses it if needed.

1 Like