itemscreen-back-counter-buy

item.py

@@ -7,9 +7,10 @@
 from kivy.uix.screenmanager import ScreenManager, Screen
 from kivy.uix.floatlayout import FloatLayout
 from kivy.uix.boxlayout import BoxLayout
+from kivy.uix.gridlayout import GridLayout
 from kivy.core.image import Image as CoreImage
 from kivy.clock import Clock
-from kivy.graphics import Color, Rectangle
+from kivy.graphics import Color, Rectangle, Triangle
 import io
 import math
 
@@ -19,6 +20,8 @@
 
 from config import utils
 
+from kivy.graphics import RoundedRectangle, Color, Line
+
 class ItemScreen(Screen):
     def __init__(self, **kwargs):
         super(ItemScreen, self).__init__(**kwargs)
@@ -38,6 +41,8 @@ def draw_page(self, id):
         self.draw_product_info(product)
 
         self.draw_bigo()
+
+        self.ids.back_img.bind(on_touch_down = self.on_back_press)
 
     def draw_title(self, name):
         titleLayout = self.ids.title_layout    
@@ -61,16 +66,31 @@ def draw_product_info(self, product):
         self.draw_label('40asda0mAh')
         self.draw_label('2ml')
 
+        priceStr = str(product[4]) + ' EUR'
+        priceLabel = Label(
+            text= priceStr,
+            size_hint=(None, None),
+            pos_hint={'center_x': 0.5, 'center_y': 0.5},  # Center the label on the image
+            color=(0, 0, 0, 1),  # Set the text color (white in this example)
+            font_size = 30
+        )
+        self.ids.price_layout.add_widget(priceLabel)
+
+    # display infos
     def draw_label(self, value):
         boxLayout = BoxLayout()
         boxLayout.size_hint_x = None
         boxLayout.padding = [10, 2, 2, 2]
 
         firstLabel = Label(text=value)
         firstLabel.color = '#000000'
+        firstLabel.halign = 'left'
+        firstLabel.size_hint_x = None
+        firstLabel.text_size = (firstLabel.width, None)
         boxLayout.add_widget(firstLabel)
         self.ids.info_layout.add_widget(boxLayout)
 
+    # display bigo (labels, img on the top-right )
     def draw_bigo(self):
         bigoLayout = self.ids.bigo_layout
         # Create an Image widget
@@ -83,3 +103,58 @@ def draw_bigo(self):
         # Draw the image on the canvas
         with bigoLayout.canvas:
             Rectangle(pos=(image_x, image_y), size=img.size, texture=img.texture)
+
+    def on_back_press(self, instance, touch):
+        if instance.collide_point(*touch.pos):
+            print('back_pressed')
+
+    def on_buy_press(self):
+        print(f'buy_pressed')
+
+
+
+class CountNumber(GridLayout):
+    def __init__(self, **kwargs):
+        super(CountNumber, self).__init__(**kwargs)
+        self.number = 0
+        self.cols = 2
+        self.padding = [0,0,25,0]
+        self.number_text = None
+        self.draw_widget()
+
+    def draw_widget(self):
+        self.number_text = Label(
+            text=str(self.number),
+            color='#000000',
+            font_size = 30
+        )
+        self.number_text.size_hint_x = 0.6
+        self.add_widget(self.number_text)
+
+        controlLayout = BoxLayout(orientation='vertical')
+        controlLayout.size_hint_x = None
+        controlLayout.width = 30
+
+        incImg = Image(source='./img/up-shape.png')
+        incImg.allow_stretch = True
+        incImg.bind(on_touch_down = self.increase_number)
+        controlLayout.add_widget(incImg)
+        decImg = Image(source='./img/down-shape.png')
+        decImg.allow_stretch = True
+        decImg.bind(on_touch_down = self.decrease_number)
+        controlLayout.add_widget(decImg)
+
+        self.add_widget(controlLayout)
+
+    def increase_number(self, instance, touch):
+        if instance.collide_point(*touch.pos):
+            self.number += 1
+            self.update_number()
+    def decrease_number(self, instance, touch):
+        if instance.collide_point(*touch.pos):
+            if self.number > 0:
+                self.number -= 1
+                self.update_number()
+
+    def update_number(self):
+        self.number_text.text = str(self.number)

kv/list.kv

@@ -115,6 +115,7 @@ WindowManager:
                     pos: self.pos
                     size: self.size
             Image:
+                id: back_img
                 source:'./img/back.png'
                 size: self.size
                 size_hint_x: None
@@ -129,12 +130,13 @@ WindowManager:
                     id: image_layout
 
             GridLayout:
-                rows: 2
+                rows: 3
                 size_hint_x: .4
                 GridLayout:
                     padding: 10, 50, 10, 10
                     cols: 2
                     spacing: 5
+                    size_hint_y:.3
                     canvas.before:
                         Color:
                             rgb: (192,0,0)
@@ -146,45 +148,73 @@ WindowManager:
                         rows: 5
                         spacing: 5
                         Label:
-                            text: 'Art.sdasdadsNr:'
+                            text: 'Art.sdasdads:'
                             color: (0,0,0,1)
+                            halign: 'left'
+                            valign: 'middle'
+                            size_hint_x: None
+                            text_size: self.width, None
                         Label:
                             text: 'Züge:'
                             color: (0,0,0,1)
+                            halign: 'left'
+                            valign: 'middle'
+                            size_hint_x: None
+                            text_size: self.width, None
                         Label:
                             text: 'Nikotin:'
                             color: (0,0,0,1)
+                            halign: 'left'
+                            size_hint_x: None
+                            text_size: self.width, None
                         Label:
                             text: 'Akku:'
                             color: (0,0,0,1)
+                            size_hint_x: None
+                            halign: 'left'
+                            text_size: self.width, None
                         Label:
                             text: 'Tankvol.:'
                             color: (0,0,0,1)
+                            size_hint_x: None
+                            halign: 'left'
+                            text_size: self.width, None
                     GridLayout:
                         rows: 5
                         spacing: 5
                         id: info_layout
-
-                GridLayout:
-                    cols: 3
-                    spacing: 5
-                    Image:
-                        source: './img/left.png'
-                        size: self.texture_size
-                    Label:
-                        text: '10.00 EUR'
-                        color: (0,0,0,1)
+                RelativeLayout:
+                    id: price_layout
+                    size_hint_y:.15
                     Image:
-                        source: './img/right.png'
-                        size: self.texture_size
+                        source: './img/price.png'
+                        size: self.size
+                CountNumber:
+                    size_hint_y:.15
+                    canvas.before:
+                        Color:
+                            rgb: (1,1,0,1)
+                        Rectangle:
+                            pos: self.pos
+                            size: self.size
+                        Color:
+                            rgb: (192,0,0)
+                        Line:
+                            width: 1
+                            rectangle: self.x + 15 , self.y + 10 , self.width - 35, self.height - 20
+
+                        Line:
+                            width: 1
+                            rectangle: self.x + 15 , self.y + 10 , self.width - 75, self.height - 20
+
 
         GridLayout:
             cols: 2
             spacing: 20
             padding: 10, 20, 10, 20
             size_hint: (1, 0.3)
             BoxLayout:
-                size_hint_x: 0.6
+                size_hint_x: 0.5
                 padding: [10, 0, 0, 0]
                 Button:
                     text: '20.00 Eur'
@@ -213,31 +243,40 @@ WindowManager:
                     background_color: (1,1,1,0)
                     size_hint_x: None
                     size:(200, self.height)
+                    on_press: root.on_buy_press()
 
         BoxLayout:
             id: bigo_layout
             size_hint:(1, 0.8)
             orientation: 'vertical'
-            padding: [20, 20, 20, 20]
+            padding: 10
             canvas.before:
                 Color:
                     rgb: (192,0,0)
                 Line:
                     width: 1
                     rectangle: self.x + 5 , self.y + 20 , self.width - 10, self.height - 50
             Label:
-                text: 'Hello orldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello'
-                color: (0.1,0.1,0.1,.5)
-            Label:
-                text: 'Hello world'
-                color: (0.1,0.1,0.1,.5)
-            Label:
-                text: 'Hello world'
+                text: 'Hello worldHello worldHello worldworldHello world'
                 color: (0.1,0.1,0.1,.5)
+                halign: 'left'
+                valign: 'middle'
+                size_hint_x: None   
+                size: (500, self.height)
+                text_size: self.width, None
             Label:
                 text: 'Hello world'
                 color: (0.1,0.1,0.1,.5)
+                halign: 'left'
+                valign: 'middle'
+                size_hint_x: None   
+                text_size: self.width, None
             Label:
                 text: 'Hello world'
                 color: (0.1,0.1,0.1,.5)
-
+                halign: 'left'
+                valign: 'middle'
+                size_hint_x: None   
+                text_size: self.width, None
+
+<CountNumber>: