How do I display a variable image with a KV file?

Question

I am trying to make a card game with Python and Kivy and can not get the card to display. So far, ChaseTheAce.deal pick a random card and removes it from the deck. I can not figure out how to pass the string from the card dict to the Image in the KV file. I'm new to Kivy and am having trouble with the IDs and what information matches with information from the PY file. Any help is appreciated, thanks!

PY File

import kivy
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.image import Image
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
import random
import numpy as np

cards = ['ace_spades', 'king_spades']
dict = {'ace_spades':'ace_of_spades.png', 'king_spades':'king_of_spades2.png'}

class LoginScreen(Screen):
    pass

class GameScreen(Screen):
    pass

class ScoreScreen(Screen):
    pass

class WindowManager(ScreenManager):
    pass

class ChaseTheAce(App):
    cardimagefile = StringProperty()
    def deal(self):
        mycard = random.choice(cards)
        cards.remove(mycard)
        cardimagefile = (dict[mycard])
    def build(self):
        return kv

kv = Builder.load_file("cta1.kv")

if __name__ == "__main__":
    ChaseTheAce().run()

KV File

<GameScreen>:
    ChaseTheAce:ChaseTheAce
    name: "GameScreen"
    GridLayout:

        rows: 3
        Image:
            id: cardimage
            source: ChaseTheAce.cardimagefile #<<<<<<<<<<<<<<<<<<<
            allow_stretch: True
        GridLayout:
            dealer:deal
            cols: 3

            Button:
                id: deal
                text: "Deal"
                on_release:
                    app.deal()

Edited to remove unrelated parts of the code.

Answer 1

There are a few errors in your example:

• You need a root layout that contains all the stuff of your app.
• You need a ScreenManager to manage your Screens (that you must put inside it).
• To access your cardimagefile property in your .py file, you have to use self.cardimagefile, otherwise you are just creating a new, different, local cardimagefile variable.
• To access your cardimagefile property in your .kv file, you have to use app.cardimagefile

Since I don't have your images, I added a print whenever the source of the Image is changing, and it works fine..

The py code:

cards = ['ace_spades', 'king_spades']
dict = {'ace_spades':'ace_of_spades.png', 'king_spades':'king_of_spades2.png'}

Builder.load_file("cta1.kv")

class LoginScreen(Screen):
    pass

class GameScreen(Screen):
    pass

class ScoreScreen(Screen):
    pass

class WindowManager(ScreenManager):
    pass

class RootLayout(FloatLayout):  # create a root layout
    pass

class ChaseTheAce(App):
    cardimagefile = StringProperty()
    def deal(self):
        mycard = random.choice(cards)
        cards.remove(mycard)
        self.cardimagefile = (dict[mycard])  # the cardimagefile is not local needs self.
    def build(self):
        return RootLayout()  # you must return the root layout here

if __name__ == "__main__":
    ChaseTheAce().run()

The kv code:

<RootLayout>:        # you need a root layout
    WindowManager:   # that contains a ScreenManager
        GameScreen:  # that manages the screens
            # ChaseTheAce:ChaseTheAce  # you don't need this
            name: "GameScreen"
            GridLayout:
                rows: 3
                Image:
                    id: cardimage
                    source: app.cardimagefile #<<<<<<<<<<<<<<<<<<<
                    allow_stretch: True
                    on_source: print(self.source)
                GridLayout:
                    # dealer:deal  # you don't need this
                    cols: 3

                    Button:
                        id: deal
                        text: "Deal"
                        on_release:
                            app.deal()