Image position with FloatLayout

[Richard M]

Hi all

I'm having trouble with setting an image position with FloatLayout.

Here's what I have (simplified)

 - one rectangle in the top-right

 - one button in the top-left

The pos_hint for the image is (I think) taking the square bounding box, not the actual image size.  It also looks like the default 100x100 that I remember reading somewhere.

How can I move the rectangle to the top of the screen, and the correct size?

Any help is appreciated.  (And first post to GG.)

import kivy
kivy.require('1.10.0')
from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.image import Image
from kivy.uix.floatlayout import FloatLayout
from kivy.config import Config

Config.set('graphics', 'width', '480')
Config.set('graphics', 'height', '800')


class MyApp(App):
    ''''''
    def setOrientation(self, orient):
        self.orient = orient
    def build(self):
        return FloatLayout()  

if __name__ == "__main__":
    app = MyApp()
    app.setOrientation(orient="vertical")
    app.run()

<FloatLayout>:
    Image:
        source: 'image_400x90.png'
        pos_hint: {'left':1, 'top':1}
        size_hint: None, None
        allow_stretch: False
        keep_ratio: True
       
    Button:
        font_size: 30
        color: 0,1,0,1
        size_hint: 0.3, 0.1
        text: "TopRight"
        pos_hint: {'right':1, 'top':1}

[Andreas Ecker]

Hi Richard,

the pos_hint is only specifying the postion and has nothing to do with the image size. So the main problem in your example code was that you didn't specified a display size for your image (using the size property/attribute). The bounding box rectangle of the image was actually on the top of the screen but without a size and the keep_ratio set to True the image will be vertically in the middle of the bounding box.

Other small issues in your code (corrected in my example underneath) were:
- using FloatLayout as the kv rule name instead of MyFloatLayout
- spaces within the kv file on the FloatLayout rule
- unneeded code, e.g. the setOrientation() method

- missing image (I used Koala.jpg from Windows Sample Pictures - see attached)

If you want to see the image filling out completely your image's bounding box display size you also need to change/flip the boolean values in the allow_stretch and keep_ratio properties/attributes of the Image widget (like shown in the code underneath).

```

import kivy
kivy.require('1.10.0')

from kivy.app import App

from kivy.lang import Builder

from kivy.config import Config
Config.set('graphics', 'width', '480')
Config.set('graphics', 'height', '800')

built_root = Builder.load_string('''
MyFloatLayout:

<MyFloatLayout@FloatLayout>:
    Image:
        source: 'Koala.jpg'

        pos_hint: {'left': 1, 'top': 1}
        size_hint: None, None

        size: 300, 630
        allow_stretch: True
        keep_ratio: False

    Button:
        font_size: 30
        color: 0, 1, 0, 1

        size_hint: 0.3, 0.1
        text: "TopRight"
        pos_hint: {'right': 1, 'top': 1}

''')


class MyApp(App):
    def build(self):
        return built_root

if __name__ == "__main__":
    app = MyApp()

    app.run()
```

Please in the future always try to minimize your example code to a full running version and include all the needed resources too.

HTH

2017-07-06 2:53 GMT+01:00 Richard M <richard...@gmail.com>:

Hi all

I'm having trouble with setting an image position with FloatLayout.

Here's what I have (simplified)

 - one rectangle in the top-right

 - one button in the top-left

The pos_hint for the image is (I think) taking the square bounding box, not the actual image size.  It also looks like the default 100x100 that I remember reading somewhere?

How can I move the rectangle to the top of the screen, and the correct size?

Any help is appreciated.  (And first post to GG.)

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Richard M]

Hello Andreas

Thanks so much for your reply, and points noted for the future.  (Although there was only one line in the kivy file that should have had more spaces!)  Anyway, I now have a far greater understanding how root and class rules work.

So...  Are you saying a root rule is not necessarily needed, but it's seen as good practice to define one?  I'm just going by examples I've seen.

One last question, if that's OK:  While experimenting, I found that objects can be created in the opposite order I'd expect.  E.g., in the code below I would expect the root widget to be created first, and then the class widget.  Am I missing something?

Thanks again for your time, it's really appreciated.

import kivy

kivy.require('1.10.0')

from kivy.app import App

from kivy.lang import Builder

from kivy.config import Config

built_root = Builder.load_string('''

MyFloatLayout:

    Button:

        size_hint: 0.8, 0.1

        text: "Button2 - This will overlap"

        pos_hint: {'left': 1, 'top': 1}

<MyFloatLayout@FloatLayout>:

    Button:

        size_hint: 0.3, 0.1

        text: "Button1 - TopRight"

        pos_hint: {'right': 1, 'top': 1}

''')

class MyApp(App):

    def build(self):

        return built_root

if __name__ == "__main__":

    app = MyApp()

    app.run()

On Thursday, July 6, 2017 at 11:29:55 PM UTC+12, Andreas Ecker wrote:

Hi Richard,

the pos_hint is only specifying the postion and has nothing to do with the image size. So the main problem in your example code was that you didn't specified a display size for your image (using the size property/attribute). The bounding box rectangle of the image was actually on the top of the screen but without a size and the keep_ratio set to True the image will be vertically in the middle of the bounding box.

Other small issues in your code (corrected in my example underneath) were:
- using FloatLayout as the kv rule name instead of MyFloatLayout
- spaces within the kv file on the FloatLayout rule
- unneeded code, e.g. the setOrientation() method

- missing image (I used Koala.jpg from Windows Sample Pictures - see attached)

If you want to see the image filling out completely your image's bounding box display size you also need to change/flip the boolean values in the allow_stretch and keep_ratio properties/attributes of the Image widget (like shown in the code underneath).

```
import kivy
kivy.require('1.10.0')

from kivy.app import App
from kivy.lang import Builder

from kivy.config import Config
Config.set('graphics', 'width', '480')
Config.set('graphics', 'height', '800')

built_root = Builder.load_string('''
MyFloatLayout:

<MyFloatLayout@FloatLayout>:
    Image:
        source: 'Koala.jpg'
        pos_hint: {'left': 1, 'top': 1}
        size_hint: None, None
        size: 300, 630

# 

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

[Andreas Ecker]

Glad that my hints were helpful for you!

Sorry after checking your first example code just again, I just noticed that the spaces must have be inserted by my editor after pasting your code.

AFAIK a root rule is optional but helps if you not have a App.build() method defined, but no sure on this.

Also not sure why the kivy widgets get created internally in reverse order - I remember darkly that I've read something about in the kivy mailing lists that this is on purpose for to ensure that the widgets defined first will stay on top of widgets defined underneath. But in a FloatLayout the order is not affecting the position in the layout/widget-container (whereas in a BoxLayout the order is defining also the position of the widgets within the laoyout/container).

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+unsubscribe@googlegroups.com.

[Richard M]

Ah, misunderstanding.  Yes, my code did stupidly have spaces at  the front - that was me, not you.  (I know about indentation, pep-8, etc.)  I must have been really tired when I copied and pasted.