I am trying to build a basic Kivy app. After adding the basic elements, and running the app, all of the elements are crammed into the bottom left corner. It shows up like this on android and Linux.
Main.py:
from kivy.app import App
from kivy.uix.widget import Widget
class SublimeLauncher(Widget):
pass
class SublimeLauncherApp(App):
def build(self):
return SublimeLauncher()
if __name__ == "__main__":
SublimeLauncherApp().run()
sublimelauncher.kv:
#:kivy 1.2.0
<SublimeLauncher>:
FloatLayout:
BoxLayout:
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
I first tried it with just the BoxLayout, but read somewhere the root widget is always as big as the app. How do I declare the size of the app? Or the layout? How would you go about doing something like a dialog box?
Maybe I am missing something very basic, but I can't seem to figure it out.
Edit: here is what I am seeing..
Your layout has a default size of 100x100 pixels. You can try to color it to see how much space does it take:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
kv = '''
<SublimeLauncher>:
BoxLayout:
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
size: self.size
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
'''
Builder.load_string(kv)
class SublimeLauncher(Widget):
pass
class SublimeLauncherApp(App):
def build(self):
return SublimeLauncher()
if __name__ == "__main__":
SublimeLauncherApp().run()
Setting non-default size:
kv = '''
<SublimeLauncher>:
BoxLayout:
size: 250, 250
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
size: self.size
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
'''
Builder.load_string(kv)
Taking full space:
kv = '''
<SublimeLauncher>:
BoxLayout:
size: root.size
canvas:
Color:
rgb: 1, 0, 0
Rectangle:
size: self.size
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open. \\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
'''
Builder.load_string(kv)
I recently wrote a post of a little trick I use when I am programming interfaces. The trick will let you see a border around all the widgets (layouts included) you add to the screen. This would be the result for your code:
It takes advantage of inheritance and the Kivy rules to overwrite the base class of all widgets. You just have to add:
<Widget>:
canvas.after:
Line:
rectangle: self.x+1,self.y+1,self.width-1,self.height-1
at the beginning of this file:
<SublimeLauncher>:
FloatLayout:
BoxLayout:
orientation: 'vertical'
spacing: 10
Label:
text: "Enter the path to the folder to open.\nPress OK if you would like to open without a directory"
TextInput:
id: folderpath
Button:
text: 'OK'
As your root widget is not a layout (you made SublimeLauncher inherit Widget), it doesn't set its children size/positions. So your FloatLayout have the defaults, since you don't override them manually either.
pos: 0, 0
size: 100, 100
And these defaults of course constraints the child, since FloatLayout by constraint their size based on their size_hint property.
You want to give them more space, as Nykakin pointed out.
Also, as your text is bigger than the Label (you didn't set halign and text_size either) its texture is centered on the center of the Label, and so some part of it is out of screen. You want to have a look at kivy/examples/widgets/textalign.py
Related
How can I change the value of text in Label on the 2nd screen by pressing a Button on the 1st screen?
In my example, I have 2 screens, on the first there are 3 buttons; one should change the text to "1st text", second should change the text to "2nd text" and the third is used to move between these two screens.
On the second screen, there is a Label which text should be changed by pressing the buttons. Then, there is also the button used to move to the first screen.
My .py looks like:
import kivy
kivy.require("1.10.1")
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.app import App
class Screen1(Screen):
pass
class Screen2(Screen):
pass
class Select_text(App):
def build(self):
sm = ScreenManager(transition=FadeTransition())
sm.add_widget(Screen1(name = "scr1"))
sm.add_widget(Screen2(name = "scr2"))
return sm
app = Select_text()
app.run()
My .kv seems like:
<Screen1>:
id: scr1
orientation: "vertical"
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: "Background.png"
Button:
id: change_to_1
pos: (root.width-self.width)/2, 400
size: 1200, 200
size_hint: None, None
text: "Change the text on the 2nd screen to »1st text«"
#on_press: (I don‘t know what should be there)
Button:
id: change_to_2
pos: (root.width-self.width)/2, 800
size: 1200, 200
size_hint: None, None
text: "Change the text on the 2nd screen to »2nd text«"
#on_press: (I don‘t know what should be there)
Button:
id: go_to_other_screen
pos: (root.width-self.width)/2, 1400
size: 600, 200
size_hint: None, None
text: "Go to other screen"
on_press: root.manager.current = "scr2"
<Screen2>:
id: scr2
orientation: "vertical"
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: "Background.png"
Label:
id: text
text: "Text which should be changed"
pos: (root.width-self.width)/2, 800
size: 600, 200
Button:
id: go_to_other_screen
pos: (root.width-self.width)/2, 1400
size: 600, 200
size_hint: None, None
text: "Go to other screen"
on_press: root.manager.current = "scr1"
I tried to search on the internet, but it didn't solve the main issue.
Thanks for any answer.
In the kv file call a function in the screen 1 class. You can then use the get_screen function to access the other screen and change its text in that function.
Would probably look something like:
(in the kv file)
on_press: root.functionname()
(main python file)
def functionname(self):
self.manager.get_screen('scr2').ids.text.text = "whatever you want here"
May i also suggest changing the id of the text ur changing to something else, because it looks a bit confusing with ids.text.text
For more info about the get_screen function if you are confused about that https://medium.com/nerd-for-tech/kivy-use-get-screen-to-access-objects-from-other-screens-8d4d6f288f3
I am trying to use kivy with Python to develop a quick app with sliders where one has to use the sliders first to determine a setting and then click a 'Submit' which then loads the desired image into the app window.
I currently have examples in my .kv file to insert a button and an image indiviudally, but I'm not sure how to connect them:
BoxLayout:
orientation:'vertical'
size: root.width,root.height
font_size: 20
padding: 100
spacing: 10
Button:
text: 'press me'
on_press: print("ouch! More gently please")
on_release: print("ahhh")
on_state:
#print("my current state is {}".format(self.state))
size_hint: (0.3,0.3)
Image:
source: 'images\IMG_6980.jpg'
#allow_stretch: True
#keep_ratio: True
pos_hint: {'center_x':0.7}
I feel like I need to do something with the on_press statement but I'm not quite sure what. Any help is appreciated.
I have given you an example below of how to generate an image from a button using the on_press method as you have described. By using the factory module, you can generate templates created in your *.kv files. So to complete your program, you would create more of these templates, and then generate the appropriate image template in your on_press method using conditionals. You could alternatively try to create dynamic templates within Python, but I believe my example to be more simple.
test.py:
import kivy
kivy.require('2.0.0')
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
class TestBoxLayout(BoxLayout):
pass
class TestApp(App):
def build(self):
return TestBoxLayout()
if __name__ == '__main__':
TestApp().run()
test.kv:
#: import Factory kivy.factory.Factory
<TestImage#Image>:
source: 'test.jpg'
#allow_stretch: True
#keep_ratio: True
pos_hint: {'centre_X':0.7}
<TestBoxLayout>:
orientation:'vertical'
size: root.width,root.height
font_size: 20
padding: 100
spacing: 10
Button:
text: 'press me'
on_press: root.add_widget(Factory.TestImage())
on_release: print("ahhh")
on_state:
#print("my current state is {}".format(self.state))
size_hint: (0.3,0.3)
To extend this solution to your comment, I have given a further example below. I want to reiterate that my example is designed to be simple to understand and can certainly be done more efficiently, but hopefully this acts as a clear solution to your problem. Please mark this as the best answer if this fulfils your needs!
test.kv:
#: import Factory kivy.factory.Factory
<TestImage1#Image>:
source: 'test_1.jpg'
#allow_stretch: True
#keep_ratio: True
pos_hint: {'centre_X':0.7}
<TestImage2#Image>:
source: 'test_2.jpg'
#allow_stretch: True
#keep_ratio: True
pos_hint: {'centre_X':0.7}
<TestBoxLayout>:
orientation:'vertical'
size: root.width,root.height
font_size: 20
padding: 100
spacing: 10
Slider:
id: slider
min: 1
max: 2
step: 1
Button:
text: 'press me'
on_press:
if slider.value == 1: root.add_widget(Factory.TestImage1())
elif slider.value == 2: root.add_widget(Factory.TestImage2())
on_release: print("ahhh")
on_state:
#print("my current state is {}".format(self.state))
size_hint: (0.3,0.3)
I trying to create a one screen app with one root rule set. by pressing a button i should see a scrollable text in the grid next to the button. In all the example solutions I see that scrollview is working in similar KV files that I have seen in other questions. Could someone please identify what I have missed in KV file.
my .py file:
import kivy
import string
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.properties import ObjectProperty
from kivy.properties import StringProperty
from kivy.uix.scrollview import ScrollView
from kivy.core.window import Window
class RootContainer(BoxLayout):
instance = ObjectProperty(None)
def __init__(self, **kwargs):
super(RootContainer, self).__init__(**kwargs)
def clickAction1(self, instance):
#identify the button pressed
buttonText = instance.text
self.lbl1.text = instance.text + " some text goes here ... "
myresult = " this is scrolling text.\n " * 30
self.lbl5.text = myresult
class MBApp(App):
def build(self):
return RootContainer()
if __name__ == '__main__':
MBApp().run()
my KV file:
#:kivy 1.0.9
<RootContainer>:
id: theRoot
lbl1: my_labelC
lbl5: my_labelCS
BoxLayout:
orientation: 'vertical'
spacing: 20
padding: 20
canvas:
Color:
rgb: 0, .33, 0
Rectangle:
pos: self.pos
size: self.size
Button:
text: "This is 1st button"
text_size: self.size
size_hint: (.5,1)
on_press: theRoot.clickAction1(self)
Button:
text: "This is 2nd button"
text_size: self.size
size_hint: (.5,1)
on_press: root.clickAction1(self)
GridLayout:
rows: 2
cols: 1
spacing: 10
padding: 10
canvas:
Color:
rgb: .7, .63, 0
Rectangle:
pos: self.pos
size: self.size
Label:
id: my_labelC
canvas.before:
Color:
rgb: 0,0,0
Rectangle:
pos: self.pos
size: self.size
text: "Header text for button clicked ......."
text_size: self.size
ScrollView:
GridLayout:
cols:1
rows:1
height: self.minimum_height
Label:
id: my_labelCS
text: "Scrolling text goes here ....."
I hope this is not a duplicate. Any other suggestions to code are also welcome. Thank you.
You don't set the size of your Label, so the default applies, as any widget, the defaults are
size: 100, 100
size_hint: 1, 1
since size_hintis 1, 1, and the parent is a layout, size itself is overriden by the parent's available space
since you set size: minimum_size in the parent layout, it'll give the minimum size its children require, but the Label doesn't ask for any space, it's size_hint of 1, 1 means that it's happy to take all the available space. Kivy solve this situation by not giving it any space, so the Label size ends up being 0, 0, and the GridLayout's size as well.
So you want to disable size_hint (at least for the height, of the Label, and instead set it to the texture heights
size_hint_y: None
height: self.texture_size[1]
Which is usually sided with setting the texture width to the available width, by setting text_size.
text_size: self.width, None
size_hint_x: 1 # this is the default, so this line is not required, but you want to be sure not to disable this default
Do you really need the GridLayout inside your scrollview? This works for me:
ScrollView:
Label:
id: my_labelCS
size_hint: 1, None
text_size: self.width, None
height: self.texture_size[1]
text: "Scrolling text goes here ....."
I am using kivy to make a very simple gui for an application. Nothing complex, very simple layout.
Nevertheless I am having a hard time with TextInputs...They always display with full height and I can't manage to make them adjust to a "reasonable" text-height like height.
I am using the kv files style since I find it cleaner and easier to integrate it in an already existing app...I would like to reduce as much as possible the gui-python code of the app.
Here is what I got for the TextInput (useless to add other parts of the gui).
Python code
# textInput.py
from kivy import require
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang.builder import Builder
Builder.load_file('path/to/kv/file/textInput.kv')
require('1.10.0')
class MainScreen(BoxLayout):
pass
class Test(App):
def build(self):
self.title = 'Testing textInput'
return MainScreen()
if __name__ == '__main__':
Test().run()
KV code
# textInput.kv
<MainScreen>
orientation: 'vertical'
# Third section title
Label:
size_hint: (1, .1)
text: 'Setup Connection'
font_size: 25
# Third section Box
BoxLayout:
size_hint: (1, .2)
padding: [100, 0, 100, 0]
BoxLayout:
Label:
size_hint: (.2, 1)
text: 'Host'
TextInput:
height: self.minimum_height
multiline: False
text: 'localhost'
Label:
size_hint: (.2, 1)
text: ''
Label:
size_hint: (.2, 1)
text: 'Port'
TextInput:
size_hint: (.2, 1)
multiline: False
text: '502'
I have tried lot of stuff, in the code here I am trying both to use size_hint and height...but none works..
To set a height of a widget, first set the size_hint_y to None and then you can set the height to whatever you want.
TextInput:
size_hint: (.2, None)
height: 30
multiline: False
text: '502'
in addition to the answer size_hint_x and size_hint_y must be set to None respectively before the height and width attribute can be used i.e size_hint: (None, None) for less typing. If you want to set the width attribute, size_hint_x is set to None and vice-versa.
Here is a screenshot of my kivy app. I am trying to get the TextInput in the bottom left to be centered in the BoxLayout which it is in, and I don't want it to be the same size as the layout, I want it to be much smaller. This BoxLayout in question resides in the bottom half of the screen. I have tried setting the TextInputs propertycenter:self.parent.center but this doesn't work. As you can see, I have printed the center coords from the BoxLayout into the TextInput using that very line, self.parent.center, with the correct result. Yet, setting the TextInputs center or position to these coords is not centering it, it doesn't move... what am I doing wrong?
py file:
import kivy
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
class TimeTabler(Widget):
pass
class TimerApp(App):
def build(self):
return TimeTabler()
if __name__ == "__main__":
TimerApp().run()
****kv file:****
#:kivy 1.0
BoxLayout:
orientation: 'vertical'
size: root.size
BoxLayout:
orientation: 'vertical'
Label:
text: 'TimeTabler'
BoxLayout:
TextInput:
text: '%s' % (self.parent.center) # why does this work here
size_hint: None, None
width: sp(200)
height: sp(30)
center: self.parent.center # but not here
You gave the TextInput size_hint: None, None, therefore the BoxLayout doesn't try to manually give it the right size, and it assumes the default size of 100, 100. Just delete the size_hint line to fix it.
Also, several widgets have lines like size: self.size. This is meaningless, self refers to the widget itself, and clearly the line does nothing since it just tries to set the size to what it already is.
Things would also be simpler if you made your TimeTabler inherit from BoxLayout instead of Widget. That way you wouldn't need to manually set it's child BoxLayout's size.
Edit: It looks like I misunderstood what you wanted, here's an example that uses an AnchorLayout to center the TextInput:
<TimeTabler>
BoxLayout:
orientation: 'vertical'
size: root.size
on_touch_down: print self.pos, self.size
canvas:
Color:
rgba: 0, 1, 1, .3
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
orientation: 'vertical'
size: self.size
Label:
text: 'TimeTabler'
BoxLayout:
id: bl
on_touch_down: print 'center', self.center
canvas:
Color:
rgb: 1,1,1
Line:
rectangle: self.x, self.y, self.width, self.height
AnchorLayout:
TextInput:
size_hint: None, None
text: '%s, %s' % (self.get_center_x(), self.get_center_y())
I think your problem was the BoxLayout automatically sets the position of the TextInput even when it is setting its own size. A simple way around this is to just next the TextInput in another widget, in this case an AnchorLayout that takes care of the centering for you. You could also just use a Widget and your previous mechanism of setting the TextInput center.