Search code examples
pythonscreendropdown

Kivy Dropdown and how to insert corresponding data below the chosen menu in dropdown

I need help. Python is almost new for me, my initial training was in December. I made an application in pure python, based on different data (mainly astronomical). It works great with my android phone, but the presentation is not really user friendly. I saw Kivy is a good way to make android application with a nice design. Here begins my problems... Kivy is not simple to handle from 0, in auto-training... I was able to make a dropdown menu Dropdown menu at start with 4 choices Developed dropdown menuto begin. But after that, I would like to put data previously calculated just below the chosen menu chosen menu. And my problem begins. I tried a lot of thing: screenmanager, include dropdown in a layout, etc... I read a lot of examples on internet but I didn't find a way to put corresponding computed data just below the chosen menu. I am pretty sure I am not the first one to try this... Here the python code :

#! /usr/bin/env python3
# -*- coding: utf-8 -*-

'''
Code of How to use drop-down list with.kv file
'''

# Program to Show how to create a switch
# import kivy module
import kivy

# base Class of your App inherits from the App class.
# app:always refers to the instance of your application
from kivy.app import App

# this restrict the kivy version i.e
# below this kivy version you cannot
# use the app or software
kivy.require('1.11.1')

# drop-down menu is a list of items that
# appear whenever a piece of text or a
# button is clicked.
# To use drop down you must have ti import it
from kivy.uix.dropdown import DropDown

# module consists the floatlayout
# to work with FloatLayout first
# you have to import it
from kivy.uix.floatlayout import FloatLayout

# The Button is a Label with associated actions that
# are triggered when the button is pressed (
# or released after a click / touch).
from kivy.uix.button import Button

from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout

class CustomDropDown(DropDown):
    pass

class DropdownDemo(BoxLayout):
    #The code of the application itself.

    def __init__(self, **kwargs):
        #The button at the opening of the window is created here,
        #not in kv

        super(DropdownDemo, self).__init__(**kwargs)
        self.dropdown = CustomDropDown()

        # Creating a self widget bouton
        self.mainbutton = Button(text='Cliquer pour choisir!', font_size=18, color = [0.2,0.65,0.8,1], pos_hint={"top":1},
                                 size_hint_x=1, size_hint_y=0.08)

        # Added button to FloatLayout so inherits this class
        self.add_widget(self.mainbutton)

        # Adding actions
        # If click
        self.mainbutton.bind(on_release=self.dropdown.open)

        # root.select on_select called
        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):
        #x is self.mainbutton.text refreshed
        print("The chosen mode is: {0}".format(x))

# Declare both screens
class Demarrage(Screen):
    pass

class Soleil(Screen):
    u = 3.141592
    pass

class Ephemerides(Screen):
    pass

# Create the screen manager
sm = ScreenManager()

class dropdownApp(App):
    '''The build function returns root,
    here root = DropdownDemo ().
    root can only be called in the kv file.
    '''

    def build(self):
        #sm = ScreenManager()
        sm.add_widget(Demarrage(name='init'))
        sm.add_widget(Soleil(name='soleil'))
        sm.add_widget(Ephemerides(name='ephemerides'))
        sm.current = 'init'
        u = "essai " + str(3.1415)
        return DropdownDemo()
        #return sm

if __name__ == '__main__':
    dropdownApp().run()

Here the kv code:

#:kivy 1.11.1

#:set color_font   (0.2, 0.65, 0.8, 1)  # bleu kivy 5rgb 0 164 ou 154? 206
#:set color_button (0.345, 0.345, 0.345, 1)  # gris menu kivy rgb 88 88 88
#:set color_button_pressed (0.4, 0.4, 0.4, 1)  # gris foncé


<CustomDropDown>:
    size: self.size
    Button:
        text: 'Ephémérides générales'
        # background_color: color_button if self.state == 'down' else color_button_pressed
        # color: 0.2,0.65,0.8,1
        # https://github.com/kivy/kivy/wiki/Styling-a-Spinner-and-SpinnerOption-in-KV
        size_hint_y: None
        height: 44
        on_release: root.select('>> Ephémérides Générales' )
    Button:
        text: 'Soleil'
        size_hint_y: None
        height: 44
        on_release: root.select('>> Soleil')
    Button:
        text: 'Lune'
        size_hint_y: None
        height: 44
        on_release: root.select('>> Lune')
    Button:
        text: 'Temps significatifs - TU'
        size_hint_y: None
        height: 44
        on_release: root.select('>> Temps significatifs - TU')

<Demarrage>:

<Soleil>:
    BoxLayout:
        Button:
            text: 'Soleil'
            size_hint_y: None
            height: 44


<Ephemerides>:
    BoxLayout:

<Demarrage>:
    BoxLayout:

Thank you very much for your help.

Solution

  • I made the following changes to your source code :

    • self.add_widget(sm) after self.add_widget(self.mainbutton) to have the ScreenManager in the BoxLayout containing the dropdown button

    • self.orientation = 'vertical' in DropdownDemo.__init__ so the ScreenManager is under the dropdown button

    • in the def callback(self, instance, x): method, selection of the ScreenManager screen accordingly to the user's choice

    • For the accents, I had to save the .kv file in Ansi using Notepad++ (Encoding / Convert in Ansi)

    Hope I understood your needs.

    Regards

    Here you can see the picture of the modified source:

    enter image description here