It doesn't load any custom icons

[Tri4c3]

• Plugin version: 0.8.2
  -Open deck 2.12
• Operating system: Pop OS 24LTS

When I try to load a custom icon, none of them work... I've tried PNG, JPG, SVG, and even icons from other plugins or from the OBS Multi plugin itself, but they won't load..

[theprizrak]

to fix this problem, you need to fix the function in the file "dev.theca11.multiobs.sdPlugin\propertyInspector\inspector.js ". find the function "document.querySelector('#customImgFilePicker').addEventListener('input', (e)" and replace with the following code

document.querySelector('#customImgFilePicker').addEventListener('input', (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
        // Получаем Data URL (Base64) вместо пути
        const imgPath = event.target.result; 

        const img = new Image();
        img.onload = function() {
            let x, y, width, height;
            if (this.width < 72 && this.height < 72) {
                width = this.width * 2;
                height = this.height * 2;
                x = Math.floor(72 - width / 2);
                y = Math.floor(72 - height / 2);
            } else if (this.width > this.height) {
                width = 144;
                height = Math.floor(this.height * 144 / this.width);
                x = 0;
                y = Math.floor(72 - height / 2);
            } else {
                height = 144;
                width = Math.floor(this.width * 144 / this.height);
                y = 0;
                x = Math.floor(72 - width / 2);
            }
            
            // Записываем Base64 строку в инпуты
            document.querySelector('input[name="customImg"]').value = imgPath;
            document.querySelector('input[name="customImgPos"]').value = [x, y, width, height].join(',');
            document.querySelector('#advanced-fields').dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
        };
        img.onerror = function() {
            document.querySelector('input[name="customImg"]').placeholder = $PI.localize('Error loading image');
            setTimeout(() => {
                document.querySelector('input[name="customImg"]').placeholder = $PI.localize('No custom icon image set');
            }, 3000);
        };
        img.src = imgPath;
    };
    // Читаем файл как Base64
    reader.readAsDataURL(file);
});

[TheHRTLocker]

I tried the patch above.

While I didn't get the previous "Error loading image", the "Custom Icon" field has "data:image/png;base64,IVBORwOKGgoAAAANSUhEUgAAAIACAYAAADOeNT6...." in it and the UI showed this image. No matter what image I actually select.

I'm using 0.8.2 of the plugin, OpenDeck v2.13.1, and I'm using Fedora 44 with KDE Plasma

[atno11]

@Tri4c3 , @TheHRTLocker
I managed to get custom icons working on OpenDeck with a small change in app.js. First make the changes of
In:
%AppData%\Roaming\opendeck\plugins\dev.theca11.multiobs.sdPlugin\plugin\app.js
replace:

fgImg = `<image xlink:href="${customImg}" x="${x}" y="${y}" width="${width}" height="${height}"/>`;

with:

fgImg = `<image href="${customImg}" x="${x}" y="${y}" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>`;

After making this change and restarting OpenDeck, custom icons started working correctly for me.

It looks like using href instead of xlink:href fixes the issue with OpenDeck's SVG rendering.