From 8b7ae3beedc600be736e29349582b4ed137402dd Mon Sep 17 00:00:00 2001 From: Chuck <33324927+ChuckBuilds@users.noreply.github.com> Date: Sun, 10 Aug 2025 11:43:28 -0500 Subject: [PATCH] web ui v2 improvements --- src/display_manager.py | 25 +- templates/index_v2.html | 752 +++++++++++++++++++++++++++++++++++++++- 2 files changed, 755 insertions(+), 22 deletions(-) diff --git a/src/display_manager.py b/src/display_manager.py index 62044b91..47e83a66 100644 --- a/src/display_manager.py +++ b/src/display_manager.py @@ -102,12 +102,29 @@ class DisplayManager: except Exception as e: logger.error(f"Failed to initialize RGB Matrix: {e}", exc_info=True) - # Create a fallback image for web preview + # Create a fallback image for web preview using configured dimensions when available self.matrix = None - self.image = Image.new('RGB', (128, 32)) # Default size + try: + hardware_config = self.config.get('display', {}).get('hardware', {}) if self.config else {} + rows = int(hardware_config.get('rows', 32)) + cols = int(hardware_config.get('cols', 64)) + chain_length = int(hardware_config.get('chain_length', 2)) + fallback_width = max(1, cols * chain_length) + fallback_height = max(1, rows) + except Exception: + fallback_width, fallback_height = 128, 32 + + self.image = Image.new('RGB', (fallback_width, fallback_height)) self.draw = ImageDraw.Draw(self.image) - self.draw.text((10, 10), "Matrix Error", fill=(255, 0, 0)) - logger.error(f"Matrix initialization failed, using fallback mode. Error: {e}") + # Simple fallback visualization so web UI shows a realistic canvas + try: + self.draw.rectangle([0, 0, fallback_width - 1, fallback_height - 1], outline=(255, 0, 0)) + self.draw.line([0, 0, fallback_width - 1, fallback_height - 1], fill=(0, 255, 0)) + self.draw.text((2, max(0, (fallback_height // 2) - 4)), "Simulation", fill=(0, 128, 255)) + except Exception: + # Best-effort; ignore drawing errors in fallback + pass + logger.error(f"Matrix initialization failed, using fallback mode with size {fallback_width}x{fallback_height}. Error: {e}") # Do not raise here; allow fallback mode so web preview and non-hardware environments work @property diff --git a/templates/index_v2.html b/templates/index_v2.html index f6e8402e..15951283 100644 --- a/templates/index_v2.html +++ b/templates/index_v2.html @@ -117,6 +117,30 @@ border: 2px solid #333; } + /* Mock device frame look */ + .display-preview::before { + content: ""; + position: absolute; + inset: 10px; + border-radius: 12px; + box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06), inset 0 0 30px rgba(255,255,255,0.05); + pointer-events: none; + } + + .preview-stage { + position: relative; + display: inline-block; + } + + .grid-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + .display-image { max-width: 100%; max-height: 100%; @@ -678,7 +702,12 @@

Live Display Preview

-
+ +
Connecting to display...
@@ -697,6 +726,17 @@ +
+ + +
@@ -706,12 +746,21 @@ + + + @@ -721,6 +770,15 @@ + + + @@ -730,6 +788,9 @@ + @@ -794,6 +855,42 @@
+ +
+
+

General Settings

+
+
+ +
Start the web interface on boot for easier access.
+
+
+ + +
IANA timezone, affects time-based features and scheduling.
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
@@ -938,6 +1035,50 @@
+ +
+
+

Clock

+
+
+ +
+
+ + +
Python strftime format. Example: %I:%M %p for 12-hour time.
+
+
+ + +
+ +
+
+
+ + +
+
+

Rotation Durations

+

How long each screen is shown before switching. Values in seconds.

+
+
+ {% for key, value in main_config.display.display_durations.items() %} +
+ + +
+ {% endfor %} +
+ +
+
+
+
@@ -980,6 +1121,11 @@
Temperature units
+
+ + +
Use tokens like {temp}, {condition}. Supports new lines.
+
@@ -1011,6 +1157,18 @@
How often to update stock data
+
+
+ + +
Horizontal scroll pixels per step.
+
+
+ + +
Delay between scroll steps.
+
+
Display mini charts alongside stock ticker data
+
+ +
Adjust display duration based on content length.
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
Use tokens like {symbol}, {price}, {change}.
+
@@ -1044,6 +1228,132 @@
+ +
+
+

Stock News

+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+
+
+ +
+
+
+ + +
+
+

Odds Ticker

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
Comma-separated list, e.g., nfl, mlb, ncaa_fb, milb
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+
+

Text Display

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
@@ -1090,6 +1400,18 @@
+ +
+
+

YouTube

+
+
+
+ +
+
+
+
@@ -1175,6 +1497,29 @@
+ +

Advanced Settings

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1362,11 +1707,16 @@
+ + +