I try to use a CardTransition in kivy. I want to make 'OtherScreen' slide from the right, and when you go back, it will slide back. I tried it with using 'push' and 'pop' as the mode
I tried using only 'push', which works, or only 'pop', which also works, but I can't seem to combine the two
'''
MainScreen:
name: 'main'
FloatLayout:
size: root.width, root.height
canvas.before:
Color:
rgba: 1, 1, 1, 1
Rectangle:
size: root.width, root.height
Button:
text: '2D'
size: root.height / 2.5, root.height / 2.5
size_hint: None, None
pos_hint: {'center_y': 0.75, 'center_x': 0.5}
on_press:
app.root.current = '2d'
root.manager.transition.direction = "left"
**root.manager.transition.mode = 'push'** *# this is push*
font_size: 50
background_normal: 'ok.png'
OtherScreen:
name: '2d'
FloatLayout:
size: root.width, root.height
Button:
on_press:
app.root.current = 'main'
root.manager.transition.direction = "right"
**root.manager.transition.mode = 'pop'** *# and this is pop*
text: 'back'
'''
After I click the first Button, 'OtherScreen' slides in, but after that the animations completely disappear
Root Cause
The CardTransition is not working as you expected because in your app, it switched the screen before setting the direction.
Snippets
on_press:
app.root.current = '2d'
root.manager.transition.direction = "left"
...
on_press:
app.root.current = 'main'
root.manager.transition.direction = "right"
Solution
Set the transition direction
Switch screen
Snippets
on_press:
root.manager.transition.direction = "left"
app.root.current = '2d'
...
on_press:
root.manager.transition.direction = "right"
app.root.current = 'main'
Related
I completed my code for main window which is the login page and I'm writing my code for the second page. Then, I tried to use the text field on my login screen and I can't type in it. However, before making my second window, the text field worked as expected and I can type in it. What could cause this issue?
Furthermore, I recieve an error (AttributeError: 'super' object has no attribute 'getattr'
) when I tried to press the clear button in main window.
Also, if you tried to run this code and see the second window, you will notice 3 MD cards not aligned properly if you don't expand the window to full size. if you have any idea how to fix it, please let me know.
SUMMARY OF WHAT I'M TRYING TO ACHIEVE HERE:
Figure out what why I can't use the textfield in main window
Fix the error when press the clear button
Align MD Cards properly
.py file
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.uix.screenmanager import ScreenManager, Screen
class MainWindow(Screen):
pass
class SecondWindow(Screen):
pass
class WindowManager(ScreenManager):
pass
class BaseApp(MDApp):
def build(self):
self.theme_cls.theme_style = "Light"
self.theme_cls.primary_palette = "Green"
return Builder.load_file("base.kv")
def clear(self):
self.root.ids.user.text = ""
self.root.ids.passw.text = ""
if __name__ == "__main__":
BaseApp().run()```
.kv file
# Filename: base.kv
#:kivy 2.1.0
#:include main.py
WindowManager:
MainWindow:
SecondWindow:
<MainWindow>:
name: "main"
Screen:
MDCard:
size_hint: None, None
size: 400, 500
pos_hint: {"center_x": 0.5, "center_y": 0.5}
elevation: 10
padding: 25
spacing: 25
orientation: "vertical"
MDLabel:
id: login_label
text: "WELCOME TO JAMES MADISON/n HIGH SCHOOL STUDENTS APP"
font_size: 22
font_name: "Raleway-Regular"
halign: "center"
size_hint_y: None
height: self.texture_size[1]
padding_y: 15
MDBoxLayout:
Image:
source: "jmhs.png"
size_hint_x: 1.15
halign: "center"
size_hint_y: 1.15
height: self.texture_size[1]
padding_y: 10
MDTextFieldRound:
id: user
hint_text: "Username"
icon_right: "account"
size_hint_x: None
width: 200
font_size: 18
font_name: "Roboto-Regular"
pos_hint: {"center_x": 0.5}
MDTextFieldRound:
id: passw
hint_text: "Password"
icon_right: "eye-off"
size_hint_x: None
width: 200
font_size: 18
font_name: "Roboto-Regular"
pos_hint: {"center_x": 0.5}
password: True
MDRoundFlatButton:
text: "LOG IN"
font_size: 12
font_name: "Raleway-Regular"
pos_hint: {"center_x": 0.5}
on_press:
app.root.current = "second"
root.manager.transition.direction = "left"
MDRoundFlatButton:
text: "CLEAR"
font_size: 12
font_name: "Raleway-Regular"
pos_hint: {"center_x": 0.5}
on_press: app.clear()
<SecondWindow>:
name: "second"
MDBoxLayout:
orientation: "horizontal"
MDBoxLayout:
size_hint: .225, 1
canvas.before:
Color:
rgba: 0, 0, 0, 0
Rectangle:
pos: self.pos
size: self.size
MDBoxLayout:
orientation: "vertical"
spacing: "10dp"
size_hint: 1, 1
canvas.before:
Color:
rgba: 227/255, 255/255, 226/255, 0.8
Rectangle:
pos: self.pos
size: self.size
MDBoxLayout:
spacing: "10dp"
size_hint: 1, .1
MDBoxLayout:
spacing: "10dp"
size_hint: 1, .9
canvas.before:
Color:
rgba: 227/255, 255/255, 226/255, 0.8
Rectangle:
pos: self.pos
size: self.size
MDGridLayout:
cols: 3
padding: 18
spacing: "20dp"
MDCard:
padding: 16
elevation: 0
border_radius: 20
radius: [15]
size_hint: None, None
size: "370dp", "140dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDCard:
padding: 16
elevation: 0
border_radius: 20
radius: [15]
size_hint: None, None
size: "370dp", "140dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDCard:
padding: 16
elevation: 0
border_radius: 20
radius: [15]
size_hint: None, None
size: "200dp", "140dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDBoxLayout:
size_hint: .29, 1
canvas.before:
Color:
rgba: 0, 0, 0, 0
Rectangle:
pos: self.pos
size: self.size
When I double click on the video, it goes full screen, but if I double click on it again, it doesn't go back to normal. However, the rest of the window elements are partially visible. The part of my .kv code responsible for the VideoPlayer is given below:
<VideosWindow>:
name: 'vids'
FloatLayout:
FileChooserListView:
id:chooser
path: root.get_files_list()
canvas.before:
Color:
rgb: .4, .5, .5
Rectangle:
pos: self.pos
size: self.size
on_selection: root.select(chooser.selection)
size_hint: (.9, .15)
pos_hint: {'x':.05, 'y':.8}
VideoPlayer:
id:vid
options: {'eos':'loop'}
size_hint: (.9, .7)
pos_hint: {'x':.05, 'y':.05}
Button:
size_hint_y: 0.3
height: 48
text: "open"
disabled: not chooser.selection
on_release: root.select(chooser.selection)
size_hint: (.45, .05)
pos_hint: {'x':.05, 'y':.00}
Button:
text: 'Go Back'
color: (1,1,1,1)
background_normal:''
background_color: (0.3,0.6,0.7,1)
on_release:
vid.state = 'pause'
app.root.current = 'saved_files'
size_hint: (.45, .05)
pos_hint: {'x':.50, 'y':.00}
VideosWindow class code:
class VideosWindow(Screen):
def get_files_list(self):
files = os.sep.join([my_folder,'mp4'])
return files
def select(self, filename):
self.ids.vid.source = filename[0]
self.ids.vid.state = 'play'
The screenshots of my program before and after I go fullscreen mode:
before
after
Solved this issue by adding VideoPlayer widget to the GridLayout. Now .kv code looks like this:
<VideosWindow>:
name: 'vids'
FloatLayout:
FileChooserListView:
id:chooser
path: root.get_files_list()
canvas.before:
Color:
rgb: .4, .5, .5
Rectangle:
pos: self.pos
size: self.size
on_selection: root.select(chooser.selection)
size_hint: (.9, .15)
pos_hint: {'x':.05, 'y':.8}
GridLayout:
cols:1
size_hint: (.9, .7)
pos_hint: {'x':.05, 'y':.05}
VideoPlayer:
id:vid
options: {'eos':'loop'}
Button:
size_hint_y: 0.3
height: 48
text: "open"
disabled: not chooser.selection
on_release: root.select(chooser.selection)
size_hint: (.45, .05)
pos_hint: {'x':.05, 'y':.00}
Button:
text: 'Go Back'
color: (1,1,1,1)
background_normal:''
background_color: (0.3,0.6,0.7,1)
on_release:
vid.state = 'pause'
app.root.current = 'saved_files'
size_hint: (.45, .05)
pos_hint: {'x':.50, 'y':.00}
Don't know if it is good decision but it works.
I'm creating a kivy app right now. I'm quite new to Kivy and kv lang and there doesn't seam to be much rumour about it although i find it great to seperate code logic and layout, especially after some pygame development.
So to my actuall problem: I have a wiki-style screen for screenmanager, consisting out of a BoxLayout:
Title as Label
Scrollable Label for the Text (later , there shall be displayed a nested kv file)
Buttons for Navigation (scroll up and go back to main screen)
Now I'm recreating the Navigation buttons to be floating type as known from many webpages and apps. Problem is, I suddendly cant reference my ScrollView anymore. Any help or suggestions?
<Wiki>:
name: "wiki"
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: "picture.jpg"
BoxLayout:
id: box
orientation: "vertical"
padding: 10
spacing: 10
Label:
font_size: 20
size_hint_y: .1
text: root.country_text
ScrollView:
id: scrlvw
BackgroundLabel:
background_color: 220,220,220, 0.5
size_hint_y: None
text_size: self.width, None
height: self.texture_size[1]
halign: "left"
valign: "top"
text: root.wiki_text
FloatLayout:
size_hint_y: .1
Button:
size_hint_x: .2
pos_hint: {"center_x": .25, "center_y": .5}
text: "Back"
on_release:
app.root.current = "main"
root.manager.transition.direction = "right"
FloatButton:
size_hint_x: .2
pos_hint: {"center_x": .75, "center_y": .5}
text: "Up"
on_release:
widget = BoxLayout()
widget.ids.scrlvw.scroll_y = 0
Before, when it worked, it was:
BoxLayout:
FloatLayout:
size_hint_y: .1
Button:
size_hint_x: .2
pos_hint: {"center_x": .25, "center_y": .5}
text: "Back"
on_release:
app.root.current = "main"
root.manager.transition.direction = "right"
Button:
size_hint_x: .2
pos_hint: {"center_x": .75, "center_y": .5}
text: "Up"
on_release:
scrlvw.scroll_y = 0
Well as its just a design question, I guess i temporary have to dismiss the floating design. But I would be so pleased if you could help me understand this language better.
As long as the 'kv' code described as "when it worked" is still in the same <Wiki> rule, it should still work. The newer kv code will never work as you are trying to create a new BoxLayout and reference an id in it. That has two problems:
The newly created BoxLayout is not the BoxLayout instance that appears in your GUI, so any changes to it will have no effect on what appears in the display.
Unless you have a <BoxLayout> rule in your kv, the newly created BoxLayout will not have a scrlvw id.
The ids defined within a kv rule are available for use only within that rule. See the documntation.
I want to write a mobile app with a KivyMD like Bottom Sheet Menu. My problem with KivyMD Buttom Sheet is, when I click the button to open it, takes very long time (depends on the menu length) because the list is generated by calling the function every time the button was pressed. So I want to write my own solution for this.
In my kv file I manually added 20 buttons to see, it's everything work. But i didn't find the way to do it in python file with loop.
Can anyone help me please to add more than 30 buttons to modalview to be scrollable?
Here is my python file:
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.core.window import Window
Builder.load_file('mylayout.kv')
Window.size = (350, 700)
class MyLayout(BoxLayout):
pass
class MainApp(App):
def build(self):
return MyLayout()
MainApp().run()
an my kv file:
#:import Factory kivy.factory.Factory
<MyPopup#ModalView>
auto_dismiss: True
size_hint: 1, 0.5
pos_hint: {'x': 0, 'top': 0.5}
background_color: 0,0,0,0
background_normal: ''
canvas.before:
Color:
rgba: 48/150,84/150,150/150,1
Rectangle:
size: self.size
pos: self.pos
ScrollView:
#do_scroll_x: False
GridLayout:
id: container1
cols: 1
size_hint: None, None
size: root.width, 1200
pos_hint: {'center_x': .5, 'center_y': .5}
MyButton:
text: '1'
on_press:
root.dismiss()
print(1)
MyButton:
text: '2'
on_press:
root.dismiss()
print(2)
MyButton:
text: '3'
on_press:
root.dismiss()
print(3)
MyButton:
text: '4'
on_press:
root.dismiss()
print(4)
MyButton:
text: '5'
on_press:
root.dismiss()
print(5)
MyButton:
text: '6'
on_press:
root.dismiss()
print(6)
MyButton:
text: '7'
on_press:
root.dismiss()
print(7)
MyButton:
text: '8'
on_press:
root.dismiss()
print(8)
MyButton:
text: '9'
on_press:
root.dismiss()
print(9)
MyButton:
text: '10'
on_press:
root.dismiss()
print(10)
MyButton:
text: '11'
on_press:
root.dismiss()
print(11)
MyButton:
text: '12'
on_press:
root.dismiss()
print(12)
MyButton:
text: '13'
on_press:
root.dismiss()
print(13)
MyButton:
text: '14'
on_press:
root.dismiss()
print(14)
MyButton:
text: '15'
on_press:
root.dismiss()
print(15)
MyButton:
text: '16'
on_press:
root.dismiss()
print(16)
MyButton:
text: '17'
on_press:
root.dismiss()
print(17)
MyButton:
text: '18'
on_press:
root.dismiss()
print(18)
MyButton:
text: '19'
on_press:
root.dismiss()
print(19)
MyButton:
text: '20'
on_press:
root.dismiss()
print(20)
<MyLayout>
orientation: 'vertical'
size: root.width, root.height
Label:
size_hint: 1, 0.9
text: 'main'
font_size: 24
Button:
size_hint: 1, 0.1
text: 'menu'
font_size: 24
on_release: Factory.MyPopup().open()
<MyButton#Button>
background_color: 0,0,0,0
background_normal: ''
canvas.before:
Color:
rgba: (48/255,84/255,150/255,1) if self.state == 'normal' else (43/255,108/255,229/255,1)
Rectangle:
size: self.size
pos: self.pos
In order to build the MyPopup filled with MyButtons, you must either define those classes in the python code or use Factory to create the instances. Here is a modified version of your kv to do this:
<MyPopup#ModalView>
auto_dismiss: True
size_hint: 1, 0.5
pos_hint: {'x': 0, 'top': 0.5}
background_color: 0,0,0,0
background_normal: ''
canvas.before:
Color:
rgba: 48/150,84/150,150/150,1
Rectangle:
size: self.size
pos: self.pos
ScrollView:
#do_scroll_x: False
GridLayout:
id: container1
cols: 1
size_hint: None, None
width: root.width
height: self.minimum_height # let the GridLayout set its own height as needeed
pos_hint: {'center_x': .5, 'center_y': .5}
<MyLayout>
orientation: 'vertical'
size: root.width, root.height
Label:
size_hint: 1, 0.9
text: 'main'
font_size: 24
Button:
size_hint: 1, 0.1
text: 'menu'
font_size: 24
# on_release: Factory.MyPopup().open()
on_release: app.open_popup() # call app method to build MyPopup and fill it
<MyButton#Button>
background_color: 0,0,0,0
background_normal: ''
size_hint_y: None
height: 20
canvas.before:
Color:
rgba: (48/255,84/255,150/255,1) if self.state == 'normal' else (43/255,108/255,229/255,1)
Rectangle:
size: self.size
pos: self.pos
Note that the GridLayout height is set to self.minimum_height to allow for any number of MyButton children, and the MyButton height is set to a fixed value (so that GridLayout can calculate the minimum height). Also, the import of Factory is no longer needed in the kv.
The modified python code:
from kivy.app import App
from kivy.factory import Factory
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.core.window import Window
Builder.load_file('mylayout.kv')
Window.size = (350, 700)
class MyLayout(BoxLayout):
pass
class MainApp(App):
def build(self):
return MyLayout()
def open_popup(self, *args):
# create the popup (must use Factory since MyPopup is defined in kv)
self.popup = Factory.MyPopup()
# fill the GridLayout
grid = self.popup.ids.container1
for i in range(60):
grid.add_widget(Factory.MyButton(text=str(i), on_press=self.myButtPress))
# open popup
self.popup.open()
def myButtPress(self, butt):
print(butt.text)
self.popup.dismiss()
MainApp().run()
I have two toggle buttons. When one is in the "down" state I need the other one to be in the "normal" state. I tried making an if statement but it makes both buttons have the same state at the same time. Here it is:
on_state: exlexport.state = "down" if exlexport.state == "normal" else "normal"
Here is my full code:
<SettingsWindow>:
name:"settings"
FloatLayout:
Widget:
canvas.before:
# Background
Rectangle:
pos: self.pos
size: self.size
source: "Images/logo_br.png"
# Brothers Menu
Color:
rgba: 1,1,1,.3
Rectangle:
size: 200, 500
pos: self.width/10, self.height/7
Color:
rgba: 0,0,0,.5
Rectangle:
size: 190, 350
pos: self.width/9.4, self.height/3
# Jobs Menu
Color:
rgba: 1,1,1,.3
Rectangle:
size: 200, 500
pos: self.width/2.5, self.height/7
Color:
rgba: 0,0,0,.5
Rectangle:
size: 190, 350
pos: self.width/2.465, self.height/3
# Export Menu
Color:
rgba: 1,1,1,.3
Rectangle:
size: 200, 250
pos: self.width/1.43, self.height/3.08
Color:
rgba: 0,0,0,.5
Rectangle:
size: 190, 205
pos: self.width/1.416, self.height/3
# Brothers Scroll List
ScrollView:
size_hint: (None, None)
size: (150, 325)
pos_hint: {'center_x': .23, 'center_y': .62}
# Brothers Menu Scroll Label
Label:
size_hint: None, None
size: self.texture_size
text: root.pretty_list_people
# Jobs Menu Scroll Label
ScrollView:
size_hint: (None, None)
size: (150, 325)
pos_hint: {'center_x': .53, 'center_y': .62}
Label:
size_hint: None, None
size: self.texture_size
text: root.pretty_list_jobs
Button:
text:"Back"
size_hint: 0.1, 0.1
pos_hint: {"x":0, "y":0}
background_color: 1,1,1,.6
on_release:
app.root.current = "main"
root.manager.transition.direction = 'right'
# Brothers Title
Label:
text: "Brothers"
font_size: 30
italic: True
pos_hint: {"x":-0.275, "y":0.45}
color: 0,0,0,1
# Jobs Title
Label:
text: "Jobs"
font_size: 30
italic: True
pos_hint: {"x":0.02, "y":0.45}
color: 0,0,0,1
# Exporting Title
Label:
text: "Exporting"
font_size: 30
italic: True
pos_hint: {"x":0.325, "y":0.21}
color: 0,0,0,1
# Brothers Menu Buttons
Button:
text:"Update"
size_hint: 0.25, 0.1
pos_hint: {"x":0.1, "y":0.144}
on_press: root.Pretty_Print_People(root.get_People())
Button:
text:"Add"
size_hint: 0.125, 0.09
pos_hint: {"x":0.1, "y":0.243}
on_press: root.showpop_addbro()
Button:
text:"Remove"
size_hint: 0.125, 0.09
pos_hint: {"x":0.225, "y":0.243}
on_press: root.showpop_removebro()
Button:
text:"Update"
size_hint: 0.25, 0.1
pos_hint: {"x":0.1, "y":0.144}
on_press: root.Pretty_Print_People(root.get_People())
# Jobs Menu Buttons
Button:
text:"Add"
size_hint: 0.125, 0.09
pos_hint: {"x":0.4, "y":0.243}
on_press: root.showpop_addjob()
Button:
text:"Remove"
size_hint: 0.125, 0.09
pos_hint: {"x":0.525, "y":0.243}
on_press: root.showpop_removejob()
Button:
text: "Update"
size_hint: 0.25, 0.1
pos_hint: {"x":0.4, "y":0.144}
on_press: root.Pretty_Print_Jobs(root.get_Jobs())
# Exporting Menu Content
ToggleButton:
id: txtexport
text: "Toggle Text File Export"
size_hint: 0.236, 0.08
pos_hint: {"x":0.707, "y":0.59}
on_state: exlexport.state = "down" if exlexport.state == "normal" else "normal"
ToggleButton:
id: exlexport
text: "Toggle Excel File Export"
size_hint: 0.236, 0.08
pos_hint: {"x":0.707, "y":0.51}
The toggle buttons start after the comment "Exporting Menu Content"
ToggleButton:
id: txtexport
group: 'exportopts'
text: "Toggle Text File Export"
size_hint: 0.236, 0.08
pos_hint: {"x":0.707, "y":0.59}
state: 'down'
ToggleButton:
id: exlexport
group: 'exportopts'
text: "Toggle Excel File Export"
size_hint: 0.236, 0.08
pos_hint: {"x":0.707, "y":0.51}
Credit to this solution goes to John Anderson! Thank you.
Just assign the toggle buttons the same group via group property and set the state of one them to 'down'.
I was looking for a way to always make one of my toggle buttons be "down" because belonging to the same group, don't assure me that, they can both be "normal". In order to get that result and have always one button "down", I've added this line on each one:
on_press: self.state = "down"