Grid pages render oversized (must zoom to 30% to see full page)

[boustric11Bo]

Expected behavior

Page should render at normal scale — widgets fit inside the screen and the user can scroll normally from top to bottom.

Current Behavior

The entire page is rendered oversized: all widgets appear huge.

To see the full dashboard, I must zoom out in the browser to ~30–60%.

When zoomed back to 100%, the page only shows a fraction (the bottom part).

It is not possible to scroll freely from top to bottom — the page feels "stuck" in a zoomed state.

I cannot create new pages properly: new pages are created with very reduced columns and they are also affected by the same bug.

``

Environment

• Dashboard version: 1.25.0 / 1.27.x (tested both)/1.28
• Node-RED version: Node-RED v4.1.0
• Node.js version :Node.js v20.19.4
• npm version: 10.8.2
• Platform/OS: Linux 6.1.0-39-cloud-amd64 x64 LE
• Browser:

### Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[colinl]

Which browser and version are you using and have you tried a different browser?

Can you post a screenshot showing what you are seeing?
Also please select one of the widgets and Export it and paste it here (you can paste it inline between lines containing just three backticks). That will let us see how the group and page are configured.

[boustric11Bo]

Browser(s):

• Chrome
• Firefox
• Explore

Same issue on the 3.

Screenshot:

So i cannot scrool up. (see below)

And when i want to create new pages, there are very small like thsi (see below)

Exemple of exported nodes

[{"id":"15b32f83d868cdcd","type":"ui-chart","z":"798fb22cbbfdb7d6","group":"a72421c26baaacf3","name":"","label":"chart","order":3,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":150,"y":140,"wires":[[]]},{"id":"3d8334da4109c04b","type":"ui-gauge","z":"798fb22cbbfdb7d6","name":"","group":"a72421c26baaacf3","order":1,"value":"payload","valueType":"msg","width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"gauge","alwaysShowTitle":false,"floatingTitlePosition":"top-left","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"label"},{"from":"4","color":"#ffc800","text":"","textType":"label"},{"from":"7","color":"#ea5353","text":"","textType":"label"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":110,"y":180,"wires":[[]]},{"id":"01f3951acae8396b","type":"ui-table","z":"798fb22cbbfdb7d6","group":"a72421c26baaacf3","name":"","label":"","order":2,"width":0,"height":0,"maxrows":0,"passthru":false,"autocols":true,"showSearch":true,"deselect":true,"selectionType":"none","columns":[],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"append","className":"","x":130,"y":220,"wires":[[]]},{"id":"ed0f3d500906d6ca","type":"ui-chart","z":"798fb22cbbfdb7d6","group":"a72421c26baaacf3","name":"","label":"chart","order":4,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":150,"y":100,"wires":[[]]},{"id":"754f636e61c08cd1","type":"ui-chart","z":"798fb22cbbfdb7d6","group":"a72421c26baaacf3","name":"","label":"chart","order":5,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":150,"y":60,"wires":[[]]},{"id":"a72421c26baaacf3","type":"ui-group","name":"Analyser","page":"ee8e8cc149bd33cd","width":"12","height":1,"order":3,"showTitle":true,"className":"","visible":true,"disabled":"false","groupType":"default"},{"id":"ee8e8cc149bd33cd","type":"ui-page","name":"Tableau de bord","ui":"ecc93949cd3d82ad","path":"/page1","icon":"home","layout":"grid","theme":"e0e72dbae59f858e","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":"ecc93949cd3d82ad","type":"ui-base","name":"t","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"e0e72dbae59f858e","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#000040","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"32b77310b269c939","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]

[colinl]

For me your exported nodes look similar to your second screenshot, though I get a few more rows on the screen. You have set the page to have a width of 12 columns (in the page config) and the group is 12 wide, so it fills the screen.
In the theme the row height is 48 px with a gap of 12 pixels between the rows, so the total row height is 60. Looking at your second screenshot there are 3 rows for the gauge, 1 for the table and you can see about 6 of the chart, making a total of 10, which is 600 px. What is your screen height?

[boustric11Bo]

Yes group fill the screen so it's ok but...

I exported all my nodes, i dont't unterstand why i canot scroll up and down. And also i created a new page (uitemplate.layout) and add a group why size 12. But why it looks so small ?

I think that there are so issues

all my nodes :

[colinl]

There is no point posting your whole flow, we only need the dashboard nodes. In addition your flow appears to be corrupted. Possibly because (I think) you have not surrounded it with lines containing three backticks as I suggested.
I still do not know exactly what you are complaining about. Please post just a small number of widgets that exhibit the problem, show us what you are seeing with those widgets and tell us what is wrong with it.

[boustric11Bo]

So sorry for the confusion

[{"id":"07e6f856f5b0c855","type":"ui-text","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","order":2,"width":"2","height":"1","name":"","label":"MAC","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload","valueType":"msg","x":650,"y":2020,"wires":[]},{"id":"d0f58e9de113176a","type":"ui-dropdown","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","name":"","label":"Contact","tooltip":"","order":3,"width":"3","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":660,"y":2060,"wires":[["9c00988faa53b37e"]]},{"id":"f5879c8bd3ce7592","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":3,"value":"payload","valueType":"msg","width":2,"height":4,"gtype":"gauge-34","gstyle":"needle","title":"Charge moy CPU","units":"%","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"label"},{"from":"40","color":"#ffc800","text":"","textType":"label"},{"from":"70","color":"#ea5353","text":"","textType":"label"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":870,"y":1300,"wires":[[]]},{"id":"6156532de8e1c4fd","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":1,"value":"msg.payload[0].total_count","valueType":"msg","width":2,"height":2,"gtype":"gauge-tile","gstyle":"needle","title":"TOTAL","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#21083f","text":"","textType":"value"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":840,"y":1360,"wires":[[]]},{"id":"fa10507909fb6591","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":8,"value":"msg.payload[0].online_count","valueType":"msg","width":2,"height":1,"gtype":"gauge-tile","gstyle":"needle","title":"ON","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"value"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":830,"y":1400,"wires":[[]]},{"id":"cc27fdc3d7eb26c4","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"OFF","group":"8d3da6c17ed192bd","order":10,"value":"msg.payload[0].offline_count","valueType":"msg","width":2,"height":1,"gtype":"gauge-tile","gstyle":"needle","title":"OFF","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#c11a1a","text":"","textType":"value"}],"min":0,"max":"0","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":830,"y":1440,"wires":[[]]},{"id":"aee04b538fa99d8d","type":"ui-chart","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","name":"","label":"Mémoire Dispo MB","order":5,"chartType":"bar","category":"[\"Flash\", \"Ram\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"jour","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"0","ymax":"24","bins":10,"action":"replace","stackSeries":true,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":2,"height":4,"className":"","interpolation":"linear","x":830,"y":2740,"wires":[[]]},{"id":"57422533f68374cb","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":4,"value":"payload","valueType":"msg","width":2,"height":4,"gtype":"gauge-34","gstyle":"rounded","title":"Temp moy LED","units":"°C","icon":"","prefix":"","suffix":"","segments":[{"from":"25","color":"#00fbff","text":"","textType":"label"},{"from":"60","color":"#ffc800","text":"","textType":"label"},{"from":"100","color":"#c10606","text":"","textType":"label"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":740,"y":2600,"wires":[[]]},{"id":"787f8fcffa6fce21","type":"ui-chart","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"chart","order":5,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":970,"y":3040,"wires":[[]]},{"id":"7b28b309eff7e1c2","type":"ui-chart","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"chart","order":4,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":970,"y":3080,"wires":[[]]},{"id":"3aad6be8531d3321","type":"ui-chart","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"chart","order":3,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":970,"y":3120,"wires":[[]]},{"id":"8e66eee9a9e178c0","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"a72421c26baaacf3","order":1,"value":"payload","valueType":"msg","width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"gauge","alwaysShowTitle":false,"floatingTitlePosition":"top-left","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"label"},{"from":"4","color":"#ffc800","text":"","textType":"label"},{"from":"7","color":"#ea5353","text":"","textType":"label"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":930,"y":3160,"wires":[[]]},{"id":"fed03bf6de758213","type":"ui-table","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"","order":2,"width":0,"height":0,"maxrows":0,"passthru":false,"autocols":true,"showSearch":true,"deselect":true,"selectionType":"none","columns":[],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"append","className":"","x":950,"y":3200,"wires":[[]]},{"id":"2bf7b80f90e36088","type":"ui-group","name":"Tableau appareils","page":"ee8e8cc149bd33cd","width":"12","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"8d3da6c17ed192bd","type":"ui-group","name":"Indicateurs","page":"ee8e8cc149bd33cd","width":"12","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a72421c26baaacf3","type":"ui-group","name":"Analyser","page":"ee8e8cc149bd33cd","width":"12","height":1,"order":3,"showTitle":true,"className":"","visible":true,"disabled":"false","groupType":"default"},{"id":"ee8e8cc149bd33cd","type":"ui-page","name":"Tableau de bord","ui":"ecc93949cd3d82ad","path":"/page1","icon":"home","layout":"grid","theme":"e0e72dbae59f858e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1028","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"ecc93949cd3d82ad","type":"ui-base","name":"domain","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"e0e72dbae59f858e","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#000040","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"9a4f40c190fd2511","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]

Above the nodes that are in the dashboard

I cannot scroll vertically from the "Indicateurs" group to the "Analyser" group.
👉 In order to see everything, I have to zoom out to around 30%. (screenshot 1)

When I create a new page, even if I set the group size to 12, it appears very small (as if it only takes up 2–3 columns). ((screenshot 3)

📸 This behavior is shown in the attached screenshots.

it's better like this ?

Thanks so much

[colinl]

Fix the error on the Temp moy LED gauge. It most likely won't make any difference, but it is always best to fix the easy errors first.

I don't see any problems running that flow here. Can you explain exactly, in detail, how you get to the second screen? Use Chrome please so that I can replicate it here. If you refresh the page does it fix it?

You don't appear to have included the ui-template widget, so I am not seeing that problem.

[boustric11Bo]

Hi, i fixed the error on the Temp moy LED. But nothing change..

see below my entire dashboard nodes from the main page :

[{"id":"92864f3866053bd7","type":"ui-button","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","name":"","label":"Refresh","order":12,"width":1,"height":1,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"date","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":80,"y":1420,"wires":[["2aac0a71eb1161f0"]]},{"id":"f5879c8bd3ce7592","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":3,"value":"payload","valueType":"msg","width":2,"height":4,"gtype":"gauge-34","gstyle":"needle","title":"Charge moy CPU","units":"%","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"label"},{"from":"40","color":"#ffc800","text":"","textType":"label"},{"from":"70","color":"#ea5353","text":"","textType":"label"}],"min":0,"max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":870,"y":1300,"wires":[[]]},{"id":"6156532de8e1c4fd","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":1,"value":"msg.payload[0].total_count","valueType":"msg","width":2,"height":2,"gtype":"gauge-tile","gstyle":"needle","title":"TOTAL","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#21083f","text":"","textType":"value"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":840,"y":1360,"wires":[[]]},{"id":"fa10507909fb6591","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":8,"value":"msg.payload[0].online_count","valueType":"msg","width":2,"height":1,"gtype":"gauge-tile","gstyle":"needle","title":"ON","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"value"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":830,"y":1400,"wires":[[]]},{"id":"cc27fdc3d7eb26c4","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"OFF","group":"8d3da6c17ed192bd","order":10,"value":"msg.payload[0].offline_count","valueType":"msg","width":2,"height":1,"gtype":"gauge-tile","gstyle":"needle","title":"OFF","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#c11a1a","text":"","textType":"value"}],"min":0,"max":"0","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":830,"y":1440,"wires":[[]]},{"id":"b91222a816a4b3af","type":"ui-template","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","page":"","ui":"","name":"","order":1,"width":0,"height":0,"head":"","format":"<template>\n  <div>\n    <!-- 🔎 Barre de recherche -->\n    <div class=\"pa-2\">\n      <v-text-field\n        v-model=\"search\"\n        label=\"Rechercher\"\n        clearable\n        prepend-inner-icon=\"mdi-magnify\"\n        hide-details\n        outlined\n        dense\n      />\n    </div>\n\n    <v-data-table :headers=\"headers\" :items=\"filteredItems\" class=\"elevation-1\" items-per-page=\"10\">\n      <!-- Titres en gras -->\n      <template v-for=\"h in headers\" v-slot:[`header.${h.key}`]=\"{ column }\">\n        <strong>{{ column.title }}</strong>\n      </template>\n\n      <!-- État -->\n      <template v-slot:item.etat=\"{ item }\">\n        <v-icon v-if=\"item.etat\" color=\"green\">mdi-check-circle</v-icon>\n        <v-icon v-else color=\"red\">mdi-close-circle</v-icon>\n      </template>\n\n      <!-- CPU -->\n      <template v-slot:item.cpu=\"{ item }\">\n        <v-progress-linear\n          :model-value=\"item.cpu\"\n          :color=\"tempColor(item.cpu)\"\n          height=\"22\"\n          style=\"border-radius: 6px;\"\n        >\n          <strong>{{ item.cpu }}°C</strong>\n        </v-progress-linear>\n      </template>\n\n      <!-- Température -->\n      <template v-slot:item.temperature=\"{ item }\">\n        <v-progress-linear\n          :model-value=\"item.led\"\n          :color=\"tempColor(item.led)\"\n          height=\"22\"\n          style=\"border-radius: 6px;\"\n        >\n          <strong>{{ item.led }}°C</strong>\n        </v-progress-linear>\n      </template>\n\n      <!-- Tension -->\n      <template v-slot:item.tension=\"{ item }\">\n        <v-progress-linear\n          :model-value=\"(item.tension - 3) * 25\"\n          :color=\"voltColor(item.tension)\"\n          height=\"22\"\n          style=\"border-radius: 6px;\"\n        >\n          <strong>{{ item.tension }}V</strong>\n        </v-progress-linear>\n      </template>\n\n      <!-- Puissance -->\n      <template v-slot:item.power=\"{ item }\">\n        <v-progress-linear\n          :model-value=\"item.power\"\n          color=\"purple\"\n          height=\"22\"\n          style=\"border-radius: 6px;\"\n        >\n          <strong>{{ item.power }}W</strong>\n        </v-progress-linear>\n      </template>\n\n      <!-- Heures -->\n      <template v-slot:item.heures=\"{ item }\">\n        <v-chip color=\"blue lighten-3\" text-color=\"black\">\n          {{ item.heures }} h\n        </v-chip>\n      </template>\n\n      <!-- 🔁 Redémarrer -->\n      <template v-slot:item.restart=\"{ item }\">\n        <v-btn color=\"red\" small dark @click=\"askRestart(item)\">OK</v-btn>\n      </template>\n\n      <!-- 🧭 Actions -->\n      <template v-slot:item.actions=\"{ item }\">\n        <v-menu>\n          <template #activator=\"{ props }\">\n            <v-btn v-bind=\"props\" color=\"primary\" size=\"small\" variant=\"elevated\" append-icon=\"mdi-menu-down\">\n              Actions\n            </v-btn>\n          </template>\n          <v-list>\n            <v-list-item @click=\"askAction(item, 'identifier')\">\n              <v-list-item-title>Identifier</v-list-item-title>\n            </v-list-item>\n            <v-list-item @click=\"askAction(item, 'mettre_a_jour')\">\n              <v-list-item-title>Mettre à jour</v-list-item-title>\n            </v-list-item>\n            <v-list-item @click=\"askAction(item, 'modifier')\">\n              <v-list-item-title>Modifier</v-list-item-title>\n            </v-list-item>\n            <v-list-item @click=\"askAction(item, 'analyser')\">\n              <v-list-item-title>Analyser</v-list-item-title>\n            </v-list-item>\n            <v-list-item @click=\"askAction(item, 'cloner')\">\n              <v-list-item-title>Cloner</v-list-item-title>\n            </v-list-item>\n          </v-list>\n        </v-menu>\n      </template>\n    </v-data-table>\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      search: \"\",\n      headers: [\n        { title: 'Appareil', key: 'appareil' },\n        { title: 'Adresse MAC', key: 'mac' },\n        { title: 'Contact', key: 'contact' },\n        { title: 'Entreprise', key: 'entreprise' },\n        { title: 'État', key: 'etat' },\n        { title: 'Version', key: 'firmware' },\n        { title: 'CPU', key: 'cpu' },\n        { title: 'LED', key: 'led' },\n        { title: 'Tension', key: 'tension' },\n        { title: 'Puissance', key: 'power' },\n        { title: 'Temps', key: 'heures' },\n        { title: 'Reboot', key: 'restart', sortable: false },\n        { title: 'Actions', key: 'actions', sortable: false }\n      ]\n    }\n  },\n\n  computed: {\n    filteredItems () {\n      const items = Array.isArray(this.msg?.payload) ? this.msg.payload : []\n      const qRaw = (this.search || '').toString().trim()\n      if (!qRaw) return items\n\n      const norm = s => s.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').toLowerCase()\n      const q = norm(qRaw)\n\n      return items.filter(it => {\n        const joined = Object.values(it).map(v => {\n          if (v == null) return ''\n          if (typeof v === 'object') {\n            try { return JSON.stringify(v) } catch { return '' }\n          }\n          return String(v)\n        }).join(' ')\n        return norm(joined).includes(q)\n      })\n    }\n  },\n\n  methods: {\n    tempColor (t) {\n      if (t < 30) return 'blue'\n      if (t < 60) return 'green'\n      if (t < 80) return 'orange'\n      return 'red'\n    },\n    voltColor (v) {\n      if (v < 3.5) return 'red'\n      if (v < 4.5) return 'orange'\n      if (v <= 7) return 'green'\n      return 'red'\n    },\n    lastUpdateColor (minutes) {\n      if (minutes < 2) return 'green'\n      if (minutes < 10) return 'orange'\n      return 'red'\n    },\n    askRestart (item) {\n      const mac = item?.mac || 'inconnu'\n      const name = item?.entreprise || 'cet appareil'\n      if (!window.confirm(`Confirmer le redémarrage de ${name} (MAC : ${mac}) ?`)) return\n      const msgOut = {\n        topic: 'device/restart',\n        payload: { action: 'reboot', mac: item?.mac, item }\n      }\n      this.sendMsg(msgOut)\n    },\n    askAction (item, actionKey) {\n      const labels = { identifier: 'Identifier', mettre_a_jour: 'Mettre à jour', modifier: 'Modifier' }\n      const mac = item?.mac || 'inconnu'\n      const name = item?.entreprise || 'cet appareil'\n      const label = labels[actionKey] || actionKey\n      if (!window.confirm(`Confirmer l'action \"${label}\" sur ${name} (MAC : ${mac}) ?`)) return\n      const msgOut = {\n        topic: 'device/action',\n        payload: { action: actionKey, mac: item?.mac, item }\n      }\n      this.sendMsg(msgOut)\n    },\n    sendMsg (msgOut) {\n      if (typeof this.send === 'function') this.send(msgOut)\n      else if (this.$root && typeof this.$root.send === 'function') this.$root.send(msgOut)\n      else console.warn('⚠️ Aucune fonction send disponible.', msgOut)\n    }\n  }\n}\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":640,"y":1540,"wires":[["b13328aa26c75204","b4e4a21edfbd5a4e"]]},{"id":"5fedadeb9091dcf9","type":"ui-template","z":"f6f2187d.f17ca8","group":"","page":"","ui":"ecc93949cd3d82ad","name":"","order":8,"width":4,"height":"1","head":"","format":"<template>\n  <div></div>\n</template>\n\n<script>\nexport default {\n  mounted () {\n    this.$watch('msg', (newMsg) => {\n      if (!newMsg) return\n      // Dès qu’un msg arrive → scroll en bas\n      window.scrollTo({ \n        top: document.body.scrollHeight, \n        behavior: 'smooth' \n      })\n    })\n  }\n}\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":900,"y":1660,"wires":[[]]},{"id":"5d13442f5f6b8b65","type":"ui-button","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","name":"","label":"Annuler","order":7,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":300,"y":2020,"wires":[["a4e22c60a72ac35e"]]},{"id":"700eaf66098779cc","type":"ui-button","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","name":"","label":"Enregistrer","order":6,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":70,"y":2080,"wires":[["512bae0ee667d02b","1d54a8f1edc54a9c"]]},{"id":"07e6f856f5b0c855","type":"ui-text","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","order":2,"width":"2","height":"1","name":"","label":"MAC","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload","valueType":"msg","x":650,"y":2020,"wires":[]},{"id":"d0f58e9de113176a","type":"ui-dropdown","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","name":"","label":"Contact","tooltip":"","order":3,"width":"3","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":660,"y":2060,"wires":[["9c00988faa53b37e"]]},{"id":"b20f620998c6d101","type":"ui-dropdown","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","name":"","label":"Entreprise","tooltip":"","order":4,"width":"3","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":650,"y":2100,"wires":[["9c00988faa53b37e"]]},{"id":"525cfedaa94b3827","type":"ui-dropdown","z":"f6f2187d.f17ca8","group":"2bf7b80f90e36088","name":"","label":"Appareil","tooltip":"","order":5,"width":"2","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":640,"y":2140,"wires":[["9c00988faa53b37e"]]},{"id":"335503996532bec2","type":"ui-text","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","order":2,"width":3,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":450,"y":2320,"wires":[]},{"id":"ef0dc26cd73d16c1","type":"ui-text","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","order":7,"width":3,"height":0,"name":"mac:contact","label":"","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload[0].mac_contact","valueType":"msg","x":730,"y":2380,"wires":[]},{"id":"0485e84b0346308f","type":"ui-text","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","order":9,"width":3,"height":0,"name":"reset","label":"","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload[0].reset_reason","valueType":"msg","x":712.832763671875,"y":2410.48046875,"wires":[]},{"id":"67b583c1beff7463","type":"ui-text","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","order":11,"width":3,"height":0,"name":"date","label":"","format":"{{msg.payload}}","layout":"col-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload[0].date","valueType":"msg","x":709.082763671875,"y":2437.98046875,"wires":[]},{"id":"aee04b538fa99d8d","type":"ui-chart","z":"f6f2187d.f17ca8","group":"8d3da6c17ed192bd","name":"","label":"Mémoire Dispo MB","order":5,"chartType":"bar","category":"[\"Flash\", \"Ram\"]","categoryType":"json","xAxisLabel":"","xAxisProperty":"jour","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"0","ymax":"24","bins":10,"action":"replace","stackSeries":true,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":2,"height":4,"className":"","interpolation":"linear","x":850,"y":2740,"wires":[[]]},{"id":"787f8fcffa6fce21","type":"ui-chart","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"chart","order":5,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":970,"y":3040,"wires":[[]]},{"id":"7b28b309eff7e1c2","type":"ui-chart","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"chart","order":4,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":970,"y":3080,"wires":[[]]},{"id":"3aad6be8531d3321","type":"ui-chart","z":"f6f2187d.f17ca8","group":"a72421c26baaacf3","name":"","label":"chart","order":3,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":970,"y":3120,"wires":[[]]},{"id":"8e66eee9a9e178c0","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"a72421c26baaacf3","order":1,"value":"payload","valueType":"msg","width":3,"height":3,"gtype":"gauge-half","gstyle":"needle","title":"gauge","alwaysShowTitle":false,"floatingTitlePosition":"top-left","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c","text":"","textType":"label"},{"from":"4","color":"#ffc800","text":"","textType":"label"},{"from":"7","color":"#ea5353","text":"","textType":"label"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":930,"y":3160,"wires":[[]]},{"id":"57422533f68374cb","type":"ui-gauge","z":"f6f2187d.f17ca8","name":"","group":"8d3da6c17ed192bd","order":4,"value":"payload","valueType":"msg","width":2,"height":4,"gtype":"gauge-34","gstyle":"rounded","title":"Temp moy LED","alwaysShowTitle":false,"units":"°C","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#00fbff","text":"","textType":"label"},{"from":"35","color":"#ffc800","text":"","textType":"label"},{"from":"60","color":"#c10606","text":"","textType":"label"}],"min":"0","max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":740,"y":2600,"wires":[[]]},{"id":"8d3da6c17ed192bd","type":"ui-group","name":"Indicateurs","page":"ee8e8cc149bd33cd","width":"12","height":1,"order":1,"showTitle":false,"className":"","visible":true,"disabled":"false","groupType":"default"},{"id":"2bf7b80f90e36088","type":"ui-group","name":"Tableau appareils","page":"ee8e8cc149bd33cd","width":"12","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"ecc93949cd3d82ad","type":"ui-base","name":"domain","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"a72421c26baaacf3","type":"ui-group","name":"Analyser","page":"ee8e8cc149bd33cd","width":"12","height":1,"order":3,"showTitle":true,"className":"","visible":true,"disabled":"false","groupType":"default"},{"id":"ee8e8cc149bd33cd","type":"ui-page","name":"Tableau de bord","ui":"ecc93949cd3d82ad","path":"/page1","icon":"home","layout":"grid","theme":"e0e72dbae59f858e","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1028","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"e0e72dbae59f858e","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#000040","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"37ce9a0af6b42739","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.28.0"}}]

I will expain in detail my problem :

• I can’t see the entire page with all my 3 groups (Indicateurs, tableau appareils, analyser). When I try to scroll up, I can’t, because the vertical scrollbar is already at the top (highlighted in red).

To see everything, I have to zoom out my browser to 30% (screenshot below). But the rendering is not good of course.

does that seem more understandable to you?

Yes i'm using Chrome brower. Nothing change when I refresh

If you want, we can do a call, i will show you my dashboard and all the problemes that i'm dealing with.

Best regards

[colinl]

So do you mean that when you initially open the page in the browser that you see just the central portion of the dashboard, but the scroll bar is at the top, so you can't scroll up to the start of the page?

That is very strange. Your dashboard behaves ok for me.
Can you open the Browser Developer Console, refresh the page, and check there for errors?

[boustric11Bo]

Yes that's it, It's weird.

Browser Developer Console of th edashboard when i refresh the page

app.min.js:150 You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material!
(anonymous) @ app.min.js:150
e @ app.min.js:470
invoke @ app.min.js:66
(anonymous) @ app.min.js:68
r @ app.min.js:29
fb @ app.min.js:68
c @ app.min.js:43
Wc @ app.min.js:43
Ee @ app.min.js:42
(anonymous) @ app.min.js:372
e @ app.min.js:20
(anonymous) @ app.min.js:20
setTimeout
(anonymous) @ app.min.js:20
c @ app.min.js:20
fireWith @ app.min.js:20
fire @ app.min.js:20
c @ app.min.js:20
fireWith @ app.min.js:20
ready @ app.min.js:20
P @ app.min.js:20Understand this warning
index-DzS6Hguk.js:10 setup {RED: {…}, socketio: {…}, basePath: '/dashboard'}
index-DzS6Hguk.js:98 SIO connected
index-DzS6Hguk.js:94 ui-config received. topic: ecc93949cd3d82ad payload: {meta: {…}, dashboards: {…}, heads: {…}, pages: {…}, themes: {…}, …}
index-DzS6Hguk.js:10 DBUIGaugeTile segment Proxy(Array) {0: {…}} 0
index-DzS6Hguk.js:10 DBUIGaugeTile segment label 0 Proxy(Object) {from: 0, color: '#21083f', text: '', textType: 'value', textColor: 'white'}
index-DzS6Hguk.js:10 DBUIGaugeTile segment Proxy(Array) {0: {…}} 0
index-DzS6Hguk.js:10 DBUIGaugeTile segment label 0 Proxy(Object) {from: 0, color: '#5cd65c', text: '', textType: 'value', textColor: 'white'}
index-DzS6Hguk.js:10 DBUIGaugeTile segment Proxy(Array) {0: {…}} 0
index-DzS6Hguk.js:10 DBUIGaugeTile segment label 0 Proxy(Object) {from: 0, color: '#c11a1a', text: '', textType: 'value', textColor: 'white'}
index-DzS6Hguk.js:94 WebSocket connection to 'wss://domain/dashboard/socket.io/?EIO=4&transport=websocket&sid=6w4uHXVsYWB1n35PAABg' failed: 
createSocket @ index-DzS6Hguk.js:94
doOpen @ index-DzS6Hguk.js:94
open @ index-DzS6Hguk.js:94
_probe @ index-DzS6Hguk.js:94
onOpen @ index-DzS6Hguk.js:94
onHandshake @ index-DzS6Hguk.js:94
onHandshake @ index-DzS6Hguk.js:94
_onPacket @ index-DzS6Hguk.js:94
Emitter.emit @ index-DzS6Hguk.js:94
onPacket @ index-DzS6Hguk.js:94
n @ index-DzS6Hguk.js:94
onData @ index-DzS6Hguk.js:94
Emitter.emit @ index-DzS6Hguk.js:94
_onLoad @ index-DzS6Hguk.js:94
a.onreadystatechange @ index-DzS6Hguk.js:94Understand this error
index-DzS6Hguk.js:10 DBUIGaugeTile segment Proxy(Array) {0: {…}} 2
index-DzS6Hguk.js:10 DBUIGaugeTile segment label 2 Proxy(Object) {from: 0, color: '#21083f', text: '', textType: 'value', textColor: 'white'}
index-DzS6Hguk.js:10 DBUIGaugeTile segment Proxy(Array) {0: {…}} 2
index-DzS6Hguk.js:10 DBUIGaugeTile segment label 2 Proxy(Object) {from: 0, color: '#c11a1a', text: '', textType: 'value', textColor: 'white'}

There is

• 1 warning : app.min.js:150 You are using the ngTouch module. AngularJS Material already has mobile click, tap, and swipe support... ngTouch is not supported with AngularJS Material!
• 1 error : WebSocket connection to 'wss://domain/dashboard/socket.io/?EIO=4&transport=websocket&sid=6w4uHXVsYWB1n35PAABg' failed:

But strangely my code is not wrong and works very well. Have you already encountered this case?

Thanks for your support and help.

[colinl]

Can you post the node red startup log please?