Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Z order error with (in this instance?) colour picker #829

Open
NohWayJose opened this issue Feb 10, 2024 · 4 comments
Open

Z order error with (in this instance?) colour picker #829

NohWayJose opened this issue Feb 10, 2024 · 4 comments

Comments

@NohWayJose
Copy link

NohWayJose commented Feb 10, 2024 •
edited by dceejay
Loading

Current Behavior

NodeRedRenderingBug

I have several colour pickers in a group but when one is selected (by clicking the colour patch/button) the pop-up appears behind the other selectors (as per the pic)

If there is a way in the UI to control this, I didn't find it :(

Expected Behavior

Clicking the colour patch/button should open the picker on the frontmost layer
Clicking another colour patch/button will dismiss the original picker
So will clicking outside the group or pressing Esc

Steps To Reproduce

See example flow code

Example flow

[
    {
        "id": "618bf278f5b73cc9",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Night light colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 510,
        "y": 260,
        "wires": [
            [
                "21c4f7b73ac724c8",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "21c4f7b73ac724c8",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/nightLightCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 800,
        "y": 260,
        "wires": []
    },
    {
        "id": "99cbe86ea34ac3d3",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/minCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 780,
        "y": 500,
        "wires": []
    },
    {
        "id": "507eea4f59271095",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/hourCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 780,
        "y": 560,
        "wires": []
    },
    {
        "id": "f2247275dd823cdb",
        "type": "debug",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 770,
        "y": 160,
        "wires": []
    },
    {
        "id": "4f548abb3c3564da",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Background colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 500,
        "y": 320,
        "wires": [
            [
                "b59cf7e6d62e9c27",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "b59cf7e6d62e9c27",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/BGLightCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 800,
        "y": 320,
        "wires": []
    },
    {
        "id": "48a83be4c50febe0",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Five minute tick colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 490,
        "y": 380,
        "wires": [
            [
                "4bbe80deb5540eb7",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "4bbe80deb5540eb7",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/fiveMinTickCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 810,
        "y": 380,
        "wires": []
    },
    {
        "id": "f49408fee0b52e52",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Fifteen minute tick colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "object",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 480,
        "y": 440,
        "wires": [
            [
                "01a3585933b82e81",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "01a3585933b82e81",
        "type": "mqtt out",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "topic": "bathroom/mirror/fifteenMinTickCol",
        "qos": "",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "3f447ded17b259ee",
        "x": 820,
        "y": 440,
        "wires": []
    },
    {
        "id": "af4efdb2f216ded1",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Minute hand colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "string",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 500,
        "y": 500,
        "wires": [
            [
                "99cbe86ea34ac3d3",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "12c269535780e74b",
        "type": "ui_colour_picker",
        "z": "a60a5305dc8d26e9",
        "name": "",
        "label": "Hour hand colour",
        "group": "9788c9b2a0490f3e",
        "format": "hex",
        "outformat": "string",
        "showSwatch": true,
        "showPicker": false,
        "showValue": false,
        "showHue": false,
        "showAlpha": false,
        "showLightness": true,
        "square": "false",
        "dynOutput": "false",
        "order": 6,
        "width": 0,
        "height": 0,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "x": 510,
        "y": 560,
        "wires": [
            [
                "507eea4f59271095",
                "f2247275dd823cdb"
            ]
        ]
    },
    {
        "id": "9788c9b2a0490f3e",
        "type": "ui_group",
        "name": "Mirror settings",
        "tab": "90d560824c17c506",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "3f447ded17b259ee",
        "type": "mqtt-broker",
        "name": "Mosquitto",
        "broker": "192.168.7.245",
        "port": "1883",
        "clientid": "",
        "usetls": false,
        "protocolVersion": "5",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    },
    {
        "id": "90d560824c17c506",
        "type": "ui_tab",
        "name": "Bathroom settings",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]

Environment

  • Node-RED version: 2.0.6
  • Node.js version: v21.5.0
  • npm version: 10.2.4
  • Platform/OS: OpenSuse Tumbleweed
  • Browser: Firefox 122.0 (64-bit)
@hardillb
Copy link
Member

hardillb commented Feb 10, 2024 •
edited
Loading

Are you really using Node-RED 2.0.6?

The 2.2.x stream went out of maintenance in July 2023

Can you reproduce this on 3.1.5?

Or do you mean v2.0.6 of the Node-RED dashboard? If so this is the wrong repo

@NohWayJose
Copy link
Author

NohWayJose commented Feb 12, 2024 •
edited
Loading

@hardillb
Hey Ben ,
Yes, I'm afraid I was very backlevel running DietPi on a Pi4. I've upgraded now:

root@DietProot@DietPi:~# npm list
root@ /root
└── node-red@3.1.5

Dashboard is at 3.6.2
image

BUT, the help tab reports v2.2.3 despite rechecking my server installed version (3.1.5) and recycling editor web page (incl flushing the cache)
image

Either way, The original z-order issue persists with my current setup. Have I missed a package upgrade for a germane component?

@hardillb
Copy link
Member

Are you sure you have restarted the Node-RED instance that is actually running?

If the editor is still reporting 2.2.3 after reloading the editor then that is what is actually running.

By default Node-RED would not be installed under the root users home directory.

Please show the start of the Node-RED logs as it will print what version it is running.

Also the Platform/OS question is about where Node-RED is running so should be DietPi, not what OS you are running the browser on.

Either way this will need moving to the dashboard repository.

@NohWayJose
Copy link
Author

@hardillb I would transfer it to Dashboard repo but it seems I don't have the authority as I can't see the Transfer option in the right panel. If you have auth, I'm happy for you to transfer it for me

@dceejay dceejay transferred this issue from node-red/node-red Feb 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hardillb @NohWayJose