Bitmap with 2 frames issue

Developer VSTGUI
#1

Hello

I have the following bitmap with 2 frames:
button_2frames.png
The bitmap has a size of 26x52 (2 frames each 26x26).

If I use this bitmap with an OnOff button and set the “size” to 26, 26, I end up with the following rendered button
1x.png
As you can see there is a thin line at the very bottom which seems to be coming from the next frame (if you look at the original file, there is no bleeding: frame 2 does not “bleed” into frame 1 so I don’t think it is user error).

If on the other end, I define a 2x scaled bitmap (size is 52x104) and declare it with a scale-factor 2 in the xml file, as you can see the thin line does not show up.
2x.png
Any idea why this is happening? I am definitely not expecting this behavior.

Thanks
Yan

#2

I have not checked the code for my theory but this is what I think is happening:

  • because I am on macOS with HiDPI screen and I don’t provide a 2x version of the image, the original image (which contains 2 frames) is scaled up.

  • the process of scaling the image up introduces artifacts which ends up having frame 2 “bleeding” into frame 1

For the sake of demonstrating what I am talking about, I took my original image and scaled it up (using Preview -> Image Size -> 200%) and this is the result

button_2frames_scaled_up.png
If you zoom in very closely in the image you can see that line 52 (which is part of frame 1) ends up with some anti-alias border from frame 2 which translates into the thin line being displayed.

Yan

#3

You can play with the bitmap interpolation quality if you can get rid of this artifact:
https://github.com/steinbergmedia/vstgui/blob/bb93128afc4509e74d8556891b1f03647a1a9660/vstgui/lib/cframe.h#L52

Cheers,
Arne