How do I load an image into a kivy window using a button?

user_14795747 0
Viewed 450

I am trying to use kivy with Python to develop a quick app with sliders where one has to use the sliders first to determine a setting and then click a 'Submit' which then loads the desired image into the app window.

I currently have examples in my .kv file to insert a button and an image indiviudally, but I'm not sure how to connect them:

BoxLayout:
    orientation:'vertical'
    size: root.width,root.height
    font_size: 20
    padding: 100
    spacing: 10

    Button:
        text: 'press me'
        on_press: print("ouch! More gently please")
        on_release: print("ahhh")
        on_state:
        #print("my current state is {}".format(self.state))
        size_hint: (0.3,0.3)

    Image:
        source: 'images\IMG_6980.jpg'
        #allow_stretch: True
        #keep_ratio: True
        pos_hint: {'center_x':0.7}

I feel like I need to do something with the on_press statement but I'm not quite sure what. Any help is appreciated.

kivy-language kivy user-interface python
1 Answers

I have given you an example below of how to generate an image from a button using the on_press method as you have described. By using the factory module, you can generate templates created in your *.kv files. So to complete your program, you would create more of these templates, and then generate the appropriate image template in your on_press method using conditionals. You could alternatively try to create dynamic templates within Python, but I believe my example to be more simple.

test.py:

import kivy
kivy.require('2.0.0')

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout


class TestBoxLayout(BoxLayout):
    pass


class TestApp(App):
    def build(self):
        return TestBoxLayout()


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

test.kv:

#: import Factory kivy.factory.Factory


<TestImage@Image>:
    source: 'test.jpg'
    #allow_stretch: True
    #keep_ratio: True
    pos_hint: {'centre_X':0.7}


<TestBoxLayout>:
    orientation:'vertical'
    size: root.width,root.height
    font_size: 20
    padding: 100
    spacing: 10

    Button:
        text: 'press me'
        on_press: root.add_widget(Factory.TestImage())
        on_release: print("ahhh")
        on_state:
        #print("my current state is {}".format(self.state))
        size_hint: (0.3,0.3)

To extend this solution to your comment, I have given a further example below. I want to reiterate that my example is designed to be simple to understand and can certainly be done more efficiently, but hopefully this acts as a clear solution to your problem. Please mark this as the best answer if this fulfils your needs!

test.kv:

#: import Factory kivy.factory.Factory


<TestImage1@Image>:
    source: 'test_1.jpg'
    #allow_stretch: True
    #keep_ratio: True
    pos_hint: {'centre_X':0.7}


<TestImage2@Image>:
    source: 'test_2.jpg'
    #allow_stretch: True
    #keep_ratio: True
    pos_hint: {'centre_X':0.7}


<TestBoxLayout>:
    orientation:'vertical'
    size: root.width,root.height
    font_size: 20
    padding: 100
    spacing: 10

    Slider:
        id: slider
        min: 1
        max: 2
        step: 1

    Button:
        text: 'press me'
        on_press: 
            if slider.value == 1: root.add_widget(Factory.TestImage1())
            elif slider.value == 2: root.add_widget(Factory.TestImage2())
        on_release: print("ahhh")
        on_state:
        #print("my current state is {}".format(self.state))
        size_hint: (0.3,0.3)
user_146922180
Related