How can I fix this problem of button in kivy? - kivy

it's been for 2 days i was trying to fix my problem. I explain, I want to create an app, that contains splashscreen, and screens. And i don't understand how to create a button that bring the user to the privacy policy. I explain. When the app run, the splash screen is loading for 5 seconds and after, load the home page, till now there is no problem. But in this home page, i want to create a button that bring me to the privacy policy and for 2 days I didn't manage to. If someone could help me to suceed, it would be very nice. Have a nice day guys !
App.py
from os import access
from turtle import onclick
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.core.window import Window
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.clock import Clock
from kivy.uix.widget import Widget
from kivy.core.text import LabelBase
from kivy.uix.button import Button
from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
LabelBase.register(name="OpenSans",fn_regular="OpenSans-Bold.ttf")
Window.size = (360,800)
class SplashScreenApp(MDApp):
def build(self):
self.title = "ReviewinApp"
global sm
sm = ScreenManager()
sm.add_widget(Builder.load_file("splash.kv"))
sm.add_widget(Builder.load_file("accueil.kv"))
return sm
def on_start(self):
Clock.schedule_once(self.accueil, 10)
def accueil(*args):
sm.current = "accueil"
if __name__=="__main__":
SplashScreenApp().run()
accueil.kv
########################################################################
## MAIN SCREEN
########################################################################
MDScreen:
name: "accueil"
MDFloatLayout:
md_bg_color: 41/255, 34/255, 34/255, 1
MDLabel:
text: "Welcome ! "
pos_hint: {'center_x': 0.5, 'center_y': 0.97}
theme_text_color: 'Custom'
text_color: 1,1,1,1
font_size: "24sp"
font_name: "OpenSans"
MDLabel:
text: "Before starting reviewing our suggestions,You need to read and accept our "
pos_hint: {'center_x':0.5,'center_y':0.86}
theme_text_color: 'Custom'
text_color: 1,1,1,1
font_size: "20sp"
font_name: "OpenSans"
Button:
text: "privacy policy."
font_size: "20sp"
font_name: "OpenSans"
pos_hint: {'center_x': 0.5, 'center_y': 0.825}
halign: 'center'
theme_text_color: 'Custom'
text_color: 1,1,1,1
color: 62/255, 216/255, 133/255, 1
size_hint: (0.4, 0.02)
background_color: 41/255, 34/255, 34/255, 1
background_normal: ''
on_release: root.current = 'condition'
splash.kv
MDScreen:
name: "splash"
on_enter: self.ids.progress.start()
MDFloatLayout:
md_bg_color: 41/255, 34/255, 34/255, 1
Image:
source: "reviewin2.png"
size_hint: 0.9, 0.9
pos_hint: {'center_x': 0.5,'center_y': 0.5}
MDLabel:
pos_hint: {'center_x': 0.5, 'center_y': 0.3}
halign: 'center'
theme_text_color: 'Custom'
text_color: 1,1,1,1
font_size: "35sp"
BoxLayout:
pos_hint: {'center_x': 0.5, 'center_y': 0.3}
padding: "10dp"
size_hint_x:0.7
MDProgressBar:
id: progress
orientation: "horizontal"
type: "indeterminate"
running_duration: 1
catching_duration: 1
condition.kv
MDScreen:
name: "condition"
MDFloatLayout:
md_bg_color: 41/255, 34/255, 34/255, 1
MDLabel:
text: "Privacy Policy ! "
pos_hint: {'center_x': 0.5, 'center_y': 0.95}
theme_text_color: 'Custom'
halign: 'center'
text_color: 1,1,1,1
font_size: "24sp"
font_name: "OpenSans"
MDLabel:
text: "We are proud to see you here, to see you here, it means that you pay particular attention to our application and therefore to our working methods. "
pos_hint: {'center_x':0.5,'center_y':0.86}
theme_text_color: 'Custom'
text_color: 1,1,1,1
font_size: "20sp"
font_name: "OpenSans"
Button:
text: "privacy policy."
font_size: "20sp"
font_name: "OpenSans"
pos_hint: {'center_x': 0.5, 'center_y': 0.825}
halign: 'center'
theme_text_color: 'Custom'
text_color: 1,1,1,1
color: 62/255, 216/255, 133/255, 1
size_hint: (0.4, 0.02)
background_color: 41/255, 34/255, 34/255, 1
background_normal: ''
on_release: root.current = "accueil"

Related

How can a dynamic class access another class' attributes such as root.width/root.height?

Here is a class NewWindow with a GridLayout in a FloatLayout, a dynamic class NewButton inheriting from ToggleButton, and a class in the Python file that receives the GridProperty in order to add_widget NewButton into it.
The overall goal is to have a button that adds a toggle button into the grid layout, and for all button/toggle buttons to be able to dynamically change size for different screen resolutions. The issue I'm having is that I can't simply write (root.width**2 + root.height**2) / 12**4 for NewButton. I think it's because "root" in NewWindow is not the same as "root" in NewButton, but I do not have a solution.
Is there a way for me to access NewWindow's "root" inside of NewButton? I ultimately just want all my buttons to match each other's sizes and for it to be dynamic, so I don't want to simply write a static "30" for font_size.
# File: main.kv
<NewWindow>:
parentGrid: parentGrid
FloatLayout:
Button:
text: "Add New Button"
pos_hint: {"x": 0.05, "top": 0.7}
size_hint: .4, 0.05
font_size: (root.width**2 + root.height**2) / 12**4
on_release:
root.addButton()
GridLayout:
id: parentGrid
cols: 1
pos_hint: {"x": 0.5, "top": 0.7
size_hint: .4, .5
<NewButton#ToggleButton>:
text: "BUTTON"
size_hint_y: ???
#height: ???
font_size: ???
# Cannot simply use root.width or root.height, also size_hint: .4, 0.05 doesn't work
# File: MainApp.py
class NewWindow(Screen):
parentGrid = ObjectProperty(None)
def AddButton(self):
self.parentGrid.add_widget(NewButton())
You are right the two roots are different. One is as you say the size of the new window, but the other would only be the size of GridLayout. The problem you have with the size_hint is because you are using a GridLayout. If you can change to example a BoxLayout that would work if not the size_hint: None, None and then set the size: would work:
To get the the NewWindow Root use app.root.width and app.root.heigth
main.py:
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import ObjectProperty
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.togglebutton import ToggleButton
class NewButton(ToggleButton):
pass
class NewWindow(Screen):
parentGrid = ObjectProperty(None)
def __init__(self, **kwargs):
super(NewWindow, self).__init__(**kwargs)
def addButton(self):
print('test')
self.parentGrid.add_widget(NewButton())
class Manager(ScreenManager):
pass
class TestApp(App):
def build(self):
return Builder.load_file('test.kv')
if __name__ == '__main__':
TestApp().run()
.kv:
Manager:
NewWindow:
name: 'new'
<NewButton#ToggleButton>:
text: "BUTTON18"
pos_hint: {"x": 0.05, "top": 0.7}
size_hint_x: None
size_hint: 1, 1
#size: 10, 10
font_size: (app.root.width**2 + app.root.height**2) / 12**4
<NewWindow>:
parentGrid: parentGrid
FloatLayout:
Button:
text: "Add New Button"
pos_hint: {"x": 0.05, "top": 0.7}
size_hint: .4, 0.05
font_size: (root.width**2 + root.height**2) / 12**4
on_release:
root.addButton()
BoxLayout:
id: parentGrid
cols: 1
pos_hint: {"x": 0.5, "top": 0.7}
size_hint: .4, .5
canvas:
Color:
rgba: 1,1,1,1
Rectangle:
size: self.size
pos: self.pos
# Cannot simply use root.width or root.height, also size_hint: .4, 0.05 doesn't work
I did also add the screenmanager to be able to access the width and height
Hope this helps

Invalid indentation, must be a multiple of 8 spaces, rounded button kivy .kv file

so yeah I was learning kivy - "rounded buttons" and when I ran the tutorial's program ---------------
ERROR:
https://i.stack.imgur.com/rGhSa.png
python:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.uix.textinput import TextInput
from kivy.uix.label import Label
from kivy.core.window import Window
Builder.load_file("my.kv")
class MyLayout(Widget,App):
def __init__(self,*args,**kwargs):
super(MyLayout, self).__init__(**kwargs)
class AwesomeApp(App):
def build(self):
Window.clearcolor = (1,1,1,1)
return MyLayout()
if __name__ == '__main__':
AwesomeApp().run()
.kv
<MyLayout>
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 50
spacing: 20
Button:
text: "Hello World!"
RoundedButton:
text: "Goodbye World!"
pos_hint: {'center_x': 0.5}
size_hint: (1, .3)
#background_color: (0/255,255/255,203/255,1)
#background_normal: ''
<RoundedButton#Button>
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba: (0/255,255/255,203/255,1)
RoundedRectangle:
size: self.size
pos: self.pos
radius: [58]
thanks,can anyone help, don't like these errors,
indentation error it seems like
You are not doing proper indentation you must use only one type of indentation in a file but you are using 8 spaces and 4 spaces both as indentation that is why error is coming.
Here,I have used 4 spaces as indentation in whole code that is why its working fine.
<MyLayout>
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 50
spacing: 20
Button:
text: "Hello World!"
RoundedButton:
text: "Goodbye World!"
pos_hint: {'center_x': 0.5}
size_hint: (1, .3)
#background_color: (0/255,255/255,203/255,1)
#background_normal: ''
<RoundedButton#Button>
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba: (0/255,255/255,203/255,1)
RoundedRectangle:
size: self.size
pos: self.pos
radius: [58]

Move search items more to the top

I have the following code snippet displaying a popup Window.
class SearchBar(TextInput):
articles = ListProperty()
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.bind(text=self.on_text)
self.bind(articles=self.on_articles)
def on_text(self, *args):
WikiSearcher().get_search_results(self.text, self)
def on_articles(self, *args):
self.parent.parent.children[0].update_recommendations(self.articles)
class SearchItem(ButtonBehavior, Label):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.url = ''
def on_release(self):
print (self.url)
class Recommendations(BoxLayout):
def update_recommendations(self, recommendations: list):
for (search_item, recommendation) in zip(reversed(self.children), recommendations):
search_item.text = recommendation
try:
search_item.url = wikipedia.page(recommendation).url
except:
search_item.url = 'https://en.wikipedia.org/wiki/' + recommendation.replace(" ", "_")
Builder.load_string('''
<SearchItem>:
font_size: self.height * 0.4
canvas.before:
Color:
rgba: [0.8, 0.8, 0.8, 1] if self.state == 'normal' else [30/255, 139/255, 195/255, 1]
Rectangle:
#pos: self.pos
#size: self.size[0], self.size[1]
size: root.size[0], root.size[1]
pos: self.pos[0], self.pos[1]
Color:
rgba: 0, 0, 0, 1
Line:
rectangle: self.x, self.y, self.width, self.height
color: 0, 0, 0, 1
<Urlpup>:
size_hint: 1, 1
auto_dismiss: False
title: 'Enter URL or keywords'
BoxLayout:
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
size: self.size
pos: self.pos
orientation: 'vertical'
padding: self.width * 0.1
spacing: self.height * 0.1
BoxLayout:
orientation: 'horizontal'
Spinner:
id: spinner
size_hint: 0.5, 0.4
pos_hint: { 'top' : 1 }
text: 'en'
values: 'en', 'fr', 'de', 'it'
SearchBar:
id: url_input
size_hint: 1, 0.4
pos_hint: { 'center_x' : 0.5, 'top' : 1 }
multiline: False
font_size: self.height*0.8
Button:
text: 'OK'
size_hint: 0.5, 0.4
pos_hint: { 'top' : 1 }
on_press: root.dismiss()
on_release: app.create_new_article(url_input.text)
Recommendations:
id: recommendations
orientation: 'vertical'
SearchItem
SearchItem
SearchItem
SearchItem
''')
class Urlpup(Popup):
pass
Here is a picture of the popup Window
You can see that the SearchItems are not tightly below the SearchBar, where I'm struggling to position it. Can you fix it? On the picture there are 4 SearchItems but I plan to have 10 Searchitems so it should work for 10 SearchItems or be flexible when I decide to change the number of SearchItems
The BoxLayout tries to distribute its available space equally among its children, unless you tell it otherwise. So, your top level BoxLayout in the Urlpup class evenly divides its space between the BoxLayout containing the TextInput and the Recommendations widget. You can reduce the space between those two widgets by limiting the space given to the horizontal BoxLayout. You can do that by specifying a height for that BoxLayout, like this:
BoxLayout:
size_hint_y: None
height: 50
orientation: 'horizontal'
Spinner:
id: spinner
size_hint: 0.5, 1
pos_hint: { 'top' : 1 }
text: 'en'
values: 'en', 'fr', 'de', 'it'
SearchBar:
id: url_input
size_hint: 1, 1
pos_hint: { 'center_x' : 0.5, 'top' : 1 }
multiline: False
font_size: self.height*0.8
Button:
text: 'OK'
size_hint: 0.5, 1
pos_hint: { 'top' : 1 }
on_press: root.dismiss()
on_release: app.create_new_article(url_input.text)
Note that the children of this BoxLayout all have a size_hint_y of 1.0, so they will all be the height that is specified for their container.
The Recommendations widget gets the remaining vertical space (minus the spacing). You can move the Recommendations even closer by reducing the spacing.

Kivy. Position of GridLayout inside ScrollView

I give up. I think I have tried everything I possibly could. I need some explatanion how to position nested layouts classes. In below code I need these labels to be positioned in the center of the screen. Anything I've tried leaves the Labels on the left side.
from kivy.app import App
from kivy.lang import Builder
kv = """
<StorageLabel#Label>
background_normal: ''
size_hint: None, None
size: 65, 50
canvas.before:
Color:
rgba: (1, 0, 0.5, 1)
Rectangle:
pos: self.pos
size: self.size
halign: "left"
valign: "middle"
<Storage#BoxLayout>
ScrollView:
size_hint_x: 1
bar_width: 10
scroll_type: ['bars', 'content']
bar_color: [0, 0, 0, 1]
bar_inactive_color: [0, 0, 0, 1]
pos_hint: {'center_x': 0.5}
GridLayout:
cols: 3
size_hint_y: None
size: self.minimum_size
height: self.minimum_height
StorageLabel:
text: '1m'
StorageLabel:
text: '2m'
StorageLabel:
text: '3m'
Storage:
"""
sm = Builder.load_string(kv)
class Main(App):
def build(self):
return sm
if __name__ == '__main__':
Main().run()
The easiest way to center the Labels is to let the GridLayout size and position them. This results in a larger width for each Label, but they are centered:
from kivy.app import App
from kivy.lang import Builder
kv = """
<StorageLabel#Label>
background_normal: ''
# leave size_hint_x at default of 1
size_hint_y: None
height: 50
canvas.before:
Color:
rgba: (1, 0, 0.5, 1)
Rectangle:
pos: self.pos
size: self.size
<Storage#BoxLayout>
ScrollView:
size_hint_x: 1
bar_width: 10
scroll_type: ['bars', 'content']
bar_color: [0, 0, 0, 1]
bar_inactive_color: [0, 0, 0, 1]
pos_hint: {'center_x': 0.5}
GridLayout:
cols: 3
# add some padding and spacing
padding: 5
spacing: 5
size_hint_y: None
height: self.minimum_height
StorageLabel:
text: '1m'
StorageLabel:
text: '2m'
StorageLabel:
text: '3m'
Storage:
"""
sm = Builder.load_string(kv)
class Main(App):
def build(self):
return sm
if __name__ == '__main__':
Main().run()
If you want the labels to be your original size, then you can place each in its own Layout (perhaps a FloatLayout), and let the GridLayout size and position those Layouts:
from kivy.app import App
from kivy.lang import Builder
kv = """
<StorageLabel#Label>
background_normal: ''
size_hint: None, None
size: 65, 50
# position the label in the center of its FloatLayout
pos_hint: {'center_x':0.5}
canvas.before:
Color:
rgba: (1, 0, 0.5, 1)
Rectangle:
pos: self.pos
size: self.size
<Storage#BoxLayout>
ScrollView:
size_hint_x: 1
bar_width: 10
scroll_type: ['bars', 'content']
bar_color: [0, 0, 0, 1]
bar_inactive_color: [0, 0, 0, 1]
pos_hint: {'center_x': 0.5}
GridLayout:
cols: 3
size_hint_y: None
height: self.minimum_height
# set the default row height to the height of the Labels
row_default_height: 50
FloatLayout:
StorageLabel:
text: '1m'
FloatLayout:
StorageLabel:
text: '2m'
FloatLayout:
StorageLabel:
text: '3m'
Storage:
"""
sm = Builder.load_string(kv)
class Main(App):
def build(self):
return sm
if __name__ == '__main__':
Main().run()

Kivy TextInput Text Overflow. Cursor Outside TextInput Viewport

The last letter is overflowing
I'm using Kivy 1.10.1. I've added a text input (multiline = False). The sentence entered above is "This is a long sentence being typed into Kivy". All the letters have been entered. But the last letter - the "y" is outside the text input.
I've tried changing the padding size, the border size and changing the size of the textinput itself. I don't know if I'm doing something wrong or it is a bug with the library.
Edit:( I should have added the widget code here )
text_input: input_text_field
canvas:
Color:
rgba: self.background_color_intensity_red, self.background_color_intensity_green, self.background_color_intensity_blue, 1
Rectangle:
size: 396, 768
pos: self.pos
source: "sprites/phone.png"
BoxLayout:
size: 354, 598
pos: 21, 96
orientation: 'vertical'
BoxLayout:
size_hint: 1, 0.1
pos: root.pos
orientation: 'horizontal'
Image:
size_hint: 0.15, 1
source: "sprites/profile_pic.png"
TextInput:
id: input_text_field
size_hint: 0.85, 0.5
pos_hint: {'top': 0.75}
background_color: 1,1,1,1
border: (20, 20, 20, 20)
multiline: False
halign: 'center'
focus: True
on_text_validate: self.parent.parent.parent.on_text_input()
BoxLayout:
size_hint: 1, 0.9
pos: root.pos
orientation: 'vertical'
Thank you.

Resources