I wrote the below code in attempts to make a seamlessly flowing image, which is on infinite scroll. (Perhaps the term infinite scroll is misleading in this context, but it should seamlessly scroll, where when a certain part of image disappears from bottom, it should already be appearing on top as soon as it disappears, which is seamless scrolling)
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
from kivy.clock import Clock
class ScrollingImageApp(App):
def build(self):
self.root = BoxLayout(orientation='vertical')
# Create a non-interfering layer for scrolling image
self.scroll_layer = Image(source='pexels-tessa-k-896673.jpg', allow_stretch=True, keep_ratio=False)
self.root.add_widget(self.scroll_layer)
# Schedule the scroll function to be called every frame
Clock.schedule_interval(self.scroll_image, 1 / 60.0)
return self.root
def scroll_image(self, dt):
# Scroll the image vertically
self.scroll_layer.y -= 1
if self.scroll_layer.y < -self.scroll_layer.height:
self.scroll_layer.y = self.root.height
if __name__ == '__main__':
ScrollingImageApp().run()
# Image source: https://www.pexels.com/photo/timelapse-photo-of-gray-clouds-896673/
# The above image was made seamless using Gimp software (photoshop alternative)
There are a few problems with it.
{I thought I could use 2 image instances of the same image, and then reset it when the first one disappears, but I am unable to achieve any code for that as well. But honestly, I know we dont need 2 images for seamless scroll effect but just one instance which should continuously scroll.} How do I achieve the seamless scroll?
{Problem is, if I suddenly resize it, the entire scroll of the image gets reset and it again begins from the start, which should not happen.}
How do I get around this problem?
Kindly help on how I can workout these 2 issues? Do you think there is a way to fix them, so that the seamless(/infinite) scroll happens along with the picture fitting the width, and not the height?
You can do something like that by using two Image
objects. Here is a modification of your App
class that uses this approach:
class ScrollingImageApp(App):
def build(self):
self.root = BoxLayout(orientation='vertical')
# Add a FloatLayout to contain the scrolling Images
fl = FloatLayout()
self.upper_image = Image(source='pexels-tessa-k-896673.jpg', allow_stretch=True, keep_ratio=False)
self.scroll_layer = Image(source='pexels-tessa-k-896673.jpg', allow_stretch=True, keep_ratio=False)
fl.add_widget(self.upper_image)
fl.add_widget(self.scroll_layer)
self.root.add_widget(fl)
# # Schedule the scroll function to be called every frame
Clock.schedule_interval(self.scroll_image, 1 / 60.0)
return self.root
def scroll_image(self, dt):
# Scroll the image vertically
self.scroll_layer.y -= 1
if self.scroll_layer.y < -self.scroll_layer.height:
self.scroll_layer.y = 0 # reset to starting position
# adjust the position of the upper Image
self.upper_image.y = self.scroll_layer.y + self.scroll_layer.height
Note that the scroll_image()
method resets the y
value scroll_layer
(lower image) to 0
when the lower image gets scrolled off the screen. And it also positions the upper image to be right above the lower image.