colinl
commented
2 months ago Maybe a duplicate of #842, at least in part. Also #763 may be relevant.
Open houser42 opened 2 months ago
colinl
commented
2 months ago Maybe a duplicate of #842, at least in part. Also #763 may be relevant.
joepavitt
commented
2 months ago Just to check, this isn't as a result of a screen resize at all? Just raw rendering of the gauges?
houser42
commented
2 months 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.
[
{
"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"
}
}
]@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:
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.
The V1 gauges had a setting that achieves this:
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:
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
1 month 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;
If I change to default theme, th text is black but visible;
issue opened: https://github.com/FlowFuse/node-red-dashboard/issues/1381
joepavitt
commented
1 month ago New iasue please @hou, also seems like the Safari mis-aligned needles is also still a problem for you too?
houser42
commented
1 month ago Yes, needles still an issue. That is Safari on iOS 18.0.1. Added a new issue rudimentarily. Travelling.
joepavitt
commented
1 month ago Ah ha, this is on mobile. That could be important. We were trying Safari on Mac and it was working.
houser42
commented
1 month 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 ..
Current Behavior
ui-gauge 2.0 the needle loses track of it's position. @flowfuse/node-red-dashboard 1.17.1
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