How to place a button on a loading animation with Kivy? - button

Question

I'm really new to Kivy, i'm trying to make my first app, but i don't really understand how to play with elements and classes...
I'm trying to put a button to stop the sound but it will just stop the animation....
Here's the code, i think i don't code it properly ! :(
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.animation import Animation
from kivy.properties import NumericProperty
from kivy.core.audio import SoundLoader
from kivy.uix.button import Button
from functools import partial
from kivy.uix.boxlayout import BoxLayout
Builder.load_string('''
<App_container>:
canvas.before:
PushMatrix
Rotate:
angle: root.angle
axis: 0, 0, 1
origin: root.center
canvas.after:
PopMatrix
Image:
id: img_anim
source: 'logo.png'
size_hint: 0,0
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
''')
class App_container(FloatLayout):
angle = NumericProperty(0)
def __init__(self, **kwargs):
#Anim
super(App_container, self).__init__(**kwargs)
anim = Animation(angle = 360, duration=2)
anim2 = Animation(size_hint=(2,2), duration=2)
anim.start(self)
anim2.start(self.ids["img_anim"])
#Son
self.sound = SoundLoader.load('zik.wav')
self.sound.loop = True
self.sound.play()
#boutonzik
btn = Button(text ="Push Me !")
self.add_widget(btn)
btn.bind(on_press=partial(self.foo, btn))
def foo(self, instance, *args):
self.sound.volume=0
class TestApp(App):
def build(self):
return App_container()
if __name__ == "__main__":
app = TestApp()
app.run()

Answer 1

In order for the Button to not spin, it must not be in the spinning Layout. To do this, you can add another FloatLayout in your App_container, and only spin that FloatLayout. The following modification of your code does that:
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.animation import Animation
from kivy.core.audio import SoundLoader
Builder.load_string('''
<App_container>:
FloatLayout:
# move the angle property into this FloatLayout
angle: 0.0
id: rotate_this
canvas.before:
PushMatrix
Rotate:
angle: self.angle
axis: 0, 0, 1
origin: root.center
canvas.after:
PopMatrix
Image:
id: img_anim
source: 'logo.png'
size_hint: 0,0
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
Button:
text: 'Push Me'
on_press: root.foo(self)
size_hint: 0.1,0.1
pos_hint: {'center_x':0.5, 'center_y':0.5}
''')
class App_container(FloatLayout):
def __init__(self, **kwargs):
#Anim
super(App_container, self).__init__(**kwargs)
anim = Animation(angle = 360, duration=2)
anim2 = Animation(size_hint=(2,2), duration=2)
# rotate the FloatLayout with id "rotate_this"
anim.start(self.ids["rotate_this"])
# animate the "img_anim"
anim2.start(self.ids["img_anim"])
#Son
self.sound = SoundLoader.load('zik.wav')
self.sound.loop = True
self.sound.play()
def foo(self, instance, *args):
self.sound.volume=0
class TestApp(App):
def build(self):
return App_container()
if __name__ == "__main__":
app = TestApp()
app.run()
So the FloatLayout spins, but the Button does not, since it is not inside the spinning FloatLayout.