What I have:
- A dynamic TextWrapper(GridLayout) that includes Images and Labels made from the "description" text out of the SpeciesView.data
- A RecycleView that lets me click through the different texts
The problem is though, that I can't seem to find a way to scroll through the GridLayout (TextWrapper).
I think I am not using the size_hint_y correctly, which should allow the ScrollView to be able to scroll. The reason found here..
The text is always weirdly cut.
So how do I get this ScrollView to work?
from kivy.app import App
from kivy.uix.button import Label
from kivy.lang import Builder
from kivy.properties import BooleanProperty, StringProperty, ObjectProperty
from kivy.uix.behaviors import FocusBehavior
from kivy.uix.gridlayout import GridLayout
from kivy.uix.image import Image
from kivy.uix.recycleboxlayout import RecycleBoxLayout
from kivy.uix.recycleview import RecycleView
from kivy.uix.recycleview.layout import LayoutSelectionBehavior
from kivy.uix.recycleview.views import RecycleDataViewBehavior
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.scrollview import ScrollView
Builder.load_string("""
<ScreenManagement>:
screen_species: screen_species
ScreenSpecies:
id: screen_species
name: 'screen_species'
<ScreenSpecies>:
species_text: species_text
Label:
pos_hint: {"x": .45, "top": 1}
size_hint: .1, .1
text: "Test"
BoxLayout:
id: species_layout
padding: dp(10)
spacing: dp(10)
orientation: 'horizontal'
SpeciesView:
id: species_list_view
SpeciesText:
id: species_text
name_selected: "" if not species_list_view.name_selected else species_list_view.name_selected
<SpeciesView>:
viewclass: 'SelectableLabel'
name_selected: ""
SelectableRecycleBoxLayout:
orientation: 'vertical'
default_size: None, dp(32)
default_size_hint: .6, None
size_hint: 1, .9
multiselect: False
touch_multiselect: False
<SpeciesText>:
ScrollView:
size_hint_y: None
<SelectableLabel>:
canvas.before:
Color:
rgba: (.05, 0.5, .9, .8) if self.selected else (.5, .5, .5, 1)
Rectangle:
pos: self.pos
size: self.size
<SpeciesLabel>:
text_size: self.size
size_hint_y: None
<SpeciesImage>:
size_hint_y: None
allow_stretch: True
keep_ratio: True
texture_size: dp(20), dp(40)
<TextWrapper>:
minimum_height: self.height
orientation: "vertical"
spacing: 10
cols: 1
size_hint_y: None
""")
class SelectableRecycleBoxLayout(FocusBehavior, LayoutSelectionBehavior,
RecycleBoxLayout):
pass
class SelectableLabel(RecycleDataViewBehavior, Label):
''' Add selection support to the Label '''
index = None
selected = BooleanProperty(False)
selectable = BooleanProperty(True)
def refresh_view_attrs(self, rv, index, data):
''' Catch and handle the view changes '''
self.index = index
return super(SelectableLabel, self).refresh_view_attrs(
rv, index, data)
def on_touch_down(self, touch):
''' Add selection on touch down '''
if super(SelectableLabel, self).on_touch_down(touch):
return True
if self.collide_point(*touch.pos) and self.selectable:
return self.parent.select_with_touch(self.index, touch)
def apply_selection(self, rv, index, is_selected):
''' Respond to the selection of items in the view. '''
self.selected = is_selected
if is_selected:
print("selection changed to {0}".format(rv.data[index]))
rv.name_selected = rv.data[index]['text']
App.get_running_app().root.screen_species.species_text.update(TextWrapper(rv.data[index]["description"]))
else:
print("selection removed for {0}".format(rv.data[index]))
class ScreenSpecies(Screen):
pass
class SpeciesView(RecycleView):
def __init__(self, **kwargs):
super(SpeciesView, self).__init__(**kwargs)
self.data = [
{"text": "Test1", "description": "Test1.textbf\nBla\n |img=image.jpg| Test1.textaf\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla"},
{"text": "Test2", "description": "Test2.text"},
{"text": "Test3", "description": "Test3.text"}
]
class SpeciesText(ScrollView):
def update(self, text_wrapper):
print("Adding TextWrapper {} to SpeciesText ScrollView".format(text_wrapper))
self.clear_widgets()
self.add_widget(text_wrapper)
class SpeciesLabel(Label):
pass
class SpeciesImage(Image):
pass
class TextWrapper(GridLayout):
def __init__(self, text="", **kwargs):
super(TextWrapper, self).__init__(**kwargs)
self.content = self.wrap_text(text)
def wrap_text(self, source):
text = source.split("|")
for i in range(0, len(text)):
if "img=" in text[i]:
self.add_widget(SpeciesImage(source=text[i][4:]))
else:
self.add_widget(SpeciesLabel(text=text[i]))
return text
class ScreenManagement(ScreenManager):
screen_species = ObjectProperty(None)
class TestApp(App):
def build(self):
return ScreenManagement()
test_app = TestApp()
test_app.run()
Thanks as always!
SpeciesText - Using RstDoc
The following example illustrates Kivy RstDcoument. It supports long text, images, and the document is scrollable.
Snippets
kv File
<SpeciesText>:
container: container
orientation: 'vertical'
size_hint: 1, .9
RstDocument:
id: container
Example: SpeciesText - Using RstDoc
main.py
from kivy.app import App
from kivy.uix.button import Label
from kivy.lang import Builder
from kivy.properties import BooleanProperty, ObjectProperty
from kivy.uix.behaviors import FocusBehavior
from kivy.uix.image import Image
from kivy.uix.recycleboxlayout import RecycleBoxLayout
from kivy.uix.recycleview import RecycleView
from kivy.uix.recycleview.layout import LayoutSelectionBehavior
from kivy.uix.recycleview.views import RecycleDataViewBehavior
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout
Builder.load_string("""
<ScreenManagement>:
screen_species: screen_species
ScreenSpecies:
id: screen_species
name: 'screen_species'
<ScreenSpecies>:
species_text: species_text
Label:
pos_hint: {"x": .45, "top": 1}
size_hint: .1, .1
text: "Test"
BoxLayout:
id: species_layout
padding: dp(10)
spacing: dp(10)
orientation: 'horizontal'
SpeciesView:
id: species_list_view
SpeciesText:
id: species_text
name_selected: "" if not species_list_view.name_selected else species_list_view.name_selected
<SpeciesView>:
viewclass: 'SelectableLabel'
name_selected: ""
SelectableRecycleBoxLayout:
orientation: 'vertical'
default_size: None, dp(32)
default_size_hint: .6, None
size_hint: 1, .9
multiselect: False
touch_multiselect: False
<SpeciesText>:
container: container
orientation: 'vertical'
size_hint: 1, .9
RstDocument:
id: container
<SelectableLabel>:
canvas.before:
Color:
rgba: (.05, 0.5, .9, .8) if self.selected else (.5, .5, .5, 1)
Rectangle:
pos: self.pos
size: self.size
""")
class SelectableRecycleBoxLayout(FocusBehavior, LayoutSelectionBehavior,
RecycleBoxLayout):
pass
class SelectableLabel(RecycleDataViewBehavior, Label):
''' Add selection support to the Label '''
index = None
selected = BooleanProperty(False)
selectable = BooleanProperty(True)
def refresh_view_attrs(self, rv, index, data):
''' Catch and handle the view changes '''
self.index = index
return super(SelectableLabel, self).refresh_view_attrs(
rv, index, data)
def on_touch_down(self, touch):
''' Add selection on touch down '''
if super(SelectableLabel, self).on_touch_down(touch):
return True
if self.collide_point(*touch.pos) and self.selectable:
return self.parent.select_with_touch(self.index, touch)
def apply_selection(self, rv, index, is_selected):
''' Respond to the selection of items in the view. '''
self.selected = is_selected
if is_selected:
print("selection changed to {0}".format(rv.data[index]))
rv.name_selected = rv.data[index]['text']
App.get_running_app().root.screen_species.species_text.update(rv.data[index]["description"])
else:
print("selection removed for {0}".format(rv.data[index]))
class ScreenSpecies(Screen):
species_text = ObjectProperty(None)
class SpeciesView(RecycleView):
def __init__(self, **kwargs):
super(SpeciesView, self).__init__(**kwargs)
self.data = [
{"text": "Test1", "description": "./rstDocs/bearwithus.rst"},
{"text": "Test2", "description": "./rstDocs/kvDoc.rst"},
{"text": "Test3", "description": "./rstDocs/sphinxDoc.rst"}
]
class SpeciesText(BoxLayout):
container = ObjectProperty(None)
def update(self, source):
print("Adding TextWrapper {} to SpeciesText ScrollView".format(source))
self.container.source = source
class SpeciesLabel(Label):
pass
class SpeciesImage(Image):
pass
class ScreenManagement(ScreenManager):
screen_species = ObjectProperty(None)
class TestApp(App):
def build(self):
return ScreenManagement()
test_app = TestApp()
test_app.run()
Output: SpeciesText - Using RstDoc
SpeciesText - Using ScrollView+GridLayout+Label+Image
Use ObjectProperty to hook up to the GridLayout. Please refer to the example for details.
Snippets
kv file
<SpeciesText>:
container: container
bar_width: 10
bar_color: 0, 1, 0, 1 # green
bar_inactive_color: 1, 0, 0, 1 # red
effect_cls: "ScrollEffect"
scroll_type: ['bars']
size_hint: (1, None)
# TextWrapper
GridLayout:
id: container
cols: 1
spacing: 10
size_hint_y: None
height: self.minimum_height
Example: SpeciesText - Using ScrollView+GridLayout+Label+Image
main.py
from kivy.app import App
from kivy.uix.button import Label
from kivy.lang import Builder
from kivy.properties import BooleanProperty, StringProperty, ObjectProperty
from kivy.uix.behaviors import FocusBehavior
from kivy.uix.gridlayout import GridLayout
from kivy.uix.image import Image
from kivy.uix.recycleboxlayout import RecycleBoxLayout
from kivy.uix.recycleview import RecycleView
from kivy.uix.recycleview.layout import LayoutSelectionBehavior
from kivy.uix.recycleview.views import RecycleDataViewBehavior
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.scrollview import ScrollView
Builder.load_string("""
<ScreenManagement>:
screen_species: screen_species
ScreenSpecies:
id: screen_species
name: 'screen_species'
<ScreenSpecies>:
species_text: species_text
Label:
pos_hint: {"x": .45, "top": 1}
size_hint: .1, .1
text: "Test"
BoxLayout:
id: species_layout
padding: dp(10)
spacing: dp(10)
orientation: 'horizontal'
SpeciesView:
id: species_list_view
SpeciesText:
id: species_text
name_selected: "" if not species_list_view.name_selected else species_list_view.name_selected
<SpeciesView>:
viewclass: 'SelectableLabel'
name_selected: ""
SelectableRecycleBoxLayout:
orientation: 'vertical'
default_size: None, dp(32)
default_size_hint: .6, None
size_hint: 1, .9
multiselect: False
touch_multiselect: False
<SpeciesText>:
container: container
bar_width: 10
bar_color: 0, 1, 0, 1 # green
bar_inactive_color: 1, 0, 0, 1 # red
effect_cls: "ScrollEffect"
scroll_type: ['bars']
size_hint: (1, None)
GridLayout:
id: container
cols: 1
spacing: 10
size_hint_y: None
height: self.minimum_height
<SelectableLabel>:
canvas.before:
Color:
rgba: (.05, 0.5, .9, .8) if self.selected else (.5, .5, .5, 1)
Rectangle:
pos: self.pos
size: self.size
<SpeciesLabel>:
size: self.texture_size
size_hint_y: None
<SpeciesImage>:
size_hint_y: None
allow_stretch: True
keep_ratio: True
texture_size: dp(20), dp(40)
""")
class SelectableRecycleBoxLayout(FocusBehavior, LayoutSelectionBehavior,
RecycleBoxLayout):
pass
class SelectableLabel(RecycleDataViewBehavior, Label):
''' Add selection support to the Label '''
index = None
selected = BooleanProperty(False)
selectable = BooleanProperty(True)
def refresh_view_attrs(self, rv, index, data):
''' Catch and handle the view changes '''
self.index = index
return super(SelectableLabel, self).refresh_view_attrs(
rv, index, data)
def on_touch_down(self, touch):
''' Add selection on touch down '''
if super(SelectableLabel, self).on_touch_down(touch):
return True
if self.collide_point(*touch.pos) and self.selectable:
return self.parent.select_with_touch(self.index, touch)
def apply_selection(self, rv, index, is_selected):
''' Respond to the selection of items in the view. '''
self.selected = is_selected
if is_selected:
print("selection changed to {0}".format(rv.data[index]))
rv.name_selected = rv.data[index]['text']
App.get_running_app().root.screen_species.species_text.wrap_text(rv.data[index]["description"])
else:
print("selection removed for {0}".format(rv.data[index]))
class ScreenSpecies(Screen):
species_text = ObjectProperty(None)
class SpeciesView(RecycleView):
def __init__(self, **kwargs):
super(SpeciesView, self).__init__(**kwargs)
self.data = [
{"text": "Test1", "description": "Test1.textbf\nBla\n |img=kivy_logo.jpg| Test1.textaf\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla\nBla"},
{"text": "Test2", "description": "Test2.text"},
{"text": "Test3", "description": "Test3.text"}
]
class SpeciesText(ScrollView):
container = ObjectProperty(None)
def wrap_text(self, source):
print("Adding TextWrapper {} to SpeciesText ScrollView".format(source))
self.container.clear_widgets()
text = source.split("|")
for txt in text:
if "img=" in txt:
self.container.add_widget(SpeciesImage(source=txt[4:]))
else:
self.container.add_widget(SpeciesLabel(text=txt))
class SpeciesLabel(Label):
pass
class SpeciesImage(Image):
pass
class ScreenManagement(ScreenManager):
screen_species = ObjectProperty(None)
class TestApp(App):
def build(self):
return ScreenManagement()
test_app = TestApp()
test_app.run()
Output: SpeciesText - Using ScrollView+GridLayout+Label+Image
Related
I am making an app that will show a datatable inside a tab, and I am trying to show it as the app starts.
Right now I am using a button to show the datatable, but in the finished app I want it to show on start-up or as I open the tab.
.py
from kivymd.app import MDApp
from kivy.uix.gridlayout import GridLayout
from kivy.properties import ObjectProperty
from kivy.lang import Builder
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.floatlayout import MDFloatLayout
from kivy.uix.widget import Widget
from kivymd.uix.datatables import MDDataTable
from kivy.uix.anchorlayout import AnchorLayout
from kivy.metrics import dp
Builder.load_file('testwidgets.kv')
class main(Widget):
pass
class Tab(MDFloatLayout, MDTabsBase):
def load_foodtable(self, *args):
test = range(5)
self.food_layout = AnchorLayout()
self.food_tabel = MDDataTable(
pos_hint={'center_y': 0.5, 'center_x': 0.5},
size_hint=(0.9, 0.6),
column_data=[
("Name", dp(30)),
("Carbohydrates", dp(30)),
("Protin", dp(30)),
],
row_data=[
("stuff", "moreStuff", "2") for i in(test)
],
elevation=20,
)
self.add_widget(self.food_tabel)
return self.food_layout
def on_enter(self):
self.load_foodtable()
class DemoApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "Teal"
self.theme_cls.primary_hue = "400"
return main()
if __name__ == '__main__':
DemoApp().run()
.kv
<main>:
MDNavigationLayout:
size : root.width, root.height
ScreenManager:
id: screen_manager
Screen:
name: "mddatatable"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: toolbar
title: "Drinks and Food"
elevation: 10
MDTabs:
Tab:
title: "Food"
Tab:
title: "Drink"
<Tab>:
MDRaisedButton:
text: 'open table'
on_press: root.on_enter()
pos_hint: {'center_x': .5, 'center_y': .5}
I don't know if it's still relevant for you but I came across a similar issue so maybe this solution is of use to anyone...
You need to specify the on_tab_switch event for the MDTabs in your .kv:
on_tab_switch: app.on_tab_switch(*args)
You also need to create this method in the DemoApp class of your .py to forward the call to your on_enter function:
def on_tab_switch(self, instance_tabs, instance_tab, instance_tab_label, tab_text):
instance_tab.on_enter()
Your whole code should look like this:
.py
from kivymd.app import MDApp
from kivy.uix.gridlayout import GridLayout
from kivy.properties import ObjectProperty
from kivy.lang import Builder
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.floatlayout import MDFloatLayout
from kivy.uix.widget import Widget
from kivymd.uix.datatables import MDDataTable
from kivy.uix.anchorlayout import AnchorLayout
from kivy.metrics import dp
Builder.load_file('testwidgets.kv')
class main(Widget):
pass
class Tab(MDFloatLayout, MDTabsBase):
def load_foodtable(self, *args):
test = range(5)
self.food_layout = AnchorLayout()
self.food_tabel = MDDataTable(
pos_hint={'center_y': 0.5, 'center_x': 0.5},
size_hint=(0.9, 0.6),
column_data=[
("Name", dp(30)),
("Carbohydrates", dp(30)),
("Protin", dp(30)),
],
row_data=[
("stuff", "moreStuff", "2") for i in(test)
],
elevation=20,
)
self.add_widget(self.food_tabel)
return self.food_layout
def on_enter(self):
self.load_foodtable()
class DemoApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "Teal"
self.theme_cls.primary_hue = "400"
return main()
def on_tab_switch(self, instance_tabs, instance_tab, instance_tab_label, tab_text):
instance_tab.on_enter()
if __name__ == '__main__':
DemoApp().run()
.kv
<main>:
MDNavigationLayout:
size : root.width, root.height
ScreenManager:
id: screen_manager
Screen:
name: "mddatatable"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: toolbar
title: "Drinks and Food"
elevation: 10
MDTabs:
on_tab_switch: app.on_tab_switch(*args)
Tab:
title: "Food"
Tab:
title: "Drink"
<Tab>:
MDRaisedButton:
text: 'open table'
on_press: root.on_enter()
pos_hint: {'center_x': .5, 'center_y': .5}
I recently started using kivy for my project.
I'm trying to make a simple digital coffee menu board.
I'm trying to display what a user have selected.
In MenuScreen, menu is presented to a user, which then a user can select.
After selection, I would like to move to another screen and display 'the selection' eg: Espresso
on top of the picture of a coffee cup.
I got to a stage where I can manually write a string value to be displayed.
But I wasn't able to display the selected name of the coffee by a user.
I'm literally stuck with this problem for 2 straight days or about 17hours of intense googling and reading documentations, but with my limited braincells, I wasn't able to solve it.
I've looked into binding, passing variables between 2 classes,etc.
Any help would be greatly appreciated!!
short version python code
class MenuScreen(Screen):
def __init__(self, **kwargs):
super(MenuScreen, self).__init__(**kwargs)
def buttonEspresso(self):
print ('Espresso Selected')
global selectedDrink
selectedDrink = self.coffeeName.text #<-------
sm.current = 'settings'
class SettingsScreen(Screen):
coffeeName = ObjectProperty(None)
def __init__(self, **kwargs):
super(SettingsScreen, self).__init__(**kwargs)
self.ids.coffeeName.text = selectedDrink #<-------
def backToMenu(self):
print('going back to menu')
sm.current = 'menu'
short version kivy code
:
coffeeName: coffeeName
GridLayout:
cols:2
GridLayout:
cols:2
Button:
id: coffeeName
text: 'Espresso'
on_press:
root.manager.transition = FadeTransition()
root.text = 'Espresso'
root.buttonEspresso()
<SettingsScreen>:
coffeeName: coffeeName
GridLayout:
cols:2
GridLayout:
cols:1
Button:
text: 'Back to menu'
size_hint: None, None
size: 200, 50
on_press:
root.manager.transition = SlideTransition(direction="left")
root.backToMenu()
Label:
id: coffeeName #<-------
text: 'coffeeName'
font_size: 70
size_hint: None, None
size: 960, 50
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
Image:
source: 'cappuccino.png'
size_hint: None, None
size: 1000, 1000
If I select 'Espresso' then my desired outcome is
having 'Espresso' displayed in the red border.
Above image with myDesiredOutcome was made by editing
self.ids.coffeeName.text = selectedDrink #<-------
for illustration purpose
PythonCode
import kivy
from kivy.app import App
from kivy.logger import Logger
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.video import Video
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivy.properties import StringProperty
from kivy.properties import ObjectProperty
import subprocess
import os
from omxplayer.player import OMXPlayer
class Player(Video):
def __init__(self, **kwargs):
super(Player, self).__init__(**kwargs)
self.player = OMXPlayer('video.mp4','--loop')
self.state='play'
self.options={'eos': 'loop'}
self.bind(on_touch_down = self.on_stop)
def check(self):
Logger.info("film position:" + str(self.position))
def on_stop(self, *args):
print ('I have been clicked')
#self.state='stop' # stop the video
self.player.quit()
sm.current = 'menu' # switch to the other Screen
class MenuScreen(Screen):
#coffeeName = ObjectProperty(None)
def __init__(self, **kwargs):
super(MenuScreen, self).__init__(**kwargs)
def buttonEspresso(self):
print ('Espresso Selected')
global selectedDrink
selectedDrink = self.coffeeName.text #<-------
sm.current = 'settings'
def buttonAmericano(self):
print ('Americano Selected')
sm.current = 'settings'
def buttonCafeLatte(self):
print ('Cafe Latte Selected')
sm.current = 'settings'
def buttonCappuccino(self):
print ('Cappuccino Selected')
sm.current = 'settings'
def buttonCafeMocha(self):
print ('Cafe Mocha Selected')
sm.current = 'settings'
def buttonMochaccino(self):
print ('Mochaccino Selected')
sm.current = 'settings'
class SettingsScreen(Screen):
coffeeName = ObjectProperty(None)
def __init__(self, **kwargs):
super(SettingsScreen, self).__init__(**kwargs)
self.ids.coffeeName.text = selectedDrink #<-------
def backToMenu(self):
print('going back to menu')
sm.current = 'menu'
Builder.load_file('screenManager.kv')
sm = ScreenManager()
screen1 = Screen(name='video')
screen1.add_widget(Player())
sm.add_widget(screen1)
sm.add_widget(MenuScreen(name='menu'))
sm.add_widget(SettingsScreen(name='settings'))
class VideoPlayerApp(App):
def build(self):
return sm
if __name__ == "__main__":
video = VideoPlayerApp()
try:
video.run()
except KeyboardInterrupt:
video.stop()
os.system('killall dbus-daemon')
Kivy code
#:import FadeTransition kivy.uix.screenmanager.FadeTransition
#:import SlideTransition kivy.uix.screenmanager.SlideTransition
#:import GridLayout kivy.uix.gridlayout
<MenuScreen>:
coffeeName: coffeeName
GridLayout:
cols:2
GridLayout:
cols:2
Button:
id: coffeeName
text: 'Espresso'
on_press:
root.manager.transition = FadeTransition()
root.text = 'Espresso'
root.buttonEspresso()
Button:
text: 'Americano'
on_press:
root.manager.transition = FadeTransition()
root.buttonAmericano()
Button:
text: 'Cafe Latte'
on_press:
root.manager.transition = FadeTransition()
root.buttonCafeLatte()
Button:
text: 'Cappuccino'
on_press:
root.manager.transition = FadeTransition()
root.buttonCappuccino()
Button:
text: 'Cafe Mocha'
on_press:
root.manager.transition = FadeTransition()
root.buttonCafeMocha()
Button:
text: 'Mochaccino'
on_press:
root.manager.transition = FadeTransition()
root.buttonMochaccino()
GridLayout:
cols:2
Button:
text: 'Hot Chocolate'
on_press:
root.manager.transition = FadeTransition()
root.manager.current = 'settings'
#fading transition for video
Button:
text: 'Creamy Chocolate'
on_press:
root.manager.transition = FadeTransition()
root.manager.current = 'settings'
#fading transition for video
Button:
text: 'Express Coffee'
on_press:
root.manager.transition = FadeTransition()
root.manager.current = 'settings'
#fading transition for video
Button:
text: 'Green Tea'
on_press:
root.manager.transition = FadeTransition()
root.manager.current = 'settings'
#fading transition for video
Button:
text: 'Milk Tea'
on_press:
root.manager.transition = FadeTransition()
root.manager.current = 'settings'
#fading transition for video
Button:
text: 'Roibos Tea'
on_press:
root.manager.transition = FadeTransition()
root.manager.current = 'settings'
#fading transition for video
<SettingsScreen>:
coffeeName: coffeeName
GridLayout:
cols:2
GridLayout:
cols:1
Button:
text: 'Back to menu'
size_hint: None, None
size: 200, 50
on_press:
root.manager.transition = SlideTransition(direction="left")
root.backToMenu()
Label:
id: coffeeName #<-------
text: 'coffeeName'
font_size: 70
size_hint: None, None
size: 960, 50
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
Image:
source: 'cappuccino.png'
size_hint: None, None
size: 1000, 1000
GridLayout:
cols:1
Label:
font_size: 70
text: 'Select a Payment Option'
size_hint: None, None
size: 960, 200
BoxLayout:
size_hint: None, None
size: 960, 50
ToggleButton:
text: 'Cash'
font_size: 50
on_press:
print('on_press')
ToggleButton:
text: 'UniPay'
font_size: 50
ToggleButton:
text: 'Bank Cards'
font_size: 50
BoxLayout:
Button:
text: 'Back to menu'
on_press:
root.manager.transition = SlideTransition(direction="left")
root.manager.current = 'menu'
I am referring to this video and trying to replicate the same using KivyMD. Basically it is a simple app with the screen manager. Once you enter the password pswd it takes you to the next screen and on the release of the button, it comes back.
I am trying to replace the text filed with KivyMD TestRoundField
main.py file from the Tutorial
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
class MainWindow(Screen):
pass
class SecondWindow(Screen):
pass
class WindowManager(ScreenManager):
pass
kv = Builder.load_file("my.kv")
class MyMainApp(App):
def build(self):
return kv
if __name__ == "__main__":
MyMainApp().run()
my.kv file from the tutorial - Password - pswd
WindowManager:
MainWindow:
SecondWindow:
<MainWindow>:
name: "main"
GridLayout:
cols:1
GridLayout:
cols:2
Label:
text: "Password"
TextInput:
id: passw
multiline: False
Button:
text: "Submit"
on_release:
app.root.current = "second" if passw.text == "pswd" else "main"
root.manager.transition.direction = "left"
<SecondWindow>:
name: "second"
Button:
text: "Go Back"
on_release:
app.root.current = "main"
root.manager.transition.direction = "right"
My Code
This is my main.py file -
from kivy.factory import Factory
from kivymd.app import MDApp
from kivy.lang import Builder
kivyFile = Builder.load_file("loginKivy.kv")
class MainApp(MDApp):
def __init__(self, **kwargs):
self.title = "KivyMD Examples - Round Text Field"
self.theme_cls.primary_palette = "BlueGray"
super().__init__(**kwargs)
def build(self):
self.root = Factory.Password()
return kivyFile
class Second_Screen(Screen):
pass
if __name__ == "__main__":
MainApp().run()
This is my loginKivy.kv file
#:set color_shadow [0, 0, 0, .2980392156862745]
#:set color_lilac [.07058823529411765, .07058823529411765, .14901960784313725, .8]
<MyMDTextFieldRound#MDTextFieldRound>
size_hint_x: None
normal_color: color_shadow
active_color: color_shadow
pos_hint: {"center_x": .5}
<Password#Screen>
canvas:
Color:
rgba: color_lilac
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
orientation: "vertical"
size_hint_y: None
height: self.minimum_height
spacing: dp(15)
pos_hint: {"center_x": .5, "center_y": .5}
MyMDTextFieldRound:
icon_type: "without"
hint_text: "Field without icon"
color: 1,0,1,1
I am confused on how to proceed further. What should I do next?
I suggest changing your build() method to:
def build(self):
return Builder.load_file("loginKivy.kv")
# sm = ScreenManager()
# sm.add_widget(Factory.Password())
# sm.add_widget(Second_Screen())
# return sm
Then you need to add the "Submit" and "Go Back" Buttons to your kv as well as the <Second_Screen> rule.
You can add those Buttons using kivy Button or kivyMD MDRaisedButton:
#:set color_shadow [0, 0, 0, .2980392156862745]
#:set color_lilac [.07058823529411765, .07058823529411765, .14901960784313725, .8]
ScreenManager:
Password:
Second_Screen:
<MyMDTextFieldRound#MDTextFieldRound>
size_hint_x: None
normal_color: color_shadow
active_color: color_shadow
pos_hint: {"center_x": .5}
<Password#Screen>
name: "main"
canvas:
Color:
rgba: color_lilac
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
orientation: "vertical"
size_hint_y: None
height: self.minimum_height
spacing: dp(15)
pos_hint: {"center_x": .5, "center_y": .5}
MyMDTextFieldRound:
id: passw
icon_type: "without"
hint_text: "Field without icon"
color: 1,0,1,1
MDRaisedButton:
text: "Submit"
pos_hint: {'center_x': 0.5}
on_release:
app.root.current = "second" if passw.text == "pswd" else "main"
root.manager.transition.direction = "left"
<Second_Screen>:
name: 'second'
MDRaisedButton:
text: "Go Back"
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
on_release:
app.root.current = "main"
root.manager.transition.direction = "right"
I have also added the ScreenManager structure allowing the build() method to just return the result of loading the kv file.
The documentation for kv can be found at kivy.lang
I want to know - how to change text of the button in Kivy (and KivyMD) after pressing some label in the list after the opening MDDropdownMenu.
There is my Main.py
from kivy.app import App
from kivymd.theming import ThemeManager
from kivy.uix.screenmanager import Screen
def toast(text):
from kivymd.toast.kivytoast import toast
toast(text)
class MyScreen(Screen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.menu_items = [
{
"viewclass": "MDMenuItem",
"text": "text%d" % i,
"callback": self.callback,
}
for i in range(1, 3)
]
def change_variable(self, value):
print("\nvalue=", value)
self.VARIABLE = value
print("\tself.VARIABLE=", self.VARIABLE)
def callback(self, *args):
toast(args[0])
class MainApp(App):
title = "KivyMD MDDropdownMenu Demo"
theme_cls = ThemeManager()
def build(self):
return MyScreen()
if __name__ == "__main__":
MainApp().run()
And there is my Main.kv
#:import MDDropdownMenu kivymd.menus.MDDropdownMenu
#:import MDRaisedButton kivymd.button.MDRaisedButton
<MDMenuItem>:
on_release: app.root.change_variable(self.text)
<MyScreen>:
name: 'myscrn'
MDRaisedButton:
size_hint: None, None
size: 3 * dp(48), dp(48)
text: 'MDButton'
opposite_colors: True
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
on_release: MDDropdownMenu(items=root.menu_items, width_mult=4).open(self)
Sorry for bad English, and Thanks for help!!!
Give an id to the main button, e.g. id: mainbutton
Update the main button's text in the on_release event of MDMenuItem
Optional: Replace toast(args[0]) with pass in method callback (if you don't want to invoke toast.py)
Snippets - kv file
<MDMenuItem>:
on_release:
app.root.ids.mainbutton.text = self.text
app.root.change_variable(self.text)
<MyScreen>:
name: 'myscrn'
MDRaisedButton:
id: mainbutton
...
Output
I have the problem with the clicking on the dropdown menu labels.
It shows me an error: AttributeError: 'MDMenuItem' object has no attribute 'callback'
This is my main.py
from kivy.app import App
from kivymd.theming import ThemeManager
from kivy.uix.screenmanager import Screen
class MyScreen(Screen):
VARIABLE = ""
menu_items = [
{'viewclass': 'MDMenuItem',
'text': 'text1'},
{'viewclass': 'MDMenuItem',
'text': 'text2'},
]
def change_variable(self, value):
print("\nvalue=", value)
self.VARIABLE = value
print("\tself.VARIABLE=", self.VARIABLE)
class MainApp(App):
title = "KivyMD MDDropdownMenu Demo"
theme_cls = ThemeManager()
def build(self):
return MyScreen()
if __name__ == "__main__":
MainApp().run()
This is an main.kv
#:import MDDropdownMenu kivymd.menus.MDDropdownMenu
#:import MDRaisedButton kivymd.button.MDRaisedButton
<MDMenuItem>:
on_release: app.root.change_variable(self.text)
<MyScreen>:
name: 'myscrn'
MDRaisedButton:
size_hint: None, None
size: 3 * dp(48), dp(48)
text: 'MDButton'
opposite_colors: True
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
on_release: MDDropdownMenu(items=root.menu_items, width_mult=4).open(self)
For KivyMD version 0.100.2, you have to provide a callback function.
Snippets
def toast(text):
from kivymd.toast.kivytoast import toast
toast(text)
class MyScreen(Screen):
VARIABLE = ""
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.menu_items = [
{
"viewclass": "MDMenuItem",
"text": "text%d" % i,
"callback": self.callback_for_menu_items,
}
for i in range(1, 3)
]
def callback_for_menu_items(self, *args):
toast(args[0])
Output