node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard

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

Open boustric11Bo opened this issue 3 months ago • 25 comments

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

boustric11Bo avatar Sep 25 '25 19:09 boustric11Bo

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.

colinl avatar Sep 25 '25 19:09 colinl

Browser(s):

  • Chrome
  • Firefox
  • Explore

Same issue on the 3.

Screenshot:

Image

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"}}]

boustric11Bo avatar Sep 25 '25 19:09 boustric11Bo

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?

colinl avatar Sep 25 '25 20:09 colinl

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 :

boustric11Bo avatar Sep 26 '25 07:09 boustric11Bo

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.

colinl avatar Sep 26 '25 08:09 colinl

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

boustric11Bo avatar Sep 26 '25 11:09 boustric11Bo

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.

colinl avatar Sep 26 '25 12:09 colinl

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

boustric11Bo avatar Sep 26 '25 17:09 boustric11Bo

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?

colinl avatar Sep 26 '25 20:09 colinl

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.

boustric11Bo avatar Sep 26 '25 21:09 boustric11Bo

Can you post the node red startup log please?

colinl avatar Sep 27 '25 07:09 colinl

Also can you confirm again that you are this on multiple browsers please? This rules out the possibility that it is a browser plugin causing the problem. Presumably you don't have any problems with other web sites.

colinl avatar Sep 27 '25 07:09 colinl

I suspect your site style template may be causing the problem. I don't know what it is doing but the fact that it appears to scroll the window is suggestive.

<template>
  <div></div>
</template>

<script>
export default {
  mounted () {
    this.$watch('msg', (newMsg) => {
      if (!newMsg) return
      // Dès qu’un msg arrive → scroll en bas
      window.scrollTo({ 
        top: document.body.scrollHeight, 
        behavior: 'smooth' 
      })
    })
  }
}
</script>

Can you try disabling that node?

colinl avatar Sep 27 '25 08:09 colinl

Hi, Thanks for everything.

I tested lots of things and i found the problem but not the solution :)

The dashboard is working very well at : http://(ServerIP):1880/dashboard/page1

But i'm using a reverse-proxy it's means that when I try to connect through my domain: https://(mydomain)/dashboard/page1 --> scroll doesn’t work correctly --> the size/layout of new pages is wrong,

Are you sure that Dashboard V2 is compatible with reverse proxy ?

Thanks for your help

boustric11Bo avatar Sep 28 '25 13:09 boustric11Bo

Many use it that way so there is not a general problem, unless you try to map the domain root to /dashboard I think. But then it just doesn't work. As long as you have the domain root mapped to server:1880 then it should be ok. Is it ok in the editor?

It will need someone more knowledgeable than myself to find out what the problem is when used with your proxy.

colinl avatar Sep 28 '25 14:09 colinl

I would like to thank you for your reactivity.

Below my /srv/nodered/data/settings.js :

module.exports = {
    /** Port HTTP (ne pas changer, le reverse proxy s’en occupe) */
    uiPort: process.env.PORT || 1880,

    /** Admin UI (éditeur Node-RED) */
   // httpAdminRoot: "/admin",

    /** Flows API et endpoints HTTP */
   // httpNodeRoot: "/dashboard",

    /** Tableau de bord FlowFuse Dashboard 2.0 */
    ui: { path: "/dashboard" },

    /** User directory */
    userDir: '/data',

    /** Fichier de flows */
    flowFile: 'flows.json',

    /** Autoriser l’accès depuis l’extérieur */
    uiHost: "0.0.0.0",

    /** Logging */
    logging: {
        console: {
            level: "info",
            metrics: false,
            audit: false
        }
    }
};

boustric11Bo avatar Sep 28 '25 14:09 boustric11Bo

@boustric11Bo please take your site off the internet immediately. It will soon get hacked if it has not been hacked already.

colinl avatar Sep 28 '25 14:09 colinl

OK DONE.

boustric11Bo avatar Sep 28 '25 14:09 boustric11Bo

Edit your previous post where you published your domain, and hide that information. Then read https://discourse.nodered.org/t/safely-accessing-node-red-over-the-internet/45024 which is a good introduction to security.

The ngTouch warning is because you have the old node-red-dashboard installed as well as the new @flowfuse/node-red-dashboard. You can remove the old one as you are not using it.

The wss: error probably indicates that you have a problem with websocket connections through your proxy, so I suggest sorting that. I don't know why it would give the strange problems you are seeing, but when you have multiple problems and one of them should be straightforward to fix then sort that first.

colinl avatar Sep 28 '25 14:09 colinl

I saw the same issue with the scrolling when I looked at your page, so it does appear to be due to the proxy.

colinl avatar Sep 28 '25 14:09 colinl

Thanks for all your suggestions

No there are no issues using : (http://(ipserver):1880/dashboard/page1)

boustric11Bo avatar Sep 28 '25 15:09 boustric11Bo

That isn't going through the proxy is it?

colinl avatar Sep 28 '25 15:09 colinl

(http://(ipserver):1880/dashboard/page1) NO but if you tried (admin.mydomain.com) goes through the proxy YES

boustric11Bo avatar Sep 28 '25 15:09 boustric11Bo

That is why I said it is the proxy that is the problem. At least it has problems with wss.

colinl avatar Sep 28 '25 15:09 colinl

Can you close this if it is now sorted please?

colinl avatar Oct 17 '25 08:10 colinl