image click & scroll

config/utils.py

@@ -1,5 +1,11 @@
 dbPath = './DbFuncs/sql.db'
 
+screenX = 600
+screenY = 900
+
+itemLength = 220
+
+
 # convert image to blob data
 def convert_to_blod_data(filename):
     with open(filename, 'rb') as file:

kv/list.kv

@@ -11,34 +11,62 @@ WindowManager:
             pos: self.pos
             size: self.size
 
-        BorderImage:
-            size: self.size
-            pos: self.pos
-            source: ''
-            border: 10, 10, 10, 10  
+    GridLayout:
+        rows: 2
+        canvas.before:
             Color:
-                rgba: 1, 0, 0, 1  # Set the color to red (RGBA format)
+                rgb: (0, 0, 0)
+            Line:
+                width: 1
+                rectangle: self.x + 5 , self.y + 10, self.width - 10, self.height - 18
 
-    GridLayout:
-        rows: 3
         BoxLayout:
             padding: 10, 10, 10, 10
             size_hint: (1, 0.3)
             Image:
                 source: './img/top.png'
                 size: self.texture_size
-
+            
         GridLayout:
-            id: image_layout
-            cols: 2
-            spacing: 30
+            rows: 3
+            padding:6, 10, 6, 10
 
-        BoxLayout:
-            padding: 10, 10, 10, 10
-            size_hint: (1, 0.3)
-            RelativeLayout:
+            BoxLayout:
+                canvas.before:
+                    Color:
+                        rgb: 192 ,0 ,0
+                    Rectangle:
+                        pos: self.pos[0], self.pos[1] + self.height / 2
+                        size: self.width, self.height / 2
+                size_hint_y: 0.15
+                Image:
+                    id: up_image
+                    source: './img/up.png'
+                    size: self.texture_size
+
+            ScrollView:
+                id: scroll_view
+                size: root.width, root.height
+                pos: 0, 0
+                scroll_type: ["bars","content"]
+                bar_width: 5
+                GridLayout:
+                    id:image_layout
+                    cols:2
+                    size_hint_y: None
+                    spacing: 20
+                    padding: 10, 30, 10, 20
+            BoxLayout:
+                canvas.before:
+                    Color:
+                        rgb: 192 ,0 ,0
+                    Rectangle:
+                        pos: self.pos
+                        size: self.width, self.height / 2
+                size_hint_y: 0.15
                 Image:
-                    source: './img/bottom.png'
+                    id: down_image
+                    source: './img/down.png'
                     size: self.texture_size
 
 <ItemScreen>:

main.py

@@ -6,12 +6,15 @@
 from kivy.uix.label import Label
 from kivy.uix.screenmanager import ScreenManager, Screen
 from kivy.uix.floatlayout import FloatLayout
+from kivy.uix.relativelayout import RelativeLayout
+from kivy.uix.boxlayout import BoxLayout
 from kivy.core.image import Image as CoreImage
 from kivy.clock import Clock
 # from kivy.graphics.texture import Texture
 from kivy.properties import StringProperty
 from PIL import Image as PILImage
 import io
+import math
 
 from DbFuncs import db
 from DbFuncs import db_create
@@ -25,50 +28,104 @@ class ListScreen(Screen):
     def __init__(self, **kwargs):
         super(ListScreen, self).__init__(**kwargs)
         Clock.schedule_once(self.retrieve_image_layout)
+        Clock.schedule_once(self.retrieve_up_and_down_image)
         self.imageList = []
+        self.height = 0
+        self.scroll_position = 0
+        self.scroll_move_dis = utils.itemLength
+        self.scroll_y_dis = 0
 
     # prevent to delay, so we can get image_layou and draw dynamically
     def retrieve_image_layout(self, dt):
         image_layout = self.ids.image_layout  # Access the image_layout widget
 
         # get all products.
         products = self.get_products()
+
+        # draw Items
         if products:
+            # get scroll_y step 
+            self.scroll_y_dis = 1 / (math.ceil(len(products) / 2)  + 1)
+
             for product in products:
                 image = self.on_draw_item(product)
+                self.height += image.height
+                container = BoxLayout()
+                lp = (utils.screenX / 2 - utils.itemLength - 10) / 2
+                container.padding = [lp ,10,lp,10]
+                container.size_hint_y = None
+                container.height = image.height  + 10
+                container.add_widget(image)
                 self.imageList.append(image)
-                image_layout.add_widget(image)
+                image_layout.add_widget(container)
+
         else:
             image_layout.add_widget(Label(text='Image not found'))
 
-
-    def click_item(self):
-        app = App.get_running_app()
-        app.root.current = 'Item'
+        image_layout.height = self.height + 200
 
     def get_products(self):
         products = db.get_products()
         return products
 
     # click image, then navigate to itemscreen with item id
-    def on_image_click(self, instance, touch):
-        for image in self.imageList:
-            if image.collide_point(*touch.pos):
-                # self.manager.current = 'Item'
-                self.manager.get_screen("Item").set_item_id(image.name)
+    # def on_image_click(self, instance, touch):
+    #     for image in self.imageList:
+    #         if image.collide_point(*touch.pos):
+    #             # self.manager.current = 'Item'
+    #             self.manager.get_screen("Item").set_item_id(image.name)
 
 
     # draw one image
     def on_draw_item(self, product):
-        image = Image()
+        image = ItemImage()
         image_stream = io.BytesIO(product[2])
         img = CoreImage(image_stream, ext='png')
         image.texture = img.texture
         image.name = product[0]
+        image.manager = self.manager      
 
-        image.bind(on_touch_down=self.on_image_click)
+        # image.bind(on_touch_down=self.on_image_click)
 
         return image
+
+    ###################################################################
+    def retrieve_up_and_down_image(self, dt):
+        up_image = self.ids.up_image
+        up_image.bind(on_touch_down = self.on_up_img_click)
+        down_image = self.ids.down_image
+        down_image.bind(on_touch_down = self.on_down_img_click)
+
+    def on_up_img_click(self, instance, touch):
+        if instance.collide_point(*touch.pos):
+            # scroll_view.scroll_y = 1
+            if(self.scroll_position > 0):
+                self.ids.scroll_view.scroll_y += self.scroll_y_dis
+                self.scroll_position -= self.scroll_move_dis
+            # scroll_view = self.ids.scroll_view
+            # scroll_view.scroll_to(self.ids.image_layout)
+
+    def on_down_img_click(self, instance, touch):
+        if instance.collide_point(*touch.pos):
+            # scroll_view.scroll_y = 1
+            if(self.ids.scroll_view.scroll_y > 0.01):
+                self.ids.scroll_view.scroll_y -= self.scroll_y_dis
+                self.scroll_position += self.scroll_move_dis
+
+
+
+class ItemImage(Image):
+    def __init__(self, **kwargs):
+        super(ItemImage, self).__init__(**kwargs)
+        self.manager = None
+        self.size = (utils.itemLength, utils.itemLength)
+        self.size_hint = (None, None)
+
+    def on_touch_down(self, touch):
+        if self.collide_point(*touch.pos):
+            # self.manager.current = 'Item'
+            self.manager.get_screen("Item").set_item_id(self.name)
+            print(f'self.name{self.name}')
 
 
 
@@ -94,7 +151,7 @@ class WindowManager(ScreenManager):
 class MainApp(App):
     # Main Application
     def build(self):
-        Window.size = (600, 850)
+        Window.size = (utils.screenX, utils.screenY)
 
         sm = WindowManager()
         sm.add_widget(ListScreen(name='List'))