I am trying to create a drawing app. I define the color of lines (red by default) using Kivy Canvas and the task is I need a button for example 'Green' that will change the color to green. I don't know actually understand how to do it.
What I tried is:
class PainterWidget(Widget):
def on_touch_down(self, touch):
with self.canvas:
self.color = Color(1, 0, 0, 1)
rad = 30
Ellipse(pos = (touch.x, touch.y), size = (rad / 2, rad / 2))
touch.ud['line'] = Line(points = (touch.x, touch.y), width = 15)
def on_touch_move(self, touch):
touch.ud['line'].points += touch.x, touch.y
def blue(self):
with self.canvas:
self.color = Color(0, 0, 1, 1)
class PaintApp(App):
def build(self):
parent = Widget()
self.painter = PainterWidget()
parent.add_widget(self.painter)
parent.add_widget(Button(text='Blue', size=(50, 50), pos=(0, 480), on_press = PainterWidget.blue))
return parent
But it doesn't work. I tried creating the color changing method in PaintApp doing something like PainterWidget.color = Color but it didn't work too.
Add a ListProperty, paint_color and assigned the default red color. When the Button is pressed change paint_color from red to blue. Please refer to the example below for details.
Example
main.py
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.graphics import Color, Ellipse, Line
from kivy.properties import ListProperty
class PainterWidget(Widget):
paint_color = ListProperty([1, 0, 0, 1])
def on_touch_down(self, touch):
with self.canvas:
Color(rgba=self.paint_color)
rad = 30
Ellipse(pos = (touch.x, touch.y), size = (rad / 2, rad / 2))
touch.ud['line'] = Line(points = (touch.x, touch.y), width = 15)
def on_touch_move(self, touch):
touch.ud['line'].points += touch.x, touch.y
def blue(self, instance):
self.paint_color = [0, 0, 1, 1]
class PaintApp(App):
def build(self):
parent = Widget()
self.painter = PainterWidget()
parent.add_widget(self.painter)
parent.add_widget(Button(text='Blue', size=(50, 50), pos=(0, 480), on_press=self.painter.blue))
return parent
if __name__ == "__main__":
PaintApp().run()
Output
Related
How can I get Kivy to animate the position of a Rectangle after an interval? Currently, it is only animating the POSITION 1.
However, I want it to wait 3 seconds before it animates to POSITION 2, wait for 3 more seconds, and then animate to POSITION 3
How can I accomplish this? I'm still new to coding.
(No .kv file was used)
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.graphics import Rectangle
from kivy.graphics import Color
from kivy.animation import Animation
from kivy.core.window import Window
from kivy.clock import Clock
class MyGrid(AnchorLayout):
def __init__(self, **kwargs):
super(MyGrid, self).__init__(**kwargs)
self.inside = GridLayout()
self.inside.cols = 12
for letter in "CANVAS":
self.inside.add_widget(Label(text=str(letter), color=[1, 1, 1, 1], font_size='80sp', ))
self.add_widget(self.inside)
with self.canvas:
# POSITIONS
self.positionLeft_1 = 50
self.positionLeft_2 = 150
self.positionLeft_3 = 250
Color(1, 1, 1, 1, mode='rgba')
self.line_Left = Rectangle(pos=(300, 215), size=(1, 100))
animate_left_line_01 = Animation(pos=(self.positionLeft_1, 215), t='out_circ')
animate_left_line_02 = Animation(pos=(self.positionLeft_2, 215), t='out_circ')
animate_left_line_03 = Animation(pos=(self.positionLeft_3, 215), t='out_circ')
# START ANIMATION
# MOVE TO POSITION 1
animate_left_line_01.start(self.line_Left)
# MOVE TO POSITION 2 AFTER 3 SECONDS
animate_left_line_02.start(self.line_Left)
# MOVE TO POSITION 3 AFTER 3 SECONDS
animate_left_line_03.start(self.line_Left)
def move(self):
pass
def update(self, dt):
self.move()
class MainApp(App):
def build(self):
self.game = MyGrid()
Clock.schedule_interval(self.game.update, 1.0 / 60.0)
return self.game
Window.size = (300, 530)
Window.clearcolor = (0, 0, .5, 1)
if __name__ == "__main__":
MainApp().run()
One way that you can do this is by using Clock.schedule_once() to schedule each animation:
class MyGrid(AnchorLayout):
def __init__(self, **kwargs):
super(MyGrid, self).__init__(**kwargs)
self.inside = GridLayout()
self.inside.cols = 12
for letter in "CANVAS":
self.inside.add_widget(Label(text=str(letter), color=[1, 1, 1, 1], font_size='80sp', ))
self.add_widget(self.inside)
# POSITIONS
self.positionLeft_1 = 50
self.positionLeft_2 = 150
self.positionLeft_3 = 250
with self.canvas:
Color(1, 1, 1, 1, mode='rgba')
self.line_Left = Rectangle(pos=(300, 215), size=(1, 100))
# START ANIMATION
Clock.schedule_once(self.anim1)
Clock.schedule_once(self.anim2, 3)
Clock.schedule_once(self.anim3, 6)
def anim1(self, dt):
# MOVE TO POSITION 1
animate_left_line_01 = Animation(pos=(self.positionLeft_1, 215), t='out_circ')
animate_left_line_01.start(self.line_Left)
def anim2(self, dt):
# MOVE TO POSITION 2
animate_left_line_02 = Animation(pos=(self.positionLeft_2, 215), t='out_circ')
animate_left_line_02.start(self.line_Left)
def anim3(self, dt):
# MOVE TO POSITION 3
animate_left_line_03 = Animation(pos=(self.positionLeft_3, 215), t='out_circ')
animate_left_line_03.start(self.line_Left)
Does anybody know the code to center align a rectangle using kivy but in a py file not kv. This is my code:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle
from kivy.graphics import Color
class PongGame(Widget):
def __init__(self, **kwargs):
super(PongGame, self).__init__(**kwargs)
with self.canvas:
Color(255,255,255, mode='rgba')
self.rect = Rectangle(pos=(self.x + 50, self.y + 50), size=(50, 50))
# print(self.rect)
class PingyPong(App):
def build(self):
return PongGame()
# class MakeRectangle(Widget):
# def __init__(self, **kwargs):
# with self.canvas:
# # Color(255,255,255, mode='rgba')
# self.rect = Rectangle(pos=(200, 200), size=(50, 50))
# class PingPong(App):
# def build(self):
# return Rectangle()
if __name__ == '__main__':
PingyPong().run()
This is the output:
enter image description here
please help
You can do it by getting Window size and then create rectangle at the center
from kivy.core.window import Window
class PongGame(Widget):
def __init__(self, **kwargs):
super(PongGame, self).__init__(**kwargs)
with self.canvas:
Color(255,255,255, mode='rgba')
window_size = Window.size
size = 50
self.rect = Rectangle(pos=(window_size[0]/2-size/2, window_size[1]/2-size/2), size=(size, size))
print()
I want to draw image (*.png file) at FlayoutBox, on pc is result OK, after using KivyLauncher is on phone screen only white square. I tested two variants for drawing (draw_img_cnv and draw_img_wdg), but both results are bad.
Cann you explain me:
why is result white square on phone screen,
why draw_img_wdg isn't centered on pc,
how is diferent between both solutions?
Thank You!
from kivy.app import App
from kivy.graphics import Color, Rectangle, Ellipse
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.image import Image
import math
class Screen(FloatLayout):
def __init__(self, **kwargs):
super(Screen, self).__init__(**kwargs)
self.li_item = []
return
def draw_img_cnv(self):
size_img = (498, 498)
pos_img = (self.center[0] -size_img[0]/2.0, self.center[1] -size_img[1]/2.0)
with self.canvas:
Color(0, 1, 0, 1)
self.rect1 = Rectangle(size=self.size, pos=self.pos)
self. rose = Image(source="rose.png",pos=pos_img,size=size_img )
def draw_img_wdg(self):
size_img = (498, 498)
pos_img = (self.center[0] -size_img[0]/2.0, self.center[1] -size_img[1]/2.0)
with self.canvas:
Color(0, 1, 0, 1)
self.rect1 = Rectangle(size=self.size, pos=self.pos)
self. rose = Image(source="rose.png",pos=pos_img,size=size_img )
self.add_widget(self.rose)
return
class MainApp(App):
def build(self):
self.pos_sun = None
root = BoxLayout(orientation = 'vertical')
self.screen = Screen()
button = Button(text = 'Press',size_hint=(1, None), height=50)
root.add_widget(self.screen)
root.add_widget(button)
self.screen.draw_img_wdg()
self.screen.bind(size=self._update_rect, pos=self._update_rect)
return root
def _update_rect(self, instance, value):
self.screen.rect1.pos = instance.pos
self.screen.rect1.size = instance.size
self.screen.rose. pos = (instance.center[0] -498/2.0, \
instance.center[1] -498/2.0)
return
if __name__ == '__main__':
MainApp().run()
i want to b able to draw only in the white area (the recangle area) for example if your trying to draw behind the buttons or over the label it wont draw. is it possible? i need it for my project in school, i need to be able to draw only in the white area so the paint wont cover the label for example or not to be able drawing under the buttons
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.graphics import Color, Rectangle, Line
from kivy.uix.stencilview import StencilView
from kivy.core.window import Window
import socket
import sys
import os
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
from kivy.uix.label import Label
from functools import partial
class MyPaintWidget(Widget):
lineSize = 5
def on_touch_down(self, touch):
with self.canvas:
touch.ud['Line'] = Line(points=(touch.x, touch.y), width=self.lineSize)
def on_touch_move(self, touch):
touch.ud['Line'].points += [touch.x, touch.y]
class MyPaintApp(App):
def build(self):
self.parent = Widget()
self.painter=MyPaintWidget(size=(695,510),pos=(100,50))
with self.painter.canvas:
Rectangle(pos=(100,50), size=(695,510))
with open("Send_word.txt",'r') as fr:
word_lable = Label(text = "Your word is " + fr.read(),font_size='30sp',pos = (400,530))
self.parent.add_widget(word_lable)
finishbtn = Button(text='finish',pos=(0, 0),size = (100,150))#finish button position and text
finishbtn.bind(on_release=self.finish)#finish button onclick
erasebtn = Button(text = "Erasor",pos=(0,150),size =(100,150))#erasor button position and text
erasebtn.bind(on_release=self.black)
redbtn = Button(text = "Red",background_color=(255,0,0,1.0),pos=(100, 0), size=(100,50))
redbtn.bind(on_release=self.red)
bluebtn = Button(text = "Blue",background_color=(0,0,255,1.0),pos=(200, 0), size=(100,50))
bluebtn.bind(on_release=self.blue)
greenbtn = Button(text = "Green",background_color=(0,255,0,1.0),pos=(300, 0), size=(100,50))
greenbtn.bind(on_release=self.green)
whitebtn = Button(text = "Black",pos=(400, 0), size=(100,50))
whitebtn.bind(on_release=self.white)
yellowbtn = Button(text = "Yellow",background_color=(255,255,0,1.0),pos=(500, 0), size=(100,50))
yellowbtn.bind(on_release=self.yellow)
lightbluebtn = Button(text = "L.Blue",background_color=(0,255,255,1.0),pos=(600, 0), size=(100,50))
lightbluebtn.bind(on_release=self.lightblue)
purplebtn = Button(text = "Purple", size=(100,50),background_color=(148,0,211,1.0),pos=(700,0))
purplebtn.bind(on_release=self.purple)
sizeupbtn = Button(text = "SizeUp",pos=(0, 300),size = (100,150))
sizeupbtn.bind(on_release=self.SizeUp)
sizedowmbtn = Button(text = "SizeDown",pos=(0, 450),size = (100,150))
sizedowmbtn.bind(on_release=self.SizeDown)
self.parent.add_widget(self.painter)
#self.parent.add_widget(word_lable())
self.parent.add_widget(finishbtn)
self.parent.add_widget(redbtn)
self.parent.add_widget(bluebtn)
self.parent.add_widget(greenbtn)
self.parent.add_widget(whitebtn)
self.parent.add_widget(yellowbtn)
self.parent.add_widget(erasebtn)
self.parent.add_widget(lightbluebtn)
self.parent.add_widget(purplebtn)
self.parent.add_widget(sizeupbtn)
self.parent.add_widget(sizedowmbtn)
return self.parent
def finish(self,obj):
self.painter.export_to_png("screenshot.png")
sexi = open("Send_word.txt",'r').read()
print repr(sexi)
send_file(sexi)
def red(self,obj):
with self.painter.canvas:
Color(1,0,0)
def blue(self,obj):
with self.painter.canvas:
Color(0,0,1)
def green(self,obj):
with self.painter.canvas:
Color(0,1,0)
def white(self,obj):
with self.painter.canvas:
Color(0,0,0)
def yellow(self,obj):
with self.painter.canvas:
Color(1,1,0)
def black(self,obj):
with self.painter.canvas:
Color(1,1,1)
def lightblue(self,obj):
with self.painter.canvas:
Color(0,1,1)
def purple(self,obj):
with self.painter.canvas:
Color(1,0,1)
def SizeUp(self,obj):
if(self.painter.lineSize <100):
self.painter.lineSize += 5
def SizeDown(self,obj):
if(self.painter.lineSize >1):
self.painter.lineSize -= 5
if __name__ == '__main__':
MyPaintApp().run()
You can do that the easy way and the hard way. The easy way is using StencilView as a widget, which has a nice demo.
The harder way is using the Stencil directly and target only specific areas of the widget's canvas.
I'm trying to make an interface in kivy and I think there are some fundamental things I don't understand about custom widgets and how to hierarchy them, even after going through the tutorial. I think I have more of a box-model html mindset, so the way widgets are nested in native GUIs are still kind of foreign to me.
Some background:
I consulted this entry on how to add a background (It answers the question: "How to add a background image/color/video/... to a Layout", which I believe I was replicating with the _update_rect methods).
This one that has an on_touch_down event.
K, I'm trying to get MyApp to look like this...
As I understand it, here are the things I'd need for that:
You have an app.
The app has a root.
The root has a background, say the background is white.
The background contains a holder, say the holder has a little margin from the background and is gray. I do want this to be a widget rather than just a non-widget canvas because I want the holder to react to click events, as well. It turns random colors when clicked. (Just to show it's doing something.)
The holder contains two custom widgets. These are circles with labels, each colored green. They turn random colors when clicked (just to show they're doing something).
Here's my code, which doesn't crash anymore, but doesn't display any colors or objects of any kind.
#!/usr/bin/kivy
import kivy
kivy.require('1.7.2')
from random import random
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.floatlayout import FloatLayout
from kivy.graphics import Color, Ellipse, Rectangle
class MyApp(App):
title = 'My App'
def build(self):
root = RootWidget()
root.bind(
size=self._update_rect,
pos=self._update_rect)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
class RootWidget(FloatLayout):
def __init__(self, **kwargs):
super(RootWidget, self).__init__(**kwargs)
with self.canvas.before:
Color(1, 0, 0, 1) # This RED does not display.
self.rect = Rectangle(
size=self.size,
pos=self.pos,
text="some junk!") # This label does not display.
mybackground = Background()
self.add_widget(mybackground)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
class Background(Widget):
def __init__(self, **kwargs):
super(Background, self).__init__(**kwargs)
with self.canvas.before:
Color(1, 1, 1, 1) # This WHITE does not display
self.rect = Rectangle(
size=self.size,
pos=self.pos,
text="More stuff!") # This label does not display.
myholder = Holder()
self.add_widget(myholder)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
class Holder(Widget):
def __init__(self, **kwargs):
super(Holder, self).__init__(**kwargs)
with self.canvas.before:
Color(0.25, 0.25, 0.25, 1) # This GRAY does not display
self.rect = Rectangle(
size=self.size,
pos=self.pos,
text="More stuff!") # This does not display.
c1 = Circley(label="Label 1") # I see I'd need to do some size/pos math here to center
c2 = Circley(label="Label 2") # but since everything isn't working, I've tabled this.
self.add_widget(c1)
self.add_widget(c2)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
def on_touch_down(self, touch):
rcolor = Color(random(), random(), random(), 1)
with self.canvas:
self.color = rcolor
class Circley(Widget):
def __init__(self, label='label', **kwargs):
super(Circley, self).__init__(**kwargs)
with self.canvas.before:
Color(0, 1, 0, 1) # This GREEN does not display
self.circ = Ellipse(
size=self.size,
pos=self.pos,
text=label
)
def _update_circ(self, instance, value):
self.circ.pos = instance.pos
self.circ.size = instance.size
def on_touch_down(self, touch):
rcolor = Color(random(), random(), random(), 1)
with self.canvas:
self.color = rcolor
if __name__ == '__main__':
MyApp().run()
Any pointers on what I'm doing wrong and how to nest these widgets correctly?
The reason you get a blank screen is that your app's build() method does not return anything. Whatever it returns would be the root widget, but even though you make some widgets you don't return one so nothing is displayed.
If you fix this, you can run the app again but you'll immediately get an error something like MyApp has no attribute rect. This is because your root widget is immediately sized and positioned to fill the window, which (as per your root.bind line) triggers MyApp._update_rect. However, this method try to modify MyApp.rect.pos...but the app doesn't have a self.rect! You presumably intended to bind to root._update_rect, not the app's method. (Edit: I bound to root._update_rect instead and now at least the red background and green circle do appear.)
Edit: And as a side note, this would be a lot easier using the kv language, which could automatically take care of a lot of the widget creation, rectangle binding etc.
I don't have time to fix it all right now, but perhaps these two problems can help you fix the overall flow. I'll try to post a more complete answer later if nobody else has.
Here's an updated MyApp, as per the comments.
class MyApp(App):
title = 'My App'
def build(self):
root = RootWidget()
root.bind(
size=root._update_rect,
pos=root._update_rect)
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.widget import Widget
from kivy.graphics import Color, Rectangle, Ellipse
class MyApp(App):
title = 'My App'
def build(self):
root = RootWidget()
root.bind(
size=root._update_rect,
pos=root._update_rect)
return root
class RootWidget(FloatLayout):
def __init__(self, **kwargs):
super(RootWidget, self).__init__(**kwargs)
with self.canvas.before:
Color(1, 0, 0, 1) # This RED does not display.
self.rect = Rectangle(
size=self.size,
pos=self.pos,
text="some junk!") # This label does not display.
mybackground = Background()
self.add_widget(mybackground)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
class Background(Widget):
def __init__(self, **kwargs):
super(Background, self).__init__(**kwargs)
with self.canvas.before:
Color(1, 1, 1, 1) # This WHITE does not display
self.rect = Rectangle(
size=self.size,
pos=self.pos,
text="More stuff!") # This label does not display.
myholder = Holder()
self.add_widget(myholder)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
class Holder(Widget):
def __init__(self, **kwargs):
super(Holder, self).__init__(**kwargs)
with self.canvas.before:
Color(0.25, 0.25, 0.25, 1) # This GRAY does not display
self.rect = Rectangle(
size=self.size,
pos=self.pos,
text="More stuff!") # This does not display.
c1 = Circley(label="Label 1") # I see I'd need to do some size/pos math here to center
c2 = Circley(label="Label 2") # but since everything isn't working, I've tabled this.
self.add_widget(c1)
self.add_widget(c2)
def _update_rect(self, instance, value):
self.rect.pos = instance.pos
self.rect.size = instance.size
def on_touch_down(self, touch):
rcolor = Color(random(), random(), random(), 1)
with self.canvas:
self.color = rcolor
class Circley(Widget):
def __init__(self, label='label', **kwargs):
super(Circley, self).__init__(**kwargs)
with self.canvas.before:
Color(0, 1, 0, 1) # This GREEN does not display
self.circ = Ellipse(
size=self.size,
pos=self.pos,
text=label
)
def _update_circ(self, instance, value):
self.circ.pos = instance.pos
self.circ.size = instance.size
def on_touch_down(self, touch):
rcolor = Color(random(), random(), random(), 1)
with self.canvas:
self.color = rcolor
if __name__ == '__main__':
MyApp().run()