Pass custom widget properties in Kivy

Question

I am trying to build a custom widget and place it on my Floatlayout in Kivy. Each instance of this custom widget has a gridlayout with an image and a Label. I want to be able to pass the image source and label text for each instance of this custom widget in the .kv file. Can anyone help me figure this out?

My custom widget in the .kv file looks like this:

<CustomWidget@Widget>
    updatedlabel:updatedlabel
    customimage:customimage
    background_color:(0,0,0,0)
    background_normal:''
    canvas.before:
        Color:
            rgba:(181/255,174/255,174/255,1)
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius:[28]
    GridLayout:
        canvas.before:
            Color:
                rgb: utils.get_color_from_hex("#ffffff")
            Rectangle:
                size: self.size
                pos: self.pos
        rows: 2
        cols: 1
        Image:
            id:customimage
            source: ""
        Label:
            id:updatedlabel
            text:''

the corresponding python code:

class CustomWidget(Widget):
    updatedlabel = ObjectProperty(None)
    customimage = ObjectProperty(None)

    imageSource = StringProperty(None)
    labelText = StringProperty(None)

    def __init__(self, **kwargs):
        super(CustomWidget,self).__init__(**kwargs)
        self.bind(labelText=self.setter("labelText"))
        self.bind(customimage=self.setter("customimage"))
        self.updatedlabel.text=self.labelText
        self.customimage.source = self.imageSource
        self.bind(self.updatedlabel.text=self.setter("labelText"))
        self.bind(self.customimage.source = self.setter("customimage"))

and the way i hope to use my custom widget in the .kv file:

    CustomWidget:
        pos_hint:{'x': 0.04, "top": 0.9}
        size_hint_x: 0.16
        size_hint_y: 0.3
        labelText: "I just wrote a text"
        imageSource :"icons/picutre.PNG"

My idea is for each instance of this widget to pass the text in labelText to the Label id "updatedlabel" and the image source under imageSource to Image id "customimage"

I appreciate any hints.

Regards,

Alex

Answer 1

Since you are defining the CustomWidget in the kv, you don't even need to define it in the python. You just need to add the imageSource and labelText properties to the definition in the kv. Here is a complete example using the above concepts:

from kivy.app import App
from kivy.lang import Builder

kv = '''
#:import utils kivy.utils
<CustomWidget@RelativeLayout>  # change base class to a Layout
    labelText: 'None'
    imageSource: ''
    
    updatedlabel:updatedlabel
    customimage:customimage
    
    background_color:(0,0,0,0)
    background_normal:''
    canvas.before:
        Color:
            rgba:(181/255,174/255,174/255,1)
        RoundedRectangle:
            size: self.size
            # pos: self.pos  # just use default of (0,0) because this is in a RelativeLayout
            radius:[28]
    GridLayout:
        rows: 2
        cols: 1
        Image:
            id:customimage
            source: root.imageSource
        Label:
            id:updatedlabel
            text: root.labelText
            size_hint_y: 0.25
            
FloatLayout:
    CustomWidget:
        pos_hint:{'x': 0.04, "top": 0.9}
        size_hint_x: 0.16
        size_hint_y: 0.3
        labelText: "I just wrote a text"
        imageSource: "icons/picutre.PNG"
'''

class TestApp(App):
    def build(self):
        return Builder.load_string(kv)

TestApp().run()