SteelSeries Canvas mismatch

[GretaC]

Hi ALL,
I'm using

11 Sep 08:25:35 - [info] Node-RED version: v3.1.0
11 Sep 08:25:35 - [info] Node.js  version: v18.13.0
11 Sep 08:25:35 - [info] Linux 5.15.108-1-pve x64 LE

in a proxmox LXC.
In general node-red is doing as expected.
Now I want to use the pretty Steelseries gauges and I cannot bring more than one on a sheet. Furthermore they behave funny...

My setup here is pretty simple:

I use two standard gauges to show my expectation and two steel gauges to show what happens on my side.

The standard gauges work as expected, I do see two gauges on the same sheet.

But the nice Steel gauges show this:

As you can see there is only one gauge even the space for a second is foreseen.

Where is the second one?

Furthermore:
If I press the Inject Button for the second gauges (injecting '30') I get the same gauge for Room 1, but the value changes to 30.

Not shown here, but for your information: If I move one of the Steel gauges to another another tab, everything works fine. But I cannot get more than one gauge on the same sheet.

Both Steel gauges are created by two separate ui_templates with the same content (copy/past). Only the name is different for identification.

Can anybody give a hint how to solve this?

Thx Greta

[Steve-Mcl]

Hi Greta, welcome to the forum.

@GretaC

with the same content (copy/past)

I would put money on that being the issue.

If you want further assistance, you will need to either point to where you got the code or share a flow.

[GretaC]

That's the reason why I mentioned it here. But I didn't copy/paste the node, I copied the content only. My expectation from other OO languages is, that their objects/instances are strictly separated.
How can I upload the flow? As a new user I'm not allowed to attach... (?)

[Steve-Mcl]

@GretaC

But I didn't copy/paste the node, I copied the content only. My expectation from other OO languages is, that their objects/instances are strictly separated.

Yes, but you need to be aware of the overall picture. For example, that duplicate code is delivered to a browser, a single SPA. As such, any duplicate IDs will interfere with each other, any absolute positioning can cause over laps etc etc.

@GretaC

How can I upload the flow? As a new user I'm not allowed to attach

Dont attach, simply export your flow (CTRL-E) as JSON and paste it in a code block.

canned text:

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil icon.

See this post for more details - How to share code or flow json

[GretaC]

Ah. OK.
Btw: I'm using the lib from HanSolo and copied steelseries-min.js tween-min.js to 'public/myjs' only.

This is my flow:

[
    {
        "id": "848165f3e7e60a60",
        "type": "tab",
        "label": "All Rooms",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "8f1aceee20a72425",
        "type": "ui_base",
        "theme": {
            "name": "theme-light",
            "lightTheme": {
                "default": "#0094CE",
                "baseColor": "#0094CE",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "edited": true,
                "reset": false
            },
            "darkTheme": {
                "default": "#097479",
                "baseColor": "#097479",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
                "edited": false
            },
            "customTheme": {
                "name": "Untitled Theme 1",
                "default": "#4B7930",
                "baseColor": "#4B7930",
                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
            },
            "themeState": {
                "base-color": {
                    "default": "#0094CE",
                    "value": "#0094CE",
                    "edited": false
                },
                "page-titlebar-backgroundColor": {
                    "value": "#0094CE",
                    "edited": false
                },
                "page-backgroundColor": {
                    "value": "#fafafa",
                    "edited": false
                },
                "page-sidebar-backgroundColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "group-textColor": {
                    "value": "#1bbfff",
                    "edited": false
                },
                "group-borderColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "group-backgroundColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "widget-textColor": {
                    "value": "#111111",
                    "edited": false
                },
                "widget-backgroundColor": {
                    "value": "#0094ce",
                    "edited": false
                },
                "widget-borderColor": {
                    "value": "#ffffff",
                    "edited": false
                },
                "base-font": {
                    "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
                }
            },
            "angularTheme": {
                "primary": "indigo",
                "accents": "blue",
                "warn": "red",
                "background": "grey",
                "palette": "light"
            }
        },
        "site": {
            "name": "Node-RED Dashboard",
            "hideToolbar": "false",
            "allowSwipe": "false",
            "lockMenu": "false",
            "allowTempTheme": "true",
            "dateFormat": "DD.MM.YYYY",
            "sizes": {
                "sx": 48,
                "sy": 48,
                "gx": 6,
                "gy": 6,
                "cx": 6,
                "cy": 6,
                "px": 0,
                "py": 0
            }
        }
    },
    {
        "id": "661ba02aa4ef352d",
        "type": "ui_tab",
        "name": "Room",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "4672b01ae9a5a9ef",
        "type": "ui_group",
        "name": "Standard",
        "tab": "661ba02aa4ef352d",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "29dc737ca2a831c5",
        "type": "ui_tab",
        "name": "Steel Room",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "527d1bd2a034e73d",
        "type": "ui_group",
        "name": "Standard",
        "tab": "29dc737ca2a831c5",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "a356414fa0016e7b",
        "type": "inject",
        "z": "848165f3e7e60a60",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "20",
        "payloadType": "num",
        "x": 130,
        "y": 80,
        "wires": [
            [
                "d4fb416fcf1f4c98",
                "32796a3e8a7e832b"
            ]
        ]
    },
    {
        "id": "32796a3e8a7e832b",
        "type": "ui_template",
        "z": "848165f3e7e60a60",
        "group": "527d1bd2a034e73d",
        "name": "Room 1",
        "order": 2,
        "width": "0",
        "height": "0",
        "format": "<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n\n<script>\n    var radial4;\n    \n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.payload) != \"undefined\") radial4.setValueAnimated(msg.payload);\n           if (typeof(msg.payload) != \"undefined\") radial4.setThreshold(msg.payload);\n           if (typeof(msg.odo) != \"undefined\")radial4.setOdoValue(msg.odo);  \n           if (typeof(msg.userLed) != \"undefined\") radial4.setUserLedOnOff(msg.userLed);  \n           if (typeof(msg.trend) != \"undefined\")\n            {\n                if (msg.trend==1)     radial4.setTrend(steelseries.TrendState.UP);\n                if (msg.trend==0)     radial4.setTrend(steelseries.TrendState.STEADY);\n                if (msg.trend==-1)    radial4.setTrend(steelseries.TrendState.DOWN);\n                if (msg.trend==-2)    radial4.setTrend(steelseries.TrendState.OFF);\n            }\n        });\n    })(scope);\n\n//    var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),\n//                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),\n//                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],\n    var sections = [steelseries.Section(0, 18, 'rgba(0, 0, 220, 0.3)'),\n                        steelseries.Section(18, 22, 'rgba(0, 220, 0, 0.3)'),\n                        steelseries.Section(22, 40, 'rgba(220, 220, 0, 0.3)') ],\n            // Define one area\n    areas = [steelseries.Section(18, 25, 'rgba(220, 0, 0, 0.3)')],\n\n    radial4 = new steelseries.Radial('canvasRadial4', {\n            gaugeType: steelseries.GaugeType.TYPE5,\n            minValue:10,\n            maxValue:40,\n            size: 292,\n            section: sections,\n            area: areas,\n            titleString: \"Room 1\",\n            unitString: \"°C\",\n//            threshold: 20,\n            thresholdRising: false,\n            userLedVisible: false,\n            useOdometer: false,\n            lcdDecimals:1,\n            lcdVisible: true,\n            trendVisible: true\n        });\n                        \n    radial4.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);\n    radial4.setValueAnimated(0);\n//    radial4.setThreshold(20);\n    radial4.blinkUserLed(0);\n//    radial4.setOdoValue(0);\n\n\n</script>\n\n<canvas id=\"canvasRadial4\" width=\"401\" height=\"401\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 460,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "bcda90f9ecea266c",
        "type": "ui_template",
        "z": "848165f3e7e60a60",
        "group": "527d1bd2a034e73d",
        "name": "Room 2",
        "order": 1,
        "width": "0",
        "height": "0",
        "format": "<script src=\"/myjs/tween-min.js\"></script>\n<script src=\"/myjs/steelseries-min.js\"></script>\n\n<script>\n    var radial4;\n    \n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n           if (typeof(msg.payload) != \"undefined\") radial4.setValueAnimated(msg.payload);\n           if (typeof(msg.payload) != \"undefined\") radial4.setThreshold(msg.payload);\n           if (typeof(msg.odo) != \"undefined\")radial4.setOdoValue(msg.odo);  \n           if (typeof(msg.userLed) != \"undefined\") radial4.setUserLedOnOff(msg.userLed);  \n           if (typeof(msg.trend) != \"undefined\")\n            {\n                if (msg.trend==1)     radial4.setTrend(steelseries.TrendState.UP);\n                if (msg.trend==0)     radial4.setTrend(steelseries.TrendState.STEADY);\n                if (msg.trend==-1)    radial4.setTrend(steelseries.TrendState.DOWN);\n                if (msg.trend==-2)    radial4.setTrend(steelseries.TrendState.OFF);\n            }\n        });\n    })(scope);\n\n//    var sections = [steelseries.Section(0, 25, 'rgba(0, 0, 220, 0.3)'),\n//                        steelseries.Section(25, 50, 'rgba(0, 220, 0, 0.3)'),\n//                        steelseries.Section(50, 75, 'rgba(220, 220, 0, 0.3)') ],\n    var sections = [steelseries.Section(0, 18, 'rgba(0, 0, 220, 0.3)'),\n                        steelseries.Section(18, 22, 'rgba(0, 220, 0, 0.3)'),\n                        steelseries.Section(22, 40, 'rgba(220, 220, 0, 0.3)') ],\n            // Define one area\n    areas = [steelseries.Section(18, 25, 'rgba(220, 0, 0, 0.3)')],\n\n    radial4 = new steelseries.Radial('canvasRadial4', {\n            gaugeType: steelseries.GaugeType.TYPE5,\n            minValue:10,\n            maxValue:40,\n            size: 292,\n            section: sections,\n            area: areas,\n            titleString: \"Room 2\",\n            unitString: \"°C\",\n//            threshold: 20,\n            thresholdRising: false,\n            userLedVisible: false,\n            useOdometer: false,\n            lcdDecimals:1,\n            lcdVisible: true,\n            trendVisible: true\n        });\n                        \n    radial4.setFrameDesign(steelseries.FrameDesign.BLACK_METAL);\n    radial4.setValueAnimated(0);\n//    radial4.setThreshold(20);\n    radial4.blinkUserLed(0);\n//    radial4.setOdoValue(0);\n\n\n</script>\n\n<canvas id=\"canvasRadial4\" width=\"401\" height=\"401\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 460,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "df47c9c4cabdae76",
        "type": "inject",
        "z": "848165f3e7e60a60",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "30",
        "payloadType": "num",
        "x": 130,
        "y": 180,
        "wires": [
            [
                "d750f3dd5cf8f650",
                "bcda90f9ecea266c"
            ]
        ]
    },
    {
        "id": "d4fb416fcf1f4c98",
        "type": "ui_gauge",
        "z": "848165f3e7e60a60",
        "name": "Room 1",
        "group": "4672b01ae9a5a9ef",
        "order": 0,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "Room 1",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": "100",
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "diff": false,
        "className": "",
        "x": 460,
        "y": 40,
        "wires": []
    },
    {
        "id": "d750f3dd5cf8f650",
        "type": "ui_gauge",
        "z": "848165f3e7e60a60",
        "name": "Room 2",
        "group": "4672b01ae9a5a9ef",
        "order": 0,
        "width": 0,
        "height": 0,
        "gtype": "gage",
        "title": "Room 2",
        "label": "units",
        "format": "{{value}}",
        "min": 0,
        "max": "100",
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "diff": false,
        "className": "",
        "x": 460,
        "y": 220,
        "wires": []
    }
]

[Steve-Mcl]

@GretaC

<script>
    var radial4;

so that variable will be present in both templates. Due to its scope, will be attached to the window object twice (well not really, but for discussion sake, lets say it does). That is the first issue. The subsequent code accessing radial4 will only really ever access the a single instance - hence why you see only 1.

Try wrapping all your code in an iife to insulate them from each other.

[GretaC]

Hi Steve,
thank's a lot. It is solved.
The root problem seems to be that I have to give each instrument an individual ID. 'canvasRadial4' is fine if there is only one instrument, but if there are more than one, they must have individual IDs. If they have individual IDs then they are displayed.
And you are right as well: 'radial4' for all instruments leads to the mismatch that values are shown on wrong instruments.

Now having the solution I understand, why my approach failed.

' * * * * * ' for your support!