Search code examples
pythonresizekivypng

How to avoid bumps at my .png's when resizing them in Python/Kivy

I'm new to Kivy and I trying to get myself an kind of template for later upcoming program parts. Now I'm stuck because my wonderful round .png Buttons all get King of "edges/bumps" when I try to resize them.

This is how the Button should look like ... Img01

... and this is what actually happens (please ignore the white background) Img02

I tried it with multiple other .png's so I'm very sure that the problem is not within the .png itself.

Here is my code (I shortened it so that its easy to find the relevant part. if you feel like you need more code, of course I can add it):

test.kv

#:kivy 1.0.9

<MainWindow>:
BoxLayout:
    #[shortened for readability reasons]
    BoxLayout:
        #[shortened for readability reasons]
    BoxLayout:
        #[shortened for readability reasons]
        AnchorLayout:
            #[shortened for readability reasons]
        FloatLayout:
            canvas:
                Rectangle:
                    pos: self.pos
                    size: self.size
            Button:
                id: leftButton
                background_normal: 'assets/graphics/buttons/dummy.png'
                background_down: 'assets/graphics/buttons/.png'
                size_hint: .15, .15
                pos_hint: {'x':root.size_hint_x/2, 'y':root.size_hint_y/2}

Perhaps someone here has an idea whats the problem and how to fix it? Please keep in mind that I want to fix that in the .kv file (if possible) so I can reuse it later on more easily.

Another minor problem is the positioning of some other buttons. I want to get them aligned to the right side, but I couldn't find how to access the width of the button itself so I can subtract it from self.width (which should be the width of the surrounding layout if I got that right)

Any suggestions?

I did a little testing in the meantime to be sure that the file type isn't the problem here. I tried with .gif and .tif, as far as I know the other most common file types that support transparency. The outcome is the same as with .png

To clarify how the design should look in the end I'll add another picture:

Img03

So I think I have to do it with a FloatLayout. I would like to do it with grid like in pyqt, but in kivy it's not possible to define the cell in which the widget should be placed and also not to give it a colspan or rowspan. At least that's what I've read. Please correct me if I'm wrong.

Ok, ikolim's solution works so far, but creates another problem: I can't use background_normal and background_down anymore, but I feel like I must give the user a visual feedback on - for example -clicking the button and holding it down. I thought because I use ButtonBehavier I can also use the background-stuff. But that does not seem to be the case. Anyone out there who can give me a hint on how to solve that?

UPDATE: I got the visual feedback to work now. The solution was that simple that I overlooked it until last friday (and I coul'd come back to a computer with internet until now). So for the interrested reader with similar problems, here is my solution: I now just use the on_press and on_release listeners and change the source of the image there from myPic.png to myPic_clicked.png and vice versa.

So the problem is solved and I will write a complete answer and close this question in a few days. BUT until then, I would really like to know if someone has an idea, WHY I got this bumps. For overall understanding in kivy on the one hand, and on the other hand for avoiding that Problem in future.

Thx in Advance!

Solution

  • Ok, after no one else seems to know what the Original Problem was, here at least a solution that works quite nice.

    ikolims answer is nearly perfectly correct, and I want to honor that. But it also misses an - at least for me - important part. Here is his code. After that I will explain whats missing:

    from kivy.lang import Builder
from kivy.base import runTouchApp

runTouchApp(Builder.load_string('''
#:kivy 1.11.0

<CustomButton@ButtonBehavior+Image>:
GridLayout:
    rows: 1
    canvas:
        Rectangle:
            pos: self.pos
            size: self.size

    CustomButton:
        id: Button0
        source: './dummy.png'
        size_hint: .15, .15
        pos_hint: {'x':root.size_hint_x/2, 'y':root.size_hint_y/2}
        on_release:
            print('CustomButton clicked')

    CustomButton:
        id: Button1
        source: './dummy.png'
        size_hint: .15, .15
        pos_hint: {'x':root.size_hint_x/2, 'y':root.size_hint_y/2}
        on_release:
            print('CustomButton clicked')

    CustomButton:
        id: Button2
        source: './dummy.png'
        size_hint: .15, .15
        pos_hint: {'x':root.size_hint_x/2, 'y':root.size_hint_y/2}
        on_release:
            print('CustomButton clicked')

    CustomButton:
        id: Button3
        source: './dummy.png'
        size_hint: .15, .15
        pos_hint: {'x':root.size_hint_x/2, 'y':root.size_hint_y/2}
        on_release:
            print('CustomButton clicked')
'''))

    The thing is, that if we do that this way the bug with that bumps is gone. But also gone is background_normal and background_down do not work anymore. The solution to this is to use on_pressed and on_release instead and change the source in there.