How to make TabbedPannel's tabs fill all horizontal space? - python

I'm creating a simple app interface using kivy and the kv language. The interface consists of a search text input, a button for search confirmation and an 'add' button. Bellow this, there is a TabbedPanel for the app's contents:
#:import label kivy.uix.label
#:import sla kivy.adapters.simplelistadapter
<MenuScreen>:
AnchorLayout:
anchor_x: 'left'
anchor_y: 'top'
BoxLayout:
orientation: 'vertical'
BoxLayout:
orientation: 'horizontal'
size_hint_y: 0.15
TextInput:
text: 'Search'
Button:
size_hint_x: 0.2
text: 'Ok'
Button:
size_hint_x: 0.2
text: '+'
TabbedPanel:
do_default_tab: False
TabbedPanelItem:
text: 'tab1'
ListView:
orientation: 'vertical'
adapter:
sla.SimpleListAdapter(
data=["Item #{0}".format(i) for i in range(100)],
cls=label.Label)
TabbedPanelItem:
text: 'tab2'
BoxLayout:
Label:
text: 'Second tab content area'
Button:
text: 'Button that does nothing'
TabbedPanelItem:
text: 'tab3'
RstDocument:
text:
'\\n'.join(("Hello world", "-----------",
"You are in the third tab."))
This is the design output:
The TabbedPannel works perfectly the way I desire, however I want the tabs to fill all the horizontal space. For instance, if I use a BoxLayout with Buttons, they expand using all the horizontal space, just as I want it:
BoxLayout:
orientation: 'horizontal'
size_hint_y: 0.1
Button:
text: 'tab1'
Button:
text: 'tab2'
Button:
text: 'tab3'
Is there a way to tune the TabbedPannel so its TabbedPannelItems tabs can use all the horizontal space?

Set the tab_width property of TabbedPanel to its width divided by number of tabs:
from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder
Builder.load_string("""
<Test>:
do_default_tab: False
tab_width: self.size[0]/len(self.tab_list)
TabbedPanelItem:
text: 'tab 1'
TabbedPanelItem:
text: 'tab2'
TabbedPanelItem:
text: 'tab3'
""")
class Test(TabbedPanel):
pass
class TabbedPanelApp(App):
def build(self):
return Test()
if __name__ == '__main__':
TabbedPanelApp().run()

Related

Passing a text input between screens in Kivy

I am having trouble taking a text input value from one screen and passing it as the text in a label in another screen. I want to take the text input from a TeamNameSelect screen and have those be the text values in the labels of a GameWindow screen. I've tried going through similar questions and answers on here but have been unable to get this to work. Any help would be greatly appreciated!
.py file
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.uix.widget import Widget
class NewGame(Screen):
pass
class GameWindow(Screen):
def teamNames(self, *args):
self.teamOne_input.text = self.manager.ids.TeamNameSelect.ids.teamOne.text
self.teamTwo_input.text = self.manager.ids.TeamNameSelect.ids.teamTwo.text
pass
class TeamNameSelect(Screen):
pass
class WinMan(ScreenManager):
pass
kv = Builder.load_file("my.kv")
sm = WinMan()
screens = [NewGame(name='goBack'), TeamNameSelect(name='teamSelect'), GameWindow(name='startGame')]
for screen in screens:
sm.add_widget(screen)
sm.current = 'goBack'
class MyApp(App):
def build(self):
return sm
if __name__ == '__main__':
MyApp().run()
.kv file
<TeamNameSelect>:
BoxLayout:
orientation: 'vertical'
BoxLayout:
orientation: 'vertical'
padding: 10
Label:
text: 'Team 1 Name: '
TextInput:
id: teamOne
text: ''
multiline: False
BoxLayout:
orientation: 'vertical'
padding: 10
Label:
text: 'Team 2 Name: '
TextInput:
id: teamTwo
text: ''
multiline: False
BoxLayout:
Button:
text: 'Go Back'
on_release: root.manager.current = 'goBack'
Button:
text: 'Game On!'
on_release:
root.manager.current = 'gameWindow'
root.teamNames()
<GameWindow>:
teamOne_input: teamOne_input
teamTwo_input: teamTwo_input
BoxLayout:
orientation: 'vertical'
BoxLayout:
orientation: 'horizontal'
size_hint: (1, 0.1)
Button:
text: '. . .'
on_release: root.manager.current = 'goBack'
Label:
font_size: 33
text: 'Team'
Label:
font_size: 33
id: teamOne_input
text: ''
Label:
font_size: 33
text: 'Team'
Label:
font_size: 33
id: teamTwo_input
text: ''
BoxLayout:
orientation: 'horizontal'
size_hint: (0.75,1)
Label:
font_size: 33
text: '' # Instructions on how to play game
Label:
font_size: 39
text: '' # Future playing area to develop
You have 2 preliminary errors:
There is no Screen with name "gameWindow" so I suppose the OP wanted to write "startGame".
The root in on_release is the "TeamNameSelect" that clearly has nothing that does not have the teamNames() method.
On the other hand the "manager" is not implemented in the .kv so it cannot have any "id", the solution is to access the screen with name "teamSelect" using the get_screen() method.
Considering the above, the solution is:
class GameWindow(Screen):
def teamNames(self):
select_screen = self.manager.get_screen("teamSelect")
self.teamOne_input.text = select_screen.ids.teamOne.text
self.teamTwo_input.text = select_screen.ids.teamTwo.text
Button:
text: 'Game On!'
on_release:
root.manager.current = 'startGame'
root.manager.current_screen.teamNames()

Kivy 1.10.1 Slider duplicating itself

I'm currently trying to create a simple Slider that will control the size of text in my application. The problem I'm running into though is that even though the slider functions as I intended, it seems to create another version of itself beneath the first slider that can't be moved. You can see how it looks in the provided image here [alt text: a screenshot of a rudimentary user interface showing a kivy slider. The slider has been moved forward behind it there is another copy in the default position] (as you can see the Label text inside the BoxLayout is also getting overlapped). I'm currently using Kivy 1.10.1 and Python 3.7.2.
Here is my Python script:
# -*- coding: utf-8 -*-
import kivy
kivy.require('1.10.1')
from kivy.app import App
from kivy.core.window import Window
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
from kivy.uix.actionbar import ActionBar
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.graphics.vertex_instructions import (Rectangle, Ellipse, Line)
from kivy.graphics.context_instructions import Color
from kivy.uix.checkbox import CheckBox
from kivy.uix.slider import Slider
#Window.size = (360/1.2,740/1.2)
class HomeScreen(Screen):
pass
class OptionsScreen(Screen):
pass
class TutorialScreen(Screen):
pass
class ScreenController(ScreenManager):
pass
look = Builder.load_file('main.kv')
class MainApp(App):
def build(self):
return look
if __name__ == '__main__':
MainApp().run()
And here is the relevant piece of Kivy language meant to create the slider on my
<OptionsScreen>
name: 'option'
BoxLayout:
orientation:'vertical'
BoxLayout:
orientation:'horizontal'
size_hint_y: 1/3
Label:
text:'Text size'
font_size: textsize.value
size_hint_x:.5
Slider:
id:textsize
min: 5
max: 25
value:15
step: 1
size_hint_x:.5
Though if you want to read the entire Kivy language document I'm posting it here as well.
#: import FadeTransition kivy.uix.screenmanager.FadeTransition
# Reference main.py
#: import main main
#: import Slider kivy.uix.slider
#: import ActionBar kivy.uix.actionbar
#: import Window kivy.core.window
ScreenController:
transition: FadeTransition()
HomeScreen:
OptionsScreen:
TutorialScreen:
<HomeScreen>
name: 'home'
BoxLayout:
id:'hem'
orientation:'vertical'
BoxLayout:
size_hint_x: 1
orientation:'horizontal'
canvas:
Color:
rgba: 0,1,0,1
Rectangle
size: self.size
pos: self.pos
BoxLayout:
orientation:'horizontal'
BoxLayout:
size_hint_x: .5
orientation:'horizontal'
canvas:
Color:
rgba: 1,0,1,1
Rectangle
size: self.size
pos: self.pos
BoxLayout:
size_hint_x: .5
orientation:'horizontal'
canvas:
Color:
rgba: 1,1,0,1
Rectangle
size: self.size
pos: self.pos
ActionBar:
pos_hint: {'top':1}
ActionView:
use_separator: True
ActionPrevious:
title: 'Fredde & Kribbas kivy'
with_previous: False
ActionOverflow:
ActionGroup:
text: 'Group1'
ActionButton:
text: 'home'
on_touch_down: app.root.current = 'home'
ActionButton:
text: 'Options'
on_touch_down: app.root.current = 'option'
ActionButton:
text: 'Tutorial'
on_touch_down: app.root.current = 'tut'
<OptionsScreen>
name: 'option'
BoxLayout:
orientation:'vertical'
BoxLayout:
orientation:'horizontal'
size_hint_y: 1/3
Label:
text:'Text size'
font_size: textsize.value
size_hint_x:.5
Slider:
id:textsize
min: 5
max: 25
value:15
step: 1
size_hint_x:.5
BoxLayout:
#fontsize checkbox
orientation:'horizontal'
size_hint_y: 1/3
BoxLayout:
orientation:'vertical'
Label:
text: 'Nightmode'
CheckBox:
id:default
size_hint_y: None
active: True
height:'50dp'
group:'g1'
BoxLayout:
orientation:'vertical'
Label:
text: 'Daymode'
CheckBox:
id:stor
size_hint_y: None
height:'50dp'
group:'g1'
BoxLayout:
orientation:'horizontal'
size_hint_y: 1/3
canvas:
Color:
rgba: 0,0,1,1
Rectangle
size: self.size
pos: self.pos
ActionBar:
pos_hint: {'top':1}
ActionView:
use_separator: True
ActionPrevious:
title: 'Fredde & Kribbas kivy'
with_previous: False
ActionOverflow:
ActionGroup:
text: 'Group1'
ActionButton:
text: 'home'
on_touch_down: app.root.current = 'home'
ActionButton:
text: 'Options'
on_touch_down: app.root.current = 'option'
ActionButton:
text: 'Tutorial'
on_touch_down: app.root.current = 'tut'
<TutorialScreen>
name: 'tut'
ActionBar:
pos_hint: {'top':1}
ActionView:
use_separator: True
ActionPrevious:
title: 'Fredde & Kribbas kivy'
with_previous: False
ActionOverflow:
ActionGroup:
text: 'Group1'
ActionButton:
text: 'home'
on_touch_down: app.root.current = 'home'
ActionButton:
text: 'Options'
on_touch_down: app.root.current = 'option'
ActionButton:
text: 'Tutorial'
on_touch_down: app.root.current = 'tut'
Does anyone know why I might be having this issue? I'm fairly new to kivy but I've played around with the slider before and never had these issues until now.
You don't need to load your kv file inside your python code since you already named your kv file as main.kv.
You can try to remove this line:
look = Builder.load_file('main.kv')
and change this line:
return look
to:
pass

(Python,Kivy) when i convert app to exe, popup doesn't work

Pop up and EXE issue
Hi guys I've got problem, whenever I open my Kivy Program via Python, a popup is actually showing up
But when I convert it via Pyinstaller, it gives me an error:
How can I possibly fix this?
Python Code:
import os
os.environ["KIVY_IMAGE"] = "pil, sdl2"
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.popup import Popup
Builder.load_file("kivy.kv")
class Rusure(Popup):
pass
class Menu(Screen):
def quit(self):
Rusure().open()
class Settings(Screen):
def bright (self,*args):
self.brightness.text = "Brightness: {}".format(str(int(args[1])))
class Play(Screen):
pass
class Sm(ScreenManager):
def __init__(self):
super().__init__()
self.add_widget(Menu(name="menu"))
self.add_widget(Settings(name="settings"))
self.add_widget(Play(name="play"))
class GoodApp(App):
def build(self):
return Sm()
GoodApp().run()
Kivy Code:
#: import rit kivy.uix.screenmanager.RiseInTransition
#: import st kivy.uix.screenmanager.SlideTransition
#: import fot kivy.uix.screenmanager.FallOutTransition
#: import Factory kivy.factory.Factory
<Menu>:
BoxLayout:
padding: 100,100,100,100
orientation: "vertical"
Label:
text: "Menu"
BoxLayout:
orientation: "horizontal"
Button:
text: "Play"
background_normal: "Image.jpg"
background_down: "ImageRel.jpg"
color: 1,1,1,1
on_press:
root.manager.transition = rit()
root.manager.current = "play"
Button:
text: "Settings"
background_color: 0.9,1,1,1
on_press:
root.manager.transition = st()
root.manager.current = "settings"
root.manager.transition.direction = "up"
Button:
text: "Quit"
background_color: 1,0.7,0,1
on_press:
root.quit()
<Settings>:
brightness: brght
BoxLayout:
padding: 100,100,100,100
orientation: "vertical"
Label:
text: "Settings"
GridLayout:
cols: 3
Label:
text: "Brightness"
Slider:
min: 0
max: 10
value: 5
on_value: root.bright(*args)
Label:
id: brght
text: "Change Value"
Button:
text: "Back"
on_press:
root.manager.transition = st()
root.manager.current = "menu"
root.manager.transition.direction = "down"
<Play>:
BoxLayout:
Label:
text: "Welcome to the game!"
Button:
text: "Back"
on_press:
root.manager.transition = fot()
root.manager.current = "menu"
<Rusure>:
title: "Are you sure?"
size_hint: 0.5,0.5
auto_dismiss: False
BoxLayout:
orientation: "vertical"
Label:
text: "Your progress will be lost"
GridLayout:
cols: 2
Button:
text: "Oh shit man!"
on_press: root.dismiss()
Button:
text: "Cancel"
on_press: root.dismiss()
I tried searching solution on the internet, but after 3 hours of searching I couldn't come up whith any answer.

how to use GridLayout in TabeedPanel using kivy in python

I am trying to make a GUI in python using kivy and TabeedPanel . some problems are coming for putting on exact location of label, TextInput , button. I'm unable to put multiple label, TextInput altogether. That's why I commented in the code. I tried GridLayout also, but Unable to arrange exactly.
Can you help me? Thanks in advance.
from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel, TabbedPanelItem
from kivy.lang import Builder
from kivy.uix.checkbox import CheckBox
from kivy.uix.button import Button
from kivy.app import App
from kivy.uix.textinput import TextInput
import json
Builder.load_string("""
<Test>:
do_default_tab: False
TabbedPanelItem:
text: 'page1'
BoxLayout:
Label:
text: 'label'
TextInput:
text: 'TextInput'
CheckBox:
text: 'CheckBox'
Button:
text: 'save'
#BoxLayout:
# orientation: 'vertical'
# BoxLayout:
# orientation: 'horizontal'
# Label:
# text: 'label'
TabbedPanelItem:
text: 'page2'
BoxLayout:
Label:
text: 'number1'
#TextInput:
# text: 'TextInput'
Label:
text: 'number2'
# TextInput:
# text: 'TextInput'
Button:
text: 'button'
""")
class Test(TabbedPanel):
pass
class MyApp(App):
def build(self):
test = Test()
return test
if __name__ == '__main__':
MyApp().run()
Following your example, you can use BoxLayouts but you need to nest them correctly:
from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder
Builder.load_string("""
<Test>:
do_default_tab: False
TabbedPanelItem:
text: 'page1'
BoxLayout:
padding: 50, 50, 50, 50
orientation: 'horizontal'
BoxLayout:
spacing: 50
orientation: 'vertical'
size_hint_x: 1
Label:
text: 'label'
Label:
text: 'label'
Label:
text: 'label'
BoxLayout:
spacing: 50
orientation: 'vertical'
TextInput:
text: 'TextInput'
TextInput:
text: 'TextInput'
TextInput:
text: 'TextInput'
BoxLayout:
spacing: 50
orientation: 'vertical'
size_hint_x: 0.40
CheckBox:
text: 'CheckBox'
CheckBox:
text: 'CheckBox'
CheckBox:
text: 'CheckBox'
BoxLayout:
spacing: 50
orientation: 'vertical'
size_hint_x: 0.60
Button:
text: 'save'
Button:
text: 'save'
Button:
text: 'save'
TabbedPanelItem:
text: 'page2'
BoxLayout:
padding: 50, 50, 50, 50
orientation: 'horizontal'
BoxLayout:
spacing: 50
orientation: 'vertical'
Label:
text: 'label'
Label:
text: 'label'
Label:
BoxLayout:
spacing: 50
orientation: 'vertical'
TextInput:
text: 'TextInput'
TextInput:
text: 'TextInput'
Button:
spacing: 100
text: 'button'
""")
class Test(TabbedPanel):
pass
class MyApp(App):
def build(self):
test = Test()
return test
if __name__ == '__main__':
MyApp().run()
Output:
Here's an example using GridLayout that I made a reference to in your other question. FYI, there are many ways you could go about this. I personally like using gridlayout with forms because it's easy to put then ScrollViews if need be.
Read up on the kv language here to help keep things DRY and other things. If a widget is defined in kv, then you don't need to import them at the top of your file.
Example:
from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder
Builder.load_string("""
<MyLabel#Label>:
size_hint: (None, None)
size: (400, 100)
<MyTextInput#TextInput>:
size_hint: (None, None)
size: (600, 100)
<MyButton#Button>:
size_hint: (None, None)
size: (400, 100)
<MyCheckBox#AnchorLayout>:
# I'm nesting the checkbox here b/c it is hard to see if the background is not lightened.
size_hint: (None, None)
size: (100, 100)
anchor_x: "center"
anchor_y: "center"
canvas.before:
Color:
rgba: [0.7, 0.7, 0.7, 1]
Rectangle:
pos: self.pos
size: self.size
CheckBox:
<Test>:
do_default_tab: False
TabbedPanelItem:
text: 'page1'
GridLayout:
rows: 3
cols: 4
padding: [10, 100]
spacing: [10, 50]
MyLabel:
text: "Label 1"
MyTextInput:
MyCheckBox:
MyButton:
text: "Button 1"
MyLabel:
text: "Label 3"
MyTextInput:
MyCheckBox:
MyButton:
text: "Button 2"
MyLabel:
text: "Label 3"
MyTextInput:
MyCheckBox:
MyButton:
text: "Button 3"
TabbedPanelItem:
text: 'page2'
GridLayout:
rows: 3
cols: 2
padding: [10, 100]
spacing: [10, 50]
MyLabel:
text: "Label 1"
MyTextInput:
MyLabel:
text: "Label 2"
MyTextInput:
# blank spacer widget
Widget:
size_hint: (None, None)
size: (400, 100)
MyButton:
text: "Button"
""")
class Test(TabbedPanel):
pass
class MyApp(App):
def build(self):
return Test()
if __name__ == '__main__':
MyApp().run()

Passing information between classes in Kivy

I have a basic app in Kivy with a class for each screen. I would like to have the user enter some text in one screen and for this to be displayed in a label on another screen.
I've been through all the similar posts but can't seem to get anything working.
The two classes EnterSentences and Review have ObjectProperties. Is there a way to connect these with bind? Or do I need to just structure things completely differently?
Any help much appreciated. Here's the .py file
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
class MainMenu(BoxLayout):
def enter_sentences_button(self):
self.clear_widgets()
self.add_widget(EnterSentences())
def review_button(self):
self.clear_widgets()
self.add_widget(Review())
def settings_button(self):
pass
class EnterSentences(BoxLayout):
search_box = ObjectProperty()
def main_menu(self):
self.clear_widgets()
self.add_widget(MainMenu())
class Review(BoxLayout):
sentence = ObjectProperty()
class NewApp(App):
pass
if __name__ == "__main__":
NewApp().run()
and the .kv file:
MainMenu
<MainMenu>:
orientation: 'vertical'
Label:
text: "Welcome to your Flash Card App!"
size_hint_y: 5
BoxLayout:
size_hint_y: 1
orientation: "horizontal"
Button:
text: "Enter sentences"
on_press: root.enter_sentences_button()
Button:
text: "Review"
on_press: root.review_button()
Button:
text: "Settings"
<EnterSentences>:
search_box: enter_sentence
orientation: "vertical"
Label:
text: "Enter your sentences here:"
size_hint_y: 4
TextInput:
id: enter_sentence
TextInput:
TextInput:
BoxLayout:
orientation: 'horizontal'
Button:
text: 'Main Menu'
on_press: root.main_menu()
Label:
text: ''
<Review>:
orientation: 'vertical'
Label:
size_hint_y: 4
text: root.search_box
TextInput:
size_hint_y: 1
You only have to change the kv file. You could add the text from the 3 TextInputs to 3 variables readable from the whole app:
TextInput:
+ on_text: app.sentence1=self.text
id: enter_sentence
TextInput:
+ on_text: app.sentence2=self.text
TextInput:
+ on_text: app.sentence3=self.text
Then you could access the new variables in the Review:
<Review>:
orientation: 'vertical'
Label:
size_hint_y: 4
text: app.sentence1 + "\n" + app.sentence2 + "\n" + app.sentence3
TextInput:
size_hint_y: 1

Categories