# Gauge can not responsive help me!

**URL:** <https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [21 February 2023 13:40 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510 "2023-02-21T13:40:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![khunakon](https://avatars.discourse-cdn.com/v4/letter/k/3da27b/32.png) [@khunakon](https://discourse.nodered.org/u/khunakon)\
**Post date:** [21 February 2023 13:40 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/1 "2023-02-21T13:40:17Z")

</div>

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.

```auto
[
    {
        "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.

```auto
[
    {
        "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!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 February 2023 15:33 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/2 "2023-02-21T15:33:37Z")

</div>

> [@khunakon](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![khunakon](https://avatars.discourse-cdn.com/v4/letter/k/3da27b/32.png) [@khunakon](https://discourse.nodered.org/u/khunakon)\
**Post date:** [21 February 2023 23:15 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/3 "2023-02-21T23:15:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 February 2023 23:33 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/4 "2023-02-21T23:33:02Z")

</div>

> [@khunakon](#):
>
> (I am an intern working on my thesis which my teacher wants to be beautiful in the dashboard design)

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

> [@khunakon](#):
>
> But i want to know if there is a way to make gauge responsive in dashboard

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 February 2023 23:44 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/5 "2023-02-21T23:44:32Z")

</div>

> [@khunakon](#):
>
> 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

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [22 February 2023 07:30 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/6 "2023-02-22T07:30:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [22 February 2023 08:19 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/7 "2023-02-22T08:19:40Z")

</div>

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.

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 March 2023 08:20 UTC](https://discourse.nodered.org/t/gauge-can-not-responsive-help-me/75510/8 "2023-03-08T08:20:37Z")

</div>

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