Grid pages render oversized (must zoom to 30% to see full page)
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
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.
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"}}]
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?
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 :
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.
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
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.
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
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?
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.
Can you post the node red startup log please?
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.
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?
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
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.
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 please take your site off the internet immediately. It will soon get hacked if it has not been hacked already.
OK DONE.
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.
I saw the same issue with the scrolling when I looked at your page, so it does appear to be due to the proxy.
Thanks for all your suggestions
No there are no issues using : (http://(ipserver):1880/dashboard/page1)
That isn't going through the proxy is it?
(http://(ipserver):1880/dashboard/page1) NO but if you tried (admin.mydomain.com) goes through the proxy YES
That is why I said it is the proxy that is the problem. At least it has problems with wss.
Can you close this if it is now sorted please?