Multiple text fields inside of kivy text input - python

I'm working on on a scientific calculator using kivy, is there a way i insert multiple text fields in kivy text input like in below image. thanks for your help.

Not sure exactly what you want, but you can combine TextInput widgets. Here is an example:
from kivy.app import App
from kivy.factory import Factory
from kivy.lang import Builder
kv = '''
<-TextInputNoBorder#TextInput>:
# eliminates the TextInput border
canvas.before:
Color:
rgba: self.background_color
Rectangle:
pos: self.pos
size: self.size
Color:
rgba:
(self.cursor_color
if self.focus and not self._cursor_blink
else (0, 0, 0, 0))
Rectangle:
pos: self._cursor_visual_pos
size: root.cursor_width, -self._cursor_visual_height
Color:
rgba: self.disabled_foreground_color if self.disabled else (self.hint_text_color if not self.text else self.foreground_color)
<MyTextInput#BoxLayout>:
# combine three TextInput Widgets to appear as one
orientation: 'vertical'
TextInputNoBorder:
id: ti1
text: 'This is One'
TextInputNoBorder:
id: ti2
text: 'This is Two'
TextInputNoBorder:
id: ti3
text: 'This is Three'
'''
class TestApp(App):
def build(self):
Builder.load_string(kv)
return Factory.MyTextInput()
TestApp().run()
This example just stacks three TextInput widgets vertically, but they could be arranged and sized in many ways. The TextInputNoBorder widget extends the TextInput widget by redefining its appearance (eliminating the border).

Related

ScrollView not scrolling GridLayout

I have a GridLayout which takes some Card widgets that are basically RoundedRectangles and are supposed to be filled with specific information, the problem is that the GridLayout can take many cards and I want the user to scroll the widget. Intuitively, I defined it inside a ScrollView to scroll the gridlayout, however, the scrollview does not work. I suspect that the problem is that the gridlayout's height is not actually changing and not adapting to its children but how can I achieve this?
My Python code:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
Builder.load_file("design.kv")
class MyLayout(Widget):
pass
class MainApp(App):
def build(self):
return MyLayout()
if __name__ == "__main__":
MainApp().run()
My KV code:
#:kivy 2.0.0
<Card#Widget>:
size_hint_y: None
height: (self.parent.height - self.parent.padding[1] * 3) / 2
canvas:
Color:
rgba: 1, 1, 1, 1
RoundedRectangle:
size: self.size
pos: self.pos
radius: [5]
<MyLayout>:
ScrollView:
size: root.size
do_scroll_x: False
do_scroll_y: True
GridLayout:
id: song_menu
cols: 2
size_hint_y: None
height: self.parent.height
padding: 10
spacing: 10
canvas.before:
Color:
rgba: 1, 0, 0, 1
Rectangle:
size: self.size
pos: self.pos
Card:
Card:
Card:
Card:
Card:
Card:
EDIT: I forgot to mention that I have already tried height: self.minimum_height, however, an absurd thing happens. The gridlayout has a weird behavior and does not show up. Basically I get this in the terminal:
[CRITICAL] [Clock ] Warning, too much iteration done before the next frame. Check your code, or increase the Clock.max_iteration attribute
The GridLayout height isn't adjusting because you have constrained it with:
height: self.parent.height
Try replacing that with:
height: self.minimum_height

Kivy moving label inside FloatLayout

Hello I want to place a welcome message at the top of the app (Like the photo this)
I use a FloatLayout for my entire screen (since I want to add some other widgets later) but the problem is the label won't position itself at the center but like this
Here is my python code:
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.widget import Widget
class MainPage(FloatLayout):
pass
class SmartMirrorApp(App):
def build(self, **kwargs):
return MainPage()
if __name__ == "__main__":
SmartMirrorApp().run()
And this is my kv file:
#:kivy 1.10.1
<MainPage>:
canvas:
Color:
rgba: 1,0,1,0.5
Rectangle:
size: self.size
pos: self.pos
Label:
canvas:
Color:
rgba: 1,0,0,0.5
Rectangle:
size: self.size
pos: self.pos
text: "Welcome, you look beautiful today!"
font_size: 20
size_hint: None, None
size: self.texture_size
pos_hint: {'x': 0.5, 'y': 0.9}
Now if instead of putting 'x':0.5 inside the pos_hint dictionary I use center_x: root.center_x
the image moves to the desired position ONLY if I resize the window but it starts at the position of the second image.
For your pos_hint, use:
pos_hint: {'center_x': 0.5, 'top': 0.9}
That will center the Label horizontally, and the top of the Label will be at 90% of the MainPage height.

How do I show the color of a label on a image in kivy?

I am new to kivy. I inserted a label on an image. But it doesn't show the color of the label. It only shows the text as shown in the image. If you can please tell me how to show the color of the label.
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
Builder.load_string("""
<Money_Manager>:
Image:
source:'image4.png'
SmoothLabel:
text: "Hello[![enter image description here][1]][1] World"
size: 0.1,.1
rgb: (255,255,255)
<SmoothLabel#Label>
background_normal: ''
border_radius: [18]
canvas.before:
Color:
rgba: (255,255,255, 1)
RoundedRectangle:
size: .1,.1
pos: self.pos
radius: self.border_radius
""")
class Money_Manager(App, FloatLayout):
def build(self):
return self
Money_Manager().run()
Hey Did you mean you want to color the Hello World label from white to something else.
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.lang import Builder
Builder.load_string("""
<Money_Manager>:
Image:
source:'image4.png'
SmoothLabel:
text: "Hello World"
size: 0.1,.1
color: [255,100,0,1]
<SmoothLabel#Label>
background_normal: ''
border_radius: [18]
canvas.before:
Color:
rgba: (255,0,0, 1)
RoundedRectangle:
size: .1,.1
pos: self.pos
radius: self.border_radius
""")
class Money_Manager(App, FloatLayout):
def build(self):
return self
Money_Manager().run()
With little change in your code line
rgb: (255,255,255)
to
color: [255,100,0,1]
I am able to colour it green. Is this what you want.

Why does the kivy labels text show out of the label?

I am new to kivy. I want to insert a text into a kivy label at the startup. But the text of the lable shows out of the label as shown below. I can't find a way to fix this. So please give me a solution.
This is the code of the kv file.
<SmoothLabel#Label>
background_color: (0,0,0,0)
background_normal: ''
back_color: (255,255,255,1)
border_radius: [18]
canvas.before:
Color:
rgba: (255,255,255,0.3)
RoundedRectangle:
size: 50,50
pos: 100,10
radius: self.border_radius
<Money_Manager>
FloatLayout:
size_hint_y: None
height:100
Image:
source:'image4.png'
size: self . texture_size
allow_stretch: True
keep_ratio: False
SmoothLabel:
d: Total_Wealth
text: "Total_Wealth"
This is the code of the python file.
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.image import Image
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
Builder.load_file('total_wealth.kv')
class Money_Manager(App, FloatLayout):
def build(self):
return self
Money_Manager().run()
In your kv file, you have set the pos and size of the RoundedRectangle to fixed values. You need to set them to the pos and size of the Label. So change this:
<SmoothLabel#Label>
background_color: (0,0,0,0)
background_normal: ''
back_color: (255,255,255,1)
border_radius: [18]
canvas.before:
Color:
rgba: (255,255,255,0.3)
RoundedRectangle:
size: 50,50
pos: 100,10
radius: self.border_radius
to:
<SmoothLabel#Label>
background_color: (0,0,0,0)
background_normal: ''
back_color: (255,255,255,1)
border_radius: [18]
canvas.before:
Color:
rgba: (255,255,255,0.3)
RoundedRectangle:
size: self.size
pos: self.pos
radius: self.border_radius
Here is my answer for yours
# import kivy module
import kivy
# this restricts the kivy version i.e
# below this kivy version you cannot use the app or software
kivy.require("1.9.1")
# base Class of your App inherits from the App class.
# app:always refers to the instance of your application
from kivy.app import App
# if you not import label and use it it through error
from kivy.uix.label import Label
# defining the App class
class MyLabelApp(App):
def build(self):
# label display the text on screen
lbl = Label(text ="Label is Added on screen !!:):)")
return lbl
# creating the object
label = MyLabelApp()
# run the window
label.run()
Output:

Kivy - Black Screen between transitions

I'm trying to copy this gif, which is done in Kivy (here's the link to the full page )
Just as I started, I noticed a black screen between transition (link to what it looks like so you don't have to copy-paste and run)
Why does that black screen appear?
EDIT: I must work without buttons.
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
# Create both screens. Please note the root.manager.current: this is how
# you can control the ScreenManager from kv. Each screen has by default a
# property manager that gives you the instance of the ScreenManager used.
Builder.load_string("""
<MenuScreen>:
canvas.before:
Color:
rgba: 122,255,0,2
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'hello'
<SettingsScreen>:
canvas.before:
Color:
rgba: 0,255,0,2
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'hello'
""")
# Declare both screens
class MenuScreen(Screen):
def on_touch_down(self, touch):
sm.current = 'settings'
class SettingsScreen(Screen):
def on_touch_down(self, touch):
sm.current = 'menu'
# Create the screen manager
sm = ScreenManager()
sm.add_widget(MenuScreen(name='menu'))
sm.add_widget(SettingsScreen(name='settings'))
class TestApp(App):
def build(self):
return sm
if __name__ == '__main__':
TestApp().run()
EDIT: I've tried this but still not working
<sm>:
canvas:
Color:
rgb: (0, 255, 255)
Rectangle:
size: self.size
pos: self.pos
You are not supposed to use the Screen subclasses directly. Instead you must add a component first (e.g. Button or Layout), for example use RelativeLayout:
Builder.load_string("""
<MenuScreen>:
RelativeLayout:
canvas.before:
Color:
rgba: 122,255,0,2
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'hello'
<SettingsScreen>:
RelativeLayout:
canvas.before:
Color:
rgba: 0,255,0,2
Rectangle:
pos: self.pos
size: self.size
Label:
text: 'hello'
""")
That black area is a canvas of the screen manager. If you don't like it black, then you can paint it, just like you did with screens; or change transition type to NoTransition to hide it.
Also, you should consider building your screen manager inside that kv lang string.
Old, but in case anyone runs into this issue:
To clarify the vague responses in the comments, you need to paint your screen manager the same way you would paint a screen.
Example in kvlang:
ScreenManagement:
canvas.before:
Color:
rgba: 1,1,1,1
Rectangle:
size: self.size
pos: self.pos
id: screen_manager
transition: NoTransition()
Screen1:
Screen2:
Settings_:

Categories