title: Kivy: How to place canvas in a specific layout
body: <p>
  I am trying to place an image on a canvas that automatically updates every second. The canvas has a specific source for an image, and whenever the image file gets replaced I have it updated and reloaded on the GUI. No user input, and no exiting of the GUI required.</p>
  
  <p>I was able to get the image to reload, but now I can't place the image where I want to. I want to be able to put it in a layout, preferably located at the top right of the screen</p>
  
  <p>
  My following main python file is as follows</p>
  
  <pre><code>import kivy
  import os
  
  kivy.require('1.10.0')
  
  from kivy.app import App
  from kivy.uix.boxlayout import BoxLayout
  from kivy.uix.screenmanager import ScreenManager, Screen
  from kivy.uix.image import Image
  from kivy.properties import StringProperty
  from kivy.clock import Clock
  from kivy.uix.anchorlayout import AnchorLayout
  from kivy.uix.widget import Widget
  from kivy.graphics.instructions import InstructionGroup
  from sshtest import ssh #import the ssh class from the ssh python file
  
  
  class ScreenOne(Screen):
      def login(self): #define login using ssh as a function
  
          #Make a Class Variable called connection. This allows for other
          #classes to call on it without passing it as an argument
  
          ScreenOne.connection = ssh("192.168.1.3", "pi", "seniordesign")
                  #ScreenOne.connection.sendCommand("ls")
          #ScreenOne.connection.sendCommand("mkdir thisistest")
          print("Logging in") #For error checking
  
      def gpioSet(self): #allows for gpio pins to trigger image capture
          ScreenOne.connection.sendCommand("echo '18' &gt; /sys/class/gpio/export")
          ScreenOne.connection.sendCommand("echo 'out' &gt; /sys/class/gpio/gpio18/direction")
  
  class ScreenTwo(Screen): #This is where all the functions are
  
      def command(self, input): #create a function that sends command through ssh
          ScreenOne.connection.sendCommand(input) #Call on connection made before to send command
  
  
  
  
  class MyScreenManager(ScreenManager):
      pass
  
  class MyPicture(Widget):
  
      def __init__(self,**kwargs):
          super(MyPicture,self).__init__(**kwargs)
          with self.canvas:
              MyPicture.picture = Image(source = 'C:/Users/Jason/Desktop/RaspberryPiTransferred/TEST.jpg',
                                        size_hint=(.3,.3))
  
  
              #self.add_widget(Image(MyPicture.picture))
  
      def update(self):
          MyPicture.picture.reload()
  
      Clock.schedule_interval(update,1)
  
  
  
  #Create the Application that will change screens. Add App(App) to end of wanted classname
  class ScreenChangeApp(App):
  
  #Create a function that builds the app. Keyword self make sures to reference
  #current instantiation
  
      def build(self):
          screen_manager = ScreenManager()
  
          screen_manager.add_widget(ScreenOne(name = "screen_one")) 
          screen_manager.add_widget(ScreenTwo(name = "screen_two"))
  
          return screen_manager #after building the screens, return them
  #MyScreenManager.login()
  
  sample_app = ScreenChangeApp()
  sample_app.run()
  </code></pre>
  
  <p>My KV file is shown below</p>
  
  <pre><code>#: import os os
  &lt;CustomButton@Button&gt;:
      font_size: 12
      size_hint: .2,.1
  
  &lt;Picture@Image&gt;:
      id: image
  
  &lt;ScreenOne&gt;: #define The First Screen
      BoxLayout: #Use box layout
          Button: #create button
              text: "Connect to the Raspberry Pi"
              on_press:
                  root.login()
                  root.gpioSet()
                  root.manager.transition.direction= "left"
                  root.manager.transition.duration = 1
                  root.manager.current = "screen_two"
  
  &lt;ScreenTwo&gt;:
      BoxLayout:
          spacing: 10
          padding: 10
          orientation: "vertical"
          CustomButton:
              text: "Send an ls command"
              on_press:
                  root.command("ls")
  
          CustomButton:
              text: "Take picture"
              on_press:
                  root.command("python cameradaemon.py &amp;") #'&amp;' runs script in background
                  root.command("sleep .1")
                  root.command("echo '1' &gt; /sys/class/gpio/gpio18/value") #set pin high to take pic
                  root.command("echo '0' &gt; /sys/class/gpio/gpio18/value") #take it off to prevent another photo 
  
                  root.command("scp TEST.jpg Jason@192.168.1.10:C:/Users/Jason/Desktop/RaspberryPiTransferred")          
                  root.command("kill %1")
  
  
  
          CustomButton:
              text: "Create Histogram"
              on_press:
                  os.system("cd C:/Users/Jason/Desktop/KivyFiles/Histogram &amp; python histogram.py")
  
  
      MyPicture
  </code></pre>
  
  <p>What I get is the following GUI Screen <a href="https://i.stack.imgur.com/DiGKF.png" rel="nofollow noreferrer">GUI Screen</a>.</p>
  
  <p>The image is shown in the bottom left of the screen.</p>
  
  <p>When I press "take picture button" it updates as shown in this screenshot <a href="https://i.stack.imgur.com/Vmlld.png" rel="nofollow noreferrer">Image after pic is taken</a></p>
  
  <p>However I don't have the control over the placement like I want to.</p>
  
  <p>Originally I had the image appear on the top right of the screen with different code, but I was not able to update the image dynamically <a href="https://i.stack.imgur.com/e4eNu.png" rel="nofollow noreferrer">Older GUI placement</a>
  
  My previous code set that image in an anchor layout, but it was static. Now that I'm using a canvas, it updates with my current code, but I can't place it like I did before.</p>
  
  <p>The part where I set "size_hint" does not do anything, I was just guessing and checking at this point.
  </p>
  
  <p>Is there any easier way to call that Picture class in the KV class so that the image is set in a specific layout? For example</p>
  
  <pre><code>AnchorLayout:
      anchor_x: 'right'
      anchor_y: 'left'
      BoxLayout:
          spacing: 10
          padding: 10
          Image:
              &lt;Dynamic image goes here&gt;
  </code></pre>
  
  <p>Where instead of "Dynamic image goes here"  I had</p>
  
  <pre><code>source: &lt;location of image&gt;
  </code></pre>