Dashboard 2.0 bugs I've found

Dashboard
21

I can't say I've experienced many bugs in Dash2, rather a lack of features compared to Dash1.

I have a NodeRED system for my home automation and solar power system with around 6000 nodes and Dash1 with around 25 pages. I've made a handful of Dash2 pages but Dash2 is quite a bit more difficult to get visually appealing while still display enough information. One reason is the minimum unit size which have an XY ratio of about 3:1 instead of the about 1:1 in Dash1. User configurable in Dash1 but I haven't found that setting in Dash2.

One of my main Dash1 pages look like this:

image
image1920×1040 363 KB

My other issue with Dash2 is the chart node. Pen colors are random once the chart is filled with data (reported and acknowledged elsewhere a long time ago) and persistent data during reboot is a pain...

...and an audio node that never have made any sound (Dash1 Audio out works fine as long as the browser have focus).

Today, I run two monitors in my living room, one with one more or less fixed Dash2 page and one with all my Dash1 pages. I experience daily browser crashes with Dash1 and rarely any crashes with Dash2.

I've considered UIBuilder and have a few default pages up and running but so far, the learning curve have been far to steep... Is it even possible to make something similar to the page i posted here in UIBuilder? I guess it is but so far it seems unreachable to me...

Systems like Dash1/2 and UIBuilder are quite new to me but I've been working with designing industrial HMI systems ever since ASEA Tesselator was the future (anyone who know what that is today?).

22

Certainly. I did publish a layout that sort-of mimics the Dashboard's grid layout. It uses CSS Grid so doesn't need a framework. There are also plenty of online tools that will create a base layout for you. And, of course, if you want to use a framework to help, you absolutely can.

There is a router library for SPA's (like Dashboard) though I've only really worked through horizontal menu's rather than D1/D2's vertical menu - something I'd be happy to work through though if someone were to request it. :wink:

I don't use charts very much and when I do, it tends to be with Grafana rather than Node-RED. So my dev focus has gone more towards textual widgets. But that is mostly because nobody has asked me to focus on them except for hotnipi who gifted us a web component version of his excellent gauge which I host. Again, if someone were to ask for something specific, I'm sure I would give it some focus. There is a slowly growing collection of web components that I publish that work nicely with UIBUILDER (and pretty much everything else as well of course).

If nobody asks for anything, I tend to focus on whatever grabs my attention. So feel free.

23

Apparently it was discontinued in 2003. There seems to be at least 1 emulator - TessEm8000. Of course, you can fairly easily reproduce it with web pages and a collection of (perhaps SVG) icons I would think.

24

I have absolutely no intention of going back to Tesselator but it is nice to have that experience with me... I have definitely been working most with Wonderware.

I will give UIBuilder a go some time later, too many other things take my time at the moment (busy being retired...).

25

You can control the widget width in the Page settings, by adjusting the number of columns that you want to fit across the screen.

26

Not really. With 3 columns, the top of one of my pages look like this:

image
image1013×265 21.4 KB

All 3 buttons have a size of 1x1. With 6 columns it looks like this:
image
image1011×219 15.4 KB

So far, it makes sense...kind of... But with f.ex. 24 columns, it still look like this:
image
image1012×106 7.45 KB

I want these 3 buttons to look as they do now and it would be logical to me to specify the size to be something like 5x1, not 1x1.

27

Could you export and paste here just the widgets please, with 24 columns, so I can attempt to replicate the problem. The group and page settings will automatically be included in the export.

28

Like this?

image
image592×909 42.8 KB

image
image702×927 40.5 KB

29

To export the nodes, please select them then go to the hamburger menu & Export.
Copy the export to the clipboard.
Come to the forum, click the Preformatted text button </> and paste.

There was a discussion about the shape of buttons in the early days of the Flowfuse dashboard.
My feeling was that a 1x1 button should be square not rectangular
It was explained that the height remains constant but the width varies according to the size of the browser window, so a fixed shape is difficult, but this may be alleviated by switching the ui-page layout from Grid to Fixed.

These threads might be relevant, but I'm sure they are out of date now.
CSS styling for button widgets
Square & round buttons revisited.

30

I absolutely agree :+1:

[
    {
        "id": "a1e4fbb7c1315b5a",
        "type": "ui-button",
        "z": "8d23aa6caa2f4c9c",
        "g": "cc09df74a0be9eab",
        "group": "d2fd4b251abc4310",
        "name": "",
        "label": "Oversikt",
        "order": 1,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "Oversikt",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 140,
        "y": 1910,
        "wires": [
            [
                "c2b40aa9a1cfe3dd"
            ]
        ]
    },
    {
        "id": "f25f8485c92f54c2",
        "type": "ui-button",
        "z": "8d23aa6caa2f4c9c",
        "g": "cc09df74a0be9eab",
        "group": "d2fd4b251abc4310",
        "name": "",
        "label": "Alde 3000",
        "order": 2,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "Alde 3000",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "grey",
        "textColor": "black",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 140,
        "y": 1940,
        "wires": [
            [
                "c2b40aa9a1cfe3dd"
            ]
        ]
    },
    {
        "id": "833bd8b2b9a2797b",
        "type": "ui-button",
        "z": "8d23aa6caa2f4c9c",
        "g": "cc09df74a0be9eab",
        "group": "d2fd4b251abc4310",
        "name": "",
        "label": "System",
        "order": 3,
        "width": "1",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "System",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "grey",
        "textColor": "black",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 140,
        "y": 1970,
        "wires": [
            [
                "c2b40aa9a1cfe3dd"
            ]
        ]
    },
    {
        "id": "d2fd4b251abc4310",
        "type": "ui-group",
        "name": "Oversikt",
        "page": "aa221ba6117b04b9",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "false",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "aa221ba6117b04b9",
        "type": "ui-page",
        "name": "Oversikt",
        "ui": "716b64937a2a9b2f",
        "path": "/oversikt",
        "icon": "home",
        "layout": "notebook",
        "theme": "ed0b73bd955d7644",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "24"
            }
        ],
        "order": 1,
        "className": "",
        "visible": false,
        "disabled": false
    },
    {
        "id": "716b64937a2a9b2f",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "hidden",
        "showReconnectNotification": true,
        "notificationDisplayTime": "1",
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "ed0b73bd955d7644",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#3d3846",
            "primary": "#469269",
            "bgPage": "#000000",
            "groupBg": "#3d3846",
            "groupOutline": "#000000"
        },
        "sizes": {
            "density": "compact",
            "pagePadding": "4px",
            "groupGap": "4px",
            "groupBorderRadius": "4px",
            "widgetGap": "4px"
        }
    },
    {
        "id": "ebe85e24e8dd1644",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]
31

Try setting the page layout to grid. You have it on notepad at the moment.

32

That messed up my page but the buttons behaved the same...

I think I need to stick to Dash1 until I get under the skin of UIBuilder...

33

That sounds like a bug, I am on the road at the moment but will try your flow when I am home.

34

I imported your flow, changed the page layout to Grid, and changed the page to Visible (it was hidden) and, with a screen width > 1024 I see this
image

Which is what I would expect with buttons of width 1 and Columns set to 24 in the page layout.

Is your screen at least 1024 px wide? If not then change the columns to 24 for lesser widths also.

35

I use 1920x1080px and 32 columns (as I have been using in Dash1). Setting ui-page and/or ui-group node visible/hidden doesn't seem to matter, the screen was messed up again for some reason and the buttons look like 2x1:

image
image1893×572 52 KB

No problem rearranging it though...

36

To me they look to be 1/32 of the width, which is what is expected as you have said that the width should be 32 columns. If you want them narrower then increase the number of columns.

37

Seems to me that Dash2 is made to fit every available screen resolution and that makes a real mess out of my world (industrial HMI) where all screens have equal resolutions. I'll stick to Dash1 which lets me have control...

38

It uses a responsive layout, which means that it expands to use the available space, but if you want an exact layout for a particular width then you can adjust the number of columns for that width to control it exactly how you want.