From 5e7d432a1410992dc982eac245754f5fd163af2c Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 9 Sep 2023 01:15:44 -0400 Subject: [PATCH] image click & scroll --- config/utils.py | 6 ++++ kv/list.kv | 62 ++++++++++++++++++++++++++---------- main.py | 83 +++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 121 insertions(+), 30 deletions(-) diff --git a/config/utils.py b/config/utils.py index 8eefea1..a831545 100644 --- a/config/utils.py +++ b/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: diff --git a/kv/list.kv b/kv/list.kv index fbd3f9a..6ae50f4 100644 --- a/kv/list.kv +++ b/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 : diff --git a/main.py b/main.py index 5f3dfbd..5f9ad39 100644 --- a/main.py +++ b/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,7 +28,12 @@ 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): @@ -33,42 +41,91 @@ def retrieve_image_layout(self, dt): # 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'))