My goal is to have Buttons which are completely filled with an image. My screen is split in half. On the right hand side I would like to have nine buttons each completely filled with a different image, all buttons with same dimensions. I would like to reshape those image to fit the button, so the ratio would possibly have to change.
This is how my GUI looks right now. The images do not fit the buttons
I tried several adjustments in my kv file, but right now I am stuck.
This is my kv file.
RadioRoot:
<RadioRoot#BoxLayout>:
BoxLayout:
BoxLayout:
BoxLayout:
orientation: "vertical"
Label:
size_hint_y: 4
text: "info about radio"
BoxLayout:
size_hint_y: 1
BoxLayout:
orientation: "vertical"
BoxLayout:
Button:
text: "Previous"
on_press: root.previous()
Button:
text: "Play/Stop"
on_press: root.play_stop()
Button:
text: "Next"
on_press: root.next()
Button:
size_hint_y: 1
text: "Shutdown"
on_press: root.shutdown()
BoxLayout:
BoxLayout:
orientation: "vertical"
BoxLayout:
Button:
text: "Channel1"
on_press: root.channel(1)
#size_hint_y: None
#size_hint_x: None
Image:
source: 'swr3.png'
size_hint_y: None
size_hint_x: None
y: self.parent.y + .5* self.parent.height -.5 * self.parent.width/self.image_ratio
x: self.parent.x
#heigth: self.parent.width/self.image_ratio
#heigth: self.parent.height
width: self.parent.width
keep_ratio: True
allow_stretch: True
Button:
text: "Channel2"
on_press: root.channel(2)
Image:
source: 'flux.png'
width: self.parent.width
size_hint_y: None
size_hint_x: None
y: self.parent.y + .5* self.parent.height -.5 * self.parent.width/self.image_ratio
x: self.parent.x
keep_ratio: True
allow_stretch: True
Button:
text: "Channel3"
on_press: root.channel(3)
BoxLayout:
Button:
text: "Channel4"
on_press: root.channel(4)
Button:
text: "Channel5"
on_press: root.channel(5)
Button:
text: "Channel6"
on_press: root.channel(6)
BoxLayout:
Button:
text: "Channel7"
on_press: root.channel(7)
Button:
text: "Channel8"
on_press: root.channel(8)
Button:
text: "Channel9"
on_press: root.channel(9)
This is the corresponding python file
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
class PhilippsRadioApp(App):
pass
class RadioRoot(BoxLayout):
def previous(self):
print("Previous")
def play_stop(self):
print("Play/Stop")
def next(self):
print("Next")
def shutdown(self):
print("Shutdown")
def channel(self, num):
print("Channel")
if __name__ == '__main__':
PhilippsRadioApp().run()
In your Image tag you are using width but not size ...
try:
Image:
...
size: self.parent.size #I think you can remove the size hints since they don't add anything...
stretch: True #keep this one as well :)
Related
I was trying to show a scrollable text, so I put 3 MDLabel in a MDBoxLayot and put it in a ScrollView. Here is the KV string:
KV = '''
MDBoxLayout:
orientation: "vertical"
MDToolbar:
title: "Toolbar"
ScrollView:
MDBoxLayout:
orientation: "vertical"
size_hint_y: None
MDLabel:
text: "title"
font_size: 27
size_hint_y: None
MDLabel:
text: "description"
font_size: 20
size_hint_y: None
MDLabel:
text: "text"
size_hint_y: None
'''
When I run it I can't see the title and description, only the text, and when I scroll up, it goes back and I can only see the text again. How do I fix that?
By setting the height of the MDBoxLayout to self.minimum_height, it will take the height of its contents. This will ensure the labels fit correctly inside it.
MDBoxLayout:
orientation: "vertical"
MDToolbar:
title: "Toolbar"
ScrollView:
MDBoxLayout:
orientation: "vertical"
size_hint_y: None
# sets the height of the BoxLayout to the height of its contents
height: self.minimum_height
MDLabel:
text: "title"
font_size: 27
size_hint_y: None
MDLabel:
text: "description"
font_size: 20
size_hint_y: None
MDLabel:
text: "text"
size_hint_y: None
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 am working in kivy (python) and I need dropdown to place here instead of textinput. but I could not do this, help me to continue work.the screenshot is following. my goal is to replace these textinputs with dropdowns.
enter image description here
The py file code is
import kivy
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.dropdown import DropDown
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.properties import ObjectProperty
from kivy.lang import Builder
class CustomDropDown(DropDown):
pass
class delivery_managementWindow(BoxLayout):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.dropdown = CustomDropDown()
self.mainbutton = Button(text ='Do you in college?',
size_hint_x = 0.6, size_hint_y = 0.15)
self.add_widget(self.mainbutton)
self.mainbutton.bind(on_release = self.dropdown.open)
self.dropdown.bind(on_select = lambda\
instance, x: setattr(self.mainbutton, 'text', x))
self.dropdown.bind(on_select = self.callback)
def callback(self, instance, x):
print ( "The chosen mode is: {0}" . format ( x ) )
class delivery_managementApp(App):
def build(self):
return delivery_managementWindow()
if __name__ =='__main__':
delivery_managementApp().run()
Now its kv file is also
<CustomDropDown>:
Button:
text: 'College Name'
size_hint_y: None
height: 44
on_release: root.select('College is')
Label:
text: 'Not in college'
size_hint_y: None
height: 44
Button:
text: 'KccItm'
size_hint_y: None
height: 44
on_release: root.select('Kcc')
<delivery_managementWindow>:
id:delivery_managment_main_window
orientation:'vertical'
padding:5
spacing:5
canvas.before:
Color:
rgba:(.1,.30,.35,1)
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
id:header
size_hint_x:1
size_hint_y:None
height:50
canvas.before:
Color:
rgba:(.06,.45,.45,1)
Rectangle:
pos:self.pos
size:self.size
Label:
text:"Delivery Management"
bold: True
font_size:18
# color:(.06,.45,.45,1)
BoxLayout:
id:''
orientation:'horizontal'
BoxLayout:
id:add_edit_form
orientation:'vertical'
size_hint_y:1
size_hint_x:1.5
spacing:5
padding:5
# height:40
canvas.before:
Color:
# rgba:(.02,.25,.45,1)
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
size_hint_y:None
size_hint_x:1
# padding:5
height:40
canvas.before:
Color:
rgba:(1,1,1,.8)
Rectangle:
pos:self.pos
size:self.size
Label:
id:lbl_header
text:"Add New/Edit Delivery"
font_size:17
bold: True
color:(0,0,1,1)
GridLayout:
id:grd
cols:2
size_hint_y:1
size_hint_x:1
canvas.before:
Color:
rgba:(.06,.45,.45,1)
Rectangle:
pos:self.pos
size:self.size
Label:
text:"Delivery :"
bold: True
font_size:17
BoxLayout:
id:dropdown_box
Label:
text:"Our Ref: Inv-sup :"
bold: True
font_size:17
TextInput:
Label:
text:"Invoice :"
bold: True
font_size:17
TextInput:
Label:
text:"Supplier :"
bold: True
font_size:17
TextInput:
Label:
text:"Date :"
bold: True
font_size:17
TextInput:
BoxLayout:
cols:2
CheckBox:
Label:
text:'Delivery for Store Room'
Button:
id:btn_proceed
text:'Proceed Next'
BoxLayout:
id:keyboard
size_hint_y:1
size_hint_x:1
canvas.before:
Color:
rgba:(0,0,1,1)
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
id:keypad_section
orientation:'vertical'
size_hint_y:1
size_hint_x:.7
# padding:5
canvas.before:
Color:
rgba:(.1,.30,.35,1)
Rectangle:
pos:self.pos
size:self.size
AnchorLayout:
size_hint_x:1
size_hint_y:.2
anchor_x: 'center'
anchor_y: 'center'
canvas:
Color:
rgba:(1,1,1,.9)
Rectangle:
pos: self.pos
size: self.size
Button:
text: 'Go To Sale'
size_hint_y:.7
size_hint_x:.5
font_size:17
bold: True
background_normal:''
background_color:(.06,.45,.45,1)
GridLayout:
cols:3
id:keypad
size_hint_y:1
size_hint_x:1
spacing:5
padding:5
canvas.before:
Color:
rgba:(.1,.30,.35,1)
Rectangle:
pos:self.pos
size:self.size
Button:
text:'1'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'2'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'3'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'4'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'5'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'6'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'7'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'8'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'9'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'00'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'0'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'*'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'<--'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'-'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
Button:
text:'Enter'
bold: True
font_size:18
background_normal:''
background_color:(.06,.45,.45,1)
BoxLayout:
id:btn_section
size_hint_y:.2
size_hint_x:1
spacing:5
padding:5
canvas.before:
Color:
rgba:(.1,.30,.35,1)
Rectangle:
pos:self.pos
size:self.size
Button:
id:btn_exit
text:'Exit'
size_hint_x:1
size_hint_y:1
font_size:18
bold:True
color:(.8,0,0,.8)
background_normal:''
background_color:(.06,.45,.45,1)
size_hint_x:1
size_hint_y:1
Button:
id:btn_finish
text: "Finish Delivery"
font_size:18
bold:True
background_normal:''
background_color:(.06,.45,.45,1)
size_hint_x:1
size_hint_y:1
You can create a DropDown to replace each TextInput. I will provide an example of how to do that for the delivery option and you can follow that pattern for any other DropDowns that you want.
First, define the main button for the new DropDown in the kv:
Label:
text:"Delivery :"
bold: True
font_size:17
# BoxLayout:
# id:dropdown_box
Button:
id: del_opt_main_butt
text: 'Select delivery option'
on_release: root.open_delivery_options_dropdown()
Then make a rule for the new DropDown (also in the kv):
<DeliveryOptionDropDown>:
on_select:
app.root.ids.del_opt_main_butt.text = args[1]
app.delivery_option_callback(*args)
Button:
text: 'Overnight'
size_hint_y: None
height: 44
on_release: root.select(self.text)
Button:
text: 'Two Day'
size_hint_y: None
height: 44
on_release: root.select(self.text)
Button:
text: 'Snail Mail'
size_hint_y: None
height: 44
on_release: root.select(self.text)
and define the new DropDown class:
class DeliveryOptionDropDown(DropDown):
pass
Then add the method to open the new Dropdown to the delivery_managementWindow class:
def open_delivery_options_dropdown(self):
self.delivery_options_dropdown = DeliveryOptionDropDown()
self.delivery_options_dropdown.open(self.ids.del_opt_main_butt)
Then add a callback to the App class:
def delivery_option_callback(self, instance, selection):
print('chosen delivery option is', selection)
Those last two methods are located in the delivery_managementWindow and the App classes just for simplicity (root and app are predefined variables in the kv).
I am new to python/Kivy.
I have two files test.py and test.ky.
Now I am using two static row with serial number 1 and 2.
Can anyone tell me?
How to add row dynamic when click on '+add more' button.Now 2 row shows which are static row with serial number increment. I want add row dynamic 1 to 10 with serial number increment.
test.py
import kivy
from kivy.uix.screenmanager import Screen
from kivy.app import App
from kivy.lang import Builder
from kivy.core.window import Window
Window.size = (450, 525)
class display(Screen):
def add_more(self):
print('test')
class test(App):
def build(self):
self.root = Builder.load_file('test.kv')
return self.root
if __name__ == '__main__':
test().run()
test.kv
display:
BoxLayout:
orientation: "vertical"
padding : 20, 20
BoxLayout:
orientation: "horizontal"
Button:
size_hint_x: .2
text: "+Add More"
valign: 'bottom'
on_press: root.add_more()
BoxLayout:
orientation: "horizontal"
Label:
size_hint_x: .2
text: "SN"
valign: 'bottom'
Label:
size_hint_x: .8
text: "Value"
valign: 'bottom'
BoxLayout:
orientation: "horizontal"
spacing: 0, 5
Button:
text: '1'
size_hint_x: .2
TextInput:
size_hint_x: .8
BoxLayout:
orientation: "horizontal"
spacing: 0, 5
Button:
text: '2'
size_hint_x: .2
TextInput:
size_hint_x: .8
BoxLayout:
orientation: "horizontal"
padding : 10, 0
spacing: 10, 10
size_hint: .5, .7
pos_hint: {'x': .25, 'y':.25}
Button:
text: 'Ok'
on_release:
root.dismiss()
Button:
text: 'Cancel'
on_release: root.dismiss()
Can someone help me?
You can make a custom class for Row and Rows, then have a method adding rows.
I modified your example a bit. Try this:
from kivy.uix.screenmanager import Screen
from kivy.app import App
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import StringProperty
Window.size = (450, 525)
class display(Screen):
def add_more(self):
self.ids.rows.add_row()
class Row(BoxLayout):
button_text = StringProperty("")
class Rows(BoxLayout):
orientation = "vertical"
row_count = 0
def __init__(self, **kwargs):
super(Rows, self).__init__(**kwargs)
self.add_row()
def add_row(self):
self.row_count += 1
self.add_widget(Row(button_text=str(self.row_count)))
class test(App):
def build(self):
self.root = Builder.load_string(KV)
return self.root
KV = """
<Row>:
orientation: "horizontal"
spacing: 0, 5
Button:
text: root.button_text
size_hint_x: .2
TextInput:
size_hint_x: .8
display:
BoxLayout:
orientation: "vertical"
padding : 20, 20
BoxLayout:
orientation: "horizontal"
Button:
size_hint_x: .2
text: "+Add More"
valign: 'bottom'
on_press: root.add_more()
BoxLayout:
orientation: "horizontal"
Label:
size_hint_x: .2
text: "SN"
valign: 'bottom'
Label:
size_hint_x: .8
text: "Value"
valign: 'bottom'
Rows:
id: rows
BoxLayout:
orientation: "horizontal"
padding : 10, 0
spacing: 10, 10
size_hint: .5, .7
pos_hint: {'x': .25, 'y':.25}
Button:
text: 'Ok'
on_release:
root.dismiss()
Button:
text: 'Cancel'
on_release: root.dismiss()
"""
test().run()
I am trying to use kivy scrollview inside of EmployeeScreen class. it will not scroll!? what am I doing wrong? I hope this is not a duplicate, please help.
I went to this link Kivy ScrollView - Not Scrolling. which seems to be the only question relating to kivy scrollview not scrolling. this didn't solve my problem.
.py file:
`from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import ObjectProperty
from kivy.uix.scrollview import ScrollView
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.stacklayout import StackLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.gridlayout import GridLayout
class LogInScreen(Screen):
pass
class EmployeeScreen(Screen):
pass
class Manager(ScreenManager):
login_screen = ObjectProperty(None)
employee_screen = ObjectProperty(None)
class CptApp(App):
icon = 'Images\login\cptlogo.png'
title = 'CPT'
def build(self):
return Manager()
if __name__=='__main__':
CptApp().run()`
.kv file:
<Manager>:
id: screen_manager
login_screen: login_screen
employee_screen: employee_screen
LogInScreen:
id: login_screen
name: 'login'
manager: screen_manager
FloatLayout:
StackLayout:
orientation: 'lr-tb'
canvas:
Color:
rgba: 1,1,1,1
Rectangle:
pos: self.pos
size: self.size
Image:
size_hint_y: .1
source: 'Images\login\cptbanner.jpg'
allow_stretch: True
keep_ratio: True
Image:
source: 'Images\login\HD7Brw.jpg'
allow_stretch: True
keep_ratio: False
Label:
size_hint_y: .05
size_hint_x: .5
pos_hint: {"x": .25, "y": .7}
markup: True
text: '[i][b][color=#000000]USER NAME[/color][/b][/i]'
TextInput:
id: 'username_input'
multiline: False
size_hint_x: .4
size_hint_y: .05
pos_hint: {"x": .3, "y": .65}
Label:
size_hint_y: .05
size_hint_x: .5
markup: True
text: '[i][b][color=#000000]PASSWORD[/color][/b][/i]'
pos_hint: {'x': .25, 'y': .5}
TextInput:
id: 'password_input'
multiline: False
password: True
size_hint_x: .4
size_hint_y: .05
pos_hint: {'x': .3, 'y': .45}
Image:
source: 'Images/login/loginbutton.png'
size_hint_x: .25
size_hint_y: .1
pos_hint: {'x': .375, 'y': .25}
Button:
id: 'login_button'
background_color: 0,0,0,0
markup: True
text: '[i][b][color=#000000]LOGIN[/color][/b][/i]'
size_hint_x: .25
size_hint_y: .1
pos_hint: {'x': .375, 'y': .25}
on_release: screen_manager.current = 'employeescreen'
EmployeeScreen:
id: employee_screen
name: 'employeescreen'
manager: screen_manager
StackLayout:
orientation: 'lr-tb'
canvas:
Color:
rgba: 1,1,1,1
Rectangle:
pos: self.pos
size: self.size
Image:
size_hint_y: .1
source: 'Images\login\cptbanner.jpg'
allow_stretch: True
keep_ratio: True
ScrollView:
do_scroll_x: False
size: root.size
pos: root.pos
GridLayout:
cols: 2
size_hint_y: None
height: self.minimum_height
pos: root.pos
Button:
height: 40
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
Button:
size_hint_x: 1
size_hint_y: None
text: 'TEST'
I was trying to use GridLayout in my .kv file, wrong, I had to create a class and override its init.
class MyLayout(GridLayout):
def __init__(self,**kwargs):
super(MyLayout,self).__init__(**kwargs)
self.size_hint_y = (None)
self.bind(minimum_height = self.setter('height'))
then I placed the class in the .kv file where GridLayout was.