The LED does not show up on the dashboard.

rei-vilo commented 7 months ago

Current Behavior

However, it does shop up on MacBook / Dashboard-2.0 1.1.0 / Node-RED 3.1.3 / macOS 14.3.1 (23D60) / Safari 17.3.1 (19617.2.4.11.12) / Node v18.17.1 /

Expected Behavior

The LED shows up on the dashboard.

Steps To Reproduce

Minimal code

[
    {
        "id": "a21f989256b02214",
        "type": "ui-led",
        "z": "85c870ad0d6aa976",
        "name": "",
        "group": "b7068161a4373454",
        "order": -1,
        "width": 0,
        "height": 0,
        "label": "",
        "labelPlacement": "left",
        "labelAlignment": "left",
        "states": [
            {
                "value": "false",
                "valueType": "bool",
                "color": "#c0c0c0"
            },
            {
                "value": "true",
                "valueType": "bool",
                "color": "#00ff00"
            }
        ],
        "allowColorForValueInMessage": false,
        "shape": "circle",
        "showBorder": false,
        "showGlow": true,
        "x": 390,
        "y": 200,
        "wires": []
    },
    {
        "id": "59091e24dd0e168e",
        "type": "ui-switch",
        "z": "85c870ad0d6aa976",
        "name": "",
        "label": "switch",
        "group": "b7068161a4373454",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "topic": "topic",
        "topicType": "msg",
        "style": "",
        "className": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "",
        "oncolor": "",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "",
        "offcolor": "",
        "x": 150,
        "y": 200,
        "wires": [
            [
                "a21f989256b02214"
            ]
        ]
    },
    {
        "id": "b7068161a4373454",
        "type": "ui-group",
        "name": "Group Name",
        "page": "b20bc4b28b02d95a",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b20bc4b28b02d95a",
        "type": "ui-page",
        "name": "Page Name",
        "ui": "55db6b96bad60c97",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "ef2658f2477c842e",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "55db6b96bad60c97",
        "type": "ui-base",
        "name": "UI Name",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false
    },
    {
        "id": "ef2658f2477c842e",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

Environment

Node-RED Dashboard 2.0 version: 1.1.0
Node-RED version: 3.1.5
Node.js version: 18.19.1
Platform/OS: RasPiOS 6.1.0-rpi8-rpi-2712
Browser: Chromium 121.0.6167.155

Have you provided an initial effort estimate for this issue?

I am no FlowFuse team member

joepavitt commented 7 months ago

Any errors in the console or on the Node-RED side?

colinl commented 7 months ago

I am seeing the same thing with node-red running on a Pi, but with NR running on a PC it is OK. Both the latest versions of NR and D2. The failing system LED does not show up when viewed from a PC or my phone, but on a 7" tablet it does show up as a tiny dot a few pixels across, unless I switch off frame and glow in which case it disappears from there too. Some sort of scaling issue possibly. No errors in NR log or browser console.

joepavitt commented 7 months ago

Do you see the label? Or is the whole thing invisible?

colinl commented 7 months ago

Having now provided a label, the label text does appear, just not the LED itself.

This is what it looks like on the tablet

but on the phone or PC the red/green dot is not visible at all.

joepavitt commented 7 months ago

I think we have a couple of different issues going on:

CSS related issue, which is preventing the LED from showing properly (possibly linked to older browser that don't support aspect-ratio
There is a build issue whereby widget.src is not being set on the third-party widgets:

if (packageJson && packageJson.dependencies) {
    Object.entries(packageJson.dependencies)?.filter(([packageName, _packageVersion]) => {
        return packageName.includes('node-red-dashboard-2-')
    }).map(([packageName, _packageVersion]) => {
        const modulePath = path.join(RED.settings.userDir, 'node_modules', packageName)
        const packagePath = path.join(modulePath, 'package.json')
        // get third party package.json
        const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
        if (packageJson?.['node-red-dashboard-2']) {
            // loop over object of widgets
            Object.entries(packageJson['node-red-dashboard-2'].widgets).forEach(([widgetName, widgetConfig]) => {
                uiShared.contribs[widgetName] = {
                    package: packageName,
                    name: widgetName,
                    src: widgetConfig.output,
                    component: widgetConfig.component
                }
            })
        }
        return packageJson
    })
}

Source

This logic runs through the dependencies of Node-RED and checks for any third-party widgets. it then stores those widgets into a contrib object, including a value for src. Then

widget = {
    id: widgetConfig.id,
    type: widgetConfig.type,
    props: widgetConfig,
    layout: {
        width: widgetConfig.width || 3,
        height: widgetConfig.height || 1,
        order: widgetConfig.order || 0
    },
    state: statestore.getAll(widgetConfig.id),
    hooks: widgetEvents,
    src: uiShared.contribs[widgetConfig.type]
}

Source

Builds the full widget object and sends it to the client, but in the case of the third-party widgets, src is missing.

This is important client-side in the logic that the Vue app uses to render out a component:

if (widgetComponents[widget.type]) {
    // Core Widgets
    // allow for types not defined in code Dashboard, but assume they're utilising ui-template foundations as recommended
    widget.component = markRaw(widgetComponents[widget.type])
} else if (widget.src) {
    // Third Party Widgets
    const resource = `${widget.src.package}/${widget.src.src}`
    widget.component = markRaw(importExternalComponent(resource, widget.src.name, widget.src.component))
} else {
    // Old Third Party Widgets
    widget.component = markRaw(widgetComponents['ui-template'])
}

Source

Note that because widget.src isn't being set (not sure why yet), Vue app is falling back to assuming it's a core component, or old third-party widget, which doesn't then exist, so it renders nothing.

novski commented 7 months ago

In my case, the group was entirely empty, and I had to update node-red to get it working. I did a dist upgrade and node-red update with the doc's here: https://nodered.org/docs/getting-started/raspberrypi#installing-node-red from NRv3.1.3 to 3.1.5. Now I see the LED's and labels.

joepavitt commented 7 months ago

Restart of Node-RED after installing the third-party widget does seem to be resolving the problem

colinl commented 7 months ago

For me a restart does not make the LED appear.

joepavitt commented 7 months ago

For me a restart does not make the LED appear.

hmmm... well that's very odd then. How do you have your Node-RED installed? Are you able to share your Node-RED's package.json please?

Should be available at:

~/.node-red/package.json

knolleary commented 7 months ago

Also, please look in ~/.node-red/.config.nodes.json and find the entry for @flowfuse/node-red-dashboard-2-ui-led including the full path of where it was loaded from. That will help us understand how/where/if the runtime is finding the node - and (if it is being found) why dashboard isn't including it.

joepavitt commented 7 months ago

Also, please look in ~/.node-red/.config.nodes.json and find the entry for @flowfuse/node-red-dashboard-2-ui-led including the full path of where it was loaded from. That will help us understand how/where/if the runtime is finding the node - and (if it is being found) why dashboard isn't including it.

Would this be a more reliable check for me in https://github.com/FlowFuse/node-red-dashboard/blob/b515138220e56773288c40037514555014363244/nodes/config/ui_base.js#L90-L111?

colinl commented 7 months ago

The failing install is on a Pi running bullseye, with node red installed using the recommended bash <(curl script The working one is on a PC running Ubuntu 20.04 using the same install technique.

To double check, on the pi, I removed the led node instance from the dashboard, uninstalled the node and restarted node red and checked all is well. Then I installed the led node and restarted node-red, then added an led instance and restarted again, and checked it was still not visible when viewed from PC browser or Phone, but does show a small dot when viewed on the tablet.

Using the developer tools when I inspect the element I see this popup It is showing size 0x0.

When I do the same with the PC install it shows

Presumably viewing it on the tablet it would show a small size, but I don't know how to do that on a tablet.

.config.nodes.json has this entry

    "@flowfuse/node-red-dashboard-2-ui-led": {
        "name": "@flowfuse/node-red-dashboard-2-ui-led",
        "version": "1.0.0",
        "local": true,
        "user": true,
        "nodes": {
            "ui-led": {
                "name": "ui-led",
                "types": [
                    "ui-led"
                ],
                "enabled": true,
                "local": true,
                "user": false,
                "module": "@flowfuse/node-red-dashboard-2-ui-led",
                "file": "/home/colinl/.node-red/node_modules/@flowfuse/node-red-dashboard-2-ui-led/nodes/ui-led.js"
            }
        }
    }

I do see the label for the led so I presume that means that it is loading it ok. package.json has

{
    "name": "owl flows",
    "description": "A Node-RED Project",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "@flowfuse/node-red-dashboard": "~1.1.0",
        "@flowfuse/node-red-dashboard-2-ui-led": "~1.0.0",
        "@node-red-contrib-themes/theme-collection": "^3.0.6",
        "node-red-contrib-cron-plus": "~2.1.0",
        "node-red-contrib-fs-ops": "~1.6.0",
        "node-red-contrib-influxdb-backup": "~0.1.0",
        "node-red-node-email": "~2.1.0"
    }
}

All nodes are at the latest versions. The working version on the pi also has all those nodes at the same versions so that suggests that it is not an interaction with one of those.

colinl commented 7 months ago

I have found it, I have a CSS(All Pages) template specifying a class for the groups to reduce the wasted space. I got this from a suggestion on the forum. If I disable the template then the led works correctly. It contains

.condensed-layout{
    --layout-gap:0px;  
    --widget-row-height:24px;  
}
.condensed-layout .v-card-text .nrdb-ui-widget{
    padding-inline:.5em;
    align-items: center;
}
.condensed-layout .v-btn.v-btn--density-default{
    height: fit-content;
}
.condensed-layout .v-input--density-default {
    --v-input-control-height: 26px;
    --v-input-padding-top: 8px;
}

Unfortunately then my dashboard does not display nicely on my small display. I will experiment to find exactly what is causing the problem, unless someone can immediately tell me.

colinl commented 7 months ago

Removing align-items: center from

.condensed-layout .v-card-text .nrdb-ui-widget{
    padding-inline:.5em;
    align-items: center;
}

fixes the problem with the LED.

FlowFuse / node-red-dashboard-2-ui-led