Please how do I reference a member of class A in class B
Builder.load_string("""
<Main>
do_scroll_x: True
do_scroll_y: False
bar_width: 20
padding: 10
Carousel:
id: caro_slider
#direction: 'top'
padding: 10
orientation: 'vertical'
BoxLayout:
padding: 10
orientation: 'vertical'
Label:
text: "one two three"
Button:
text: 'Next'
background_color: 1, 0.1 ,0.1, 1
pos_hint: {'right': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_next()
BoxLayout:
orientation: 'vertical'
Label:
text: "five six seven"
Button:
text: "Click me"
background_color: 1, 0.1 ,0.1, 1
on_press: root.show_popup_item()
size_hint: .6, .2
pos_hint: {'center_x': 0.5, 'bottom': 1}
BoxLayout:
orientation: 'horizontal'
size_y: '35sp'
size_hint: 1, 0
Button:
text: 'Previous'
pos_hint: {'left': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_previous()
Button:
text: 'Next'
background_color: 1, 0.1 ,0.1, 1
pos_hint: {'right': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_next()
BoxLayout:
orientation: 'vertical'
size_hint: 1, None
Label:
text: "Please choose your choice"
size_hint: None, None
Label:
text: ''
size_hint: None, None
GridLayout:
orientation: 'horizontal'
size_hint: 1, None
rows: 1
row_force_default: True
row_default_height: '35sp'
CheckBox:
id: chk_box_4
height: '35sp'
group: root.group_list
size_hint: None, None
on_active: root.chk_chk(self)
Label:
text: "Four over there"
height: '35sp'
size_hint: None, None
Button:
text: 'Previous'
background_color: 1, 0.1 ,0.1, .5
pos_hint: {'left': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_previous()
# the popup
<Pops>
title: "Welcome!"
auto_dismiss: False
background_color: 0.1, 0.1 , 0.8, 0.9
size: 400, 250
size_hint: None, None
title_height: '40sp'
separator_height: '1sp'
separator_color: 1,1,1,1
BoxLayout:
orientation: 'vertical'
Label:
text: "Thanks and praises"
id: sub_title
max_lines: 5
size_hint: None, None
pos_hint: {'center_y': 0, 'center_x': 0}
Label:
id: composition
text: "Thanks be to GOD for this to [ref=work]work[/ref] and not to work."
markup: True
size_x: self.parent.size[0]
on_ref_press: print 'clicked the link', self.ids.caro_slider.slides ------> here is the problem
Button:
id: close_button
text: "Click to close"
background_color: 1, 0.1 ,0.1, 1
size_hint: .5, .5
pos_hint: {'center_x': 0.5}
on_press: root.dismiss()
""")
You need some reference to class A from class B. A simple general way to do it is to store the reference in your App class (i.e. App.get_running_app().classa = a) then reference it with App.get_running_app().classa. In specific cases there might be better places to put it than cluttering up your App though, for instance in the common parent of both class instances.
Related
Basically I've created a toolbar with two widgets. One widget (account) should change to a new window when pressed. The other (menu) should open three buttons when it is pressed. When you press on of the three buttons it should also change to a new window.
I don't know how to implement that...
Can anyone help me?
Here's my code:
kv = """
<MenuScreen>:
name: 'mainmenu'
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'background.jpg'
Screen:
BoxLayout:
orientation: 'vertical'
MDTopAppBar:
title: 'Fitness App'
left_action_items: [["menu", lambda x: app.navigation_draw()]]
right_action_items: [["account", lambda x: app.callback()]]
elevation:5
MDLabel:
text: 'hello world'
halign: 'center'
BoxLayout:
spacing: 1
orientation: "vertical"
Label:
text: "Welcome back"
font_size: 100
color : 0,0,0,1
Button:
text: 'Get Started'
font_size:100
color: 0, 0, 1, 1
background_color: 0, 0, 0, 1
size_hint: 1, 1
pos_hint: {"x":0, "top":1}
on_release:
root.manager.current = 'screen2'
root.manager.transition.direction = "left"
Button:
text: 'Leave App'
font_size: 100
color: 0, 0, 1, 1
background_color: 0, 0, 0, 1
size_hint: 1, 1
pos_hint: {"x":0, "top":0}
on_release: root.manager.current = app.exit_software()
<Screen2>:
name: 'screen2'
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'background.jpg'
BoxLayout:
spacing: 1
orientation: "vertical"
ScrollView:
id: scroll_view
always_overscroll: False
BoxLayout:
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
Label:
id: label
text: "Please choose your problem Area"
color : 0,0,0,1
size_hint: None, None
pos_hint: {"x":0, "top":1}
font_size: 50
size: self.texture_size
Button:
text: 'Shoulders'
font_size: 30
color : 0,0,1,1
on_release:
root.manager.current = 'shoulders'
root.manager.transition.direction = "left"
Button:
text: 'Knees'
font_size: 30
color : 0,0,1,1
background_color: 0, 0, 0, 1
size_hint_y: 1
on_release:
root.manager.current = 'knees'
root.manager.transition.direction = "left"
Button:
text: 'Back'
font_size: 30
color : 0,0,1,1
background_color: 0, 0, 0, 1
size_hint_y: 1
on_release:
root.manager.current = 'back'
root.manager.transition.direction = "left"
Button:
text: 'Back to main menu'
font_size: 30
color : 0,0,1,1
background_color: 0, 0, 0, 1
size_hint_y: 1
on_release:
root.manager.current = 'mainmenu'
root.manager.transition.direction = "right"
<Screen_shoulders>:
name: 'shoulders'
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'shoulders.png'
BoxLayout:
spacing: 1
orientation: "vertical"
ScrollView:
id: scroll_view
always_overscroll: False
BoxLayout:
size_hint_y: None
height: self.minimum_height
orientation: 'vertical'
Label:
id: label
text: "Choose an activity"
font_size: 50
color : 0,0,0,1
size: self.texture_size
Button:
text: 'Activity1'
font_size: 50
color : 0,0,0,1
size_hint_y: 0.3
on_release:
root.manager.current = 'shouldersActivity1'
root.manager.transition.direction = "right"
Button:
text: 'Activity2'
font_size: 50
color : 0,0,0,1
size_hint_y: 0.3
on_release: app.add_text()
Button:
text: 'Back to main menu'
font_size: 20
color : 0,0,0,1
size_hint_y: 0.1
on_release:
root.manager.current = 'screen2'
root.manager.transition.direction = "right"
ScreenManager:
id: screen_manager
MenuScreen:
id: menu_scr
Screen2:
id: scr_2
"""
class MenuScreen(Screen):
pass
class Screen2(Screen):
pass
class AddTextApp(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
def build(self):
return Builder.load_string(kv)
def add_text(self):
self.root.ids.scr_2.ids.label.text += f"Some new Text\n"
self.root.ids.scr_2.ids.scroll_view.scroll_y = 0
def callback(self, instance_action_top_appbar_button):
print(instance_action_top_appbar_button)
#staticmethod
def exit_software():
App.get_running_app().stop()
def navigation_draw(self):
# open new window
def callback(self):
# open new window
if __name__ == '__main__':
AddTextApp().run()
I don't know how to make the widgets change window when they're pressed.
I Have browsed the web for 30 minutes looking for a solution for this problem but none of the examples on the web worked. I have tried custom heights in the GridLayout and played around with various values that other people used in the web but none of them worked. I also tried to run the code of the ScrollView in another file with only this code but the scrolling still didn't work.
The .py file is not relevant here i think because i have no code in there for this section of my program. If you still need it or need more of my kv file i will post it just send me a message thank you :)
kv:
<TrainingPlans>
name: "trainingplans"
ScrollView:
size_hint_y: .85
pos_hint: {"x": 0, "y": .15}
do_scroll_x: False
do_scroll_y: True
GridLayout:
size: (root.width, root.height)
size_hint_x: None
size_hint_Y: None
cols: 2
height: self.minimum_height
row_default_height: 150
row_force_default: True
Label:
text: "training1"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training2"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training3"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training4"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training5"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training6"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training7"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training8"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training9"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
FloatLayout:
size_hint: 1, .15
Button:
text: "Back"
size_hint: .3, .8
pos_hint: {"x": .01, "y": .06}
on_release:
app.root.current = "mainwindow"
root.manager.transition.direction = "right"
Just a typo. Change:
size_hint_Y: None
to
size_hint_y: None
in your GridLayout rule in the kv.
I am trying to write a Kivy file that includes a scrollview below the MDToolBar and above MDBottomNavigation. I cannot get the ScrollView content to fill the entire screen below the ToolBar and above the BottomNav. It only fills have the window vertical span. If I eliminate the toolbar and bottom nave the scrollview fills the entire vertical span without a problem. Any tips on getting the scrollview contents to fill the completely would be appreciated. I tried changing indentation and that did not work. Thanks in advance.
Screenshot
# WINDOW MANAGER
WindowManager:
MainWindow:
AboutWindow:
<MainWindow>:
name: "main"
BoxLayout:
orientation: "vertical"
MDToolbar:
title: "Solar Weather"
MDLabel:
id: sub_title
text: "SUB TITLE"
halign: "center"
size_hint: (1,0.2)
ScrollView:
size: self.size
GridLayout:
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
cols: 2
spacing: "20dp"
padding: "20dp"
# SOLAR FLUX BOX #
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
id: flux
text: "Solar Wind"
halign: "center"
MDLabel:
id: flux_value_id
text: ""
halign: "center"
MDLabel:
id: flux_time_id
text: ""
halign: "center"
MDRaisedButton:
text: "Refresh"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
MDRaisedButton:
text: "Details"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
text: "Solar Wind"
halign: "center"
MDRaisedButton:
text: "Go Back"
md_bg_color: app.theme_cls.primary_color
on_release:
root.manager.current = "main"
root.manager.transition.direction = "right"
MDBottomNavigation:
MDBottomNavigationItem:
name: 'Dark'
text: "Dark Theme"
icon: 'brightness-2'
on_tab_release: root.dark_theme()
MDBottomNavigationItem:
name: 'Light'
text: "Light Theme"
icon: 'brightness-5'
on_tab_release: root.light_theme()
MDBottomNavigationItem:
name: 'info'
text: "About"
icon: 'information'
on_tab_release:
root.manager.current = "about"
root.manager.transition.direction = "left"
MDBottomNavigationItem:
name: 'option 2'
text: "Relaod"
icon: 'reload'
#: include about.kv
I hope this helps someone else. I had to rewrite the kv file fairly extensively but it works.
# WINDOW MANAGER
WindowManager:
MainWindow:
AboutWindow:
<MainWindow>:
name: "main"
BoxLayout:
orientation: "vertical"
MDLabel:
id: title
text: "SOLAR WEATHER"
halign: "left"
size_hint: (1,0.1)
padding_x: 20
pos_hint: {"x":0.0,"y":0.9}
md_bg_color: app.theme_cls.primary_dark
MDLabel:
id: sub_title
text: "SUB TITLE"
halign: "center"
size_hint: (1,0.1)
pos_hint: {"x":0.0,"y":0.8}
ScrollView:
size: self.size
pos_hint: {"x":0,"y":0.1}
GridLayout:
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
cols: 2
spacing: "20dp"
padding: "20dp"
# SOLAR FLUX BOX #
MDCard:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
id: flux
text: "SOLAR FLUX"
halign: "center"
MDLabel:
id: flux_value_id
markup: True
text: ""
halign: "center"
MDLabel:
id: flux_time_id
text: ""
halign: "center"
MDRaisedButton:
text: "Refresh"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
MDRaisedButton:
text: "Details"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
# SUN SPOT NUMBER BOX #
MDCard:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
id: ssn
text: "SUN SPOT NUMBER"
halign: "center"
MDLabel:
id: ssn_value_id
markup: True
text: ""
halign: "center"
MDLabel:
id: ssn_date_id
text: ""
halign: "center"
MDRaisedButton:
text: "Refresh"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_sunspot_number()
MDRaisedButton:
text: "Details"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_sunspot_number()
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDCard:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
text: "Solar Wind"
halign: "center"
MDRaisedButton:
text: "Go Back"
md_bg_color: app.theme_cls.primary_color
on_release:
root.manager.current = "main"
root.manager.transition.direction = "right"
GridLayout:
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
cols: 3
spacing: "80dp"
padding: "20dp"
MDIconButton:
name: "Dark"
text: "Dark Theme"
icon: "brightness-2"
on_release: root.dark_theme()
md_bg_color: app.theme_cls.primary_dark
MDIconButton:
id: light_theme_icon
name: "Light"
text: "Light Theme"
icon: "brightness-5"
on_release: root.light_theme()
md_bg_color: app.theme_cls.primary_dark
MDIconButton:
name: "info"
text: "About"
icon: "information"
on_release:
root.manager.current = "about"
md_bg_color: app.theme_cls.primary_dark
#: include about.kv
I try to make a gui for a text based RPG, and now I want to align the text of some labels to the top left, but "halign:" and "valign:" don't seem to do anything.
So how do I align the text inside my labels? Is there something I have done horribly wrong?
This is how the GUI looks at this moment and I marked where the text should be with green arrows:
This is how my .kv file looks:
BoxLayoutExample:
<BackgroundColor#Widget>:
background_color: 1,1,1,1
canvas.before:
Color:
rgba: root.background_color
Rectangle:
size: self.size
pos: self.pos
<BackgroundLabel#Label+BackgroundColor>:
background_color: 0, 0, 0, 0
<BoxLayoutExample>:
orientation: "vertical"
BoxLayout:
orientation:"horizontal"
BackgroundLabel:
background_color: 1,0,0,1
text: "Placeholder Text\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
halign: "left"
valign: "top"
font_size: "10sp"
size_hint: .5, 1
Label:
text: "Placeholder Map/Enemy #TEST TEST TEST TEST TEST \nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
halign: "left"
valign: "top"
size_hint: 1, 1.3
BoxLayout:
orientation:"vertical"
size_hint: .5, 1
Label:
background_color: 1,1,1,.5
text: "Placeholder Stats\nHP\nMP\nDMG\nXP\nLVL"
halign: "left"
valign: "top"
size_hint: 1, .3
ScrollView:
size_hint: 1, .7
scroll_distance: 100
Label:
text: "Placeholder Inventory\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
size_hint: None, None
size: self.texture_size
halign: "left"
valign: "top"
BoxLayout:
orientation: "horizontal"
size: "60dp","60dp"
size_hint: None,None
Label:
size: "60dp","60dp"
size_hint: None,None
Button:
text: "go\nnorth"
size: "60dp","60dp"
size_hint: None,None
Label:
size: "60dp","60dp"
size_hint: None,None
BoxLayout:
orientation: "horizontal"
size: "180dp","60dp"
#pos: "0dp","60dp"
size_hint: None,None
Button:
text: "go\nwest"
size: "60dp","60dp"
#pos: "0dp","60dp"
size_hint: None,None
pos_hint: {"x":0}
Button:
text: "go\nsouth"
size: "60dp","60dp"
size_hint: None,None
Button:
text: "go\neast"
size: "60dp","60dp"
#pos: "0dp","60dp"
size_hint: None,None
Label:
size: "60dp","60dp"
size_hint: None,None
Button:
text: "use\nitem"
size: "60dp","60dp"
size_hint: None,None
Button:
text: "equip\ngear"
size: "60dp","60dp"
size_hint: None,None
Button:
text: "unequip\ngear"
size: "60dp","60dp"
size_hint: None,None
Thanks for your help, I really appreciate it.
You need to add this argument in your label:
text_size: self.size
Then the halign and valign arguments will work properly, for example:
Label:
text: "Placeholder Map/Enemy #TEST TEST TEST TEST TEST \nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
text_size: self.size
halign: "left"
valign: "top"
size_hint: 1, 1.3
More details in the official kivy documentation.
.KV code part
MDGridLayout:
cols: 4
adaptive_height: True
#md_bg_color: app.theme_cls.primary_color
MDIcon:
halign: "center"
icon: 'magnify'
pos_hint: {"x": .00}
size_hint:
MDTextField:
id: symbol_field
hint_text: " Search by STOCK KEY"
pos_hint: {"x": .05}
on_text_validate: root.Pressed()
required: True
helper_text_mode: "on_error"
helper_text: ""
MDIconButton:
halign: "center"
icon: "arrow-right-thick"
pos_hint: {"x": .90}
on_press: root.Pressed()
MDIconButton: #new
halign: 'center'
icon: 'cog'
pos_hint: {'x': .95}
on_press: root.settings()
The weird alignment not able to change it The top bar
It should be like:
'label' [0-0.05] 'text-field' [0.05-0.90] 'button' [0.90-0.95] 'button' [0.95-1]
You can try this one, it is not using MDGridLayout (the nature of the Grid, alingment is really hard to do), in this example I am using FloatLayouts plus BoxLayouts plus canvas:
Screen:
canvas:
Color:
rgba: [0,0,0,.1]
Rectangle:
pos: self.pos
size: self.size
#START
FloatLayout:
BoxLayout:
pos_hint: {"center_x": .5, "center_y": 1.4}
padding: dp(15)
#Control the background here jbsidis
canvas.after:
Color:
rgba: [1,1,1,1]
RoundedRectangle:
pos: self.pos[0],self.pos[1] #-dp(15)
size: self.size[0],dp(80)
radius: [dp(8),dp(8),dp(8),dp(8)]
#source: "jbsidis_background.png"
BoxLayout:
pos_hint: {"center_x": .4, "center_y": 1.0}
size_hint: .8,None
spacing: dp(3)
MDIconButton:
pos_hint: {"center_x": .1, "center_y": .25}
halign: "center"
icon: 'magnify'
FloatLayout:
BoxLayout:
pos_hint: {"center_x": .7, "center_y": .5}
MDTextField:
id: symbol_field
hint_text: " Search by STOCK KEY"
#on_text_validate: root.Pressed()
required: True
helper_text_mode: "on_error"
helper_text: ""
MDIconButton:
halign: "center"
icon: "arrow-right-thick"
#on_press: root.Pressed()
MDIconButton:
halign: 'center'
icon: 'pencil'
#on_press: root.settings()
Here is the image (the one in the left side):