I am unable to make responsive gauge or ui_template

General
,
1

Hi There,
@TotallyInformation , @Colin , @jbudd.
I need some help regarding responsive in ui_template node, the HTML and css code which i am using outside the Node-Red which working well but when i put the code in ui_template node it changes everything and so i cant make it responsive, i dont know where i am facing problem. could you please guide me well.

This is the Flow.

[{"id":"34392d109b8c22d5","type":"ui_template","z":"f71dd8c21eaabe72","group":"3a12888e4343653b","name":"Full Round","order":1,"width":24,"height":7,"format":"<!DOCTYPE html>\n<html>\n\n<head>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script src=\"/canvas-gauges/gauge.min.js\"></script>\n\n    <style>\n        .canvas {\n            width: 24% !important;\n            /* adjust as needed */\n            height: auto !important;\n            /* adjust as needed */\n        }\n\n        @media (max-width: 600px) {\n            .canvas {\n                width: 50% !important;\n                height: auto !important;\n\n            }\n\n            .canvas-container {\n                display: contents;\n            }\n\n            .bod {\n                display: table-row;\n            }\n        }\n\n\n        .sonnenMode {\n            position: absolute;\n            transform: translate(-50%, -50%);\n            top: 50%;\n            left: 50%;\n        }\n    </style>\n</head>\n\n<body>\n    <div class=\"bod\">\n        <div class=\"canvas-container\" style=\" align-items: center;\">\n            <canvas class=\"canvas\" id=\"canvas\" data-type=\"radial-gauge\" data-width=\"300\" data-height=\"300\"\n                data-units=\"°C\" data-title=\"false\" data-value={{msg.payload}} data-min-value=\"0\" data-max-value=\"320\"\n                data-major-ticks=\"0,40,80,120,160,200,240,280,320\" data-minor-ticks=\"6\" data-stroke-ticks=\"true\"\n                data-highlights='[\n                    { \"from\": 0, \"to\": 60, \"color\": \"rgba(0,255,0)\" },\n                    { \"from\": 60, \"to\": 80, \"color\": \"rgba(255,255,0)\" },\n                    { \"from\": 80, \"to\": 100, \"color\": \"rgba(255,0,0)\" }\n                ]' data-color-plate=\"#fff\" data-border-shadow-width=\"0\" data-borders=\"false\" data-needle-type=\"arrow\"\n                data-needle-width=\"2\" data-needle-circle-size=\"7\" data-needle-circle-outer=\"true\"\n                data-needle-circle-inner=\"false\" data-animation-duration=\"1500\" data-animation-rule=\"linear\"\n                data-title={{msg.title}} data-value-Box=\"true\" data-value-Int=\"2\" data-value-Dec=\"2\">\n            </canvas>\n\n            <canvas class=\"canvas\" id=\"canvas\" data-type=\"radial-gauge\" data-width=\"300\" data-height=\"300\"\n                data-units=\"°C\" data-title=\"false\" data-value={{msg.payload}} data-min-value=\"0\" data-max-value=\"320\"\n                data-major-ticks=\"0,40,80,120,160,200,240,280,320\" data-minor-ticks=\"6\" data-stroke-ticks=\"true\"\n                data-highlights='[\n                    { \"from\": 0, \"to\": 60, \"color\": \"rgba(0,255,0)\" },\n                    { \"from\": 60, \"to\": 80, \"color\": \"rgba(255,255,0)\" },\n                    { \"from\": 80, \"to\": 100, \"color\": \"rgba(255,0,0)\" }\n                ]' data-color-plate=\"#fff\" data-border-shadow-width=\"0\" data-borders=\"false\" data-needle-type=\"arrow\"\n                data-needle-width=\"2\" data-needle-circle-size=\"7\" data-needle-circle-outer=\"true\"\n                data-needle-circle-inner=\"false\" data-animation-duration=\"1500\" data-animation-rule=\"linear\"\n                data-title={{msg.title}} data-value-Box=\"true\" data-value-Int=\"2\" data-value-Dec=\"2\">\n            </canvas>\n\n            <canvas class=\"canvas\" id=\"canvas\" data-type=\"radial-gauge\" data-width=\"300\" data-height=\"300\"\n                data-units=\"°C\" data-title=\"false\" data-value={{msg.payload}} data-min-value=\"0\" data-max-value=\"320\"\n                data-major-ticks=\"0,40,80,120,160,200,240,280,320\" data-minor-ticks=\"6\" data-stroke-ticks=\"true\"\n                data-highlights='[\n                    { \"from\": 0, \"to\": 60, \"color\": \"rgba(0,255,0)\" },\n                    { \"from\": 60, \"to\": 80, \"color\": \"rgba(255,255,0)\" },\n                    { \"from\": 80, \"to\": 100, \"color\": \"rgba(255,0,0)\" }\n                ]' data-color-plate=\"#fff\" data-border-shadow-width=\"0\" data-borders=\"false\" data-needle-type=\"arrow\"\n                data-needle-width=\"2\" data-needle-circle-size=\"7\" data-needle-circle-outer=\"true\"\n                data-needle-circle-inner=\"false\" data-animation-duration=\"1500\" data-animation-rule=\"linear\"\n                data-title={{msg.title}} data-value-Box=\"true\" data-value-Int=\"2\" data-value-Dec=\"2\">\n            </canvas>\n\n\n            <canvas class=\"canvas\" id=\"canvas\" data-type=\"radial-gauge\" data-width=\"300\" data-height=\"300\"\n                data-units=\"°C\" data-title=\"false\" data-value={{msg.payload}} data-min-value=\"0\" data-max-value=\"320\"\n                data-major-ticks=\"0,40,80,120,160,200,240,280,320\" data-minor-ticks=\"6\" data-stroke-ticks=\"true\"\n                data-highlights='[\n                    { \"from\": 0, \"to\": 60, \"color\": \"rgba(0,255,0)\" },\n                    { \"from\": 60, \"to\": 80, \"color\": \"rgba(255,255,0)\" },\n                    { \"from\": 80, \"to\": 100, \"color\": \"rgba(255,0,0)\" }\n                ]' data-color-plate=\"#fff\" data-border-shadow-width=\"0\" data-borders=\"false\" data-needle-type=\"arrow\"\n                data-needle-width=\"2\" data-needle-circle-size=\"7\" data-needle-circle-outer=\"true\"\n                data-needle-circle-inner=\"false\" data-animation-duration=\"1500\" data-animation-rule=\"linear\"\n                data-title={{msg.title}} data-value-Box=\"true\" data-value-Int=\"2\" data-value-Dec=\"2\">\n            </canvas>\n        </div>\n    </div>\n</body>\n\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":550,"y":1120,"wires":[[]]},{"id":"fa4233d162f7fd32","type":"inject","z":"f71dd8c21eaabe72","name":"","props":[{"p":"payload"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":130,"y":1160,"wires":[["34392d109b8c22d5"]]},{"id":"3a12888e4343653b","type":"ui_group","name":"Full Round","tab":"32f743da73ff5571","order":2,"disp":false,"width":24,"collapse":false,"className":""},{"id":"32f743da73ff5571","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
2

The responsiveness made by media query's can't be directly brought over to the dashboard in the way you think. The dashboard makes it's own rules to cover responsiveness and those are way different from what you are expecting. If you have one single element to present (ui_template) it still is a content to layout by defined rules and that you can't change from inside out.

Also your template content is far from being correct - the ui_template is expected to be and rendered as child of the valid html element but your content is full html page.

If the concept of the dashboard (masnory) layout does not satisfy your needs, don't fight with it, use uibuilder or flexdash or make it from scratch.

1 Like
3

Agree, Can't speak for Flexdash which follows a more Dashboard-like approach, but uibuilder is designed to provide loads of help without getting in the way of your UI design.

It will be gaining a number of features to turn data into HTML and already has a low-code way of creating HMTL UI's using a standardised data structure. In the next+1 release, it will also gain the ability to turn that into HTML in Node-RED and the ability to easily save the HTML and other data to files that can be statically served.

But if you already know HTML/CSS, then uibuilder gives you lots of support but doesn't force you to adopt a particular framework unless you want to. You can send HTML to the front end if you like but if it is relatively static, you can simply create your UI in html files as you would with other web tools. Then use uibuilder's comms tools along with vanilla HTML to provide more dynamic updates from Node-RED.

4

That you have me a solution no doubt but the problem is i can't read from NodeRED to uibuilder, and so i head to your uibuilder GitHub got a example but there are the example which my gauge is not supporting so i request you can you please look into this.
I am sharing you my HTML,css and js code also i have a inject node with array value so i need to read like msg.payload[0], which i tried with your example for me does worked, there is no doubt that your example work well and good enough but still i have not getting it in my canvas-gauge. If you could have a look and give me a solution that will be very great @TotallyInformation , @hotNipi.

5

Here is HTML in uibuilder

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
    <style>
        .canvas-container {
            display: contents;
        }

        .canvas {
            width: 24% !important;
            /* adjust as needed */
            height: auto !important;
            /* adjust as needed */
        }

        @media (max-width: 600px) {
            .canvas {
                width: 50% !important;
                height: auto !important;

            }

            .bod {
                display: table-row;
            }
        }


        .sonnenMode {
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
        }
    </style>
</head>

<body class="bod">
    <div class="canvas-container" style=" align-items: center;">
        <canvas class="canvas" id="canvas" data-type="radial-gauge" data-width="300" data-height="300" data-units="°C"
            data-title="false" data-value= {{msg.payload}} data-min-value="0" data-max-value="320"
            data-major-ticks="0,40,80,120,160,200,240,280,320" data-minor-ticks="6" data-stroke-ticks="true"
            data-highlights='[
                    { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
                    { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
                    { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
                ]' data-color-plate="#fff" data-border-shadow-width="0" data-borders="false" data-needle-type="arrow"
            data-needle-width="2" data-needle-circle-size="7" data-needle-circle-outer="true"
            data-needle-circle-inner="false" data-animation-duration="1500" data-animation-rule="linear"
            data-title={{msg.title}} data-value-Box="true" data-value-Int="2" data-value-Dec="2">
        </canvas>

        <canvas class="canvas" id="canvas" data-type="radial-gauge" data-width="300" data-height="300" data-units="°C"
            data-title="false" data-value={{msg.payload[0]}} data-min-value="0" data-max-value="320"
            data-major-ticks="0,40,80,120,160,200,240,280,320" data-minor-ticks="6" data-stroke-ticks="true"
            data-highlights='[
                    { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
                    { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
                    { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
                ]' data-color-plate="#fff" data-border-shadow-width="0" data-borders="false" data-needle-type="arrow"
            data-needle-width="2" data-needle-circle-size="7" data-needle-circle-outer="true"
            data-needle-circle-inner="false" data-animation-duration="1500" data-animation-rule="linear"
            data-title={{msg.title}} data-value-Box="true" data-value-Int="2" data-value-Dec="2">
        </canvas>

        <canvas class="canvas" id="canvas" data-type="radial-gauge" data-width="300" data-height="300" data-units="°C"
            data-title="false" data-value={{msg.payload[0]}} data-min-value="0" data-max-value="320"
            data-major-ticks="0,40,80,120,160,200,240,280,320" data-minor-ticks="6" data-stroke-ticks="true"
            data-highlights='[
                    { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
                    { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
                    { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
                ]' data-color-plate="#fff" data-border-shadow-width="0" data-borders="false" data-needle-type="arrow"
            data-needle-width="2" data-needle-circle-size="7" data-needle-circle-outer="true"
            data-needle-circle-inner="false" data-animation-duration="1500" data-animation-rule="linear"
            data-title={{msg.title}} data-value-Box="true" data-value-Int="2" data-value-Dec="2">
        </canvas>


        <canvas class="canvas" id="canvas" data-type="radial-gauge" data-width="300" data-height="300" data-units="°C"
            data-title="false" data-value={{msg.payload[0]}} data-min-value="0" data-max-value="320"
            data-major-ticks="0,40,80,120,160,200,240,280,320" data-minor-ticks="6" data-stroke-ticks="true"
            data-highlights='[
                    { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
                    { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
                    { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
                ]' data-color-plate="#fff" data-border-shadow-width="0" data-borders="false" data-needle-type="arrow"
            data-needle-width="2" data-needle-circle-size="7" data-needle-circle-outer="true"
            data-needle-circle-inner="false" data-animation-duration="1500" data-animation-rule="linear"
            data-title={{msg.title}} data-value-Box="true" data-value-Int="2" data-value-Dec="2">
        </canvas>
    </div>

</body>
<script>
    uibuilder.onChange('msg', function(msg) {
        if (msg.topic === 'gauge') console.log(msg);
    });
</script>

</html>
6

It would be better if you saved that as a copy and simplified it down to a single gauge and dropped the CSS for now. You need to get 1 working first before adding multiple.

Straight away, I can see that you have several canvas tags with the same ID. This will not work. Every element id on a page must be unique.

Then you have duplicated data-* attributes

And you have put mustache style {{...}} in the HTML which doesn't work unless you have a suitable additional library loaded - but you don't need that at all.

And finally, you try to update the title attribute but you turned that off in the settings.

Here is a fully working example:

index.html

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

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <!-- 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 / - socket.io no longer needed  -->
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/canvas-gauges@2.1.7/gauge.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1>uibuilder Canvas Gauges Example</h1>

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

    <canvas id="gauge-radial-1"></canvas>

    <pre id="msg" class="syntax-highlight">Waiting for a message from Node-RED</pre>

</body></html>

index.js

// @ts-nocheck

'use strict'

// https://github.com/Mikhus/canvas-gauges
var gauge = new RadialGauge({
    renderTo: 'gauge-radial-1',
    highlights: [
        { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
        { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
        { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
    ],
    width: 300,
    height: 300,
    units: "°C",
    minValue: 0,
    maxValue: 100,
    majorTicks: [0,10,20,30,40,50,60,70,80,90,100],
    minorTicks: 10,
    strokeTicks: true,
    colorPlate: "#fff",
    borderShadowWidth: 0,
    borders: false,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needlCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "linear",
    valueBox: true,
    valueInt: 2,
    valueDec: 2,
}).draw()
// var gauge = new LinearGauge({
//     renderTo: 'gauge-radial-1'
// }).draw()

// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function(msg) {
    // Dump the msg as text to the "msg" html element
    const eMsg = $('#msg')
    if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg)

    gauge.value = msg.payload
    gauge.update({
        title: msg.topic
    })
})

I've converted your data-* attributes to JavaScript since that is generally a LOT easier to manage. The value is set by message from Node-RED.

Any of the gauge settings could be changed dynamically from Node-RED if you want them to be. However, most of the settings will not update without calling gauge.update - I've shown an example with the title attribute.

You should note that all of this information is in the User Guide for the gauge library, it isn't anything to do with uibuilder.

7

And now there is a dedicated WIKI entry:

8

@TotallyInformation,
I copied the HTML and JS and implemented it with uibuilder but still nothing is receiving to canvas-gauge i dont know why this is happening in fact i tried it with ui_template which works fine but i have to try with uibuilder it still not receiving the msg.payload what is wrong i dont know.

9

Please share your latest HTML and JavaScript. And an example message you are sending to uibuilder.

Have you tried a separate flow with the example from the WIKI page?

10

what you have gave in wiki page that one and inject node with payload in number, also i cracked it out what was getting wrong,

 const eMsg = $('#msg')
    if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg)

the above code was not letting canvas-gauge to work i removed it and canvas-gauge was working well, now i want to get it from array values.

11

Ah, so presumably you were getting an error in the dev tools console? Always check there first. My fault because I gave you some code that only works in the as yet unreleased uibuilder v6.1! Oops. Sorry.

12

can you give me the solution for auto updating vaues in uibuilder becuase i need to refresh the page again and again also i have to write same JS for multiple gauges or not @TotallyInformation

13

Please reply on this

14

You don't need to refresh the page - that's why you have a comms channel and can send messages in both directions. Anything you send to a uibuilder node is distributed to any connected client automatically. All you need is the uibuilder.onChange function in your JavaScript to handle things. The example I've given already does this for you. Send a random value as suggested in the WIKI example every few seconds and you will see this in action. I have no idea how you are producing data in Node-RED but you just need to send it.

As for multiple gauges, you need to add more canvas tags to your page but give each one a unique ID as I've already said. Then in your onChange function, you need a way to identify which incoming message goes to which gauge. You also need to create a gauge object for each visible canvas:

const gauge1 = new RadialGauge({ renderTo: 'gauge-radial-1', ....})
const gauge2 = new RadialGauge({ renderTo: 'gauge-radial-2', ....})
....

uibuilder.onChange('msg', function(msg) {
  if (msg.topic === 'gauge1') gauge1.value = msg.payload
  if (msg.topic === 'gauge2') gauge2.value = msg.payload
  ...
})

Do you know about the developer tools baked into all of the desktop browsers? If not, please look it up.

One of the tabs in any dev tools is the console. This is the log output from the web page. If you have an error, it will appear here.

image
image953×407 32.6 KB

15

Lastly I want to hide Canvas- gauge in msg.payload

16

Well, that probably is best done with CSS. With uibuilder, you can do something like:

uibuilder.onChange('msg', (msg) => {
  if (msg.topic === 'gauge1') {
    const g1 = ${'#gauge1')  // grab a reference to the HTML DOM element
    if (g1) { // If the element was actually found
      if (msg.hide === true) {
        g1.style = 'display: none;'
      } else {
        g1.style = 'display: initial;'
        gauge1.value = msg.payload
    }
  }
  ...
})

NB: Untested. Hopefully no typo's. Don't forget to change the HTML id for each gauge to be the same as the JavaScript variable name that defines it, this makes the code a lot simpler.

Best to put the whole thing in a function and then you can just call it for each gauge

function updateGauge(msg) {
    const gaugeName = msg.topic
    if (msg.topic === gaugeName) {
        const g = $(`#${gaugeName}`)  // grab a reference to the HTML DOM element
        if (g) { // If the element was actually found
            if (msg.hide === true) {
                g.style = 'display: none;'
            } else {
                g.style = 'display: initial;'
                // assumes that `gauge1`, etc are global variables
                window[gaugeName].value = msg.payload
                window[gaugeName].update({
                    title: msg.topic
                })
            }
        }
    }
}

uibuilder.onChange('msg', function (msg) {
    updateGauge(msg)    
})

NB: This one is tested and correct.

17

And because I couldn't stop myself! Here is an even better example that automatically creates both the canvas and the gauge if it doesn't yet exist and then updates it. :man_mage:

function createGauge(gaugeName, type, parent) {
    // grab a reference to the HTML DOM element
    let g = $(`#${gaugeName}`)

    if (!g) { // if not found, append a new canvas element to the parent
        let p = $(parent)
        if (!p)  p = $('body') // If parent not found, use body
        let canvasEl = document.createElement('canvas')
        canvasEl.id = gaugeName
        p.append(canvasEl)
    }

    return new RadialGauge({
        renderTo: gaugeName,
        highlights: [
            { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
            { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
            { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
        ],
        width: 300,
        height: 300,
        units: "°C",
        minValue: 0,
        maxValue: 100,
        majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        minorTicks: 10,
        strokeTicks: true,
        colorPlate: "#fff",
        borderShadowWidth: 0,
        borders: false,
        needleType: "arrow",
        needleWidth: 2,
        needleCircleSize: 7,
        needlCircleOuter: true,
        needleCircleInner: false,
        animationDuration: 1500,
        animationRule: "linear",
        valueBox: true,
        valueInt: 2,
        valueDec: 2,
    }).draw()
}

function updateGauge(msg, gauges) {
    const gaugeName = msg.topic

    // grab a reference to the HTML DOM element
    const g = $(`#${gaugeName}`)

    // If the element was actually found
    if (g) {
        if (msg.hide === true) {
            g.style = 'display: none;'
        } else {
            g.style = 'display: initial;'
            // assumes that `gauge1`, etc are global variables
            gauges[msg.topic].value = msg.payload
            gauges[msg.topic].update({
                title: msg.topic
            })
        }
    }
}

// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function (msg) {
    // if the gauge doesn't exist, create it (Creates the canvas as well)
    if (!gauges[msg.topic]) gauges[msg.topic] = createGauge(msg.topic, 'RadialGauge', 'body')

    updateGauge(msg, gauges)    
})

Obviously not low-code like using the msg._ui would be but fun anyway. A nice distraction at the end of a long day. I'll add the low code and this version to the WIKI when I get a chance.

PS: This isn't quite feature complete as it needs adjusting to allow for linear gauges and it should be updated to allow passing of the gauge properties to the create function. But hey! I'm not here to do everything. :rofl:

What I really like about this example is that it demonstrates how little code is required to do amazing things with HTML (with a little help from Node-RED and uibuilder of course).

1 Like
19

Sorry for delay @TotallyInformation i have the code working here

var exec = childProcess.exec;

var payloads1 = ["rtd 1 read 1", "rtd 0 read 2", "rtd 0 read 1"];
var payloads2 = ["rtd 0 read 1", "rtd 1 read 1", "rtd 0 read 2", "rtd 1 read 2", "rtd 0 read 6"];

var realData;
var payloads;

if (msg.payload === 2) {
    payloads = payloads2;
} else if (msg.payload === 1) {
    payloads = payloads1;
} else {
    realData = msg.payload;
}

if (payloads) {
    msg.payload = [];
    var results = [];

    function executeCommand(index) {
        exec(payloads[index], (error, stdout) => {
            if (error) {
                results[index] = 0;
            } else {
                results[index] = stdout.trim();
            }

            if (index === payloads.length - 1) {
                msg.payload = results;
                node.send(msg);
            } else {
                executeCommand(index + 1);
            }
        });
    }

    executeCommand(0);
} else {
    msg.payload = { "data": realData };
    node.send(msg);
}

but the issue i got understand you is that i need to specify that Sensor1 is the text and msg.payload[0] is gauge1 and this is going till gauge24, as i worked on it many times but i didn't got it properly working on uibuilder and therefore i remember you are there to make things right.
and i need to add in this if in payload1 i have this

var payloads1 = ["rtd 1 read 1", "rtd 0 read 2", "rtd 0 read 1"];

then i have to show only three gauges and text is there any solution on it. if so then please help and please brief me so i can understand it better.

20

Sorry, but I don't see how this relates to this thread at all?

You are running some kind of OS exec command? I've no idea what that is for. I don't know where this code fits in to the previous thread nor where you run it nor what its purpose is.

21

i didnt saw what i posted sorry for misunderstanding i apologize actually i wanted to make a div inside div i want a text and the gauge but the problem is when i add a div the gauge width and height remains the same from the js so i cant make it responsive and i cant call the msg.topic to text so can you give me some example how to do it