controlling swipe in carousel

157 views
Skip to first unread message

purushottam yadav

unread,
Jan 2, 2021, 9:55:50 PM1/2/21
to Kivy users support
I have a carousel  (1) , one of its slide have scroll view and inside  this scroll view  , I want to add another carousel (2) to swipe images  and other widgets of same width . 


But here the  problem is when I swipe the images  , first carousel (1)  is responding immediately and to swipe the second carousel , I need to swipe slowly observing the moment of images and first carousel slide   .

what I want to implement is 
1) when i put finger on second carousel t o swipe images , first one should not respond ,
and  should only respond when swiping over other widgets in the scrollview .
I tried to implement it by locking the swipe carousel (1)f0369422-3da1-44f7-94ca-7138f85a132a.jpeg 

when on_touch_down( )  and unlock when on_touch_up( ) .But this is not working , it is miss behaving . 


class Car_2(  Carousel): 
"secound carousel to swipe images "



    def on_touch_down(self , touch) :

        k.help_str.get_screen('hello').ids.tabs.lock_swiping=True

        print("down down down ============================================================")
        

        

    def on_touch_up(self , touch):
        k.help_str.get_screen('hello').ids.tabs.lock_swiping=False
        print(touch.spos   ,  touch.pos )

        print("up up up ========================================================================")


image is provided to describe the situation , please help me out . 





Elliot Garbus

unread,
Jan 2, 2021, 10:06:40 PM1/2/21
to kivy-...@googlegroups.com

Share a minimal executable program.

 

You need to use collide_point() in your touch routines.

 

Looks like you have a number of overlapping widgets.  Can you arrange them so they do not overlap, that you can distinguish the touch by position or mode?

 

 

 

From: purushottam yadav
Sent: Saturday, January 2, 2021 7:55 PM
To: Kivy users support
Subject: [kivy-users] controlling swipe in carousel

 

I have a carousel  (1) , one of its slide have scroll view and inside  this scroll view  , I want to add another carousel (2) to swipe images  and other widgets of same width . 

 

 

But here the  problem is when I swipe the images  , first carousel (1)  is responding immediately and to swipe the second carousel , I need to swipe slowly observing the moment of images and first carousel slide   .

 

what I want to implement is 

1) when i put finger on second carousel t o swipe images , first one should not respond ,

and  should only respond when swiping over other widgets in the scrollview .

I tried to implement it by locking the swipe carousel (1) 

 

when on_touch_down( )  and unlock when on_touch_up( ) .But this is not working , it is miss behaving . 

 


class Car_2(  Carousel): 

"secound carousel to swipe images "

 

 

 

    def on_touch_down(self , touch) :

 

        k.help_str.get_screen('hello').ids.tabs.lock_swiping=True

 

        print("down down down ============================================================")

        

 

        

 

    def on_touch_up(self , touch):

        k.help_str.get_screen('hello').ids.tabs.lock_swiping=False

        print(touch.spos   ,  touch.pos )

 

        print("up up up ========================================================================")

 

 

image is provided to describe the situation , please help me out . 

 

 

 

 

 

--
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/bf6e8926-2bff-4b25-8b84-03298ca5fc04n%40googlegroups.com.

 

f0369422-3da1-44f7-94ca-7138f85a132a.jpeg

purushottam yadav

unread,
Jan 3, 2021, 1:21:06 AM1/3/21
to Kivy users support
This is really allot of code  . I am trying create a class of post , which has MDCarousel  from kivymd . 
i want use this to swipe images . i have never used collide_points()
 before there is no proper information about it in docs . can you please explain it . 






from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen,ScreenManager
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.swiper import MDSwiperItem
from kivymd.utils.fitimage import FitImage
from kivymd.uix.boxlayout import MDBoxLayout
from kivy.uix.scrollview import ScrollView
from kivymd.uix.list import MDList , ThreeLineAvatarListItem
from kivymd.uix.label import MDLabel
from kivymd.uix.list import OneLineListItem
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image
#from kivy.core.image import Image
from kivymd.uix.list import IRightBodyTouch
from kivy.metrics import sp, dp
from kivy.uix.stacklayout import StackLayout
from kivymd.uix import MDAdaptiveWidget

from kivymd.uix.button import MDFlatButton , MDIconButton


from kivymd.uix.list import ImageLeftWidget


from kivy.uix.carousel import Carousel
from kivymd.uix.carousel import MDCarousel

from kivy.properties import (
    AliasProperty,
    BooleanProperty,
    BoundedNumericProperty,
    ListProperty,
    NumericProperty,
    ObjectProperty,
    OptionProperty,
    StringProperty,
)

from kivy.core.window import Window
Window.size = (420,860)

#Builder String

helper_string = '''

#: import mtx kivy.metrics
#: import  Window  kivy.core.window


<Car>:


<Post_11>:

    orientation: 'vertical'
    padding: ["0dp", "10dp","0dp", "10dp"]
    spacing: [ mtx.dp(10) ,  mtx.dp(10) ]
    adaptive_height: True


    MDBoxLayout:
        adaptive_height: True
        #size_hint_y: .1
        ThreeLineAvatarListItem:
            size_hint_x: .7
            text: root.name
            bold: True
            secondary_text: root.details
            tertiary_text:  root.distance

            ImageLeftWidget:
                source: root.profile_source


        MDIconButton:
            icon : 'adjust'
            #text: 'follow'
            #size_hint_x: .15
            on_press:

                app.callback_1()


    MDBoxLayout:

        id: scroll_parent
        md_bg_color:(1,0,0,1)
        adaptive_height: True
        orientation: 'vertical'

        MDBoxLayout:
            #size_hint: (None, None)
            #size:  [ Window.size[0] ,  Window.size[1] ]
            #padding: ["10dp", "10dp","10dp", "10dp"]
            spacing: [ mtx.dp(10) ,  mtx.dp(10) ]
            md_bg_color:(0,1,0,1)
            adaptive_height: True
            orientation: 'vertical'


            Car:
                direction: 'right'

                loop:True
                #anim_move_duration: 0.01
                ignore_perpendicular_swipes:True
                md_bg_color:(1,1,1,1)

                #size_hint: ( 1, 1)
                #size: [ scroll_parent.width  , scroll_parent.height ]

                #size_hint_y: None
                #height: self.minimum_height

                size_hint: ( None  , None)
                size: [ Window.size[0] ,  Window.size[1] * (5/10)]

                FitImage:
                    source: root.post_source
                    allow_stretch: True
                    size_hint_x: 1

                    size_hint: (None, None)
                    size: [ Window.size[0] ,  Window.size[1] * (5/10) ]

                FitImage:
                    source:root.profile_source
                    allow_stretch: True
                    size_hint_x: 1

                    #size_hint: (None, None)
                    #size:  [ Window.size[0] ,  Window.size[1] ]

                FitImage:
                    source: root.post_source
                    allow_stretch: True
                    size_hint_x: 1

                    #size_hint: (None, None)
                    #size :  [ Window.size[0] ,  Window.size[1] ]

    MDBoxLayout:
        #size_hint_y: .08
        adaptive_height: True

        MDIconButton:
            icon: "heart"
            size_hint_x: .1

            theme_text_color: "Custom"
            text_color: (1,0,0,1)

        MDIconButton:
            icon: "comment-outline"
            size_hint_x: .1

            theme_text_color: "Custom"
            text_color: (0,0,1,1)

        MDIconButton:
            icon: "share"
            size_hint_x: .1


            theme_text_color: "Custom"
            text_color: (0,0,1,1)
        MDIconButton:
            id: bookmark
            icon: "bookmark"
            size_hint_x: .1
            on_release: root.ids.bookmark.icon = "bookmark-check"


            theme_text_color: "Custom"
            text_color: (0,1,0,1)

        MDIconButton:
            icon: "dots-vertical"
            size_hint_x: .1


            theme_text_color: "Custom"
            text_color: (1,1,0,1)


ScreenManager:

    Hello:


<Hello>:
    name: 'hello'
    BoxLayout:
        orientation:'vertical'
        MDToolbar:
            title: 'ONLINE 88'
            right_action_items: [ ["dots-vertical", lambda x: app.callback_1()]]


        MDTabs:

            id:tabs
            on_tab_switch: app.on_tab_switch(*args)
            #lock_swiping:True


            Tab:
                id: tabone
                text : "tab_1"



                MDBottomNavigation:
                    id : navpanel
                    panel_color : 1,1,1,1


                    MDBottomNavigationItem:
                        id : nearby

                        text: "Near by"
                        icon:  "map-marker-circle"
                        ScrollView:

                            do_scroll: [ False , True]
                            scroll_type: ['content']
                            #size_hint_y: None
                            size_hint : (1, None)
                            size:(Window.width, self.parent.height)
                            #height: self.parent.height
                            #effect_cls: 'ScrollEffect'

                            MDGridLayout:
                                id: post_lists

                                cols : 1

                                size_hint_y: None
                                size: self.minimum_size
                                padding: ["0dp", "150dp","0dp", "15dp"]
                                spacing: "10dp"


                    MDBottomNavigationItem:
                        name: 'trending'

                        text: "Trending"
                        icon: "trending-up"

                        MDLabel:
                            text: "Trending posts"
                            halign: 'center'


                    MDBottomNavigationItem:
                        name :'Favourite'

                        text: "Favourite"
                        icon: "heart-settings"

                        MDLabel:
                            text: "Favourite people and  places  "
                            halign: 'center'

            Tab:
                text: "tab_2"

                MDLabel:
                    id:"market"
                    text : "market"
                    halign : "center"


                MDBottomNavigation:
                    panel_color : 1,1,1,1


                    MDBottomNavigationItem:
                        id : 'near by'

                        text: "market"

                        MDLabel:
                            text: "Local Shops"
                            halign: 'center'


                    MDBottomNavigationItem:
                        name :'Favourite'

                        text: "Favourite"


                        MDLabel:
                            text: "Favourite people and  places  "
                            halign: 'center'

'''

class Hello(Screen):
    pass


class Tab(FloatLayout, MDTabsBase):
    pass


class Car(MDCarousel):


    lock_swiping = BooleanProperty(False)
    """
    If True - disable switching tabs by swipe.
    :attr:`lock_swiping` is an :class:`~kivy.properties.BooleanProperty`
    and defaults to `False`.
    """

    def on_touch_move(self, touch):


        print("move move move move=================================================================")
        #print(touch)
        #k.help_str.get_screen('hello').ids.tabs.lock_swiping=True
        print(touch.spos   ,  touch.pos )


    def on_touch_down(self , touch) :

        k.help_str.get_screen('hello').ids.tabs.lock_swiping=True

        print("down down down ============================================================")

    def on_touch_up(self , touch):
        k.help_str.get_screen('hello').ids.tabs.lock_swiping=False
        print(touch.spos   ,  touch.pos )

        print("up up up ========================================================================")



class post_1(ButtonBehavior, MDBoxLayout):

    name = StringProperty('')
    post_source = StringProperty('')
    profile_source = StringProperty('')
    description  = StringProperty('')
    distance = StringProperty('')
    details = StringProperty('')

    def __init__(self, **kw):
        super().__init__(**kw)

        self.bind(on_release=lambda x: self.view_post())

    def view_post(self):
        print('....>>>>')


class Post_11(post_1):
    pass


sm = ScreenManager()
sm.add_widget(Hello(name = 'hello'))

class DemoApp(MDApp):
    def build(self):

        self.theme_cls.primary_palette   = 'Indigo'
        self.theme_cls.accent_palette =  'Purple'

        screen = Screen()

        self.help_str = Builder.load_string(helper_string)

        screen.add_widget(self.help_str)

        return screen

    def on_start(self):


        posts__ = Post_11(name = 'purushottam' ,
         post_source = "photo-1503023345310-bd7c1de61c7d.jpeg" ,
         details = "with kishore............. at begumpet911111111111  " ,
         distance = "12 kms from you at 1/9/2020 6:41  am" ,
         profile_source =  "download.jpeg" ,
          description = 'Never stop improving your self  no matter what you should deal with ...' ,
          size_hint_x = 1 )


        self.help_str.get_screen('hello').ids.post_lists.add_widget(posts__)


        self.help_str.get_screen('hello').ids.post_lists.add_widget(Post_11(name = 'purushottam' ,
         post_source = "photo-1503023345310-bd7c1de61c7d.jpeg" ,
         details = "with kishore............. at begumpet911111111111  " ,
         distance = "12 kms from you at 1/9/2020 6:41  am" ,
         profile_source =  "download.jpeg" ,
          description = 'Never stop improving your self  no matter what you should deal with ...' ,
          size_hint_x = 1  ))


        self.help_str.get_screen('hello').ids.post_lists.add_widget(Post_11(name = 'purushottam' ,
         post_source = "photo-1503023345310-bd7c1de61c7d.jpeg" ,
         details = "with kishore............. at begumpet911111111111  " ,
         distance = "12 kms from you at 1/9/2020 6:41  am" ,
         profile_source =  "download.jpeg" ,
          description = 'Never stop improving your self  no matter what you should deal with ...' ,
          size_hint_x = 1  ))



    def callback_1(self):

        print("vertical dots clicked")
        print(Window.size)

        if self.theme_cls.theme_style == "Dark" :
            self.theme_cls.theme_style = "Light"

        else:
            self.theme_cls.theme_style = "Dark"


    def on_tab_switch(self,instance_tabs,instance_tab,instance_tab_label,tab_text):
        #instance_tab.ids.label.text = 'hello'
        print(instance_tabs , instance_tab , instance_tab_label , tab_text )

k = DemoApp()
k.run()

Elliot Garbus

unread,
Jan 3, 2021, 7:58:04 AM1/3/21
to kivy-...@googlegroups.com

Please refer to my previous post to you about collide point and how the on_touch methods work.

Let me know if you have any questions on that content.

 

Here is a simple example using the on_touch_down method and collide_point to illustrate how it works.  Touch the label at the top of the screen, and each carousel and see what prints to the console.

 

from kivy.app import App

from kivy.lang import Builder

from kivy.uix.carousel import Carousel

from kivy.properties import StringProperty

 

kv = '''

<TouchCarousel>:

    loop: True

    Button:

        text: root.name + ' One'

    Button:

        text:  root.name + ' Two'

    Button:

        text: root.name + ' Three'

 

BoxLayout:

    orientation: 'vertical'

    Label:

        text: 'Touch the Screen Here'

    BoxLayout:

        spacing: 10

        TouchCarousel:

            name: 'Car1'

        TouchCarousel:

            name: 'Car2'

      

'''

 

 

class TouchCarousel(Carousel):

    name = StringProperty()

 

    def on_touch_down(self, touch):

        print(f'Screen touched at {touch.pos}')  # This will print on any screen touch

        if self.collide_point(*touch.pos):       # Tests, was this widget touched?

            print(f'{self.name} pressed at {touch.pos}')

            return super().on_touch_down(touch)  # Pass the touch to the parent class

        else:

            print(f'{self.name} not Touched')    # I was not touched

            return False                        

 

 

class NewProjectApp(App):

    def build(self):

        return Builder.load_string(kv)

 

 

NewProjectApp().run()

 

when on_touch_down( )  and unlock when on_touch_up( ) .But this is not working , it is miss behaving . 

 


class Car_2(  Carousel): 

"secound carousel to swipe images "

 

 

 

    def on_touch_down(self , touch) :

 

        k.help_str.get_screen('hello').ids.tabs.lock_swiping=True

 

        print("down down down ============================================================")

        

 

        

 

    def on_touch_up(self , touch):

        k.help_str.get_screen('hello').ids.tabs.lock_swiping=False

        print(touch.spos   ,  touch.pos )

 

        print("up up up ========================================================================")

 

 

image is provided to describe the situation , please help me out . 

 

 

 

 

 

--
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/bf6e8926-2bff-4b25-8b84-03298ca5fc04n%40googlegroups.com.

 

--
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.

purushottam yadav

unread,
Jan 3, 2021, 8:37:55 AM1/3/21
to Kivy users support
I understood the code and posts you send ,  but how should I solve my issue with this information .
Did you run my code ? 
My problem is that I have a carousel inside MDTabs ( which are in turn made up of carousel ) ,  and what I want to implement is ,  when swiping the carousel these MDTabs should not respond , only when swiping outside the carousel and inside the tab , they should respond to swipe .
How should I approach  to solve this issue . 

Elliot Garbus

unread,
Jan 3, 2021, 9:44:10 AM1/3/21
to kivy-...@googlegroups.com

My suggestions:

Start with a simple example that isolates your issue.

An important concept to understand, the touches will ‘bubble’ to all widgets. 

For the tab write a set of on_touch_methods that returns True if the area touched is covered by the Carousel on the tab.

purushottam yadav

unread,
Jan 3, 2021, 11:09:28 AM1/3/21
to Kivy users support
Thanks for your response , your reply"s  helped me a lot  . 
If you dont mind can you please let me know the kivy apis reference  which I  need to use for creating those set of on_touch_methods . 


Elliot Garbus

unread,
Jan 3, 2021, 12:08:14 PM1/3/21
to kivy-...@googlegroups.com

Here are some references on the on_touch events.

See: https://kivy.org/doc/stable-1.11.1/api-kivy.uix.widget.html?highlight=widget#module-kivy.uix.widget

  • Bounding Box / Collision

Often you want to know if a certain point is within the bounds of your widget. An example would be a button widget where you only want to trigger an action when the button itself is actually touched. For this, you can use the collide_point() method, which will return True if the point you pass to it is inside the axis-aligned bounding box defined by the widget’s position and size.

Also read: https://kivy.org/doc/stable-1.11.1/api-kivy.uix.widget.html?highlight=widget#widget-touch-event-bubbling

 

See the example on the bottom of this page: https://kivy.org/doc/stable-1.11.1/gettingstarted/events.html

purushottam yadav

unread,
Jan 5, 2021, 2:45:29 AM1/5/21
to Kivy users support
In the code you have posted above , in on_touch_down() you returned value  which is returned by super function  return super().on_touch_down(touch)  # Pass the touch to the parent class. 
If you dont mind please explain what happens at  this stage .
Why you did not returned True directly .

Elliot Garbus

unread,
Jan 5, 2021, 9:25:40 AM1/5/21
to kivy-...@googlegroups.com

Do an experiment, replace the call to super() with just returning True.  What happens?

The Carousel will not work.  It will no longer swipe – it is not receiving the on_touch_down events.

 

The line that calls the super().on_touch_down() is passing the touch to the parent, the Carousel.

 

From: https://kivy.org/doc/stable/gettingstarted/events.html

Another thing to note is that if you override an event, you become responsible for implementing all its behaviour previously handled by the base class. The easiest way to do this is to call super():

def on_touch_down(self, touch):
    if super(OurClassName, self).on_touch_down(touch):
        return True
    if not self.collide_point(touch.x, touch.y):
        return False
    print('you touched me!')
    return True
Reply all
Reply to author
Forward
0 new messages