Knob widgets losing their color & errors

Apps & Services HABPanel
1

Hi

I have a display issue with my custom knob widgets. On my tablet, they always appear black. On my desktop browser they appear black intermittently on each refresh. They still work however.

I have replicated the issue in a clean openhab instance using docker (openhab:2.5.0-snapshot). All I have is the evohome binding, the evohome thing and one temperature item. The panel contains one default knob widget for the temperature item.

evohome.things :-

Bridge evohome:account:blah [ username="xxx", password="xxx" ]
{
   display blah [ id="123" ]
   heatingzone bedroom [ id="456" ]
}

evohome.items :-

Number BedroomSetPoint { channel="evohome:heatingzone:aliasxxx:bedroom:SetPoint" }

dashboard :

{
    "dashboards": [
        {
            "id": "debug",
            "name": "debug",
            "widgets": [
                {
                    "name": "New Widget",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "BedroomSetPoint",
                    "type": "knob",
                    "row": 0,
                    "col": 2,
                    "floor": 0,
                    "ceil": 100,
                    "step": 1,
                    "ranges": [],
                    "$$hashKey": "object:26"
                }
            ],
            "row": 0,
            "col": 1,
            "$$hashKey": "object:18"
        }
    ],
    "menucolumns": 6,
    "settings": {
        "theme": "material-dark",
        "header_clock_format": "EEEE, dd MMMM H:mm",
        "show_header_clock": true
    },
    "customwidgets": {}
}

I do have the following errors in the browser console - not sure if anything to worry about.

Firefox can’t establish a connection to the server at http://localhost:8080/rest/events.
SSE error, closing EventSource openhab.service.js:266:21
registerEventSource/source.onerror http://localhost:8080/habpanel/app/services/openhab.service.js:266:21
Registered widget type: button widgets.module.js:38:13
<…snip…>
Registered widget type: template widgets.module.js:38:13
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). vendor.js:189:446
Setting locale to: en-GB openhab.service.js:125:21
openHAB 2 service configuration loaded openhab.service.js:292:17
Source map error: request failed with status 404
Resource URL: http://localhost:8080/habpanel/vendor/vendor.js
Source Map URL: aCKolor.min.js.map[Learn More]
Service worker registered index.html:28:21
Loaded 4 openHAB items openhab.service.js:35:21
Updating BedroomSetPointStatus state from FollowSchedule to PermanentOverride openhab.service.js:177:37
Updating BedroomSetPoint state from 15 to 15.0 openhab.service.js:177:37

The events file in the Network tab shows no headers. Again, not sure if this is an issue but it seems to be something that people ask about about it on similar topics.

network2
network21440×433 129 KB

This is what the knob looks like

black%20knob2
black%20knob2485×726 66.3 KB

This is how it should look (and does look half the time).
expected2

Hope someone can help.
Thanks in advance :slight_smile:

2

Very weird bug. It’s like it’s not picking up the theme variables. I cannot reproduce it.
However that Content Security Policy error is interesting, it seems to happen only in Firefox, not Chrome.

When it happens (the bar and text being black instead of blue) can you go to the Inspector tab and type in the “filter styles” text box: “primary-color”.
This is what you should normally see:
image

3

Hi ysc

Thank you for the quick reply.

The primary-color property is picked up the same way as your image. I’ve just tried on another computer and I concur - the Content Security Policy error does not appear to occur in Chrome. At first I thought the knob was display correctly too (in Chrome) but then I refreshed it about 10 times and eventually got it to go black.

I’m going to spin up another fresh openhab container and find the most minimal way I can replicate it .

Thanks

4

That would be great. I really never saw this happening before.

5

I am seeing vaguely similar issues - related to a missing file:
http://openhabian:8080/habpanel/vendor/aCKolor.min.js.map

Any ideas how I can refresh / verify existence of the file would be appreciated?

thanks

7

Hi

I have pinpointed what was causing this issue for me. It appears to occur with some of the non-default themes, e.g. Material and Material Dark

I have partly replicated this on a clean environment just now (Docker openhab:2.4.0) and made a little screencast : https://youtu.be/sh33xbiZvSI

I say ‘partly’ because this video does not demonstrate that the gauges should actually be blue on the Material Dark theme. I am pretty sure they should be though. The same thing happens on the Material theme where I’m pretty sure the gauges should always be red.

Please let me know if I can provide any more details. I did compare the console and styles between the working and broken copies but nothing stood out.

Thanks :slight_smile: