a knob can get into (un)focused state

fonts.py

@@ -0,0 +1,6 @@
+import pygame
+
+pygame.font.init()
+
+font_helvetica = pygame.font.SysFont('Helvetica', 30)
+font_helvetica16 = pygame.font.SysFont('Helvetica', 15)

knob.py

@@ -1,14 +1,18 @@
 import pygame
 import math
+from colors import *
 
 class Knob:
     
-    def __init__(self, screen, color, radius, position):
-        self.screen = screen
-        self.color = color
+    def __init__(self, gui, name, radius, position):
+        self.gui = gui
+        self.name = name
+        self.screen = gui.screen
+        self.color = color_primary
         self.radius = radius
         self.position = position
         self.value = 0
+        self.focused = False
 
     def set_value(self, value):
         self.value = value
@@ -16,9 +20,21 @@ class Knob:
     def set_color(self, color):
         self.color = color
 
+    def set_focused(self, focused):
+        if focused:
+            self.focused = True
+            self.color = color_primary_light
+            self.gui.deactivate_knobs_except(self)
+        else:
+            self.focused = False
+            self.color = color_primary
+
     def get_position(self):
         return self.position
 
+    def __eq__(self, other): 
+        return self.position == other.get_position()
+
     def get_pointer_position(self):
         angle = (self.value * 0.8 * 2 + 0.7) * math.pi
         x = (self.radius - 5) * math.cos(angle) + self.position[0]
@@ -26,6 +42,12 @@ class Knob:
         return(x, y)
 
     def display(self):
+        m1, m2, m3 = pygame.mouse.get_pressed(3)
+        if m1:
+            pos = pygame.mouse.get_pos()
+            if math.sqrt(math.pow(pos[0]-self.position[0],2) + math.pow(pos[1]-self.position[1],2)) < self.radius:
+                self.set_focused(True)
+
         pygame.draw.circle(self.screen, self.color, self.position, self.radius)
         pygame.draw.line(self.screen, "black", self.position, self.get_pointer_position(), 4)
         

main.py

@@ -1,130 +1,141 @@
 import pygame
 from knob import *
 from colors import *
+from fonts import *
 
-# pygame setup
-pygame.init()
-screenW = 561
-screenH = 325
-screen = pygame.display.set_mode((screenW, screenH))
+class GuiMain:
 
-fx_modes = [
+    def __init__(self):
+        # pygame setup
+        pygame.init()
+        self.screenW = 561
+        self.screenH = 325
+        self.screen = pygame.display.set_mode((self.screenW, self.screenH))
+
+        self.fx_modes = [
             'Strings',
             'Beat',
             'L-Loop',
             'R-Loop',
             'Jack',
             'Athmo'
-]
+        ]
+        knob_names = [
+            'Delay Time',
+            'Delay Vol',
+            'Reverb Wet',
+            'Reverb Size',
+            'Filter Freq',
+            'Distortion',
+            'Detune',
+            'Gain'
+        ]
 
-# Create and position the knobs
-knobs_radius = screenW / 25
-knobs_spacing = knobs_radius * 2
-knobs_x = (screenW - (knobs_radius + knobs_spacing) * 2) / 2
-x = knobs_x
-knobs_y = (screenH - (knobs_radius + knobs_spacing) * 3) / 2
-y = knobs_y
-knobs = []
-for i in range(8):
-    knobs.append(Knob(screen, color_primary, knobs_radius, (x, y)))
-    y += knobs_radius + knobs_spacing
+        # Create and position the knobs
+        self.knobs_radius = self.screenW / 25
+        knobs_spacing = self.knobs_radius * 2
+        knobs_x = (self.screenW - (self.knobs_radius + knobs_spacing) * 2) / 2
+        x = knobs_x
+        knobs_y = (self.screenH - (self.knobs_radius + knobs_spacing) * 3) / 2
+        y = knobs_y
+        self.knobs = []
+        for i in range(8):
+            self.knobs.append(Knob(self, knob_names[i], self.knobs_radius, (x, y)))
+            y += self.knobs_radius + knobs_spacing
             if i == 3 or i == 6:
-        x += knobs_radius + knobs_spacing
+                x += self.knobs_radius + knobs_spacing
                 y = knobs_y
 
-pygame.font.init() # you have to call this at the start, 
-                   # if you want to use this module.
-font_helvetica = pygame.font.SysFont('Helvetica', 30)
-font_helvetica16 = pygame.font.SysFont('Helvetica', 15)
+        self.clock = pygame.time.Clock()
+        self.running = True
+        self.run()
 
-clock = pygame.time.Clock()
-running = True
+    def display_label(self, knob):
+        fx_label = font_helvetica.render(knob.name, False, color_primary_light)
+        fx_value = font_helvetica.render('[ ' + str(knob.value) + '% ]',
+                                        False, color_primary_light)
 
-def display_label(index):
-    fx_label = font_helvetica.render('REVERB WET', False, color_primary_light)
-    fx_value = font_helvetica.render('[ 86% ]', False, color_primary_light)
-
-    label_x = screenW - fx_label.get_width() - 20
-    label_y = (screenH - fx_label.get_height() - fx_value.get_height()) / 2
-    screen.blit(fx_label, (label_x, label_y))
-    screen.blit(fx_value, (label_x, screenH / 2))
-    pygame.draw.line(screen, color_primary_dark, (label_x - 10, label_y), (label_x - 10, screenH - label_y), 2)
+        label_x = self.screenW - fx_label.get_width() - 20
+        label_y = (self.screenH - fx_label.get_height() - fx_value.get_height()) / 2
+        self.screen.blit(fx_label, (label_x, label_y))
+        self.screen.blit(fx_value, (label_x, self.screenH / 2))
+        pygame.draw.line(self.screen, color_primary_dark, (label_x - 10, label_y), (label_x - 10, self.screenH - label_y), 2)
         
         line_points = []
-    line_points.append(knobs[index].get_position())
+        line_points.append(knob.get_position())
 
-    if (index == 0 or index == 1 or index == 4 or index == 5):
-        x = knobs[index].get_position()[0] + knobs_radius * 1.5
-        y = knobs[index].get_position()[1] + knobs_radius * 1.5
+        if (knob == self.knobs[0] or knob == self.knobs[1] or
+            knob == self.knobs[4] or knob == self.knobs[5]):
+            x = knob.get_position()[0] + self.knobs_radius * 1.5
+            y = knob.get_position()[1] + self.knobs_radius * 1.5
             line_points.append((x, y))
-    elif (index == 2 or index == 3 or index == 6):
-        x = knobs[index].get_position()[0] + knobs_radius * 1.5
-        y = knobs[index].get_position()[1] - knobs_radius * 1.5
+        elif (knob == self.knobs[2] or knob == self.knobs[3] or knob == self.knobs[6]):
+            x = knob.get_position()[0] + self.knobs_radius * 1.5
+            y = knob.get_position()[1] - self.knobs_radius * 1.5
             line_points.append((x, y))
-    elif (index == 7):
-        x = knobs[index].get_position()[0] - knobs_radius * 1.5
-        y = knobs[index].get_position()[1] + knobs_radius * 1.5
+        elif (knob == self.knobs[7]):
+            x = knob.get_position()[0] - self.knobs_radius * 1.5
+            y = knob.get_position()[1] + self.knobs_radius * 1.5
             line_points.append((x, y))
 
-    if (index == 0 or index == 3):
-        line_points.append((knobs_x + knobs_radius * 1.5, screenH/2))
-    elif (index == 4 or index == 6 or index == 7):
-        line_points.append((knobs[4].get_position()[0] + knobs_radius * 1.5, screenH/2))
+        if (knob == self.knobs[0] or knob == self.knobs[3]):
+            line_points.append((self.knobs[0].get_position()[0] + self.knobs_radius * 1.5, self.screenH/2))
+        elif (knob == self.knobs[4] or knob == self.knobs[6] or knob == self.knobs[7]):
+            line_points.append((self.knobs[4].get_position()[0] + self.knobs_radius * 1.5, self.screenH/2))
 
-    line_points.append((label_x - 10, screenH/2))
+        line_points.append((label_x - 10, self.screenH/2))
 
         for i in range(len(line_points)-1):
-        pygame.draw.line(screen, color_primary_dark, line_points[i], line_points[i+1], 2)
+            pygame.draw.line(self.screen, color_primary_dark, line_points[i], line_points[i+1], 2)
 
-    knobs[index].set_value(0.86)
-    knobs[index].set_color(color_primary_light)
-
-def draw_lozi(x, y, color, outlined = False):
-    rX = screenW * 0.35 / 19
-    rY = (screenH-20) / 16
+    def draw_lozi(self, x, y, color, outlined = False):
+        rX = self.screenW * 0.35 / 19
+        rY = (self.screenH-20) / 16
         w = 2 if outlined else 0
-    pygame.draw.polygon(screen, color, [(x-rX, y), (x, y-rY), (x+rX, y), (x, y+rY)], w)
+        pygame.draw.polygon(self.screen, color, [(x-rX, y), (x, y-rY), (x+rX, y), (x, y+rY)], w)
     
-while running:
+    def deactivate_knobs_except(self, knob):
+        for k in self.knobs:
+            if k != knob: k.set_focused(False)
+
+    def run(self):
+        while self.running:
             # poll for events
             # pygame.QUIT event means the user clicked X to close your window
             for event in pygame.event.get():
                 if event.type == pygame.QUIT:
-            running = False
+                    self.running = False
 
             # fill the screen with a color to wipe away anything from last frame
-    screen.fill("black")
+            self.screen.fill("black")
 
             # RENDER YOUR GAME HERE
 
-    display_label(4)
+            for knob in self.knobs:
+                if knob.focused: self.display_label(knob)
+                knob.display()
 
-    for i in range(8):
-        knobs[i].display()
-
-    pygame.draw.rect(screen, color_primary_dark, ((10, 10), (screenW * 1.5 / 19, screenH - 18)))
+            pygame.draw.rect(self.screen, color_primary_dark, ((10, 10), (self.screenW * 1.5 / 19, self.screenH - 18)))
             fx_mode = 1
             for i in range(6):
-        x = screenW * 2.5 / 19
-        y = i * screenH / 7.3 + 35
+                x = self.screenW * 2.5 / 19
+                y = i * self.screenH / 7.3 + 35
                 if i == fx_mode:
-            draw_lozi(x, y, color_primary)
-            fx_mode_label = font_helvetica16.render(fx_modes[i], False, color_primary)
-            screen.blit(fx_mode_label, (x+20, y-8))
+                    self.draw_lozi(x, y, color_primary)
+                    fx_mode_label = font_helvetica16.render(self.fx_modes[i], False, color_primary)
+                    self.screen.blit(fx_mode_label, (x+20, y-8))
                 else:
-            draw_lozi(x, y, color_primary, True)
-            fx_mode_label = font_helvetica16.render(str(fx_modes[i])[0:1], False, color_primary)
-            screen.blit(fx_mode_label, (x-4, y-7))
-    """
-    for i in range(7):
-        pygame.draw.rect(screen, color_primary, ((screenW * 1.5 / 19 + 10, i * (screenH-20)/7 + 10), (screenW * 1.5 / 19 - 10 , (screenH-20)/7 - 10)))
-    """
+                    self.draw_lozi(x, y, color_primary, True)
+                    fx_mode_label = font_helvetica16.render(str(self.fx_modes[i])[0:1], False, color_primary)
+                    self.screen.blit(fx_mode_label, (x-4, y-7))
 
-    pygame.draw.polygon(screen, "black", [(0, screenH/2), (screenW*3 / 19, screenH), (0, screenH)], 20)
-    pygame.draw.polygon(screen, "white", [(0, screenH/2), (screenW*3 / 19, screenH), (0, screenH)])
+            pygame.draw.polygon(self.screen, "black", [(0, self.screenH/2), (self.screenW*3 / 19, self.screenH), (0, self.screenH)], 20)
+            pygame.draw.polygon(self.screen, "white", [(0, self.screenH/2), (self.screenW*3 / 19, self.screenH), (0, self.screenH)])
             # flip() the display to put your work on screen
             pygame.display.flip()
 
-    clock.tick(60)  # limits FPS to 60
+            self.clock.tick(60)  # limits FPS to 60
 
-pygame.quit()
+        pygame.quit()
+
+GuiMain()