ActionBar ActionButton dynamic icon

[Patrick Kaim]

Hi,

I'm quit new to Kivy development (or Python in general) but eager to learn. For an app which has to run on a Raspberry Pi I'm trying to create an ActionBar on which 4 ActionButtons are placed. These buttons serve two functions:

1. If a USB device is connected the icon of the button has to change

2. If the icon has changed then the user is able to click the button to load specific data from the USB device.

I've tried a very simple setup just to see if I can add an ActionBar with 4 ActionsButtons. So far so good.

I can add an icon to the button. But when I try to make it an object and asign it to the button I'll see the button as a white square instead of the chosen icon.

Setting the icon dynamically doesn't work at all.

Can someone get me in the right direction?

main.py

from kivy.app import App
from os.path import dirname, join
from kivy.lang import Builder
from kivy.properties import NumericProperty, StringProperty, BooleanProperty, ListProperty
from kivy.uix.screenmanager import Screen

class TheBoxScreen(Screen):
    fullscreen = BooleanProperty(False)


class TheBoxApp(App):
    index = NumericProperty(-1)
    screen_names = ListProperty([])
    img_usb1 = "appbar.usb.drive.png"
    img_usb2 = "appbar.usb.drive.png"
    img_usb3 = "appbar.usb.drive.png"
    img_usb4 = "appbar.usb.drive.png"

    def build(self):
        pass

     
    def set_usb_color(self,color,usb):
        if (usb == 1):
            self.img_usb1 = "appbar.usb.drive."+color+".png"
        elif (usb == 2):
            self.img_usb2 = "appbar.usb.drive."+color+".png"
        elif (usb == 3):
            self.img_usb3 = "appbar.usb.drive."+color+".png"
        elif (usb == 4):
            self.img_usb4 = "appbar.usb.drive."+color+".png"


    def close_app(self):
        pass    

             

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

thebox.kv

#: kivy 1.9.2
#:import KivyLexer kivy.extras.highlight.KivyLexer
#:import Factory kivy.factory.Factory

BoxLayout:
    orientation: 'vertical'
    spacing: 10

    canvas.before:
        Color:
            rgb: .6, .6, .6

        Rectangle:
            size: self.size
            source: 'data/background.png'

           
    ActionBar:
        ActionView:
            id: av

            ActionPrevious:
                with_previous: False
                app_icon: 'data/icons/logo_icon.png'
                app_icon_height: 35
                app_icon_width: 35
                title: 'The Box'

            ActionButton:
                id: btn_usb1
                text: ''
                icon: app.img_usb1

            ActionButton:
                id: btn_usb2
                text: ''
                icon: app.img_usb2

            ActionButton:
                id: btn_usb3
                text: ''
                icon: 'data/icons/appbar.usb.drive.png'

            ActionButton:
                id: btn_usb4
                text: ''
                icon: 'data/icons/appbar.usb.drive.png'

[ZenCODE]

Try setting them as Kivy properties i.e.

    img_usb1 = StringProperty("appbar.usb.drive.png" )

Only Kivy properties or dynamically detected when changed....

[Patrick Kaim]

Thanks ZenCODE,

I've tried this but still my icons appear as a white square.

The first two are set as object img_usb1 the last two are set in the kv file as string 'data/icons/appbar.usb.drive.png'

[Fari Tigar]

Have a look at KivyMD, there is a demo app (kitchensink)  which is nice design extension to the standard widgets, and there you have a good reference for stuff like your request:  https://gitlab.com/kivymd/KivyMD

[Patrick Kaim]

Thanks Fari Tigar,

I'll look into that!

[Patrick Kaim]

ow man, I'm such an idiot.

Solved the problem. It was just a missing path.

img_usb1 = path + imagename

My apologies for such a rookie mistake

[ZenCODE]

No worries. We've all been there....:-)