I would like to draw something in canvas from .py by using class 'BotRightCanvas'. The initial widgets are all defined in .kv
Problem is when I finally declare BotRightCanvas in .kv, the size of the canvas widget is not coming proper (still 100x100). I would like the green rectangle to coincide with the cyan one.
Here's .py
from kivy.graphics import Color
from kivy.graphics.vertex_instructions import Line, Rectangle, Ellipse
from kivy.metrics import dp
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.core.window import Window
class TestOut(BoxLayout):
def __init__(self, **kwargs):
super().__init__(**kwargs)
def getSize(self, id):
cSize = id.size
print('win ' + str(Window.size))
print('canvas ' + str(id.size))
print('cSize ' + str(cSize))
class BotRightCanvas(Widget):
def __init__(self, **kwargs):
super().__init__(**kwargs)
with self.canvas:
Color(0, 1, 0, 1)
Line(circle=(self.width / 2, self.height / 2, 25), width=2)
Line(rectangle=(0, 0, self.width, self.height), width=5)
class PlaygroundApp(App):
title = "blabla"
def build(self):
return TestOut()
if __name__ == "__main__":
PlaygroundApp().run()
and .kv
<TestOut>:
BoxLayout:
orientation: 'vertical'
Button:
text:'A'
height: dp(100)
size_hint: 1, None
BoxLayout:
Button:
text:'B'
width: dp(150)
size_hint: None, 1
RelativeLayout:
id: rel_lo
on_size: root.getSize(rel_lo)
Widget:
canvas:
Line:
rectangle: (0,0, self.width, self.height)
width: 2
canvas.before:
Color:
rgba: 0,1,1,1
BotRightCanvas:
I tried printing the final canvas shape in console, seems it initializes with size of 0x0 but later on gets correct size 650x500.
The console output
canvas [0.0, 0]
cSize [0.0, 0]
win (800, 600)
canvas [650.0, 500.0]
cSize [650.0, 500.0]
Any help? Thanks !!
EDIT: Would like to control canvas items from .py
from kivy.graphics import Color
from kivy.graphics.vertex_instructions import Line, Rectangle, Ellipse
from kivy.metrics import dp
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.core.window import Window
from kivy.lang.builder import Builder
from kivy.app import App
class TestOut(BoxLayout):
def __init__(self, **kwargs):
super().__init__(**kwargs)
def getSize(self, id):
cSize = id.size
print('win ' + str(Window.size))
print('canvas ' + str(id.size))
print('cSize ' + str(cSize))
class BotRightCanvas(Widget):
pass
Builder.load_string(
'''
<BotRightCanvas>:
canvas:
Color:
rgba:0, 1, 0, 1
Line:
circle:self.width / 2, self.height / 2, 25
width:2
Line:
rectangle:0, 0, self.width, self.height
width:5
<TestOut>:
BoxLayout:
orientation: 'vertical'
Button:
text:'A'
height: dp(100)
size_hint: 1, None
BoxLayout:
Button:
text:'B'
width: dp(150)
size_hint: None, 1
RelativeLayout:
id: rel_lo
on_size: root.getSize(rel_lo)
Widget:
canvas:
Line:
rectangle: (0,0, self.width, self.height)
width: 2
canvas.before:
Color:
rgba: 0,1,1,1
BotRightCanvas:
size:rel_lo.size
'''
)
class PlaygroundApp(App):
title = "blabla"
def build(self):
return TestOut()
for line in open('2.py').readlines():
print(' '+line)
if __name__ == "__main__":
PlaygroundApp().run()
Related
I am trying to initialize the widget class by placing a button at the root.center. Strangely, root.size during initialization is only (100,100). When it's rendered, the actual size is (600,800). So my button is placed in the left bottom instead of in the center.
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import NumericProperty, ReferenceListProperty
from kivy.uix.widget import Widget
w = Builder.load_string('''
<MyWidget>:
canvas.before:
Color:
rgba: 1, 0.3, 0.3, 1
Rectangle:
size: self.size
pos: self.pos
Button:
id: score_button
center: root.score_button_center
text:'Best Scores'
''')
class MyWidget(Widget):
score_center_y = NumericProperty(-100)
score_center_x = NumericProperty(-100)
score_button_center = ReferenceListProperty(score_center_x, score_center_y)
hide_center = (-100, -100)
def __init__(self, **kwargs):
super(MyWidget, self).__init__(**kwargs)
self.score_button_center = self.width, self.height
class MyApp(App):
def build(self):
g = MyWidget()
return g
if __name__ == '__main__':
MyApp().run()
Just change:
center: root.score_button_center
to:
center: root.center
That will take advantage of the kivy feature that sets up bindings to adjust the Button position whenever the root widget changes size or position.
I want a rectangle to stick to the bottom left corner of an image. It works, but when I change window size the rectangle is little bit off. It is where image was before update. Here's the code:
from kivy.app import App, Builder
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.image import Image
from kivy.graphics import Rectangle
from kivy.graphics import Color
Builder.load_string(
'''
<Screen>:
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
FloatLayout:
Image:
id: im
keep_data: True
source: 'test.png'
allow_stretch: True
size_hint_y: 0.9
pos_hint: {'left':1, 'top':1}
Button:
text: 'Button'
size_hint_y: 0.1
pos_hint: {'x':0, 'y':0}
''')
class Screen(FloatLayout):
def __init__(self, **kwargs):
super(Screen, self).__init__(**kwargs)
with self.ids.im.canvas.after:
Color(1,0,1,.5)
self.rec = Rectangle(pos=(self.ids.im.center_x - self.ids.im.norm_image_size[0] / 2,
self.ids.im.center_y - self.ids.im.norm_image_size[1] / 2),
size=(self.ids.im.norm_image_size[0]/2,
self.ids.im.norm_image_size[1]/2))
self.bind(pos=self.update_canvas, size=self.update_canvas)
def update_canvas(self, *args):
self.rec.pos = (self.ids.im.center_x - self.ids.im.norm_image_size[0] / 2,
self.ids.im.center_y - self.ids.im.norm_image_size[1] / 2)
self.rec.size = (self.ids.im.norm_image_size[0]/2,
self.ids.im.norm_image_size[1]/2)
class QuestionApp(App):
def build(self):
return Screen()
if __name__ == "__main__":
QuestionApp().run()
I'm doing this in Python because I want to randomly spawn rectangles within the image, but I'm stuck here with rectangles when window resizing being wobbly.
If you want the rectangle to use the geometry of the image as reference then you must do the binding with the image, for this change:
self.bind(pos=self.update_canvas, size=self.update_canvas)
to
self.ids.im.bind(pos=self.update_canvas, size=self.update_canvas)
from kivy.app import App
from kivy.clock import Clock
from kivy.uix.widget import Widget
from kivy.uix.anchorlayout import AnchorLayout
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
Builder.load_string("""
<WaterFill>:
id: c_canvas
level: 0.0
width: self.height
size_hint: None, 1
color: 0, 0, 1
canvas:
StencilPush
Ellipse:
group: 'a'
size: (200, 200)
pos: 150,270
StencilUse
Color:
rgb: root.color
Rectangle:
group: 'a'
pos: root.pos
size: (root.width, root.level*root.height)
StencilUnUse
StencilPop
Ellipse:
group: 'b'
size: (200, 200)
pos: 450,270
Button:
text: 'Try me!'
on_release: root.press_me()
""")
class WaterFill(Widget):
def __init__(self, *args, **kwargs):
Widget.__init__(self, *args, **kwargs)
self.delta = 0.01
Clock.schedule_interval(self.on_timeout, 0.05)
def on_timeout(self, *args):
#self.root.ids.c_canvas.canvas.get_group('a').level += self.delta #i tried by id and by group but unabel to find solution
self.level += self.delta
if self.level >= 1:
#self.delta = -0.01
self.delta = -1.1
elif self.level <= 0:
self.delta = 0.01
def press_me(self):
print("pressed") # on press need to fill circle
class TestApp(App):
def build(self):
#lay = AnchorLayout(anchor_x='center', anchor_y='center')
#lay.add_widget(WaterFill())
return WaterFill()
if __name__ == "__main__":
TestApp().run()
how i change 2 or more circle fill layout with Kivy GUI - fill color in circle like water fill in circle container level wise same logic. i tried by defining id but fails any way to do this??? please help how to use canvas design for 2 or more circle !!!
If you want to handle it, each one should easily consider the drawing independently, and that is what I proposed in my previous answer.
In the following example we use a layout to locate it and use the ids to access the values.
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
root = Builder.load_string("""
<WaterFill#Widget>:
level: 0
color: 0, 0, 1
canvas:
StencilPush
Ellipse:
pos: root.pos
size: root.size
StencilUse
Color:
rgb: root.color
Rectangle:
pos: root.pos
size: (root.width, root.level*root.height)
StencilUnUse
StencilPop
<FloatLayout>:
WaterFill:
id: left
level: 0.4
pos_hint: {'x' : 0.10, 'y': 0.4}
size_hint: 0.4, 0.4
WaterFill:
id: right
pos_hint: {'x' : 0.55, 'y': 0.4}
size_hint: 0.4, 0.4
Button:
id: button
text: 'text'
size_hint: .25, .25
on_press: root.press_me()
""")
class Principal(FloatLayout):
def press_me(self):
current_level = self.ids["right"].level
self.ids["right"].level = 0.0 if current_level >= 1.0 else current_level + 1.0/9
class TestApp(App):
def build(self):
return Principal()
if __name__ == "__main__":
TestApp().run()
Note:
I recommend reading about the kivy language, how the design of the .kv is linked with the .py
I created a Bubble widget around a custom widget to display some options, but the arrow of that Bubble turned out unexpectedly big and blurry. All those widgets are positioned in a GridLayout that is put inside of a ScrollView. What could cause this issue?
Here is the code:
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.uix.gridlayout import GridLayout
from kivy.uix.bubble import Bubble
from kivy.properties import ListProperty
Builder.load_string('''
<PopupBubble>:
size_hint: None, None
<ScrollView>:
canvas:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
<Message>:
width: 500
BoxLayout:
pos: root.pos
height: self.height
canvas:
Color:
rgba: 0.8, 0.8, 0.8, 1
RoundedRectangle:
pos: root.pos
size: self.size
TextInput:
pos: root.pos
size: root.size
id: msg
background_color: 0, 0, 0, 0
cursor_color: 0, 0, 0, 0
PopupBubble:
pos: root.x, self.height + root.y + root.height
size: 100, 40
''')
class Message(Widget):
bg_color = ListProperty([0.99, 0.99, 0.99, 1])
class PopupBubble(Bubble):
pass
class Chat(Screen):
pass
class TestApp(App):
def msg_in(self):
msg_stack = self.msg_stack
msg = "test"
msg_stack.append(Message())
msg_stack[-1].ids['msg'].text = msg
msg_stack[-1].width = 160
msg_stack[-1].height = (len(msg_stack[-1].ids['msg']._lines_labels) + 1) * (msg_stack[-1].ids['msg'].line_height + 5)
for i in msg_stack[-1].walk():
i.height = msg_stack[-1].height
i.width = msg_stack[-1].width
self.msg_layout.add_widget(msg_stack[-1])
def build(self):
self.msg_stack = []
self.chat = Chat()
self.sv1_main = ScrollView(pos_hint = {"top":1, "center_x":0.5},
size_hint = (0.97, 0.65))
self.msg_layout = GridLayout(height = 10,
cols = 1,
padding = 10,
spacing = 10,
size_hint_y = None)
self.chat.add_widget(self.sv1_main)
self.sv1_main.add_widget(self.msg_layout)
for i in range(15):
self.msg_layout.add_widget(Widget())
# Just to bring the next widget down
self.msg_in()
return self.chat
TestApp().run()
Your line msg_stack[-1].width = 160 cripples it. Or rather the loop after it, where you set Bubble's width from that variable.
You set Bubble's size in kv, then in python you play its width again as you add Message as a widget to GridLayout and the result is clearly visible. Set its size once, in kv or in python and/or try to set one property only. Otherwise it works as expected:
from kivy.lang import Builder
from kivy.base import runTouchApp
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.bubble import Bubble, BubbleButton
Builder.load_string('''
<Test>:
Button:
on_release: root.show_bubble()
FloatLayout:
id: box
''')
class Test(BoxLayout):
def show_bubble(self):
bubble = Bubble(size_hint=[None,None],size=[100,40],pos=[100,300])
bubble.add_widget(BubbleButton(text='Copy', size=[30,10]))
bubble.add_widget(BubbleButton(text='Paste'))
self.ids.box.add_widget(bubble)
runTouchApp(Test())
I'm making custom touch handling for my widget. The way I have it set up is that the initial size of the widget is set and fixed, however, later, I change it dynamically depending on the contents. I turned that feature down for now to shorten the code, it doesn't affect the problem. I've noticed something strange when I clicked at a blank spot to the right of the widget and the touch was registered, so I added a canvas background to inspect. Apparently, the actual widget boundaries are set much bigger than what the actual widget instance is, and I don't really know what's causing this. Those widgets are positioned in a FloatLayout, but I never set size_hints, only sizes. Could that be the case? How do I shorten the widget boundaries to what they're supposed to be?
Here is the entire source code, the problem is most likely in the kv definition:
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen, ScreenManager, NoTransition
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
global pr_msg_y
pr_msg_y = 5
Builder.load_string('''
<ScrollView>:
canvas:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
<Message>:
width: 500
canvas:
Color:
rgba: 1, 0, 0, 0.3
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
pos: root.pos
height: self.height
canvas:
Color:
rgba: 0.6, 0.6, 0.6, 1
Rectangle:
pos: root.pos
size: self.size
TextInput:
pos: root.pos
size: root.size
id: msg
background_color: 0, 0, 0, 0
text: str(msg)
''')
class Message(Widget):
def __init__(self, **kwargs):
super(Message, self).__init__(**kwargs)
def on_touch_down(self, touch):
if self.collide_point(*touch.pos):
print("Touch within {}".format(self))
class Chat(Screen):
pass
class MessageInput(TextInput):
def __init__(self, **kwargs):
super(MessageInput, self).__init__(**kwargs)
class ChatApp(App):
def build(self):
def msg_in(btn):
global pr_msg_y
inst = Message()
inst.ids['msg'].text = "test" * 15
inst.width = 456 # something random, the sizing should be dynamic
inst.height = 40
for i in inst.walk():
i.height = inst.height
i.width = inst.width
inst.y = sv1_main.height - 5 - pr_msg_y - inst.height
msg_float.add_widget(inst)
pr_msg_y += inst.height + 5
Screens = ScreenManager(transition = NoTransition())
chat = Chat(name = "main")
sv1_main = ScrollView(pos_hint = {"top":0.87, "center_x":0.5},
size_hint = (0.97, 0.65))
msg_float = FloatLayout()
bt1_main = Button(pos_hint = {"top":0.097, "center_x":0.951},
on_press = msg_in)
Screens.add_widget(chat)
chat.add_widget(sv1_main)
sv1_main.add_widget(msg_float)
chat.add_widget(bt1_main)
return Screens
ChatApp().run()
size_hint does "overwrite" size. By default size_hint is set to 1,1, so if you only set size and you put the widget into a layout that recognizes size_hints, the widget will get the maximal available size.
Set size_hint = None, None to fix.