[bug]: Basic image does not refresh itself anymore when using a binding

[manuxi]

No existing issues.

• There is no existing issue for my problem.

Describe the bug

I'm using a basic image for displaying my ring hd image. To archieve this I added a binding instead of a selection.

Since I've updated to vis-2 2.9.64 thius doesn't work anymore on both of my tablets.

To Reproduce

Use a binding instead of a selection (see screenshot)

Expected behavior

Image is always fresh.

Screenshots & Logfiles

Page or affected widget

No response

Adapter version

2.9.64

js-controller version

6.0.11

Node version

20.17.0

Operating system

buanet docker (official image - v10.0.0)

Additional context

No response

[peterfido]

I have the same issue without binding.

[tmikulski]

#423

[jolichter]

Hello, I can confirm this issue and have experienced it with version 2.9.64 as well.

In VIS2, I integrated a Basic Image widget for a camera using the snapshot URL of my camera. The snapshot URL worked perfectly with version 2.9.32, and I received an updated image every 2 seconds since I had set the update interval (ms) to 2000 for reasonable image refresh rates.

Tested with Fully Browser 1.53, Google Chrome 131.0.6778.86, Brave 1.73.91, and ioBroker Visu 1.3.0.

[jolichter]

I created a workaround script that works with multiple widgets. Simply adjust the widgets, links, NAME, and PASSWORD for the webcam images. This should also work with datapoints (not tested).

Update: Here's how it works with multiple VIS, e.g., 3 webcams and 5 widgets:

const widgetData = {
    // Widgets und zugehörige Webcam-URLs
    'w000666': 'http://192.168.1.81:80/tmpfs/auto.jpg?usr=NAME&pwd=PASSWORD', // Widget 1, Webcam 1  (VIS2 Tablet1)
    'w000815': 'http://192.168.1.81:80/tmpfs/auto.jpg?usr=NAME&pwd=PASSWORD', // Widget 2, gleiche Webcam 1 (VIS2 Tablet2)
    'w000555': 'http://192.168.1.41:80/tmpfs/auto.jpg?usr=NAME&pwd=PASSWORD', // Widget 3, Webcam 2 (VIS2 Tablet1)
    'w000042': 'http://192.168.1.41:80/tmpfs/auto.jpg?usr=NAME&pwd=PASSWORD', // Widget 4, gleiche Webcam 2 (VIS2 Tablet2)
    'w000999': 'http://192.168.1.87:80/tmpfs/auto.jpg?usr=NAME&pwd=PASSWORD' // Widget 5, Webcam 3 (VIS2 Tablet2)
};

setInterval(() => {
    Object.keys(widgetData).forEach(widgetId => {
        const widget = document.getElementById(widgetId); // Widget anhand der ID finden
        if (widget) {
            const img = widget.querySelector('img'); // Greift auf das <img>-Element im Widget zu
            if (img) {
                const baseUrl = widgetData[widgetId]; // Hole die URL basierend auf der Widget-ID
                const newImg = new Image(); // Erstellt ein unsichtbares Bild zum Vorladen

                newImg.onload = () => {
                    // Tauscht das Bild nur aus, wenn das neue Bild fertig geladen ist
                    img.src = `${baseUrl}&t=${new Date().getTime()}`;
                };

                // Setzt die Quelle des neuen Bildes (triggert den Ladevorgang im Hintergrund)
                newImg.src = `${baseUrl}&t=${new Date().getTime()}`;
            }
        }
    });
}, 2000); // Aktualisierung alle 2 Sekunden

[jolichter]

Erweiterte Script-Version

Das Script funktioniert einwandfrei. Für alle, die Interesse haben: Ich habe das Script erweitert, sodass nun unterschiedliche Aktualisierungszeiten pro Widget möglich sind und Debugging-Informationen in der Konsole angezeigt werden können.

👉 ioBroker visWidgetUpdater auf GitHub

PS: Only with version 2.9.32 did the refresh in basic images work. Even with the current NPM version 2.11.1, it doesn't work. The workaround has been working flawlessly for three weeks now.