TheQwertiest / foo_spider_monkey_panel

foobar2000 component that allows to use JavaScript to create CUI/DUI panels
https://theqwertiest.github.io/foo_spider_monkey_panel/
MIT License
268 stars 21 forks source link

Gdi bugs #206

Open regorxxx opened 1 year ago

regorxxx commented 1 year ago

Check listenbrainz icon: imagen

With zoom: imagen

Exact same code and images are drawn with totally different interpolation results, even if it's explicitly set to use 'NearestNeighbor'.

Have no idea what's going on. Reloading panels does not change anything, neither changing toolbar order or restarting foobar2000. I expect loading the same image multiple times and resizing it does not affect other instances. Right?

I have only managed to apply a workaround by scaling the icon by 1.17 in first bar, and 1.18 in the second bar XD Which makes zero sense. (if you look closely, the second looks better now) imagen

Also already thought it may be rounding errors, but they consistently happen on an specific panel and not the other. If I remove the other panel it remains the same.

TT-ReBORN commented 1 year ago

Here is another problem with GDI DrawString: https://github.com/TT-ReBORN/Georgia-ReBORN/issues/107

TT-ReBORN commented 3 days ago

Another issue when using transparent backgrounds with ClearTypeGridFit text rendering is that black and white halos will appear around the text edges. The only workaround to prevent this is to use AntiAliasGridFit rendering, which makes the text a little washed out and not as sharp anymore:

// * Need to apply text rendering AntiAliasGridFit when using style Blend, Biography's artist image on background or when using custom theme fonts with larger font sizes
grClip.SetTextRenderingHint(grSet.styleBlend || grSet.playlistBgArtist || grSet.libraryBgArtist || grSet.customThemeFonts && grSet.playlistHeaderFontSize_layout > 18 ? TextRenderingHint.AntiAliasGridFit : TextRenderingHint.ClearTypeGridFit);

P.S This is a very old issue that was never fixed and I am sure you already know, but I posted this anyways for documentation.

TT-ReBORN commented 2 days ago

This should be also mentioned, when using the best quality InterpolationMode.HighQualityBicubic on images, there will be visible transparent border lines around the edges of the image caused by anti-aliasing. This is also documented here.

There is a workaround to use two images, one image with InterpolationMode.Bicubic and the final image with InterpolationMode.HighQualityBicubic and then minimal (~4px) scale it down so the visible transparent border lines around the edges won't be visible:

    /**
     * Scales album art to a global size, handling potential errors.
     * @throws Logs an error if the scaling operation fails.
     */
    createScaledAlbumArt() {
        if (this.albumArtScaled) this.albumArtScaled = null;

        try {
            // * Avoid weird anti-aliased scaling along border of images, see: https://stackoverflow.com/questions/4772273/interpolationmode-highqualitybicubic-introducing-artefacts-on-edge-of-resized-im
            this.albumArtCorrupt = false;
            this.albumArtScaled = this.albumArt.Resize(this.albumArtSize.w, this.albumArtSize.h, InterpolationMode.Bicubic);
            const sg = this.albumArtScaled.GetGraphics();
            const HQscaled = this.albumArt.Resize(this.albumArtSize.w, this.albumArtSize.h, InterpolationMode.HighQualityBicubic);
            sg.DrawImage(HQscaled, 2, 2, this.albumArtScaled.Width - 4, this.albumArtScaled.Height - 4, 2, 2, this.albumArtScaled.Width - 4, this.albumArtScaled.Height - 4);
            this.albumArtScaled.ReleaseGraphics(sg);
        } catch (e) {
            this.handleArtworkError('albumArt');
        }
    }