Canvas being put underneath other widgets in a horizontal layout while using NavigationDrawer

[Erin Maier]

Hi there,

I'm currently building an application that uses the NavigationDrawer from the garden. My side panel is fine and working, but for some reason I'm having issues setting up the widgets in the main panel. I'm trying to set up a horizontal layout that contains a 3:4 aspect ratio canvas on the left side and then a vertical layout containing the button for the side panel and some sliders/labels on the right side. For some reason that vertical layout is taking up the entire window, and the canvas is being put underneath it, as you can see in the picture below.

I've tried changing around size hints and pos hints, and also the sizing references (I think that root references NavigationDrawer here, but I'm not sure if that's what's messing it up? Any help would be appreciated, I'm pretty new to kivy so it's totally possible I'm missing something very obvious. My Python and a minimally functional kv file are below...

Thank you,

Erin

import kivy

kivy.require('1.9.1') # replace with your current kivy version !

from kivy.app import App

from kivy.uix.label import Label

from kivy.uix.slider import Slider

from kivy.uix.boxlayout import BoxLayout

from kivy.graphics import Rectangle, Color

from kivy.uix.widget import Widget

from kivy.uix.togglebutton import ToggleButton

from kivy.properties import ListProperty

from kivy.uix.button import Button

from kivy.garden.navigationdrawer import NavigationDrawer

class Controller(NavigationDrawer):

    def __init__(self):

       super(Controller, self).__init__()

class SliderApp(App):

    def build(self):

       return Controller()

if __name__ == '__main__':

   SliderApp().run()

<Controller>:

lbl1: angle

anim_type: 'fade_in'

BoxLayout:

orientation: 'vertical'

Label:

text: 'PLEASE SELECT AN OBJECT'

font_size: 18

Button:

text: 'Particle'

BoxLayout:

orientation: 'horizontal'

canvas:

Color: 

rgb: (255, 255, 255)

Rectangle:

pos: self.pos

size: (400,300)

BoxLayout:

orientation: 'vertical'

size: root.width * .25, root.height

pos: root.width * .75, 0

Button:

text: 'Object'

on_press: root.toggle_state()

BoxLayout:

orientation: 'horizontal'

Label: 

text: "0"

font_size: 20

Slider:

id: angle_slider

min: 0

max: 360

step: .5

value: 0

on_value: angle.text = "Angle: " + str(self.value)

Label: 

text: "360"

font_size: 20

Label: 

id: angle

text: "Angle: 0.0"

font_size: 24

[ZenCODE]

As first step, ensure you are passing the correct argument to your superclass. And how are you loading your kv?

    class Controller(NavigationDrawer):
        def __init__(self):
           super(Controller, self).__init__()

should be

    class Controller(NavigationDrawer):
        def __init__(self, **kwargs):
           super(Controller, self).__init__(**kwargs)

[Erin Maier]

Thank you for the response! I'm using an external kv file, with main.py and slider.kv being in the same folder. RE: the superclass arguments, I'm afraid I only have a vague understanding of what the superclass is/is meant to do. I'm not sure what arguments I might be missing. Is it the word **kwargs itself? Removing that line of code and replacing it with pass also changed nothing about the issue.

I tried changing some parameters and widgets and figured out that it appears to be the canvas itself causing the issue. While the canvas is there any changes I make to any of the BoxLayouts (orientation, positioning, etc.) have absolutely no effect. I replaced the canvas with a Button labeled "Test" that also opens and closes the NavigationDrawer, and the layout immediately became what I wanted it to. 

Is NavigationDrawer just not meant to contain a canvas?

[Erin Maier]

I have figured out the issue thanks to this article about the kivy canvas: I didn't understand that I couldn't just place a canvas into the box layout without having some sort of root widget to place it on, like a stand or easel to place a canvas upon. It was seeing its root widget as the entire main NavigationDrawer panel...aka, the entire application window. The solution was simply adding a Widget to be the root of my canvas.

BoxLayout:

orientation: 'horizontal'

Widget:

canvas:

Color:

rgb: (255, 255, 255)

Rectangle:

pos: self.pos

size: self.size