node-red-dashboard
node-red-dashboard copied to clipboard
FlowFuse
Widget showing wrong color
Current Behavior
Widget is configured as a determinated color X, but now is not showing X, but black color
Expected Behavior
Show X Color in both zones
Steps To Reproduce
Not sure,
Environment
- Dashboard version: 1.22.1
- Node-RED version: 4.0.0
- Node.js version: v22.4.1
- npm version: 10.8.1
- Platform/OS: Ubuntu / macOS
- Browser: Chromium / Chrome / Safari
Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate
I'm not sure that I fully understand your issue, but I've created the flow below to demonstrate the widget working as expected. Please try the flow, and let me know if it works for you & clarifies the configuration. If not, please upload a simple flow to display the problem, and maybe tell us a little more of about your issue.
[{"id":"a852d7f92900e42e","type":"ui-gauge","z":"59e13ebc8d9ca735","name":"Test","group":"e1a1d1d0f2c36e60","order":0,"width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"Test","units":"Watts","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"2000","color":"#ffc800"},{"from":"4000","color":"#ea5353"},{"from":"6000","color":"#4936d3"}],"min":0,"max":"8000","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":415,"y":145,"wires":[]},{"id":"3a2c547b975504c8","type":"inject","z":"59e13ebc8d9ca735","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1.5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":115,"y":145,"wires":[["e995f2b5ed29d6df"]]},{"id":"e995f2b5ed29d6df","type":"function","z":"59e13ebc8d9ca735","name":"random number","func":"msg.payload = Math.floor(Math.random() * 8000) + 1\n\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":265,"y":145,"wires":[["a852d7f92900e42e"]]},{"id":"e1a1d1d0f2c36e60","type":"ui-group","name":"Group Name","page":"b058f57aa8133a26","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"b058f57aa8133a26","type":"ui-page","name":"Page Name","ui":"8c151b59721a8d9a","path":"/page2","icon":"home","layout":"grid","theme":"6a4b46dde830beb1","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":1,"className":"","visible":"true","disabled":"false"},{"id":"8c151b59721a8d9a","type":"ui-base","name":"Homeserver","path":"/dashboard","appIcon":"https://homeserver.forest-bicolor.ts.net/icon","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"6a4b46dde830beb1","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
@JorgeAlberto91MS can you provide a screenshot of the configuration you have for the node please?
Cannot reproduce. @JorgeAlberto91MS please share a flow that demonstrates this.
[
{
"id": "23a1c3430b8e018e",
"type": "group",
"z": "a9777e1cb259d605",
"name": "Potencia granja solar",
"style": {
"label": true,
"color": "#000000"
},
"nodes": [
"68aa2531c3c30d96",
"a343ade83e0dc257",
"5ae4e4a0102fac3c",
"aed74fd3023ff104",
"5773b79316b83785",
"4574297d528460d3",
"7eee5ec59a94b81f"
],
"x": 24,
"y": 159,
"w": 602,
"h": 212
},
{
"id": "68aa2531c3c30d96",
"type": "ui-chart",
"z": "a9777e1cb259d605",
"g": "23a1c3430b8e018e",
"group": "863a8abecec8abc6",
"name": "",
"label": "Potencia Granja Solar",
"order": 1,
"chartType": "bar",
"category": "",
"categoryType": "none",
"xAxisLabel": "Hora",
"xAxisProperty": "Hora",
"xAxisPropertyType": "property",
"xAxisType": "category",
"xAxisFormat": "",
"xAxisFormatType": "auto",
"xmin": "0",
"xmax": "100",
"yAxisLabel": "Potencia (Watts)",
"yAxisProperty": "Watts",
"yAxisPropertyType": "property",
"ymin": "0",
"ymax": "5000",
"bins": 10,
"action": "replace",
"stackSeries": false,
"pointShape": "circle",
"pointRadius": 4,
"showLegend": true,
"removeOlder": 1,
"removeOlderUnit": "3600",
"removeOlderPoints": "",
"colors": [
"#fbbd05",
"#fbbd05",
"#fbbd05",
"#fbbd05",
"#fbbd05",
"#fbbd05",
"#fbbd05",
"#fbbd05",
"#fbbd05"
],
"textColor": [
"#666666"
],
"textColorDefault": true,
"gridColor": [
"#e5e5e5"
],
"gridColorDefault": true,
"width": "9",
"height": 11,
"className": "",
"interpolation": "linear",
"x": 500,
"y": 280,
"wires": [
[]
]
},
{
"id": "a343ade83e0dc257",
"type": "function",
"z": "a9777e1cb259d605",
"g": "23a1c3430b8e018e",
"name": "Completa",
"func": "msg.payload = [\n { \"Hora\": \"00:00\", \"Watts\": 30 },\n { \"Hora\": \"01:00\", \"Watts\": 50 },\n { \"Hora\": \"02:00\", \"Watts\": 100 },\n { \"Hora\": \"03:00\", \"Watts\": 200 },\n { \"Hora\": \"04:00\", \"Watts\": 400 },\n { \"Hora\": \"05:00\", \"Watts\": 800 },\n { \"Hora\": \"06:00\", \"Watts\": 1500 },\n { \"Hora\": \"07:00\", \"Watts\": 2500 },\n { \"Hora\": \"08:00\", \"Watts\": 3500 },\n { \"Hora\": \"09:00\", \"Watts\": 4500 },\n { \"Hora\": \"10:00\", \"Watts\": 4800 },\n { \"Hora\": \"11:00\", \"Watts\": 5000 },\n { \"Hora\": \"12:00\", \"Watts\": 5000 },\n { \"Hora\": \"13:00\", \"Watts\": 5000 },\n { \"Hora\": \"14:00\", \"Watts\": 4800 },\n { \"Hora\": \"15:00\", \"Watts\": 4500 },\n { \"Hora\": \"16:00\", \"Watts\": 3500 },\n { \"Hora\": \"17:00\", \"Watts\": 2500 },\n { \"Hora\": \"18:00\", \"Watts\": 1500 },\n { \"Hora\": \"19:00\", \"Watts\": 800 },\n { \"Hora\": \"20:00\", \"Watts\": 400 },\n { \"Hora\": \"21:00\", \"Watts\": 200 },\n { \"Hora\": \"22:00\", \"Watts\": 100 },\n { \"Hora\": \"23:00\", \"Watts\": 50 }\n];\n\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 260,
"y": 280,
"wires": [
[
"68aa2531c3c30d96"
]
]
},
{
"id": "5ae4e4a0102fac3c",
"type": "inject",
"z": "a9777e1cb259d605",
"g": "23a1c3430b8e018e",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "true",
"payloadType": "bool",
"x": 120,
"y": 280,
"wires": [
[
"a343ade83e0dc257",
"5773b79316b83785"
]
]
},
{
"id": "aed74fd3023ff104",
"type": "inject",
"z": "a9777e1cb259d605",
"g": "23a1c3430b8e018e",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "[]",
"payloadType": "json",
"x": 270,
"y": 200,
"wires": [
[
"68aa2531c3c30d96"
]
]
},
{
"id": "5773b79316b83785",
"type": "function",
"z": "a9777e1cb259d605",
"d": true,
"g": "23a1c3430b8e018e",
"name": "Dinámica",
"func": "var now = new Date();\nvar currentHour = now.getHours();\n\nmsg.payload = [\n { \"Hora\": \"00:00\", \"Watts\": 30 },\n { \"Hora\": \"01:00\", \"Watts\": 50 },\n { \"Hora\": \"02:00\", \"Watts\": 100 },\n { \"Hora\": \"03:00\", \"Watts\": 200 },\n { \"Hora\": \"04:00\", \"Watts\": 400 },\n { \"Hora\": \"05:00\", \"Watts\": 800 },\n { \"Hora\": \"06:00\", \"Watts\": 1500 },\n { \"Hora\": \"07:00\", \"Watts\": 2500 },\n { \"Hora\": \"08:00\", \"Watts\": 3500 },\n { \"Hora\": \"09:00\", \"Watts\": 4500 },\n { \"Hora\": \"10:00\", \"Watts\": 4800 },\n { \"Hora\": \"11:00\", \"Watts\": 5000 },\n { \"Hora\": \"12:00\", \"Watts\": 5000 },\n { \"Hora\": \"13:00\", \"Watts\": 5000 },\n { \"Hora\": \"14:00\", \"Watts\": 4800 },\n { \"Hora\": \"15:00\", \"Watts\": 4500 },\n { \"Hora\": \"16:00\", \"Watts\": 3500 },\n { \"Hora\": \"17:00\", \"Watts\": 2500 },\n { \"Hora\": \"18:00\", \"Watts\": 1500 },\n { \"Hora\": \"19:00\", \"Watts\": 800 },\n { \"Hora\": \"20:00\", \"Watts\": 400 },\n { \"Hora\": \"21:00\", \"Watts\": 200 },\n { \"Hora\": \"22:00\", \"Watts\": 100 },\n { \"Hora\": \"23:00\", \"Watts\": 50 }\n];\n\nmsg.payload = msg.payload.map(entry => {\n var entryHour = parseInt(entry.Hora.split(\":\")[0], 10);\n return {\n \"Hora\": entry.Hora,\n \"Watts\": entryHour <= currentHour ? entry.Watts : 0\n };\n});\n\nreturn msg;\n\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 260,
"y": 240,
"wires": [
[
"68aa2531c3c30d96"
]
]
},
{
"id": "4574297d528460d3",
"type": "function",
"z": "a9777e1cb259d605",
"g": "23a1c3430b8e018e",
"name": "Dinámica",
"func": "var selectedHour = msg.payload; // Se espera un entero de 0 a 23\n\nmsg.payload = [\n { \"Hora\": \"00:00\", \"Watts\": 30 },\n { \"Hora\": \"01:00\", \"Watts\": 50 },\n { \"Hora\": \"02:00\", \"Watts\": 100 },\n { \"Hora\": \"03:00\", \"Watts\": 200 },\n { \"Hora\": \"04:00\", \"Watts\": 400 },\n { \"Hora\": \"05:00\", \"Watts\": 800 },\n { \"Hora\": \"06:00\", \"Watts\": 1500 },\n { \"Hora\": \"07:00\", \"Watts\": 2500 },\n { \"Hora\": \"08:00\", \"Watts\": 3500 },\n { \"Hora\": \"09:00\", \"Watts\": 4500 },\n { \"Hora\": \"10:00\", \"Watts\": 4800 },\n { \"Hora\": \"11:00\", \"Watts\": 5000 },\n { \"Hora\": \"12:00\", \"Watts\": 5000 },\n { \"Hora\": \"13:00\", \"Watts\": 5000 },\n { \"Hora\": \"14:00\", \"Watts\": 4800 },\n { \"Hora\": \"15:00\", \"Watts\": 4500 },\n { \"Hora\": \"16:00\", \"Watts\": 3500 },\n { \"Hora\": \"17:00\", \"Watts\": 2500 },\n { \"Hora\": \"18:00\", \"Watts\": 1500 },\n { \"Hora\": \"19:00\", \"Watts\": 800 },\n { \"Hora\": \"20:00\", \"Watts\": 400 },\n { \"Hora\": \"21:00\", \"Watts\": 200 },\n { \"Hora\": \"22:00\", \"Watts\": 100 },\n { \"Hora\": \"23:00\", \"Watts\": 50 }\n];\n\n\nmsg.payload = msg.payload.map(entry => {\n var entryHour = parseInt(entry.Hora.split(\":\")[0], 10);\n return {\n \"Hora\": entry.Hora,\n \"Watts\": entryHour <= selectedHour ? entry.Watts : 0\n };\n});\n\nreturn msg;",
"outputs": 1,
"timeout": 0,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 260,
"y": 330,
"wires": [
[
"68aa2531c3c30d96"
]
]
},
{
"id": "7eee5ec59a94b81f",
"type": "ui-slider",
"z": "a9777e1cb259d605",
"g": "23a1c3430b8e018e",
"group": "863a8abecec8abc6",
"name": "",
"label": "",
"tooltip": "",
"order": 2,
"width": 0,
"height": 0,
"passthru": false,
"outs": "all",
"topic": "topic",
"topicType": "msg",
"thumbLabel": "true",
"showTicks": "false",
"min": 0,
"max": "23",
"step": 1,
"className": "",
"iconPrepend": "clouds",
"iconAppend": "white-balance-sunny",
"color": "#FBBD05",
"colorTrack": "gray",
"colorThumb": "",
"showTextField": false,
"x": 120,
"y": 330,
"wires": [
[
"4574297d528460d3"
]
]
},
{
"id": "863a8abecec8abc6",
"type": "ui-group",
"name": "Potencia granja solar",
"page": "529d21dddc5ffe1a",
"width": "9",
"height": "1",
"order": 2,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "529d21dddc5ffe1a",
"type": "ui-page",
"name": "Solar AELXH2",
"ui": "e9aa762180cbbaa9",
"path": "/Solar",
"icon": "solar-power-variant",
"layout": "grid",
"theme": "317f199c017aa93b",
"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": 2,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "e9aa762180cbbaa9",
"type": "ui-base",
"name": "AELXH2",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "icon",
"titleBarStyle": "default",
"showReconnectNotification": false,
"notificationDisplayTime": "1",
"showDisconnectNotification": false
},
{
"id": "317f199c017aa93b",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#7ea887",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "6px",
"widgetGap": "12px"
}
}
]
@JorgeAlberto91MS is this still an issue for you? If not then please close the issue. Thanks.
