Re: [kivy-users] Kivy layout

[elli...@cox.net]

That is a nice looking UI.  I would look at experimenting with a ScatterLayout.  

At first thought I would  try a Horizontal BoxLayout with 2 ScatterLayouts inside, representing the right and left panels.

Use the scatter to scale the left panel causing things to shrink when the slide out.

---

From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> on behalf of Degenerate Tech <sksah...@gmail.com>
Sent: Tuesday, May 14, 2024 12:33 PM
To: Kivy users support <kivy-...@googlegroups.com>
Subject: [kivy-users] Kivy layout

 

How to design this type of layout 

--
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+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/bf87a70a-efe5-4342-8072-29966fe02142n%40googlegroups.com.

[Degenerate Tech]

how set limit of movement of boxlayout to left and right and scaling also . i am not getting idea with scatter layout .

target is in video . please help

[ElliotG]

Here is an example to get you started.

I have used Labels placeholders for the content and menu.  I hard coded the sizes, these should be derived from the WIndow size.

Let me know if this helps.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout


kv = """
<PanningLayout>:
    Label:
        id: content
        size_hint: None, None
        size: dp(800), dp(600)
        text: 'content'
        color: 'black'
        canvas.before:
            Color:
                rgb: .9, .9, .9
            RoundedRectangle:
                size: self.size
                pos:self.pos    
    Label:
        id: menu
        size_hint: None, None
        size: dp(300), dp(600)
        text: 'right menu'
        color: 'black'
        pos: content.right, content.y
        canvas.before:
            Color:
                rgb: .7, .7, .7
            RoundedRectangle:
                size: self.size
                pos:self.pos    

PanningLayout:

"""


class PanningLayout(FloatLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.x_displacement = 0

    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            touch.grab(self)
        return super().on_touch_up(touch)

    def on_touch_move(self, touch):
        if touch.grab_current is self:
            print(touch.dx)
            # sum the touch.dx values, and scale size and position based on the sum of dx
            self.x_displacement += touch.dx
            # used the sort clamp the value x_displacement between -100 and 0.
            self.x_displacement = sorted([-100, self.x_displacement, 0])[1]
            print(f'{self.x_displacement=}')
            self.ids.content.size = 800 + self.x_displacement, 600 + self.x_displacement
            self.ids.content.pos = self.x_displacement, -self.x_displacement / 2
            self.ids.menu.size = 300 + self.x_displacement, 600 + self.x_displacement
        return super().on_touch_move(touch)

    def on_touch_up(self, touch):
        if touch.grab_current is self:
            touch.ungrab(self)
            # Reset widget positions?
        return super().on_touch_up(touch)



class NewUIApp(App):
    def build(self):
        return Builder.load_string(kv)

NewUIApp().run()

[Degenerate Tech]

why button not getting touch event ?

every time i am confused with this touch concept .

[Degenerate Tech]

i got the bug . solved . thanks

[ELLIOT GARBUS]

Ooops.  Glad you got that working. 

---

From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> on behalf of Degenerate Tech <sksah...@gmail.com>

Sent: Thursday, July 4, 2024 8:12 AM

To: Kivy users support <kivy-...@googlegroups.com>

Subject: Re: [kivy-users] Kivy layout

 

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/b06c91a2-c97a-4a90-a023-942a8725b035n%40googlegroups.com.

[Degenerate Tech]

one thing i want to clear from you . that code is working fine .

but when i  load that kv code from file such that . size of content widget not changing but if i add '-' sign it works as previous

<-UI12PanningLayout> : # working fine

 ......

..... kv code

.............

######################

<UI12PanningLayout>:   ## Not working   

......

..... kv code

.............

what is importance of '-' sign please tell me i want to make my concept clear when i use '-'  and when it is not needed .

[ELLIOT GARBUS]

The '-' means you are redefining the styling for the widget.  Read: https://kivy.org/doc/stable/api-kivy.lang.html#redefining-a-widget-s-style

---

From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> on behalf of Degenerate Tech <sksah...@gmail.com>

Sent: Thursday, July 4, 2024 9:30 AM

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/1f765a35-caaf-41b1-9301-e9bcab7e1654n%40googlegroups.com.

[Degenerate Tech]

while moving left by touch button press  fired . how to avoid button press while moving the page ?

[ElliotG]

You are loading the kv file twice.  By default the kv file with the same name as the App will be loaded.  You can remove the explice Builder.load_file(),  Note there is an warning in the log for loading the kv file twice.  

[WARNING] [Lang        ] The file C:\Users\ellio\PycharmProjects\KIvy-help-230\Degenerate Tech\slide_touch\ui12.kv is loaded multiples times, you might have unwanted behaviors.

This is why things worked when you added the "-", and you had problems without the "-".

To prevent the button from being pressed when moving, you can add a delay, if the move happens before the dealy completes the button is not touched. See below.  Files are attached.

class UI12PanningLayout(FloatLayout):
    obj=ObjectProperty(None)
    extend=NumericProperty(dp(50))
    _tou_up=BooleanProperty(False)

    factor=0.15

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.x_displacement = 0

        self.wait_for_move = None

    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            touch.grab(self)

        button = self.ids.button
        if button.collide_point(*touch.pos):
            # if a button is touched, wait 0.5 sec for a move
            # if not moved, call the super().on_touch_down()
            print('button pressed, wait for .5 sec for a move')
            self.wait_for_move = Clock.schedule_once(lambda dt: self._button_touch(touch), 0.5)
            return True

        if self._tou_up:
            self._tou_up=False
            return super().on_touch_down(touch)
        else:
            return True

    def _button_touch(self, touch):
        return super().on_touch_down(touch)

    def on_touch_move(self, touch):
        if self.wait_for_move:
            self.wait_for_move.cancel()
            self.wait_for_move = None
        if touch.grab_current is self:
            #print(touch.dx)

            # sum the touch.dx values, and scale size and position based on the sum of dx
            self.x_displacement += touch.dx

            # used the sort clamp the value x_displacement between self.ids.content.width and 0.
            self.x_displacement = sorted([-self.ids.content.width+self.extend, self.x_displacement, 0])[1]
            #print(f'{self.x_displacement=}')
            self.ids.content.size = self.width + self.factor*self.x_displacement, self.height + self.factor*self.x_displacement
            self.ids.content.pos = self.x_displacement, -(self.factor*self.x_displacement / 2)
            #self.ids.menu.size = 300 + self.x_displacement, 600 + self.x_displacement
        return super().on_touch_move(touch)

[Degenerate Tech]

oh , i done mistake .thanks .