How To Replace Kivy Widgets On Callback?

Question

I'm new to Python and Kivy, and I'm trying to create multipage display of letters of the braille alphabet, with the corresponding braille's letter picture present in every page. I really want to learn more about creating Kivy desktop apps. I really hope you can help me. What I'm trying to do is have a page look like this:

I know how images and buttons are placed and customized in terms of size and position in the KV file. However what I need to learn is how add_widget() and clear_widget() will factor in this. I have read the Kivy docs but they barely explain how I could achieve what I need. What I thought of doing is using the from kivy.uix.screenmanager import ScreenManager, Screen feature, and then just create 26 screens and route them via on_click in the kv file. But that's tedious and too manual. Here's my code so far:

class LetterAScreen(Screen):
    pass

class LetterBScreen(Screen):
    pass

class LetterCScreen(Screen):
    pass

class LetterDScreen(Screen):
    pass

class LetterEScreen(Screen):
    pass

class LetterFScreen(Screen):
    pass

class LetterGScreen(Screen):
    pass

 #.... so and so until Letter Z




sm = ScreenManager(transition=SwapTransition())

#LearnScreen - Alphabet
sm.add_widget(LetterAScreen(name='lettera'))
sm.add_widget(LetterBScreen(name='letterb'))
sm.add_widget(LetterCScreen(name='letterc'))
sm.add_widget(LetterDScreen(name='letterd'))
sm.add_widget(LetterEScreen(name='lettere'))

sm.add_widget(LetterFScreen(name='letterf'))
sm.add_widget(LetterGScreen(name='letterg'))
sm.add_widget(LetterHScreen(name='letterh'))
sm.add_widget(LetterIScreen(name='letteri'))
sm.add_widget(LetterJScreen(name='letterj'))
sm.add_widget(LetterKScreen(name='letterk'))
sm.add_widget(LetterLScreen(name='letterl'))

sm.add_widget(LetterMScreen(name='letterm'))
sm.add_widget(LetterNScreen(name='lettern'))
sm.add_widget(LetterOScreen(name='lettero'))
sm.add_widget(LetterPScreen(name='letterp'))
sm.add_widget(LetterQScreen(name='letterq'))
sm.add_widget(LetterRScreen(name='letterr'))

sm.add_widget(LetterSScreen(name='letters'))
sm.add_widget(LetterTScreen(name='lettert'))
sm.add_widget(LetterUScreen(name='letteru'))
sm.add_widget(LetterVScreen(name='letterv'))
sm.add_widget(LetterWScreen(name='letterw'))
sm.add_widget(LetterXScreen(name='letterx'))
sm.add_widget(LetterYScreen(name='lettery'))
sm.add_widget(LetterZScreen(name='letterz'))

I haven't gotten around the kv file because i'm clueless how this will pan out. What I need to do is create widgets or a function that will swap out the images of the current letter and display those of the next or previous ones when the next/button is clicked, without having to switch screens every single time. I'm really unfamiliar with how functions work in Kivy and Python. I hope you could help me. Thank you.

Answer 1

Here is a simple solution to your problem. I'll leave it to you to modify and make it look and work exactly how you want :)

Learning the kv language is INCREDIBLY helpful, easy, and it can be picked up quite quickly.

main.py

from kivy.app import App

class MainApp(App):
    alphabet = 'abcdefghijklmnopqrstuvwxyz'

    def next_letter(self):
        # Get a reference to the widget that shows the letters
        # self.root refers to the root widget of the kv file -- in this case,
        # the GridLayout
        current_letter_widget = self.root.ids['the_letter_label']
        # Get the letter currently shown
        current_letter = current_letter_widget.text
        # Find the next letter in the alphabet
        next_letter_index = self.alphabet.find(current_letter) + 1
        next_letter = self.alphabet[next_letter_index]

        # Set the new letter in the widget that shows the letters
        current_letter_widget.text = next_letter

MainApp().run()

main.kv

GridLayout: # This is the `root` widget of the main app class
    cols: 1
    Label:
        text: "g"
        id: the_letter_label # Setting an id for a widget lets you refer to it later
    Button:
        text: "Previous"
    Button:
        text: "Next"
        on_release:
            # the keyword `app` references the main app class, so we can call
            # the `next_letter` function
            app.next_letter()

I'm happy to address specific questions if you have them.