Dashboard 2.0 gauge level tank

Hi,

I made a gauge with a tank level. When it is 100%, the image looks almost empty.
Is this correct?

afbeelding
afbeelding

Can't confirm. Try to clear browser cache and maybe restart node red ...

No. Could you export a minimal flow that demonstrates this and raise an issue please.

Found it! It is a browser issue.

Firefox it is not working. (did also a test in private mode)
Chrome it is working, perfect!

Is it possible to make it work with Firefox?

The battery gauge is working in both browsers

[
    {
        "id": "2187465d8f29d3be",
        "type": "tab",
        "label": "TEST",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "230410bb50a5052e",
        "type": "ui-gauge",
        "z": "2187465d8f29d3be",
        "name": "test",
        "group": "6ce8a69ad97aa835",
        "order": 2,
        "width": 3,
        "height": "6",
        "gtype": "gauge-tank",
        "gstyle": "needle",
        "title": "test",
        "units": "units",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#a8f5ff"
            },
            {
                "from": "15",
                "color": "#55dbec"
            },
            {
                "from": "35",
                "color": "#53b4fd"
            },
            {
                "from": "50",
                "color": "#2397d1"
            }
        ],
        "min": 0,
        "max": "100",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 330,
        "y": 120,
        "wires": []
    },
    {
        "id": "2bdab544e314d248",
        "type": "inject",
        "z": "2187465d8f29d3be",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "50",
        "payloadType": "num",
        "x": 170,
        "y": 100,
        "wires": [
            [
                "230410bb50a5052e"
            ]
        ]
    },
    {
        "id": "68c0c861e6798cdb",
        "type": "inject",
        "z": "2187465d8f29d3be",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "100",
        "payloadType": "num",
        "x": 150,
        "y": 160,
        "wires": [
            [
                "230410bb50a5052e"
            ]
        ]
    },
    {
        "id": "da7175dcf2443693",
        "type": "inject",
        "z": "2187465d8f29d3be",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "10",
        "payloadType": "num",
        "x": 170,
        "y": 60,
        "wires": [
            [
                "230410bb50a5052e"
            ]
        ]
    },
    {
        "id": "6ce8a69ad97aa835",
        "type": "ui-group",
        "name": "Ontharder zout stand",
        "page": "ba8733e4b7f8ed68",
        "width": "3",
        "height": "6",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "ba8733e4b7f8ed68",
        "type": "ui-page",
        "name": "Status diversen",
        "ui": "07d9e68410f8668f",
        "path": "/StatusDiv",
        "icon": "home",
        "layout": "grid",
        "theme": "58232a5d443a2893",
        "order": 2,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "07d9e68410f8668f",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "58232a5d443a2893",
        "type": "ui-theme",
        "name": "Theme MMMM",
        "colors": {
            "surface": "#242424",
            "primary": "#0094ce",
            "bgPage": "#535353",
            "groupBg": "#d3d3d3",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px",
            "density": "default"
        }
    }
]

Which version of FF?

Installed latest FF.Changes the height from 0 to somewhere about 20% and then only the color changes but not the height of the liquid.

No errors in console...

Tried that flow on my Windows test system using Vivaldi (Chromium):

Something seems a little "wonk" to give it its technical term.

FF version 130.0 Mobile version and windows version. Both same issue.

is this a bug now?

If this is still not working for you could you submit an issue please at Issues · FlowFuse/node-red-dashboard · GitHub
Include your flow in the issue.

Link to the issue here so others interested can follow it.

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