FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
204 stars 48 forks source link

ui-gauge 2.0 1.17.1 - The needle loses track of it's position. #1337

Open houser42 opened 1 month ago

houser42 commented 1 month ago

Current Behavior

ui-gauge 2.0 the needle loses track of it's position. @flowfuse/node-red-dashboard 1.17.1

Screenshot 2024-09-27 at 09 57 13

Expected Behavior

The needle should be in the correct position.

Steps To Reproduce

I va tried this on three separate linux systems and it is so far reproducible 100% just by instantiating a sufficient number of the gauge. SP,e tests indicate that this possibly happens when enough instances are instantiated with the needle preference ticked.

Environment

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

colinl commented 1 month ago

Maybe a duplicate of #842, at least in part. Also #763 may be relevant.

joepavitt commented 1 month ago

Just to check, this isn't as a result of a screen resize at all? Just raw rendering of the gauges?

houser42 commented 1 month ago

Just to check, this isn't as a result of a screen resize at all? Just raw rendering of the gauges?

Not sure I understand the depth of your question, but this is basically rendering in a browser that is not resized at all. It seems to happen when the amount of gauges with the needle setting increase in the development of the install. FWIW.

houser42 commented 1 month ago

I can replicate it by adding a few gauges to a group and then add some payload via a slider as in the example flow below. If at all possible, when working on this node, please consider adding the differential function to this very important ui-gauge node? Many thanks.

Screenshot 2024-09-29 at 09 46 28
[
    {
        "id": "8bc24fdfe79d7aa2",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "ampere",
        "group": "f9fe8211d40a5300",
        "order": 7,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "ampere",
        "units": "A",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#00f900"
            },
            {
                "from": "77",
                "color": "#ff9300"
            },
            {
                "from": "100",
                "color": "#ff2600"
            },
            {
                "from": "120",
                "color": "#ff2600"
            }
        ],
        "min": "0",
        "max": "120",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 380,
        "y": 360,
        "wires": []
    },
    {
        "id": "fbee797bb24fbc0b",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batteri amps",
        "group": "f9fe8211d40a5300",
        "order": 2,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "ampere",
        "units": "A",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "-120",
                "color": "#ff9300"
            },
            {
                "from": "-110",
                "color": "#00f900"
            },
            {
                "from": "0",
                "color": "#00f900"
            },
            {
                "from": "110",
                "color": "#00f900"
            },
            {
                "from": "111",
                "color": "#ff9300"
            },
            {
                "from": "120",
                "color": "#ff9300"
            }
        ],
        "min": "-120",
        "max": "120",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 390,
        "y": 320,
        "wires": []
    },
    {
        "id": "b12a10fe23e4b783",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batt power watts",
        "group": "f9fe8211d40a5300",
        "order": 8,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "rounded",
        "title": "watt",
        "units": "W",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "-3000",
                "color": "#ff9300"
            },
            {
                "from": "-2400",
                "color": "#00f900"
            },
            {
                "from": "0",
                "color": "#00f900"
            },
            {
                "from": "2500",
                "color": "#ff2600"
            },
            {
                "from": "3000",
                "color": "#ff2600"
            }
        ],
        "min": "-3000",
        "max": "3000",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 410,
        "y": 400,
        "wires": []
    },
    {
        "id": "cc05114576d9df0b",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batt power +/-",
        "group": "f9fe8211d40a5300",
        "order": 1,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "batt power +/-",
        "units": "kW",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "-4",
                "color": "#ff9300"
            },
            {
                "from": "",
                "color": "#000000"
            },
            {
                "from": "-3.5",
                "color": "#3a88fe"
            },
            {
                "from": "0",
                "color": "#3a88fe"
            },
            {
                "from": "3.5",
                "color": "#3a88fe"
            },
            {
                "from": "3.6",
                "color": "#ff9300"
            },
            {
                "from": "4",
                "color": "#ff9300"
            }
        ],
        "min": "-4",
        "max": "4",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 400,
        "y": 180,
        "wires": []
    },
    {
        "id": "97e42e2a59246509",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batteri volts",
        "group": "f9fe8211d40a5300",
        "order": 3,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "volt",
        "units": "V",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "10",
                "color": "#ff2600"
            },
            {
                "from": "11.1",
                "color": "#ff9300"
            },
            {
                "from": "11.8",
                "color": "#5cd65c"
            },
            {
                "from": "14.3",
                "color": "#ff2600"
            },
            {
                "from": "15",
                "color": "#ff2600"
            }
        ],
        "min": "10",
        "max": "15",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 390,
        "y": 220,
        "wires": []
    },
    {
        "id": "74b4b2f72261eb22",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batteri temperatur",
        "group": "f9fe8211d40a5300",
        "order": 6,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "temp",
        "units": "°C",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "-40",
                "color": "#ff9300"
            },
            {
                "from": "5",
                "color": "#ff9300"
            },
            {
                "from": "6",
                "color": "#00f900"
            },
            {
                "from": "31",
                "color": "#ff9300"
            },
            {
                "from": "40",
                "color": "#ff2600"
            }
        ],
        "min": "-40",
        "max": "40",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 410,
        "y": 260,
        "wires": []
    },
    {
        "id": "85fef5c0c179d8f1",
        "type": "inject",
        "z": "a2e84e1e383f5e08",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "3",
        "payloadType": "num",
        "x": 150,
        "y": 400,
        "wires": [
            [
                "fbee797bb24fbc0b",
                "8bc24fdfe79d7aa2",
                "b12a10fe23e4b783",
                "cc05114576d9df0b",
                "97e42e2a59246509",
                "74b4b2f72261eb22",
                "509686d704616771",
                "349b7f3aca90ca05"
            ]
        ]
    },
    {
        "id": "509686d704616771",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batteri amps",
        "group": "f9fe8211d40a5300",
        "order": 4,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "ampere",
        "units": "A",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "-120",
                "color": "#ff9300"
            },
            {
                "from": "-110",
                "color": "#00f900"
            },
            {
                "from": "0",
                "color": "#00f900"
            },
            {
                "from": "110",
                "color": "#00f900"
            },
            {
                "from": "111",
                "color": "#ff9300"
            },
            {
                "from": "120",
                "color": "#ff9300"
            }
        ],
        "min": "-120",
        "max": "120",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 390,
        "y": 460,
        "wires": []
    },
    {
        "id": "349b7f3aca90ca05",
        "type": "ui-gauge",
        "z": "a2e84e1e383f5e08",
        "name": "batt power watts",
        "group": "f9fe8211d40a5300",
        "order": 5,
        "width": "3",
        "height": "4",
        "gtype": "gauge-34",
        "gstyle": "rounded",
        "title": "watt",
        "units": "W",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "-3000",
                "color": "#ff9300"
            },
            {
                "from": "-2400",
                "color": "#00f900"
            },
            {
                "from": "0",
                "color": "#00f900"
            },
            {
                "from": "2500",
                "color": "#ff2600"
            },
            {
                "from": "3000",
                "color": "#ff2600"
            }
        ],
        "min": "-3000",
        "max": "3000",
        "sizeThickness": 16,
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 410,
        "y": 520,
        "wires": []
    },
    {
        "id": "c83113e976a0c20b",
        "type": "ui-slider",
        "z": "a2e84e1e383f5e08",
        "group": "f9fe8211d40a5300",
        "name": "",
        "label": "slider",
        "tooltip": "",
        "order": 9,
        "width": "6",
        "height": "3",
        "passthru": false,
        "outs": "all",
        "topic": "topic",
        "topicType": "msg",
        "thumbLabel": "always",
        "showTicks": "always",
        "min": 0,
        "max": "100",
        "step": 1,
        "className": "",
        "iconPrepend": "",
        "iconAppend": "",
        "color": "",
        "colorTrack": "",
        "colorThumb": "",
        "x": 130,
        "y": 320,
        "wires": [
            [
                "cc05114576d9df0b",
                "97e42e2a59246509",
                "74b4b2f72261eb22",
                "fbee797bb24fbc0b",
                "8bc24fdfe79d7aa2",
                "509686d704616771",
                "b12a10fe23e4b783",
                "349b7f3aca90ca05"
            ]
        ]
    },
    {
        "id": "f9fe8211d40a5300",
        "type": "ui-group",
        "name": "g git 1",
        "page": "e3f48fc6daf125cf",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e3f48fc6daf125cf",
        "type": "ui-page",
        "name": "p git 1",
        "ui": "2b83daf52f198c4a",
        "path": "/git1",
        "icon": "home",
        "layout": "grid",
        "theme": "a9af1506409fba49",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 5,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "2b83daf52f198c4a",
        "type": "ui-base",
        "name": "3:181 2.0",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "a9af1506409fba49",
        "type": "ui-theme",
        "name": "black and grey",
        "colors": {
            "surface": "#000000",
            "primary": "#919191",
            "bgPage": "#000000",
            "groupBg": "#000000",
            "groupOutline": "#000000"
        },
        "sizes": {
            "pagePadding": "2px",
            "groupGap": "2px",
            "groupBorderRadius": "2px",
            "widgetGap": "3px",
            "density": "compact"
        }
    }
]
joepavitt commented 1 month ago

@gayanSandamal FYI - I suspect this is a result of the recent responsiveness changes put into the Gauge

joepavitt commented 1 month ago

Thanks @houser42 - Have marked this as "Up Next", and we'll look at it asap

gayanSandamal commented 1 month ago

@gayanSandamal FYI - I suspect this is a result of the recent responsiveness changes put into the Gauge

@joepavitt I will look into this

houser42 commented 1 month ago

Thanks @joepavitt ! Great look forward to it! Also if at all possible. please add the differential functionality if there is time ;) The gauge is very nice and it would be fab to use it for things like temperature and battery charge/discharge with a zero point on the scale drawn properly by the gauge..

joepavitt commented 1 month ago

please add the differential functionality if there is time

Bit more complicated, assuming you mean have 0 render in the middle-top of the gauge?

houser42 commented 1 month ago

Yes, that would be the typical use albeit not necessarily centered. The gauge as you are aware already does it all, apart from the rendering of the inner coloured indicator:

Screenshot 2024-09-30 at 16 06 24 Screenshot 2024-09-30 at 16 06 30

Also if there is time, have a look at the rendering of the values at the bottom of the gauges. They become unreadable when too many digits. The watt gauge here is from -3000 to 3000W, as an example, The temperature gauge is -40 to +40 for a lithium battery that can only be charged above 5°C,

joepavitt commented 1 month ago

apart from the rendering of the inner coloured indicator:

Can you expand on that please?

houser42 commented 1 month ago

apart from the rendering of the inner coloured indicator:

Can you expand on that please?

Sure, I'll try even though I will probably be stating the bleeding obvious ;) If this gauge had differential graphical functionality, the element in the image below that is encircled in red should be invisible when this gauge is receiving a 0 watt payload, expand to the right when a positive value is received and left when a negative payload is received. Possibly this should be an option in the GUI? But I would always use it for differential gauges. The gauge is handling differential values properly other than this, exactly as it should IMHO. It is just this graphical rendering that is missing.

Screenshot 2024-09-30 at 16 56 40

The V1 gauges had a setting that achieves this:

Screenshot 2024-09-30 at 17 01 11

Example of the V1 gauge for a temperature with zero degrees at centre. So payload is rendered referenced from zero and centre in this case:

Screenshot 2024-09-30 at 17 20 06
gayanSandamal commented 1 month ago

@joepavitt I've added a fix for main issue "ui-gauge 2.0 1.17.1 - The needle loses track of it's position." reported here https://github.com/FlowFuse/node-red-dashboard/pull/1353

Regarding the Differential option implementation I need to discuss with @joepavitt

joepavitt commented 1 month ago

@houser42 what version of MacOS and Safari are you running? I'm on an older version (MacOS 13), which is seeing the problem, @gayanSandamal is on a new version (MacOS v14) and not seeing the issue.

houser42 commented 1 month ago

My Macs are Sequoia (v15) and Sonoma (v14)

joepavitt commented 1 month ago

and you're seeing it on both of these? Which versions of Safari?

houser42 commented 1 month ago

Another edit: This is embarrassing and I have to apologise: I just realised that the Macs I have been working on lately are not native Sequoia or Sonoma Macs, but patched via OCLP if you are aware of what that is: https://github.com/dortania/OpenCore-Legacy-Patcher

So this error in Safari might or might not be from that patching and until someone on a native Sequoia Mac can confirm, this thread should probably be taken with a grain of salt. I assume you and your devs are on native Macs. Possibly this could still be useful info for some people even if it does not affect the devs at this git.

Apologies again!

Edit: FWIW I still see the error on Sequoia 15.0.1 and Safari 18.0.1. Not on Firefox or Chrome on this patched Sequoia OS version.

houser42 commented 4 weeks ago

Not sure if I should open a new issue or tag on to this one. The new 1.18.0 ui-gauge does not appear to respect colours for text. Or perhaps something else has changed that we need to adapt to? This happens on all browsers and platforms we use, including iOS 18.

This is a dashboard where the text is intended to be white, The text is visible for a few seconds and then auto-refreshed and the text goes missing/black; Screenshot 2024-10-10 at 16 52 16 If I change to default theme, th text is black but visible; Screenshot 2024-10-10 at 16 51 18

issue opened: https://github.com/FlowFuse/node-red-dashboard/issues/1381

joepavitt commented 4 weeks ago

New iasue please @hou, also seems like the Safari mis-aligned needles is also still a problem for you too?

houser42 commented 4 weeks ago

Yes, needles still an issue. That is Safari on iOS 18.0.1. Added a new issue rudimentarily. Travelling.

joepavitt commented 4 weeks ago

Ah ha, this is on mobile. That could be important. We were trying Safari on Mac and it was working.

houser42 commented 4 weeks ago

Yes, latest greatest iOS 18.0.1 which is what the stuff I work on now is used on, along with Android which I can not test myself.. FWIW I also still see these errors on my MBP on Sequoia 15.01 and Safari 18.0.1 but again, that is a OCLP-patched OS so pinch of salt I guess ..