33. Image

The Image widget allows us to display images. Like other widgets it is derived from the Widget class but has more properties.

---

We import the App class as usual. The root is based on GridLayout. We will also use a NumericProperty to see which image was clicked.

---

In the root class, we have the variable Num, a NumericProperty with an initial value of 10. Then we have two string variables. These are used to build a list of strings in NumSel.

---

We have to create a subclass of the App class.

#ex33.py

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.properties import NumericProperty

class Ex33(GridLayout):
    Num = NumericProperty(10)
    str0 = '[color=224422][size=64]Number: '
    str1 = '.[/color][/size]'
    NumSel = 11*[None]
    for i in range(11):
        NumSel[i]=str0 + str(i) + str1

class Ex33App(App):
    def build(self):
        return Ex33()

if __name__ == '__main__':
    Ex33App().run()

---

In the kv file, we set 3 rows and set the background as red.

---

Row 1 is based on BoxLayout. The default orientation is horizontal. There are four images. For each, we check the coordinates and update Num, if either is selected.

---

In the BoxLayout for Row 2, we again have 4 images which will update Num if they are clicked.

---

For Row 3 BoxLayout, the first 2 elements are Images.

---

The last element is a Label. It's x size hint is 2 so it is twice as wide as the images in this row. In the canvas.before we set the color slightly bluish. If we use canvas, it will overwrite the text. The text property is set to one of the elements of the list.

# Ex33.kv

<Ex33>:
    rows: 3
    canvas:
        Color:
            rgb: 1,0,0
        Rectangle:
            pos: self.pos
            size: self.size
    BoxLayout:
        Image:
            source: 'num0.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=0
        Image:
            source: 'num1.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=1
        Image:
            source: 'num2.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=2
        Image:
            source: 'num3.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=3
    BoxLayout:
        Image:
            source: 'num4.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=4
        Image:
            source: 'num5.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=5
        Image:
            source: 'num6.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=6
        Image:
            source: 'num7.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=7
    BoxLayout:
        Image:
            source: 'num8.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=8
        Image:
            source: 'num9.png'
            on_touch_down: if self.collide_point(*args[1].pos): root.Num=9
        Label:
            canvas.before:
                Color:
                    rgb: .9,.8,1
                Rectangle:
                    size: self.width-20,self.height-100
                    pos: self.x+10,self.y+50
            size_hint_x: 2
            text: root.NumSel[root.Num]
            markup: True

---

This is the result for the case when the number 5 image was clicked. These images are from opengameart website where we earlier got the grandfather clock. You can go to that site and search for numbers. These particular images have a size of 128 by 128 pixels.

---