kivy.uix.label.Label with a background image

[GreyGnome]

Hi,

Pretty simple- I want to add a graphic (png or jpeg file) to the background of my kivy.uix.label.Label, and I want to do it in Python because the class will be used for many objects, and the background graphic file will not be known until runtime.

I have looked for examples on this but I don't see one that's so clear. Can someone point me to an example, or post a little code? I imagine it's not that complicated, but I can't imagine how to do it at this moment.

Thanks.

 

[Jeyson Molina]

Maybe using canvas.
canvas.before:
    Rectangle:
        pos: self.pos
        size: self.size
        source: self.image

self.image would be the prop that stores the image path.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[GreyGnome]

Hmm... yes that must be it. But this example is in the .kv language, is it not?

[ZenCODE]

You would also need to add 'image' as a string property in your class definition.

class PicLabel(Label):
    image = StringProperty()

[GreyGnome]

I have created a label class like so:

class MyLabel(Label):
    def __init__(self, *args, **kwargs):
        image = StringProperty()
        super(MyLabel, self).__init__(*args, **kwargs)
        with self.canvas.before:
            Rectangle(source='imagefile.png', pos=self.pos, size=self.size)

...and my labels are as they were before, except there is an image in the lower left (origin) corner of every enclosing container that a label lives in. The image appears to compressed to the exact size of the label but it is obviously not in the same position. 

As well, the image seems to be on top of MyLabel's text. It doesn't matter if I do self.canvas.before or self.canvas.after, it looks the same.

Can I get a little more specific help please? It's not at all clear to me what I need to do. Thanks.

[GreyGnome]

...And it doesn't matter if I include the  image=StringProperty() or not, it appears to make no difference.

[GreyGnome]

On Sunday, May 22, 2016 at 8:36:13 AM UTC-5, Jeyson Molina wrote:

Maybe using canvas.
canvas.before:
    Rectangle:
        pos: self.pos
        size: self.size
        source: self.image

It appears that self.pos is [0, 0] in some, if not all, Layout managers- for example the StackLayout. Is this a known fact?

Is there any dimension that follows a widget when it has been placed in a layout manager? There must be... otherwise Button's could not be created with a background image.

I notice that center_x and center_y are non-zero... do I need to follow them to get the Labels' backgrounds to be placed properly?

 

[GreyGnome]

Just to answer my own questions:

On Wednesday, June 22, 2016 at 5:43:26 PM UTC-5, GreyGnome wrote:

It appears that self.pos is [0, 0] in some, if not all, Layout managers- for example the StackLayout. Is this a known fact?

Is there any dimension that follows a widget when it has been placed in a layout manager? There must be... otherwise Button's could not be created with a background image.

I notice that center_x and center_y are non-zero... do I need to follow them to get the Labels' backgrounds to be placed properly?

At the time of construction, the parent of the Label is None, so of course self.pos is [0,0]. It's not added to any layout or other container at all! Meanwhile, all the center_x's and center_y's of my Labels are identical; they match the center point of the Label (in my case they're all the same size so the numbers are all identical). Thus they're no help.

So the question gets back to: How does the Canvas know where to go? I am going to investigate this https://kivy.org/docs/guide/widgets.html#adding-a-background-to-a-layout and see if it applies to other widgets as well.

 

[GreyGnome]

What is the purpose of this? It doesn't matter if I use it or not in my code.

On Monday, May 23, 2016 at 2:15:56 PM UTC-5, ZenCODE wrote:

Thanks. 

[Jeyson Molina]

At Widget.__init__ you're not guaranteed that all your properties have been set to their final value. You often get pos = [0,0] and size=[100,100] at __init__ because widget's parent (probably a layout) hasn't affected those properties yet.

My suggestion is to use kv language or listen to your props using bind and change the Rectangle pos and size accordingly (self.rectangle=Rectangle(...) in __init__ and in "on_pos" or "in on_size" set self.rectangle.pos = pos , self.rectagle.size=size).

--

[GreyGnome]

Thanks for the reply. Yes, you're right. And I've gotten it to work... but now I have a new strange problem https://groups.google.com/forum/?pli=1#!topic/kivy-users/5sC6WAenPtg

BTW, what is the use of the StringProperty? ZenCODE recommended "image = StringProperty()" but I don't understand what the purpose of instantiating an arbitrarily-named instance of a class. ...Unless it's not arbitrarily named? But I have not been able to find a description of this action yet. 

[ZenCODE]

 The 'image = StringProperty()" is part of the class definition, so all instances will have this property. Making it a StringProperty allows the kv file to bind dynamically to it, so changing thee 'image' property then updates the source property in the kv file.

Hope that makes sense ? :-)

[GreyGnome]

I think I'm beginning to understand. I am able to add an image by making it a StringProperty, setting it when I instantiate an object, and calling the Rectangle as shown:

with self.canvas.before:
    self.rect = Rectangle(source=self.image, pos=self.pos, size=self.size)
# listen to size and position changes

However, when I try to print "str(self.image)" or examine the variable in a debugger, it's just an empty string. ...But it can't be, because the Rectangle is displaying the correct picture?

Why can't I print or see the value of the variable?  Thanks.

[ZenCODE]

You must be setting it somewhere else then, or printing it before it's set.

Your comment "# listen to size and position changes" is also puzzling as the code you posted does not do that? But perhaps it's later on you do that. Either way, without the full code, it's impossible to say exactly what is happening...