Need help changing image in a toga.imageview

[vachanmn123]

I just started toga, so I am a newbie..

So I have a program in which I need to change the image when a button is clicked, so I tried various things but none seemed to work.. Can someone please help?

[freakboy3742]

Set the image attribute on your ImageView.

my_image_view.image = 'new image.png'

[vachanmn123]

    def translate(self, widget):
        inp = self.inp_input.value
        for alpha in inp:
            self.image.image = toga.images.Image(f'signs/{alpha}.jpg')
            time.sleep(2)

I am trying to do this but its not working since it just does the wait then just skips to the last alphabet..
this works perfectly in PyQT5 though as you can see PyQT5 below:

self.image.setPixmap(QtGui.QPixmap("./signs/all_alphabets.jpg"))

I am also attaching the whole file
||

import toga
from toga.style import Pack
from toga.style.pack import COLUMN, DIRECTION_CHOICES, ROW
import time


class HelloWorld(toga.App):
    def startup(self):
        main_box = toga.Box(style=Pack(direction=COLUMN))

        inp_label = toga.Label(
            'English: ',
            style=Pack(padding=(0, 5))
        )
        self.inp_input = toga.TextInput(style=Pack(flex=1))

        inp_box = toga.Box(style=Pack(direction=ROW, padding=5))
        inp_box.add(inp_label)
        inp_box.add(self.inp_input)

        self.image_box = toga.Box(style=Pack(padding=5, direction=ROW, width=700, height=500))
        img = toga.images.Image('img.jpg')
        self.image = toga.ImageView(img, id='out_img')
        self.image_box.add(self.image)

        button = toga.Button(
            'Translate',
            on_press=self.translate,
            style=Pack(padding=5)
        )

        main_box.add(inp_box)
        main_box.add(button)
        main_box.add(self.image_box)

        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = main_box
        self.main_window.show()

    def translate(self, widget):
        inp = self.inp_input.value
        for alpha in inp:
            self.image.image = toga.images.Image(f'signs/{alpha}.jpg')
            time.sleep(2)



def main():
    return HelloWorld()

[freakboy3742]

GUIs only update when they're in the "redraw" portion of their application event loop. An event handler is executed as part of the same event loop, so if you're currently in a handler, the redraw portion of the event loop isn't being processed. As a result, any changes to the image won't be redrawn until you get to the end of the handler, at which point the value of the image at the end of the handler will be the "current" image, and it will be the image that is drawn.

The call to sleep() is also problematic. The handler will be blocking the event loop until the entire handler method has finished; by calling sleep(), the handler will take multiple seconds to complete, during which time the event loop isn't happening. This means the app can't redraw, handle mouse clicks or resize events, or do any of the other background work that is needed to keep an app running. You should notice that your app locks up while that handler is processing.

The fix for both of these problems is the same - you need to instruct the handler to release control to the event loop. If you replace time.sleep(2) with yield 2, that will instruct the handler to release control to the event loop for 2 seconds, rather than blocking inside the handler. That will still cause a 2 second delay, but won't block the event loop, so (a) the app won't lock up, and (b) the app will have a chance to redraw the changed image.

I can't comment on why the "same code" works with Qt - I know almost nothing about the internals of Qt. I can only assume they have some framework-level handling that runs event handlers in a separate thread, or forces a redraw on certain changes.

[vachanmn123]

Thank you it works now!