Hi
I am having trouble getting my head around layout and grid.
In dashboard1 I had 9 gauges in a 3x3 format on my phone. I have tried in vain everything in DB2 to achieve this and can't.
anyone help please.
What is "this". What is the actual problem?
Working in grid and trying to get 9 gauges in a 3x3 format. I get large gauges, then cutoff gauges. Forgive my lack of skill with DB2. I had just got going with DB1. See photo of DB1
Can you show us please.
In Dashboard 2.0, we have responsive layouts. They are built with 12 columns at Desktop, 3 columns at Mobile.
So, if you want 3 x gauges on mobile, you would make them "1" unit wide.
Since this doesn't seem to work, is there an alternative gauge that will scale to 3 across on a mobile phone. I've tried several template gauges but with my lack of skill I can't get them to work.
thanks
@colinl/node-red-dashboard-2-ui-gauge-classic might do what you want.
Those are size 2x1 in a six wide group. Note that the Page Layout must be set to Fixed (in the page config). For the gauges set the Sweep Angle to 180 and clear the Label and Measurement fields.
After installing the node it is necessary to restart node-red.
[{"id":"b355e4f44b9538f9","type":"ui-gauge-classic","z":"997da33a0beedade","name":"","group":"db39ab99b6c99a85","order":3,"width":"2","height":"1","min":0,"max":10,"sectors":[{"start":"0","color":"green"},{"start":"5","color":"red"}],"major_division":1,"minor_division":0.2,"value_decimal_places":1,"scale_decimal_places":0,"label":"","measurement":"","units":"°C","needles":[{"topic":"","color":"black","lengthPercent":"100"}],"sweep_angle":"180","myclass":"","x":660,"y":7160,"wires":[]},{"id":"725a389990c2af0a","type":"ui-gauge-classic","z":"997da33a0beedade","name":"","group":"db39ab99b6c99a85","order":2,"width":"2","height":"1","min":0,"max":10,"sectors":[{"start":"0","color":"green"},{"start":"5","color":"red"}],"major_division":1,"minor_division":0.2,"value_decimal_places":1,"scale_decimal_places":0,"label":"","measurement":"","units":"°C","needles":[{"topic":"","color":"black","lengthPercent":"100"}],"sweep_angle":"180","myclass":"","x":660,"y":7120,"wires":[]},{"id":"4efa396569c975aa","type":"ui-gauge-classic","z":"997da33a0beedade","name":"","group":"db39ab99b6c99a85","order":1,"width":"2","height":"1","min":0,"max":10,"sectors":[{"start":"0","color":"green"},{"start":"5","color":"red"}],"major_division":1,"minor_division":0.2,"value_decimal_places":1,"scale_decimal_places":0,"label":"","measurement":"","units":"°C","needles":[{"topic":"","color":"black","lengthPercent":"100"}],"sweep_angle":"180","myclass":"","x":660,"y":7080,"wires":[]},{"id":"42dcb65aa478b93e","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":370,"y":7080,"wires":[["b355e4f44b9538f9","725a389990c2af0a","4efa396569c975aa"]]},{"id":"422026261578f73b","type":"inject","z":"997da33a0beedade","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"6","payloadType":"num","x":370,"y":7140,"wires":[["b355e4f44b9538f9","725a389990c2af0a","4efa396569c975aa"]]},{"id":"db39ab99b6c99a85","type":"ui-group","name":"Three gauges","page":"f1a591f7d34e28bc","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"f1a591f7d34e28bc","type":"ui-page","name":"Three gauges","ui":"ID-BASE-1","path":"/page9","icon":"home","layout":"flex","theme":"a965ccfef139317a","order":1,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"]},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Thank you for that, but I still get 3 gauges vertically. I have page fixed, group is 6x1, and gauges are 2x1. For interest have you tried it on a mobile phone.
Yes. Did you restart node-red after installing the node and did you try importing my example? Also refresh the view in the phone.
Yes I did all that as well as loading up a second PI and trying a second phone and trying different browswers. Maybe I'm doing something stupid but I can't find it. Will keep trying.
How many pixels wide is the phone?
Are you using the latest version of the dashboard?
Can you show a screenshot of the gauges on the phone?
Im sure i tried this before but now it works with group 6x1 and gauge 1x1. My samsung phone is 1080 pixels wide. I notice quite generous vertical spacing which i assume is fixed.
Are you sure that is how it is configured? If the group is 6x1 that looks as if the gauges are 2x2.
Yes 1x1. Very strange. If I view on my laptop it behaves as it should, ie 6 widgets in a 6 wide space. But not on my phone!
Can you export the first six of those gauges here please. Just the gauges will do. Then I can try it here.
Are you using the latest version of the dashboard?
Dashboard version 1.14.0
[
{
"id": "42dcb65aa478b93e",
"type": "inject",
"z": "e72c85715a1eb3b4",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "2",
"payloadType": "num",
"x": 1050,
"y": 1140,
"wires": [
[
"725a389990c2af0a",
"4efa396569c975aa",
"6e9663049953c2ea"
]
]
},
{
"id": "422026261578f73b",
"type": "inject",
"z": "e72c85715a1eb3b4",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "6",
"payloadType": "num",
"x": 1030,
"y": 1240,
"wires": [
[
"725a389990c2af0a",
"4efa396569c975aa",
"6e9663049953c2ea",
"be82947911603001",
"09bb07959e2cf9c8",
"49eb2dfd50edfb90",
"146cf7b987f8c90a",
"ba5ea79b7c3af503",
"a456163fb2833ce6"
]
]
},
{
"id": "725a389990c2af0a",
"type": "ui-gauge-classic",
"z": "e72c85715a1eb3b4",
"name": "",
"group": "fa4cf8c927f803dd",
"order": 2,
"width": "1",
"height": "1",
"min": 0,
"max": 10,
"sectors": [
{
"start": "0",
"color": "green"
},
{
"start": "5",
"color": "red"
}
],
"major_division": 1,
"minor_division": 0.2,
"value_decimal_places": 1,
"scale_decimal_places": 0,
"label": "",
"measurement": "",
"units": "°C",
"needles": [
{
"topic": "",
"color": "black",
"lengthPercent": "100"
}
],
"sweep_angle": "180",
"myclass": "",
"x": 1340,
"y": 1180,
"wires": []
},
{
"id": "4efa396569c975aa",
"type": "ui-gauge-classic",
"z": "e72c85715a1eb3b4",
"name": "",
"group": "fa4cf8c927f803dd",
"order": 6,
"width": "1",
"height": "1",
"min": 0,
"max": 10,
"sectors": [
{
"start": "0",
"color": "green"
},
{
"start": "5",
"color": "red"
}
],
"major_division": 1,
"minor_division": 0.2,
"value_decimal_places": 1,
"scale_decimal_places": 0,
"label": "",
"measurement": "",
"units": "",
"needles": [
{
"topic": "",
"color": "black",
"lengthPercent": "100"
}
],
"sweep_angle": "180",
"myclass": "",
"x": 1340,
"y": 1140,
"wires": []
},
{
"id": "6e9663049953c2ea",
"type": "ui-gauge-classic",
"z": "e72c85715a1eb3b4",
"name": "",
"group": "fa4cf8c927f803dd",
"order": 7,
"width": "1",
"height": "1",
"min": 0,
"max": 10,
"sectors": [
{
"start": "0",
"color": "green"
},
{
"start": "5",
"color": "red"
}
],
"major_division": 1,
"minor_division": 0.2,
"value_decimal_places": 1,
"scale_decimal_places": 0,
"label": "",
"measurement": "",
"units": "°C",
"needles": [
{
"topic": "",
"color": "black",
"lengthPercent": "100"
}
],
"sweep_angle": "180",
"myclass": "",
"x": 1340,
"y": 1220,
"wires": []
},
{
"id": "09bb07959e2cf9c8",
"type": "ui-gauge-classic",
"z": "e72c85715a1eb3b4",
"name": "",
"group": "fa4cf8c927f803dd",
"order": 1,
"width": "1",
"height": "1",
"min": 0,
"max": 10,
"sectors": [
{
"start": "0",
"color": "green"
},
{
"start": "5",
"color": "red"
}
],
"major_division": 1,
"minor_division": 0.2,
"value_decimal_places": 1,
"scale_decimal_places": 0,
"label": "",
"measurement": "",
"units": "°C",
"needles": [
{
"topic": "",
"color": "black",
"lengthPercent": "100"
}
],
"sweep_angle": "180",
"myclass": "",
"x": 1360,
"y": 1320,
"wires": []
},
{
"id": "be82947911603001",
"type": "ui-gauge-classic",
"z": "e72c85715a1eb3b4",
"name": "",
"group": "fa4cf8c927f803dd",
"order": 8,
"width": "1",
"height": "1",
"min": 0,
"max": 10,
"sectors": [
{
"start": "0",
"color": "green"
},
{
"start": "5",
"color": "red"
}
],
"major_division": 1,
"minor_division": 0.2,
"value_decimal_places": 1,
"scale_decimal_places": 0,
"label": "",
"measurement": "",
"units": "",
"needles": [
{
"topic": "",
"color": "black",
"lengthPercent": "100"
}
],
"sweep_angle": "180",
"myclass": "",
"x": 1360,
"y": 1280,
"wires": []
},
{
"id": "49eb2dfd50edfb90",
"type": "ui-gauge-classic",
"z": "e72c85715a1eb3b4",
"name": "",
"group": "fa4cf8c927f803dd",
"order": 9,
"width": "1",
"height": "1",
"min": 0,
"max": 10,
"sectors": [
{
"start": "0",
"color": "green"
},
{
"start": "5",
"color": "red"
}
],
"major_division": 1,
"minor_division": 0.2,
"value_decimal_places": 1,
"scale_decimal_places": 0,
"label": "",
"measurement": "",
"units": "°C",
"needles": [
{
"topic": "",
"color": "black",
"lengthPercent": "100"
}
],
"sweep_angle": "180",
"myclass": "",
"x": 1360,
"y": 1360,
"wires": []
},
{
"id": "fa4cf8c927f803dd",
"type": "ui-group",
"name": "group3",
"page": "68ea1249a3d37bf9",
"width": "6",
"height": "1",
"order": 1,
"showTitle": true,
"className": "",
"visible": "false",
"disabled": "false"
},
{
"id": "68ea1249a3d37bf9",
"type": "ui-page",
"name": "Page 3",
"ui": "5ce1f97f3a45b8e6",
"path": "/page3",
"icon": "home",
"layout": "flex",
"theme": "a965ccfef139317a",
"order": 3,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "5ce1f97f3a45b8e6",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "default",
"titleBarStyle": "hidden"
},
{
"id": "a965ccfef139317a",
"type": "ui-theme",
"name": "Default",
"colors": {
"surface": "#404040",
"primary": "#109fbc",
"bgPage": "#e8e8e8",
"groupBg": "#d6d6d6",
"groupOutline": "#6fbc10"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
Well I can't explain that. For me your flow shows all six in a row, even on the phone, so why yours folds them I don't know.
OK so it's a phone issue. Same on my wife's Samsung.
Strangely in Dashboard 1 with width 6 and gauge width 2 my phone displays 3 widgets OK.
Thanks for your help
For interest if I rotate my phone to landscape mode I get the full width with no folding. In dashboard1 in worked fine in portrait mode.
