Gauge can not responsive help me!

General
1

First, I'm new for Node-red . I'm trying to make this gauge respondsive in real time. I was initially able to send my data to the screen, but the gauge didn't move with the numbers.

The reason why I don't use ui-gauge is because the dashboard has some limitations. (I am an intern working on my thesis which my teacher wants to be beautiful in the dashboard design) So I opted not to use the dashboard directly that's why I have written html ,css,js instead of using tools from the dashboard directly.

P.S. i just use inject-node for example, in my thesis i will use mqtt to send data.

Here's the flow I modified code to get the msg.direct load.

[
    {
        "id": "8a39156f80306c37",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b09e9aebc4f92c57",
        "type": "ui_template",
        "z": "8a39156f80306c37",
        "group": "6cc66c72e5f6e0e7",
        "name": "",
        "order": 1,
        "width": 7,
        "height": 9,
        "format": "<div class=\"gauge\">\n    <div class=\"gauge__body\">\n        <div  class=\"gauge__fill\"></div>\n        <div ng-bind-html=\"msg.payload\" class=\"gauge__cover\"></div>\n    </div>\n</div>\n<style>\n    .gauge {\n    width: 100%;\n    max-width: 250px;\n    font-family: \"Roboto\", sans-serif;\n    font-size: 32px;\n    color: #004033;\n    }\n    \n    .gauge__body {\n    width: 100%;\n    height: 0;\n    padding-bottom: 50%;\n    background: #b4c0be;\n    position: relative;\n    border-top-left-radius: 100% 200%;\n    border-top-right-radius: 100% 200%;\n    overflow: hidden;\n    }\n    \n    .gauge__fill {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: inherit;\n    height: 100%;\n    background: #009578;\n    transform-origin: center top;\n    transform: rotate(0.25turn);\n    transition: transform 0.2s ease-out;\n    }\n    \n    .gauge__cover {\n    width: 75%;\n    height: 150%;\n    background: #ffffff;\n    border-radius: 50%;\n    position: absolute;\n    top: 25%;\n    left: 50%;\n    transform: translateX(-50%);\n    \n    /* Text */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-bottom: 25%;\n    box-sizing: border-box;\n    }\n</style>\n<script>\n    const gaugeElement = document.querySelector(\".gauge\");\n    \n    function setGaugeValue(gauge, value) {\n    if (value < 0 || value> 1) {\n        return;\n        }\n    \n        gauge.querySelector(\".gauge__fill\").style.transform = `rotate(${\n        value / 2\n        }turn)`;\n        gauge.querySelector(\".gauge__cover\").textContent = `${Math.round(\n        value * 100\n        )}%`;\n        }\n    \n        // Set initial value of the gauge to 0.3\n        setGaugeValue(gaugeElement, 0.3);\n    \n        // Listen for incoming messages from Node-RED\n        // and update the gauge value accordingly\n        this.onmessage = function (msg) {\n        if (msg.hasOwnProperty(\"payload\")) {\n        setGaugeValue(gaugeElement, msg.payload);\n        }\n        };\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 420,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "7d193ecae230ff14",
        "type": "inject",
        "z": "8a39156f80306c37",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "23",
        "payloadType": "num",
        "x": 270,
        "y": 220,
        "wires": [
            [
                "b09e9aebc4f92c57"
            ]
        ]
    },
    {
        "id": "6cc66c72e5f6e0e7",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "76ccc464c8a197e5",
        "order": 1,
        "disp": true,
        "width": 7
    },
    {
        "id": "76ccc464c8a197e5",
        "type": "ui_tab",
        "name": "Tab 17",
        "icon": "dashboard",
        "order": 17
    }
]

And here is the original html,css,js respondsive code.

[
    {
        "id": "c49aea348796f5be",
        "type": "tab",
        "label": "Flow 7",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "93419fe7153549f5",
        "type": "ui_template",
        "z": "c49aea348796f5be",
        "group": "6cc66c72e5f6e0e7",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<div class=\"gauge\">\n    <div class=\"gauge__body\">\n        <div class=\"gauge__fill\"></div>\n        <div class=\"gauge__cover\"></div>\n    </div>\n</div>\n<style>\n    .gauge {\n    width: 100%;\n    max-width: 250px;\n    font-family: \"Roboto\", sans-serif;\n    font-size: 32px;\n    color: #004033;\n    }\n    \n    .gauge__body {\n    width: 100%;\n    height: 0;\n    padding-bottom: 50%;\n    background: #b4c0be;\n    position: relative;\n    border-top-left-radius: 100% 200%;\n    border-top-right-radius: 100% 200%;\n    overflow: hidden;\n    }\n    \n    .gauge__fill {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: inherit;\n    height: 100%;\n    background: #009578;\n    transform-origin: center top;\n    transform: rotate(0.25turn);\n    transition: transform 0.2s ease-out;\n    }\n    \n    .gauge__cover {\n    width: 75%;\n    height: 150%;\n    background: #ffffff;\n    border-radius: 50%;\n    position: absolute;\n    top: 25%;\n    left: 50%;\n    transform: translateX(-50%);\n    \n    /* Text */\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding-bottom: 25%;\n    box-sizing: border-box;\n    </style>\n\n<script>\n        const gaugeElement = document.querySelector(\".gauge\");\n        \n        function setGaugeValue(gauge, value) {\n        if (value < 0 || value> 1) {\n            return;\n            }\n        \n            gauge.querySelector(\".gauge__fill\").style.transform = `rotate(${\n            value / 2\n            }turn)`;\n            gauge.querySelector(\".gauge__cover\").textContent = `${Math.round(\n            value * 100\n            )}%`;\n            }\n        \n            setGaugeValue(gaugeElement, 0.5);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 480,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "6cc66c72e5f6e0e7",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "76ccc464c8a197e5",
        "order": 1,
        "disp": true,
        "width": 7
    },
    {
        "id": "76ccc464c8a197e5",
        "type": "ui_tab",
        "name": "Tab 17",
        "icon": "dashboard",
        "order": 17
    }
]

Thank you in advance!

2

In that case, why use Dashboard at all? uibuilder gives you complete control without getting in the way.

3

Oh i see. But i want to know there is a possible to make gauge responsive in dashboard without using ui_gauge? or the only way is use uibuilder

4

Do you have a design in mind for this beautiful gauge?

Can you clarify what you mean by "responsive"?
Responsive in the context of web pages generally means the size of an element varies to match the size of the browser window, but I suspect you mean that your gauge does not correctly show the value passed to it.

5

I'm sure you can do it but if it means fighting with AngularJS, is there a point?

6

The ui_template node you are using to present your graphics has very good help page. Have you read it? There are small examples which give you valid starting point. You just must choose correct one depending on how your widget will behave.

Also, many many examples shared here in forum where ui_template is used for different things. Doesn't matter if it is gauge or not. Basics for communication with server side are same or almost same. Just search and explore and try to understand what makes them work. Just copy and paste does not do the trick. You'll need understand it to make your own things.

7

Your function needs to listen for msg and and then convert msg.payload by dividing by 100.
The scope.$watch() example in the help text is what you want.
e.g.

<script>
 (function(scope) {
    const gaugeElement = document.querySelector(".gauge");
    function setGaugeValue(gauge, value) {
        if (value < 0 || value> 1) {
            return;
        }
    
        gauge.querySelector(".gauge__fill").style.transform = `rotate(${
        value / 2
        }turn)`;
        gauge.querySelector(".gauge__cover").textContent = `${Math.round(
        value * 100
        )}%`;
    }
    
        // Set initial value of the gauge to 0.3
    setGaugeValue(gaugeElement, 0.3);
    
        // Listen for incoming messages from Node-RED
        // and update the gauge value accordingly
   
    scope.$watch('msg', function(msg) {
        if (msg.payload) {
            // Do something when msg arrives
            setGaugeValue(gaugeElement, msg.payload/100);
        }
    })
})(scope);
</script>
8

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