I've tried multiple different solutions for this and I'm out of idea's. I'm brand new to Kivy and still learning. I'm building a very basic memorization game. I need the buttons inside the grid to blink in a certain order. I'm confident that I can make that work, however I can't figure out how to get one of the buttons to blink. Can anyone point me in the right direction? I know I just need need it to change colors for a second and then change back.
from kivy.app import App
from kivy.clock import Clock
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from random import random
import time
class MemorizeGame(GridLayout):
def __init__(self, **kwargs):
super(MemorizeLayout, self).__init__(**kwargs)
self.cols = 2
#create buttons
self.button1 = Button(text='', background_color=(0,0,1,1))
self.button2 = Button(text='', background_color=(0,1,1,1))
self.button3 = Button(text='', background_color=(1,0,1,1))
self.button4 = Button(text='', background_color=(0,1,0,1))
self.buttonList = [self.button1, self.button2, self.button3, self.button4]
#add buttons to the screen
for button in self.buttonList:
self.add_widget(button)
def blinkSquare(self):
#logic to make a square blink
class MemorizeApp(App):
def build(self):
game= MemorizeGame()
return game
if __name__ == "__main__":
MemorizeApp().run()
Here's an example of how to do it, using kivy's clock.
from kivy.app import App
from kivy.clock import Clock
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from random import random
import time
from kivy.clock import Clock
from functools import partial
def set_color(button, color, *args):
button.color = color
class MemorizeGame(GridLayout):
def __init__(self, **kwargs):
super(MemorizeGame, self).__init__(**kwargs)
self.cols = 2
#create buttons
self.button1 = Button(text='', background_color=(0,0,1,1))
self.button2 = Button(text='', background_color=(0,1,1,1))
self.button3 = Button(text='', background_color=(1,0,1,1))
self.button4 = Button(text='', background_color=(0,1,0,1))
self.buttonList = [self.button1, self.button2, self.button3, self.button4]
#add buttons to the screen
for button in self.buttonList:
self.add_widget(button)
def blinkSquare(self):
self.button1.background_color = (1, 1, 1, 1)
def reset_color(*args):
self.button1.background_color = (0, 0, 1, 1)
Clock.schedule_once(reset_color, 1)
# alternative:
# Clock.schedule_once(partial(set_color, self.button1, (0, 0, 1, 1)))
def on_touch_down(self, touch):
self.blinkSquare()
class MemorizeApp(App):
def build(self):
game= MemorizeGame()
return game
if __name__ == "__main__":
MemorizeApp().run()
This just blinks the first button, but I'm sure you can extend it to do exactly what you want.
You might find it neatest to make your own button subclass with the color reset function, rather than making a new function each time.
Related
After some days looking for an answer, I finally decided that it was time to ask some more experienced users ! Here is my problem : in the following piece of code (simplified version of the original code), when I open the Dialog by clicking on the button, the opened window doesn't have the right size, and so one part of the GridLayout is appearing outside this popup.
I anyone has an idea, thanks in advance !
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivymd.uix.dialog import MDDialog
class AppClass(MDApp):
def build_toolbar(self):
button = Button(text="Press")
button.bind(on_press=self.popup)
return button
def build(self):
self.theme_cls.theme_style = "Dark"
layout = BoxLayout(orientation='vertical')
toolbar = self.build_toolbar()
layout.add_widget(toolbar)
return layout
#==============================
def popup(self, instance):
print("called")
panel = self.build_settings_panel()
self.dialog = MDDialog(
type="custom",
title="Settings",
content_cls=panel
)
self.dialog.open()
def build_settings_panel(self):
panel = GridLayout(cols=2, row_default_height=100)
for i in range(4):
panel.add_widget(Label(text="Number"))
panel.add_widget(Label(text=str(i)))
return panel
if __name__ == '__main__':
AppClass().run()
It appears that the problem is the size of the panel. way to fix that is to just calculate that size and set it in the build_settings_panel():
def build_settings_panel(self):
row_height = 100
total_height = 0
panel = GridLayout(cols=2, row_default_height=row_height)
for i in range(4):
panel.add_widget(Label(text="Number"))
panel.add_widget(Label(text=str(i)))
total_height +=row_height
panel.height = total_height
return panel
You can try:
row_default_height=9
In your code:
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivymd.uix.dialog import MDDialog
class AppClassjbsidis(MDApp):
def build_toolbar(self):
button = Button(text="Press")
button.bind(on_press=self.popup)
return button
def build(self):
self.theme_cls.theme_style = "Dark"
layout = BoxLayout(orientation='vertical')
toolbar = self.build_toolbar()
layout.add_widget(toolbar)
return layout
#==============================
def popup(self, instance):
print("called")
panel = self.build_settings_panel()
self.dialog = MDDialog(
type="custom",
title="[color=ffffff]Settings",
content_cls=panel
)
self.dialog.open()
def build_settings_panel(self):
panel = GridLayout(cols=2, row_default_height=9)
for i in range(4):
panel.add_widget(Label(text="Number"))
panel.add_widget(Label(text=str(i)))
return panel
if __name__ == '__main__':
AppClassjbsidis().run()
Pictures:
Please I would like to change the position of a button inside the list at any index to move in the x and y coordinate, but I don't seems to get it
import kivy
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.graphics import Color
class LandingScreen(BoxLayout):
def __init__(self, **kwargs):
super(LandingScreen, self).__init__(**kwargs)
self.buttons = [] #we will add references to all buttons here
for x in range(4):
self.buttons.append(Button(text='button ' + str(x+1), size_hint=(0.5, 0.5)))
#make a reference to the button before adding it in
self.add_widget(self.buttons[x])
self.button[2] #change postion
class SplashApp(App):
def build(self):
return LandingScreen()
if __name__ == '__main__':
SplashApp().run()
I want to draw circle in center of FloatLayout. With my knowledges I obtained only default values for this. Why circle in showed code isn't red? Can You explain me process for obtaining necessary coordinates, please?
import kivy
from kivy.config import Config
kivy.config.Config.set('graphics','resizable', False)
from kivy.app import App
from kivy.graphics import Color, Ellipse
from kivy.uix.widget import Widget
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
class Scene(FloatLayout):
def __init__(self, **kwargs):
super(Scene, self).__init__(**kwargs)
def draw_circle(self):
with self.canvas:
Color=(1,0,0)
circ = Ellipse(pos = (self.center_x, self.center_y), size=(20,20))
def on_touch_down(self, touch):
pass
class Game(BoxLayout):
def __init__ (self,**kwargs):
super(Game, self).__init__(**kwargs)
self.orientation = 'vertical'
but1 = Button(text = 'button 1')
self.add_widget(but1)
self.scene = Scene()
self.add_widget(self.scene)
class TestApp(App):
def build(self):
game = Game()
game.scene.draw_circle()
return game
if __name__ == '__main__':
TestApp().run()
You should define the size of your float layout when you create it.
self.scene = Scene(size=(300, 300))
Then your circle should be at the center of the FloatLayout dimensions.
I also think FloatLayout is better used with size_hint and pos_hint instead of fixed coordinates.
You can call draw_circle with Clock to make sure the layout is completely initiated first.
Then make sure to create your color like this Color(1, 0, 0). Not Color = ()
from kivy.config import Config
Config.set('graphics','resizable', False)
from kivy.app import App
from kivy.graphics import Color, Ellipse
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.clock import Clock
class Scene(FloatLayout):
def draw_circle(self, dt):
with self.canvas:
Color(1,0,0)
circ = Ellipse(pos = (self.center_x, self.center_y), size=(20,20))
class Game(BoxLayout):
def __init__ (self,**kwargs):
super(Game, self).__init__(**kwargs)
self.orientation = 'vertical'
but1 = Button(text = 'button 1')
self.add_widget(but1)
self.scene = Scene()
self.add_widget(self.scene)
class TestApp(App):
def build(self):
game = Game()
Clock.schedule_once(game.scene.draw_circle) # call draw_circle on next frame
return game
if __name__ == '__main__':
TestApp().run()
I just start Kivy programming and have a problem with the understanding of doing a layout:
import kivy
kivy.require('1.9.0')
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle, Color
class CornerRectangleWidget(Widget):
def __init__(self, **kwargs):
super(CornerRectangleWidget, self).__init__(**kwargs)
with self.canvas:
Color(1, 0, 1, 1)
self.rect = Rectangle(size_hint=(1,None),height=48)
class ControllerApp(App):
def build(self):
Window.clearcolor = (1, 0, 0, 1)
root = FloatLayout(size_hint=(1,1))
root.add_widget(CornerRectangleWidget())
return root
if __name__ == '__main__':
ControllerApp().run()
Why is my CornerRectangleWidget keeping so small. I wanted to have a FloatLayout with Fullscreen and the CornerRectangleWidget too.
Actually I want to build the Widget "CornerRectangleWidget" to a floating top Toolbar with the x dimensins of the root Widget "FloatLayout size_hint=(1,None)"! How to do that?
Rectangle doesn't have a size_hint, you need to set a pos and size.
You'll also need to bind to a function to update its position when the widget position changes, as during the __init__ it will have the default pos of (0, 0) and size of (100, 100). This is described here.
I want to make a game and I have chosen Kivy for my GUI, as I have written my backend in Python. I am currently using runTouchApp(appwindow) to run the application, where appwindow is a FloatLayout() object. The way I update my screen is that I run appwindow.clear_widgets() and then appwindow.add_widget(new_screen) where new_screen is the layout object which contains all other widgets.
It worked fine till now, but for some reason I can't understand the widget I add gets loaded properly (according to the cmd running in the background) but won't display till I change the screen size.
Here is a sample code:
import kivy
kivy.require('1.1.1')
from kivy.base import runTouchApp
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
appwindow = FloatLayout()
class MenuScreen():
def build(self):
bg = Image(source = 'Images/bg/bg.jpg',allow_stretch= True,keep_ratio= False)
box = BoxLayout(orientation = 'vertical')
menu_items = []
for i in range (0,4):
button = Button(text = 'Menu item no:'+str(i))
button.bind(state = checkMenuPress)
menu_items.append(button)
for button in menu_items:
box.add_widget(button)
floater = FloatLayout(size = bg.size)
floater.add_widget(bg)
floater.add_widget(box)
floater.size_hint = 1,1
return floater
class SecondScreen():
def build(self):
bg = Image(source = 'Images/bg/bg.jpg',allow_stretch= True,keep_ratio= False)
box = BoxLayout(orientation = 'vertical')
box.add_widget(bg)
return box
def checkMenuPress(button,*args):
if button.state == 'normal':
sc = SecondScreen().build()
appwindow.clear_widgets()
appwindow.add_widget(sc)
if __name__ == '__main__':
menuscreen = MenuScreen().build()
appwindow.add_widget(menuscreen)
runTouchApp(appwindow)
Okay, there are a few things wrong here. To create an app, you should subclass kivy.app.App and have it's build method return the "root" widget. Only this class needs build method: any others are redundant.
Once you have a root widget, it's just a matter of inserting and removing widgets. This is how I would approach it.
import kivy
kivy.require('1.1.1')
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
from kivy.app import App
class MenuScreen(App):
floater = None
def build(self):
bg = Image(source='Images/bg/bg.jpg',
allow_stretch= True,
keep_ratio= False)
box = BoxLayout(orientation='vertical')
menu_items = []
for i in range(0, 4):
button = Button(text='Menu item no:'+str(i))
button.bind(state=self.checkMenuPress)
menu_items.append(button)
for button in menu_items:
box.add_widget(button)
self.floater = FloatLayout(size=bg.size)
self.floater.add_widget(bg)
self.floater.add_widget(box)
self.floater.size_hint = 1, 1
return self.floater
def checkMenuPress(self, button,*args):
if button.state == 'normal':
self.floater.clear_widgets()
self.floater.add_widget(SecondScreen())
class SecondScreen(FloatLayout):
def __init__(self, **kwargs):
super(SecondScreen, self).__init__(**kwargs)
self.add_widget(Image(source='Images/bg/bg.jpg',
allow_stretch=True,
keep_ratio=False))
if __name__ == '__main__':
MenuScreen().run()
Okay, so here's a quick rework of the example using Screens. It's difficult without knowing what you are trying to do, so if this does not help, try writing summary of the behavior you are looking for.
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
class MenuScreen(Screen):
"""
The Screen containing the menu
"""
def __init__(self, sm, **kwargs):
super(MenuScreen, self).__init__(**kwargs)
self.sm = sm # Store a reference to the screen manager
bg = Image(source='Images/bg/bg.jpg',
allow_stretch= True,
keep_ratio= False)
box = BoxLayout(orientation='vertical')
menu_items = []
for i in range(0, 4):
button = Button(text='Menu item no:'+str(i))
button.bind(state=self.check_menu_press)
menu_items.append(button)
for button in menu_items:
box.add_widget(button)
floater = FloatLayout(size=bg.size)
floater.add_widget(bg)
floater.add_widget(box)
floater.size_hint = 1, 1
self.add_widget(floater)
def check_menu_press(self, button, *args):
if button.state == 'normal':
self.sm.current = "second"
class SecondScreen(Screen):
def __init__(self, sm, **kwargs):
super(SecondScreen, self).__init__(**kwargs)
self.add_widget(Image(source='Images/bg/bg.jpg',
allow_stretch=True,
keep_ratio=False))
self.sm = sm # Store a reference to the screen manager
def on_touch_down(self, touch):
self.sm.current = "menu"
class MainApp(App):
def build(self):
sm = ScreenManager()
sm.add_widget(MenuScreen(sm, name="menu"))
sm.add_widget(SecondScreen(sm, name="second"))
return sm
if __name__ == '__main__':
MainApp().run()
looks like i have found a source of the crashing problem. I had used multi-threading for a server client interaction. i had been using two extra threads, one for the server and another for the client. If i try to integrate the client thread with the GUI it raises another problem. even if the socket.recv() is after the ScreenManager.current = "newscreen" line, the app's screen does not change. it freezes in the way i left it. it resumes only after it gets a message from the server.