Kivy Image: White ring of death

[T500]

Death is a bit of a dramatic description, but its a complete project stopper to be more correct.

Using kivy Image with a transparent background causes a white outline (1 pixel wide) to appear were the transparent color meets another color in the palette ???

You can see a white ring were the transparent color starts.I have tried GIF and PNG, and rearranging the palette mapping. No luck.

I can tell you that the ring doesn't appear in GIMP or Photoshop when layered over a black background. 

Is it a bug or something dumb I'm missing in the implementation of the Kivy Image command ???

Or can suggest a kivy work around to the problem... other than introducing a block hole into the graphic :) 

Many thanks 

[Gabriel Pettier]

As you can see in kivy/data/images, kivy use transparent pngs a lot in its default usage, so i don't think such think would have gone unnoticed, is it possible to have a snippet of code and the image (or another) showing the issue?

--
 
 

[Gabriel Pettier]

such thing*

Le sam. 17 nov. 2012 00:00:28 CET, Gabriel Pettier a écrit :
> As you can see in kivy/data/images, kivy use transparent pngs a lot in
> its default usage, so i don't think such think would have gone
> unnoticed, is it possible to have a snippet of code and the image (or
> another) showing the issue?
>
> Le 16/11/2012 23:56, T500 a écrit :
>> Death is a bit of a dramatic description, but its a complete project
>> stopper to be more correct.
>>
>> Using kivy Image with a transparent background causes a white outline
>> (1 pixel wide) to appear were the transparent color meets another
>> color in the palette ???
>>

>> <https://lh3.googleusercontent.com/-DT2Y_IodDaA/UKbB7We3ZGI/AAAAAAAAEKQ/FsKZB6Afhao/s1600/screenshot0005.png>

[Thomas Hansen]

I know you said it doesn't show in PS or gimp, But at that point they aren't compressed either.  Have you tried a different image format? Alternatively have you tried putting a black layer underneath and setting it transparent. I think I've had simmilar issues before when the border of a transparent region fades into white because the pixel is white but has a low alpha value. 

Sent from my iPhone

--
 
 

[T500]

Thanks for the reply guys, I have just tried swapping the transparent color from '0' to '1' then 226, it made no difference. Even more weird is I remapped the picture in blue and still got a white ring ?

The kv, shortened but still reproduces the problem...

#:kivy 1.0


<TestApp>:    
    canv:canv
    img:img
    foxy:foxy
    thr:thr
    uhr:uhr
    tmr:tmr
    umr:umr
   
    id: canv
    canvas:
        Color:
            rgb: .9, .9, .1
        Rectangle:
            # Full screen starfield pic
            #
            source: 'nubak.png'
            size: self.size  
           
    BoxLayout:
        id: boxy
        orientation: 'horizontal'
        size_hint: (None, None)
        size: canv.size
       
        BoxLayout:
            id: doxy
            orientation: 'vertical'
            size_hint: (.5, 1)
           
            Widget:
                # - now place holder
               
            Widget:
                id: ticker  
               
                BoxLayout:
                    orientation: 'horizontal'
                    size: ticker.size
                    pos: ticker.pos
                    Widget:
                        id:widsz
                    Image:
                        id:thr
                        allow_stretch: True
                        source: './moondigits/std0.png'
                    Image:
                        id:uhr
                        allow_stretch: True
                        source: './moondigits/dot1.png'
                    Image:
                        id:tmr
                        allow_stretch: True
                        source: './moondigits/std2.png'
                    Image:
                        id:umr
                        allow_stretch: True
                        source: './moondigits/std3.png'
           
            Widget:
                # deleted - now place holder
           
        Widget:
            id: foxy
            size_hint: (.5, 1)
           
            # MOON PHASE IMAGE HERE
           
            Image:
                id: img
                size_hint: (None, None)
                pos: foxy.pos
                size: foxy.size

self.app.img.source = "./moonphase/moonphase21.gif"

 The image...

A close up in GIMP just to show there is no feathering color...

I'm sure its not rocket science :) 

I just noticed something that maybe a clue as to what is happening. If I take the mouse and resize from the bottom right, then jiggle it about quickly jumping between sizes. Sometimes landing back returning back to the previous size, the ring disappears. It is almost as if kivy had built a mask, resized after display 1 pixel smaller. And jiggling some how revisits the previous mask size. But its a guess that some after animation or process is one pixel out.

No clock max interation errors in the debug. No "ImagePygame" warning messages.

If you think its valid problem and not a end user mistake please advise the best place to upload a zip of this code for further investigation.

Thanks again. 

[B. Jack]

GIF and PNG are lossless compressors so there's no jiggling of pixels or alphas when the file is saved.  If it's completely transparent in GIMP when you save it'll remain 100% transparent when saved.  From the description further on about resizing it sounds like Kivy might be scaling the image and the scaling is causing that ring at the edges when it interpolates along the edges between transparent and non-transparent features.  Image widgets scale by default unless you adjust their properties not to.

---

Date: Fri, 16 Nov 2012 19:16:53 -0800
From: gw7...@gmail.com
To: kivy-...@googlegroups.com
Subject: Re: [kivy-users] Kivy Image: White ring of death

--
 
 

[krister viirsaar]

in compositing I would check 'premultiply' and problem solved.

[Gabriel Pettier]

in fact, this is enough to reproduce, so i'd consider it a bug, until
further examination of the image, maybe krister's solution works (not
tested yet), but maybe it's still a bug, i guess that requires image
processing knowledges i don't have, to decide.

https://gist.github.com/4095042

Le 17/11/2012 10:42, krister viirsaar a �crit :

> in compositing I would check 'premultiply' and problem solved.

> --
>
>

[Akshay Arora]

Actually there might be a GPU driver specific issue, I can't reproduce the error with tshirtman's gist. This is what I get  ::


So, in short no white borders. Would be interesting to note the hardware which does reproduces the white ring of death(this name has a nice ring to it).

Platform: Linux
GPU driver: x11-driver-video-intel 2.20.13

On Sat, Nov 17, 2012 at 4:55 PM, Gabriel Pettier <gabriel...@gmail.com> wrote:

in fact, this is enough to reproduce, so i'd consider it a bug, until further examination of the image, maybe krister's solution works (not tested yet), but maybe it's still a bug, i guess that requires image processing knowledges i don't have, to decide.

https://gist.github.com/4095042

Le 17/11/2012 10:42, krister viirsaar a écrit :

in compositing I would check 'premultiply' and problem solved.
--

--

[Gabriel Pettier]

Ati radeon here, open source driver, on linux.

--
 
 

[T500]

I CAN reproduce the error with tshirtman's gist on both my PC and Google Nexus 7. I have no idea if the ATI uses Nvidia chips as I seem to remember Nvidia acquired ATI? 

My PC is running the Nvidia GeForce 9800. The ring appears in both Linux (OpenSuSE 12.1 64) and Win7 64. Nvidia factory drivers.

And the Nexus7 Android 4.2 which is a NVIDIA Tegra 3 T30L with a ULP GeForce GPU ?

In the kivy start up...

[INFO   ] [Loader      ] using <pygame> as thread loader

[DEBUG  ] [App         ] kv <./main.kv> not found

[INFO   ] [Window      ] using <pygame> as window provider

[INFO   ] [GL          ] OpenGL version <3.3.0 NVIDIA 304.64>

[INFO   ] [GL          ] OpenGL vendor <NVIDIA Corporation>

[INFO   ] [GL          ] OpenGL renderer <GeForce 9800 GT/PCIe/SSE2>

[INFO   ] [GL          ] Shading version <3.30 NVIDIA via Cg compiler>

[INFO   ] [GL          ] Texture max size <8192>

[INFO   ] [GL          ] Texture max units <32>

[INFO   ] [GL          ] OpenGL parsed version: 3, 3

[INFO   ] [Shader      ] fragment compiled successfully

[INFO   ] [Shader      ] vertex compiled successfully

I think will charge up and dust off my Netbook which has a dual boot and has an Intel GPU. Put Kivy on it and see what happens. If it still works :)

[Akshay Arora]

Issue is reproducible on DesireHD With Jelly-Bean

--
 
 

[Gabriel Pettier]

Le 17 nov. 2012 15:15, "T500" <gw7...@gmail.com> a écrit :
>
> I CAN reproduce the error with tshirtman's gist on both my PC and Google Nexus 7. I have no idea if the ATI uses Nvidia chips as I seem to remember Nvidia acquired ATI? 
>

That would be amd, not nvidia

> My PC is running the Nvidia GeForce 9800. The ring appears in both Linux (OpenSuSE 12.1 64) and Win7 64. Nvidia factory drivers.
> And the Nexus7 Android 4.2 which is a NVIDIA Tegra 3 T30L with a ULP GeForce GPU ?
>
> In the kivy start up...
>
> [INFO   ] [Loader      ] using <pygame> as thread loader
> [DEBUG  ] [App         ] kv <./main.kv> not found
> [INFO   ] [Window      ] using <pygame> as window provider
> [INFO   ] [GL          ] OpenGL version <3.3.0 NVIDIA 304.64>
> [INFO   ] [GL          ] OpenGL vendor <NVIDIA Corporation>
> [INFO   ] [GL          ] OpenGL renderer <GeForce 9800 GT/PCIe/SSE2>
> [INFO   ] [GL          ] Shading version <3.30 NVIDIA via Cg compiler>
> [INFO   ] [GL          ] Texture max size <8192>
> [INFO   ] [GL          ] Texture max units <32>
> [INFO   ] [GL          ] OpenGL parsed version: 3, 3
> [INFO   ] [Shader      ] fragment compiled successfully
> [INFO   ] [Shader      ] vertex compiled successfully
>

> I think will charge up and dust off my Netbook which has a dual boot and has an Intel GPU. Put Kivy on it and see what happens. If it still works :)
>
>
>
>

> --
>  
>  

[Mathieu Virbel]

Hi everyone,

I also reproduce the bug. But one thing, you are using a GIF, with
indexed color. The GPU doesn't work with indexed, and someone in the
pipeline is converting the image to RGBA.

I used Gimp to convert the gif into png:
1. Image -> Mode -> RGB (it's Indexed on the GIF)
2. Export -> PNG

And then, no ring of death.

I'm using NVidia GTX 560 / NVidia driver 304.51.

Mathieu


Le 17/11/2012 15:15, T500 a �crit :

> I CAN reproduce the error with tshirtman's gist on both my PC and Google
> Nexus 7. I have no idea if the ATI uses Nvidia chips as I seem to
> remember Nvidia acquired ATI?
>
> My PC is running the Nvidia GeForce 9800. The ring appears in both Linux
> (OpenSuSE 12.1 64) and Win7 64. Nvidia factory drivers.
> And the Nexus7 Android 4.2 which is a NVIDIA Tegra 3 T30L with a ULP
> GeForce GPU ?
>
> In the kivy start up...
>
> [INFO ] [Loader ] using <pygame> as thread loader
> [DEBUG ] [App ] kv <./main.kv> not found
> [INFO ] [Window ] using <pygame> as window provider
> [INFO ] [GL ] OpenGL version <3.3.0 NVIDIA 304.64>
> [INFO ] [GL ] OpenGL vendor <NVIDIA Corporation>
> [INFO ] [GL ] OpenGL renderer <GeForce 9800 GT/PCIe/SSE2>
> [INFO ] [GL ] Shading version <3.30 NVIDIA via Cg compiler>
> [INFO ] [GL ] Texture max size <8192>
> [INFO ] [GL ] Texture max units <32>
> [INFO ] [GL ] OpenGL parsed version: 3, 3
> [INFO ] [Shader ] fragment compiled successfully
> [INFO ] [Shader ] vertex compiled successfully
>

> <https://lh4.googleusercontent.com/-vBvbGnEkouQ/UKeaU8DZICI/AAAAAAAAEK4/lEQRoL9ZJ64/s1600/capture_003_17112012_134513.jpg>

>
> I think will charge up and dust off my Netbook which has a dual boot and
> has an Intel GPU. Put Kivy on it and see what happens. If it still works :)
>
>
>
>

> --
>
>

[Akshay Arora]

I can confirm using the png no ring of death on DesireHD.

On Sat, Nov 17, 2012 at 8:29 PM, Mathieu Virbel <txp...@gmail.com> wrote:

Hi everyone,

I also reproduce the bug. But one thing, you are using a GIF, with
indexed color. The GPU doesn't work with indexed, and someone in the
pipeline is converting the image to RGBA.

I used Gimp to convert the gif into png:
1. Image -> Mode -> RGB (it's Indexed on the GIF)
2. Export -> PNG

And then, no ring of death.

I'm using NVidia GTX 560 / NVidia driver 304.51.

Mathieu

--

[T500]

Thanks everyone, problem solved. I shall explain for benefit of other mere mortals that may fall down the hole.

"The GPU doesn't work with indexed," - That bullet of confirmation, as qua-non raised with the GPU question.

I was in Win7 and had used Photoshop to batch process the gif frames into a single frames for all the celestial images used in the app. Originally in PNG, but I had the ring problem and tested GIF to confirm. 

I just took the GIF image in photoshop, saved as PNG as RGB. Here it is photoshop please note the top line, layer0 RGB/8. And having tested the method before running the batch script the resultant image appears to be the right flavor.

Its saved as PNG, and... we have a white ring. So whats going on. Its not RGB its RGBA. Now paste it onto to a new canvas with these settings into photoshop...

Note the change of the default "Background Contents" from "White" to "Transparent". Paste in the old image and save as PNG, NO ring, yepeee!

It seems in batch mode the transparency tick box dialog is suppressed and mode ignored.

Perhaps using Gimp to convert the gif into png: 

1. Image -> Mode -> RGB (it's Indexed on the GIF) 
2. Export -> PNG 

 

...doing this 412 times on reflection sounds like less hassle than taking the batch route :)

Thanks everyone, your help is greatly appreciated. White ring is dead... Confirmed!

[Mathieu Virbel]

My guess is almost the same as qua-non. But with moderation: we never
send a indexed image in the GPU: our image core-provider convert the
source image always in RGBA, 4 channels.

Forget about the GPU for a moment.

In the GIF, the alpha layer is 1 bit (on/off.)
In the PNG, the alpha layer is 8 bit (0-255)
-> In the GIF case, the alpha layer will be converted to 8 bit.

Now what is the difference exactly between the converted GIF->PNG Alpha
channel VS PNG alpha channel ? I have no idea. I guess the best would be
to extract it and show it as gray image to see the difference. Then we
would be able to explain what's wrong.

If you don't use any alpha channel, i guess the value used is the alpha
from the current color. But it's just a guess.

Mathieu

Le 17/11/2012 18:00, T500 a �crit :

> Thanks everyone, problem solved. I shall explain for benefit of other
> mere mortals that may fall down the hole.
>

> "_The GPU doesn't work with indexed,_" - That bullet of confirmation,

> as qua-non raised with the GPU question.
>
> I was in Win7 and had used Photoshop to batch process the gif frames
> into a single frames for all the celestial images used in the
> app. Originally in PNG, but I had the ring problem and tested GIF to
> confirm.
>
> I just took the GIF image in photoshop, saved as PNG as RGB. Here it is

> photoshop please note the top line,_layer0 RGB/8_. And having tested the

> method before running the batch script the resultant image appears to be
> the right flavor.
>

> <https://lh6.googleusercontent.com/-FZWV2_UD_Mk/UKe99-WzE5I/AAAAAAAAELI/Y41RZTMBMGI/s1600/capture_004_17112012_161457.jpg>

>
> Its saved as PNG, and... we have a white ring. So whats going on. Its
> not RGB its RGBA. Now paste it onto to a new canvas with these settings
> into photoshop...
>

> <https://lh6.googleusercontent.com/-zftAi3S0b20/UKe-jz3zYwI/AAAAAAAAELQ/Q87RY2pn9SM/s1600/capture_005_17112012_161644.jpg>

>
> Note the change of the default "Background Contents" from "White" to
> "Transparent". Paste in the old image and save as PNG, NO ring, yepeee!
> It seems in batch mode the transparency tick box dialog is suppressed
> and mode ignored.
>
> Perhaps using Gimp to convert the gif into png:
>
> 1. Image -> Mode -> RGB (it's Indexed on the GIF)
> 2. Export -> PNG
>
> ...doing this 412 times on reflection sounds like less hassle than
> taking the batch route :)
>
> Thanks everyone, your help is greatly appreciated. White ring is dead...
> Confirmed!
>

> --
>
>