Feature/display modes web UI (#61)

* Fix leaderboard gap to use display width instead of hardcoded values

- Replace hardcoded spacing (40px) with display_manager.matrix.width
- Update gap calculation to use display width for blank screen simulation
- Fix display width logging to show correct value
- Ensures gap between league rotations matches actual display width

* Add display width gap to news manager

- Add display width gap at the beginning of news content
- Update total_scroll_width calculation to include display width gap
- Modify create_scrolling_image to draw text after display width gap
- Ensures news starts with blank screen period matching display width
- Removed duplicate create_scrolling_image method

* add Live, Recent, Upcoming toggles to display modes on website

src/leaderboard_manager.py

@@ -913,7 +913,8 @@ class LeaderboardManager:
             
             # Calculate total width needed
             total_width = 0
-            spacing = 40  # Spacing between leagues
+            # Use display width for spacing between leagues (simulates blank screen)
+            spacing = self.display_manager.matrix.width
             
             # Calculate width for each league section
             for league_data in self.leaderboard_data:
@@ -1071,12 +1072,12 @@ class LeaderboardManager:
                 # Move to next league section (match width calculation logic)
                 # Update current_x to where team drawing actually ended
                 logger.info(f"League {league_idx+1} ({league_key}) teams ended at x={team_x}px")
-                current_x = team_x + 20 + spacing  # team_x is at end of teams, add internal spacing + inter-league spacing
-                logger.info(f"Next league will start at x={current_x}px (gap: {20 + spacing}px)")
+                current_x = team_x + spacing  # team_x is at end of teams, add display width gap (simulates blank screen)
+                logger.info(f"Next league will start at x={current_x}px (gap: {spacing}px)")
             
             # Set total scroll width for dynamic duration calculation
             # Use actual content width (current_x at end) instead of pre-calculated total_width
-            actual_content_width = current_x - (20 + spacing)  # Remove the final spacing that won't be used
+            actual_content_width = current_x - spacing  # Remove the final spacing that won't be used
             self.total_scroll_width = actual_content_width
             logger.info(f"Content width - Calculated: {total_width}px, Actual: {actual_content_width}px")
             
@@ -1131,7 +1132,7 @@ class LeaderboardManager:
                 else:
                     logger.info(f"  Final league ends at: {league_end_x}px")
             
-            logger.info(f"Total image width: {total_width}px, Display width: {height}px")
+            logger.info(f"Total image width: {total_width}px, Display width: {self.display_manager.matrix.width}px")
             
             logger.info(f"Created leaderboard image with width {total_width}")
             

src/news_manager.py

@@ -231,29 +231,6 @@ class NewsManager:
             self.current_headlines = display_headlines
             logger.debug(f"Prepared {len(display_headlines)} headlines for display")
 
-    def create_scrolling_image(self):
-        """Create a pre-rendered image for smooth scrolling."""
-        if not self.cached_text:
-            self.scrolling_image = None
-            return
-
-        try:
-            font = ImageFont.truetype(self.font_path, self.font_size)
-        except Exception as e:
-            logger.warning(f"Failed to load custom font for pre-rendering: {e}. Using default.")
-            font = ImageFont.load_default()
-
-        height = self.display_manager.height
-        width = self.total_scroll_width
-
-        self.scrolling_image = Image.new('RGB', (width, height), (0, 0, 0))
-        draw = ImageDraw.Draw(self.scrolling_image)
-
-        text_height = self.font_size
-        y_pos = (height - text_height) // 2
-        draw.text((0, y_pos), self.cached_text, font=font, fill=self.text_color)
-        logger.debug("Pre-rendered scrolling news image created.")
-
     def calculate_scroll_dimensions(self):
         """Calculate exact dimensions needed for smooth scrolling"""
         if not self.cached_text:
@@ -274,7 +251,10 @@ class NewsManager:
             
             # Get text dimensions
             bbox = temp_draw.textbbox((0, 0), self.cached_text, font=font)
-            self.total_scroll_width = bbox[2] - bbox[0]
+            text_width = bbox[2] - bbox[0]
+            # Add display width gap at the beginning (simulates blank screen)
+            display_width = self.display_manager.width
+            self.total_scroll_width = display_width + text_width
             
             # Calculate dynamic display duration
             self.calculate_dynamic_duration()
@@ -307,7 +287,9 @@ class NewsManager:
 
         text_height = self.font_size
         y_pos = (height - text_height) // 2
-        draw.text((0, y_pos), self.cached_text, font=font, fill=self.text_color)
+        # Draw text starting after display width gap (simulates blank screen)
+        display_width = self.display_manager.width
+        draw.text((display_width, y_pos), self.cached_text, font=font, fill=self.text_color)
         logger.debug("Pre-rendered scrolling news image created.")
 
     def calculate_dynamic_duration(self):