I made an energy dashboard to control my switches, heating, solar panels and batteries etc.
Have put a lot of effort in it and using it mostly on my mobile. I tried some dashboard 2.0 nodes like graph, gauges and sliders etc. But always I end up in not scaling correctly or eg the 3gauges horizontal end up vertical and it doesn't look nice anymore or it is not readable. It is not a 1:1 replacement for the dashboard 1.0. How would you do this for my dashboard as in the image?
Depending on the source data, (possibly an unpopular opinion) but I would consider home assistant instead to create the dashboard, it is much easier to create, responsive with conditional panels.
Source data is domoticz MQTT, nodered and a small part, the prediction for solar comes from home assistant.
See for example a small part for the batteries made completely in nodered.
At first glance, it seems fairly straightforward to reproduce this in db2.
Just to make sure I understand your requirements:
You are using the dashboard shown in the image on a mobile device?
I see what you mean. I do not use scaling a lot, so I cannot help here. Maybe organizing the dashboard in separate pages and using a sidebar for navigation could be an option?
I don't want to use scaling either but I can't find the same settings as in db1.0 just 6 wide so that 3 gauges fit with a with of 2.
Maybe I should not name it scaling but dynamic with or horizontal layout.
Set the group with to 6 and in the page settings set the columns to 6 for the appropriate screen width. Then the group will fill the screen.
Please select the two gauges at the top and Export them here, so we can see exactly how you have configured the dashboard. Just the gauges please, the group and page settings will automatically be included in the export.
How many pixels across is the display? It looks as if your D1 example is on a different device. Is it the same pixel size? What does your D2 display look like on that device?
They work for me as 2x2, though if the device is too small then the text does not show as there is not room for it. In what way is 2x2 not working for you? If it is something other than the missing text then please select the three gauges and export and paste them here please so I can attempt to replicate the problem.
2x2 gauge:
[
{
"id": "0e80360202fe3f3b",
"type": "ui-gauge",
"z": "8ad03162.29812",
"g": "089849b0703d4576",
"name": "AC Power",
"group": "f8aad6c27d76c0f4",
"order": 1,
"value": "payload",
"valueType": "msg",
"width": "2",
"height": "2",
"gtype": "gauge-half",
"gstyle": "needle",
"title": "Solar Power",
"alwaysShowTitle": false,
"floatingTitlePosition": "top-left",
"units": "",
"icon": "",
"prefix": "",
"suffix": " W",
"segments": [
{
"from": "0",
"color": "#5cd65c",
"text": "",
"textType": "label"
}
],
"min": 0,
"max": "5000",
"sizeThickness": "4",
"sizeGap": 4,
"sizeKeyThickness": "3",
"styleRounded": true,
"styleGlow": false,
"className": "",
"x": 3440,
"y": 2220,
"wires": [
[]
]
},
{
"id": "f8aad6c27d76c0f4",
"type": "ui-group",
"name": "Usage Today",
"page": "af2240e5c72311cb",
"width": "6",
"height": 1,
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "af2240e5c72311cb",
"type": "ui-page",
"name": "Energy 2.0",
"ui": "ed65cae6cca93de9",
"path": "/energy",
"icon": "battery_charging_60",
"layout": "grid",
"theme": "66d991c71fbeaf8c",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "6"
},
{
"name": "Desktop",
"px": "2048",
"cols": "36"
}
],
"order": 1,
"className": "/* Stop groups being clamped to three wide on mobile*/ @media only screen and (max-width: 576px) { /* Fixed layout */ .nrdb-layout--flex { --layout-columns: 6 !important; } /* Grid layout */ .nrdb-layout--grid { --layout-columns: 6 !important; } }",
"visible": "true",
"disabled": "true"
},
{
"id": "ed65cae6cca93de9",
"type": "ui-base",
"name": "UI 2.0",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false
},
{
"id": "66d991c71fbeaf8c",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#097479",
"primary": "#0d3011",
"bgPage": "#000008",
"groupBg": "#10220c",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px",
"density": "default"
}
},
{
"id": "dddab8992484a14d",
"type": "global-config",
"env": [],
"modules": {
"@flowfuse/node-red-dashboard": "1.30.2"
}
}
]
looks like:
Is it the fact that the numbers are missing that is the problem? I don't know enough about the implementation to know wheather that is solvable.
You might like to look at @colinl/node-red-dashboard-2-ui-gauge-classic which copes rather better at the small size. It also has multi-needle capability which may be useful to you. This is three 2x2 on a small display. It can even manage a 220 degree sweep if you want that.
Yes indeed the missing text.
Ok, have something now that works for me. Changed to 8columns wide and theme compact 32pix.
And I removed the range text from the gauge with CCS template:
template code you can import:
[ { "id": "9a449174d7aabbf0", "type": "ui-template", "z": "dab9bf2c2915f90e", "group": "", "page": "", "ui": "8ee88cb8a3e93693", "name": "CSS: Verberg Bereik", "order": 0, "width": 0, "height": 0, "format": "/* Verberg de min en max tekst volledig binnen de SVG van de gauge */\n.nrdb-ui-gauge svg text.font-normal {\n display: none !important;\n font-size: 0px !important;\n opacity: 0 !important;\n}\n\n/* Extra beveiliging voor het limits element */\n.nrdb-ui-gauge #limits {\n display: none !important;\n}\n", "storeOutMessages": true, "passthru": true, "templateScope": "site:style", "className": "", "x": 640, "y": 890, "wires": [ [] ] }, { "id": "8ee88cb8a3e93693", "type": "ui-base", "name": "My Dashboard", "path": "/dashboard", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control" ], "showPathInSidebar": false, "headerContent": "page", "navigationStyle": "default", "titleBarStyle": "default", "showReconnectNotification": true, "notificationDisplayTime": 5, "showDisconnectNotification": true, "allowInstall": true }, { "id": "2b9fa7de82ec6522", "type": "global-config", "env": [], "modules": { "@flowfuse/node-red-dashboard": "1.30.2" } } ]
So start is made and have to add all the D2 Ui nodes to the existing flows:
