feat | Adding themes and improving user interaction

main.py

@@ -10,10 +10,11 @@ def __init__(self):
     pygame.init()
     self.screen = pygame.display.set_mode((WIDTH, HEIGHT))
     pygame.display.set_caption("Demo of PySinglSlider")
-    self.slider = py_singl_slider.PySingleSlider(20, 20)
-
+    self.slider = py_singl_slider.PySingleSlider(20, 20, 0, 100, 10)
+    self.slider_init_value = py_singl_slider.PySingleSlider(20, 70, 0, 200, 15)
+    self.slider_two = py_singl_slider.PySingleSlider(20, 120, 0, 150, 10, 'two')
     #font
-    self.font = pygame.font.Font(None, 38)
+    self.font = pygame.font.Font('assets/font/PixelSimpel.otf', 32)
 
   async def render(self):
     while True:
@@ -23,12 +24,32 @@ async def render(self):
                 sys.exit()
                 break
             self.slider.listen_event(event)
+            self.slider_init_value.listen_event(event)
+            self.slider_two.listen_event(event)
 
         self.screen.fill((10, 220, 10))
-        text = self.font.render("{0:.2f}".format( self.slider.value ), True, (10, 10, 200))
+
+        # bg to highlight the slider with theme 'one'
+        pygame.draw.rect(self.screen, (123, 157, 243), (0, 0, self.screen.get_width(), 110))
+
+        # default slider
+        text = self.font.render("{0:.2f}".format( self.slider.value ), True, (10, 10, 100))
         slider_rect = self.slider.get_rect()
         self.screen.blit(text, (slider_rect.width + 32, slider_rect.y - 9))
         self.slider.render(self.screen)
+
+        # slider with init value
+        text_a = self.font.render("{0:.2f}".format( self.slider_init_value.value ), True, (10, 20, 200))
+        slider_rect_init_value = self.slider_init_value.get_rect()
+        self.screen.blit(text_a, (slider_rect_init_value.width + 32, slider_rect_init_value.y - 9))
+        self.slider_init_value.render(self.screen)
+
+        # slider two
+        text_b = self.font.render("{0:.2f}".format( self.slider_two.value ), True, (10, 20, 200))
+        slider_rect_two = self.slider_two.get_rect()
+        self.screen.blit(text_b, (slider_rect_two.width + 32, slider_rect_two.y - 9))
+        self.slider_two.render(self.screen)
+
         #update the display
         pygame.display.flip()
         # clock

py_singl_slider.py

@@ -1,33 +1,34 @@
 import pygame
 
 class PySingleSlider:
-    def __init__(self, x=0, y=0, min_value=0, max_value=150, initial_value=0):
-        self.scale = 3
-        self.initial_value = 0
+    def __init__(self, x=0, y=0, min_value=0, max_value=150, initial_value=0, theme_name= 'one'):
+        self.scale = 2
+        self.initial_value = initial_value
         self.min_value = min_value
         self.max_value = max_value
         # bar setup
-        self.bar_x = 20
-        self.bar_y = 20
+        self.bar_x = x
+        self.bar_y = y
         self.bar_width = 0
         self.bar_height = 0
         #handler setup
         self.handler_active_bg_color = (80, 100, 100)
         self.is_handler_down = False
-        self.setup_assets()
+        self.setup_assets(theme_name)
         self.value = self.get_current_value()
 
     def get_rect(self):
         return pygame.Rect(self.bar_x, self.bar_y, self.bg_bar_center.get_rect().width, self.bg_bar_center.get_rect().height)
 
-    def setup_assets(self):
+    def setup_assets(self, theme_name='one'):
+        theme_path = f'assets/theme/{theme_name}'
         # handler
-        img_handler = pygame.image.load('assets/handler.png').convert_alpha()
+        img_handler = pygame.image.load(f'{theme_path}/handler.png').convert_alpha()
         self.bg_handler = pygame.Surface((img_handler.get_width() * self.scale, img_handler.get_height() * self.scale))
 
         # handler rect
         self.handler_rect = self.bg_handler.get_rect()
-        self.handler_rect.x = self.bar_x
+        self.handler_rect.x = self.bar_x + ( self.initial_value * self.scale )
 
         # scaling and blitting
         scaled = pygame.transform.scale(img_handler, (img_handler.get_width() * self.scale, img_handler.get_height() * self.scale))
@@ -36,7 +37,7 @@ def setup_assets(self):
 
         # bar center background
         self.bar_width = self.max_value * self.scale
-        img_bar_center = pygame.image.load('assets/bar_center.png').convert_alpha()
+        img_bar_center = pygame.image.load(f'{theme_path}/bar_center.png').convert_alpha()
         self.bg_bar_center = pygame.Surface((self.bar_width + self.handler_rect.width, img_bar_center.get_height() * self.scale)).convert_alpha()
         self.bar_height = img_bar_center.get_height() * self.scale
 
@@ -52,7 +53,7 @@ def setup_assets(self):
 
         # bar corners
         # LEFT
-        img_bar_corner = pygame.image.load('assets/bar_corner.png').convert_alpha()
+        img_bar_corner = pygame.image.load(f'{theme_path}/bar_corner.png').convert_alpha()
         self.bg_bar_corner = pygame.Surface((img_bar_corner.get_width() * self.scale, img_bar_corner.get_height() * self.scale)).convert_alpha()
         scaled = pygame.transform.scale(img_bar_corner, (img_bar_corner.get_width() * self.scale, img_bar_corner.get_height() * self.scale))
         self.bg_bar_corner.blit(scaled, (0, 0))
@@ -63,17 +64,17 @@ def setup_assets(self):
         self.bg_right_corner.set_colorkey((0, 0, 0))
 
     def listen_event(self, event):
-        if event.type == pygame.MOUSEBUTTONDOWN:
-            if self.bar_rect.collidepoint(event.pos):
+        if event.type == pygame.MOUSEBUTTONDOWN or event.type == pygame.FINGERDOWN:
+            if self.bar_rect.collidepoint(event.pos) or self.handler_rect.collidepoint(event.pos):
                 self.is_handler_down = True
-        if event.type == pygame.MOUSEBUTTONUP:
+
+        if event.type == pygame.MOUSEBUTTONUP or event.type == pygame.FINGERUP:
             self.is_handler_down = False
-        if event.type == pygame.MOUSEMOTION and self.is_handler_down:
+
+        if (event.type == pygame.MOUSEMOTION or event.type == pygame.FINGERMOTION) and self.is_handler_down:
             pos_x = (event.pos[0] - self.bar_x)
             self.handler_rect.x = min((self.bar_width + self.bar_x), max(pos_x, self.bar_x))
-            print("X", self.handler_rect.x)
             self.value = self.get_current_value()
-            print("VALUE", self.value)
 
     def get_current_value(self):
         # calculating the value itself to show