Ui Builder Script to get output

TotallyInformation · 26 February 2023 22:19

Yes.

A little hard because I used the new uib-element node to create it

OK, took me a few seconds to work that out but here it is:

<!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>Blank template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Blank template">

    <!-- 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/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">uibuilder Blank Template</h1>
    <div role="doc-subtitle">Using the IIFE library - v6.1.0.</div>

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

    <div id="sform1">
        <form>
            <div><label for="r1">Text Input:</label><input id="r1" type="text" required="false" label="Text Input:"
                    value="Foo" onchange="this.dataset.newValue = this.value"
                    onfocus="this.dataset.oldValue = this.value" name="r1"></div>
            <div><label for="r2">Colour:</label><input id="r2" type="color" required="false" label="Colour:"
                    value="#427798" onchange="this.dataset.newValue = this.value"
                    onfocus="this.dataset.oldValue = this.value" name="r2"></div>
            <div><label for="r3">Date:</label><input id="r3" type="date" required="true" label="Date:"
                    onchange="this.dataset.newValue = this.value" onfocus="this.dataset.oldValue = this.value"
                    name="r3"></div>
            <div><label for="r4">Range (0-100):</label><input id="r4" type="range" required="false"
                    label="Range (0-100):" value="20" min="0" max="100" onchange="this.dataset.newValue = this.value"
                    onfocus="this.dataset.oldValue = this.value" name="r4"></div>
            <div><button id="r5" type="button" label="Send to Node-RED" value="Buttons can have values as well"
                    onclick="uibuilder.eventSend(event)" name="r5">Send to Node-RED</button></div>
        </form>
    </div>
</body></html>

This one is slightly extended from the previous simply because I was messing with the new zero-code form creator.

This is the format of the msg it creates.

{
    "payload": {},
    "_ui": {
        "type": "eventSend",
        "id": "r3",
        "name": "r3",
        "slotText": "Send to Node-RED",
        "form": {
            "r1": {
                "id": "r1",
                "name": "r1",
                "value": "#000000",
                "data": {}
            },
            "r2": {
                "id": "r2",
                "name": "r2",
                "value": "20",
                "data": {}
            },
            "r3": {
                "id": "r3",
                "name": "r3",
                "value": "Buttons can have values as well",
                "data": {}
            }
        },
        "props": {},
        "attribs": {
            "type": "button",
            "label": "Send to Node-RED",
            "value": "Buttons can have values as well",
            "onclick": "uibuilder.eventSend(event)"
        },
        "classes": [],
        "event": "click",
        "altKey": false,
        "ctrlKey": false,
        "shiftKey": false,
        "metaKey": false,
        "pointerType": "mouse",
        "nodeName": "BUTTON",
        "clientId": "_zJ-sV_1mtwtEqLl6u-2d",
        "pageName": "index.html",
        "tabId": "t524596"
    },
    "_socketId": "5wOPtyHnpcFfV3lFAAAQ",
    "topic": "sform1",
    "_uib": {
        "_socketId": "5wOPtyHnpcFfV3lFAAAQ",
        "version": "6.1.0-iife.min",
        "ip": "::1",
        "clientId": "_zJ-sV_1mtwtEqLl6u-2d",
        "tabId": "t524596",
        "url": "uib-element-test",
        "pageName": "index.html",
        "connections": 0,
        "lastNavType": "reload",
        "tls": false,
        "connectedTimestamp": "2023-02-26T19:22:49.468Z",
        "referer": "http://red.localhost:3001/uib-element-test/"
    },
    "_msgid": "e4cbd7572c80687a"
}

PS: There is no JavaScript at all. The CSS is the standard uib-brand.css. Too long to really share here, you can get it from the v6.1.0 branch on GitHub. node-red-contrib-uibuilder/uib-brand.css at v6.1.0 · TotallyInformation/node-red-contrib-uibuilder (github.com)

TotallyInformation · 26 February 2023 22:24

This was the output from my Mi11 Android using Edge for Android:

{
    "payload": {},
    "_ui": {
        "type": "eventSend",
        "id": "r5",
        "name": "r5",
        "slotText": "Send to Node-RED",
        "form": {
            "r1": {
                "id": "r1",
                "name": "r1",
                "value": "Fooaaa",
                "data": {
                    "oldValue": "Foo",
                    "newValue": "Fooaaa"
                }
            },
            "r2": {
                "id": "r2",
                "name": "r2",
                "value": "#ff0000",
                "data": {
                    "oldValue": "#427798",
                    "newValue": "#ff0000"
                }
            },
            "r3": {
                "id": "r3",
                "name": "r3",
                "value": "2023-02-28",
                "data": {
                    "oldValue": "",
                    "newValue": "2023-02-28"
                }
            },
            "r4": {
                "id": "r4",
                "name": "r4",
                "value": "48",
                "data": {
                    "newValue": "48"
                }
            },
            "r5": {
                "id": "r5",
                "name": "r5",
                "value": "Buttons can have values as well",
                "data": {}
            }
        },
        "props": {},
        "attribs": {
            "type": "button",
            "label": "Send to Node-RED",
            "value": "Buttons can have values as well",
            "onclick": "uibuilder.eventSend(event)"
        },
        "classes": [],
        "event": "click",
        "altKey": false,
        "ctrlKey": false,
        "shiftKey": false,
        "metaKey": false,
        "pointerType": "touch",
        "nodeName": "BUTTON",
        "clientId": "c7wJI8tmb5k0UWIsvHHnv",
        "pageName": "index.html",
        "tabId": "t62797"
    },
    "_socketId": "gq0GZdatBjyTsfmlAAAy",
    "topic": "sform1",
    "_uib": {
        "_socketId": "gq0GZdatBjyTsfmlAAAy",
        "version": "6.1.0-iife.min",
        "ip": "::ffff:192.168.1.144",
        "clientId": "c7wJI8tmb5k0UWIsvHHnv",
        "tabId": "t62797",
        "url": "uib-element-test",
        "pageName": "index.html",
        "connections": 0,
        "lastNavType": "back_forward",
        "tls": false,
        "connectedTimestamp": "2023-02-26T22:21:04.367Z",
        "referer": "http://192.168.1.119:3001/uib-element-test/"
    },
    "_msgid": "86f8e19750b5b824"
}

Interesting that the return from the range input (r4 in this case) only contains a new value and not the original like the other inputs do. That means that it does not get an onfocus event like the others do (I made a change to every input field on the phone).

You can see from the output that it was a touch event that fired on the button press.

Worscht · 26 February 2023 22:29

Yea when i click on the Button this works for me too.

could you check pls with my Slider if it works it is a bit Different since it works with the Slider directly and not woth the Button.

flows (6).json (4.8 KB)

these are the my code in comment nodes so you should be able to copy them easy.

TotallyInformation · 26 February 2023 22:32

Your HTML is wrong.

You open but don't close your <head> and close but don't open your <body>.

TotallyInformation · 26 February 2023 22:41

Also, you don't need to load socket.io with the new clients. And you don't need to do uibuilder.start() in your index.js file.

The final issue is that you are attaching a click event to something that isn't a button.

~~Ah, no that isn't the final issue. Something you've done has broken the range input. Even on Edge on my desktop, the value does not change when moving the slider.~~ scrap that, the value doesn't change anyway. Though it really does - the value shown as the attribute on the HTML doesn't change because that is only the DEFAULT value not the actual value.

TotallyInformation · 26 February 2023 22:48

Here is the amended

js

/* eslint-disable strict */
/* jshint browser: true, esversion: 6, asi: true */
/* globals uibuilder */
// @ts-nocheck

/** Minimalist code for uibuilder and Node-RED */
"use strict";

// run this function when the document is loaded
window.onload = function () {

    // select all buttons
    // const buttons = document.querySelectorAll(".am__input");
    const buttons = document.querySelectorAll("#brightness");

    // add click event to all buttons
    buttons.forEach((elem) => {
        elem.addEventListener("change", (event) => {

            uibuilder.send({
                topic: `${event.target.id}`,
                payload: event.target.value,
            });

        });
    });

    // Listen for incoming messages from Node-RED
    uibuilder.onChange("msg", function (msg) {
        console.info("[indexjs:uibuilder.onChange] msg received from Node-RED server:", msg);
    });
};

and html

<!doctype html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Blank template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Blank template">
    <link rel="icon" href="./images/node-blue.ico">

    <!-- Your own CSS -->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <script defer src="./uibuilder.iife.min.js"></script>
    <script defer src="./index.js"></script>

</head><body>

    <form>
        <label for="brightness">Brightness</label>
        <input type="range" id="brightness" name="brightness" min="1" max="255" value="255" class="am__input">
    </form>

</body></html>

Confirmed working on desktop and android.

Worscht · 27 February 2023 16:29

Yes the Problem is i dont rly have the Skills for Coding and especially for Html/Css so when i find something in the Internet i try to implement it for my needs, but often i come to my limits there and get totaly lost.

Rly thank you that you took the time to help me out with that, it works now as it should on my System too

TotallyInformation · 27 February 2023 16:54

If it makes you feel any better. That's exactly how I started. I've never been taught HTML/CSS or JavaScript though several decades ago, I was a programmer - mostly on mainframes. Not done that in my day-job for probably 3 decades now.

And yes, I do the same as you - find something interesting, pull it apart a bit and hopefully put it back together in a way that works for me.

These days, the programming is a creative outlet for me. My wife is a keen sewist, I like programming. Both creative outlets and a change from our day-jobs.

system · 13 March 2023 16:55

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Uibuilder node (uibuiderf.js library) General uibuilder	5	326	11 July 2022
Node ui-builder General uibuilder	7	75	16 October 2024
UI Builder form General uibuilder	6	4923	12 October 2018
Uibuilder v6.1 beta - progress Share Your Nodes uibuilder	0	193	29 January 2023
Communicate between UI and MQTT General mqtt , uibuilder	2	368	4 July 2022

Ui Builder Script to get output

Related topics