title: How to reference a widgets that seems out of scope - adapted kivy/examples/demo/images
body: <p>I have edited the kivy/examples/demo/images files to try to do the following:
  - for each added image, it also adds a button in a sidebar (different boxlayout)
  - when clicking the button, it removes both the image and the button</p>
  
  <p>In order to do this, I have created (this is short summary code to give you an idea)</p>
  
  <pre><code>boxlayout:
      floatlayout:
      #this is where the images, in their own class called "Picture" just like in the demo get added
      boxlayout:
      #this is where the buttons get added. I created a class for them called "PictureBtn"
  </code></pre>
  
  <p>When creating the Pictures I add a unique id to them. 
  Then I create the PictureBtn and add the same id.
  Then I populate the pictures and the buttons in their respective places. All is well so far.</p>
  
  <p>Now the problem is that from either Pictures and PictureBtn instances I can reference the app, but I have no clue how to reference the other instance. The id's don't seem to be anywhere.</p>
  
  <p>The way I understand it this is because they are outside of the scope. The id's only hold locally and since both PictureBtn and Pictures have their own root, I cannot get to them.</p>
  
  <p>My full code is below:</p>
  
  <pre><code>    import kivy
  kivy.require('1.0.6')
  
  from glob import glob
  from random import randint
  from os.path import join, dirname
  from kivy.app import App
  from kivy.logger import Logger
  from kivy.uix.scatter import Scatter
  from kivy.uix.boxlayout import BoxLayout
  from kivy.properties import StringProperty
  # FIXME this shouldn't be necessary
  from kivy.core.window import Window
  
  #declare global var for keeping track of unique ids
  number_of_pics=0
  
  
  class Picture(Scatter):
      '''Picture is the class that will show the image with a white border and a
      shadow. They are nothing here because almost everything is inside the
      picture.kv. Check the rule named &lt;Picture&gt; inside the file, and you'll see
      how the Picture() is really constructed and used.
  
      The source property will be the filename to show.
      '''
  
      source = StringProperty(None)
  
  
  class PictureBtn(BoxLayout):
      pass
  
  class PicturesApp(App):
  
      def build(self):
          global number_of_pics
  
          # the root is created in pictures.kv
          root = self.root
  
          # get any files into images directory
          curdir = dirname(__file__)
          for filename in glob(join(curdir, 'images', '*')):
              try:
                  # load the image
                  picture = Picture(source=filename, rotation=randint(-30,30))
                  picture.id='pic'+str(number_of_pics)
  
                  button = PictureBtn()
                  button.id = 'pic'+str(number_of_pics)
                  button.ids.lbl.text= button.id
  
                  # add to the main field
                  self.root.ids.picspace.add_widget(picture)
                  self.root.ids.sidebar.add_widget(button)
  
                  number_of_pics+=1                
              except Exception as e:
                  Logger.exception('Pictures: Unable to load &lt;%s&gt;' % filename)
  
      def on_pause(self):
          return True
  
      def RemovePicture(self,byid):
          #my attempt (obviously failing) at removing the Picture instance and the
          #PictureBtn instance with the id "byid"
          self.root.ids.sidebar.remove_widget(self.root.ids.sidebar.ids.byid)
          self.root.ids.picspace.remove_widget(self.root.ids.picspace.ids.byid)
  
  if __name__ == '__main__':
      PicturesApp().run()
  </code></pre>
  
  <p>Then my kv file contains the following:</p>
  
  <pre><code>#:kivy 1.0
  #:import kivy kivy
  #:import win kivy.core.window
  
  BoxLayout:
      orientation: 'horizontal'
      FloatLayout:
          id: picspace
          size_hint: 0.8,1
          canvas:
              Color:
                  rgb: 1, 1, 1
              Rectangle:
                  source: 'data/images/background.jpg'
                  size: self.size
  
          BoxLayout:
              padding: 10
              spacing: 10
              size_hint: 1, None
              pos_hint: {'top': 1}
              height: 44
              Image:
                  size_hint: None, None
                  size: 24, 24
                  source: 'data/logo/kivy-icon-24.png'
              Label:
                  height: 24
                  text_size: self.width, None
                  color: (1, 1, 1, .8)
                  text: 'Kivy %s - Pictures' % kivy.__version__
      BoxLayout:
          id: sidebar
          orientation: 'vertical'
  
  
  &lt;Picture&gt;:
      # each time a picture is created, the image can delay the loading
      # as soon as the image is loaded, ensure that the center is changed
      # to the center of the screen.
      on_size: self.center = win.Window.center
      size: image.size
      size_hint: None, None
  
      Image:
          id: image
          source: root.source
  
          # create initial image to be 400 pixels width
          size: 400, 400 / self.image_ratio
  
          # add shadow background
          canvas.before:
              Color:
                  rgba: 1,1,1,1
              BorderImage:
                  source: 'shadow32.png'
                  border: (36,36,36,36)
                  size:(self.width+72, self.height+72)
                  pos: (-36,-36)
  
  &lt;PictureBtn&gt;:
      orientation: 'horizontal'
      Label:
          id: lbl
          text: ''
      Button:
          text: 'X'
          on_release: app.RemovePicture(self.parent.id)
  </code></pre>
  
  <p>(My original code is a similar situation, but I created the same problem in one of the kivy/examples to try to make it easier to address.)</p>
  
  <p>Thanks</p>