From 89677ac28331893b4978242c049766b50e6839e9 Mon Sep 17 00:00:00 2001
From: Tempest <tempest@Tempests-MacBook-Pro.local>
Date: Fri, 8 Aug 2025 15:16:47 +0700
Subject: [PATCH] Corrected the web page behavior on widescreen to get matrix
 and control panel side by side.

---
 src/controllerSoftware/app.py               |  28 ++---
 src/controllerSoftware/static/style.css     |  35 ++++--
 src/controllerSoftware/templates/index.html | 129 +++++++++++---------
 3 files changed, 111 insertions(+), 81 deletions(-)

diff --git a/src/controllerSoftware/app.py b/src/controllerSoftware/app.py
index 5229fbc..f7ffeda 100644
--- a/src/controllerSoftware/app.py
+++ b/src/controllerSoftware/app.py
@@ -11,7 +11,7 @@ import json
 
 # Set to True to run without a physical BLE device for testing purposes.
 # Set to False to connect to the actual lamp matrix.
-DEBUG_MODE = True
+DEBUG_MODE = False
 
 # --- BLE Device Configuration (Ignored in DEBUG_MODE) ---
 DEVICE_NAME = "Pupilometer LED Billboard"
@@ -65,7 +65,7 @@ def get_spiral_address(row, col, spiral_map):
 
 SPIRAL_MAP_5x5 = create_spiral_map(5)
 
-async def set_full_matrix_on_ble(serial_colors):
+async def set_full_matrix_on_ble(colorSeries):
     global ble_client
     global ble_characteristics
 
@@ -84,24 +84,24 @@ async def set_full_matrix_on_ble(serial_colors):
     print("Patching lamp positions 3 <-> 7 and 12 <-> 24.")
 
     # Swap data for lamps at positions 3 and 7
-    temp_color_3 = serial_colors[3]
-    serial_colors[3] = serial_colors[7]
-    serial_colors[7] = temp_color_3
+    temp_color_3 = colorSeries[3]
+    colorSeries[3] = colorSeries[7]
+    colorSeries[7] = temp_color_3
 
     # Swap data for lamps at positions 12 and 24
-    temp_color_12 = serial_colors[12]
-    serial_colors[12] = serial_colors[24]
-    serial_colors[24] = temp_color_12
+    temp_color_12 = colorSeries[12]
+    colorSeries[12] = colorSeries[24]
+    colorSeries[24] = temp_color_12
     # =====================================================================
 
     # Ensure all characteristics are available before writing
     if len(ble_characteristics) != lampAmount:
         print(f"Mismatch in lamp amount. Expected {lampAmount}, got {len(ble_characteristics)}.")
         return
-    print(f"Constructed the following matrix data: {serial_colors}")
+    print(f"Constructed the following matrix data: {colorSeries}")
     # Write each byte string to its corresponding characteristic
     for i, char in enumerate(ble_characteristics):
-        value_to_write = serial_colors[i]
+        value_to_write = colorSeries[i]
         print(f"Setting Lamp {i} ({char.uuid}) to {value_to_write.hex()}")
         await ble_client.write_gatt_char(char.uuid, value_to_write)
 
@@ -159,9 +159,9 @@ def calculate_rgb(ww, cw, blue):
     b = (ww / 255) * warm_white_b + (cw / 255) * cool_white_b + (blue / 255) * blue_b
 
     # Clamp the values to 255 and convert to integer
-    r = min(255, round(r))
-    g = min(255, round(g))
-    b = min(255, round(b))
+    r = int(min(255, round(r)))
+    g = int(min(255, round(g)))
+    b = int(min(255, round(b)))
 
     return r, g, b
 
@@ -233,7 +233,7 @@ def set_matrix():
         else:
             # === LIVE MODE: Communicate with the BLE device ===
             asyncio.run_coroutine_threadsafe(
-                set_full_matrix_on_ble(full_matrix),
+                set_full_matrix_on_ble(serial_colors),
                 ble_event_loop
             )
             return jsonify(success=True)
diff --git a/src/controllerSoftware/static/style.css b/src/controllerSoftware/static/style.css
index 125bf58..49389f6 100644
--- a/src/controllerSoftware/static/style.css
+++ b/src/controllerSoftware/static/style.css
@@ -18,6 +18,12 @@ body {
     align-items: center;
     position: relative;
 }
+.main-content {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 40px;
+}
 .matrix-grid {
     display: grid;
     grid-template-columns: repeat(5, 70px);
@@ -53,25 +59,28 @@ h1 {
     margin-bottom: 20px;
     text-align: center;
 }
-.region-control button {
+.region-control select {
     padding: 10px 15px;
-    margin: 5px;
     font-size: 14px;
     cursor: pointer;
     border: 1px solid #ccc;
     border-radius: 5px;
     background-color: #fff;
+    width: 200px;
 }
-/* NEW: Control panel styles for a single column */
 .control-panel, .center-lamp-control {
     background-color: #444;
     padding: 20px;
     border-radius: 10px;
-    width: var(--matrix-width); /* NEW: Set width to match the matrix */
+    width: var(--matrix-width);
     margin-bottom: 20px;
 }
-.control-panel {
-    display: none;
+.control-panel.inactive-control {
+    background-color: #333;
+    filter: saturate(0.2);
+}
+.control-panel.inactive-control .slider-row {
+    pointer-events: none;
 }
 .control-panel h2, .center-lamp-control h2 {
     color: #fff;
@@ -87,7 +96,7 @@ h1 {
 }
 .slider-row {
     display: grid;
-    grid-template-columns: 120px 1fr 50px;
+    grid-template-columns: 130px 1fr 50px;
     gap: 10px;
     align-items: center;
 }
@@ -130,9 +139,13 @@ input.blue::-webkit-slider-runnable-track { background: linear-gradient(to right
     white-space: nowrap;
     width: 120px;
 }
-/* The media query now applies to the control panels directly */
-@media (max-width: 700px) {
-    .control-panel, .center-lamp-control {
-        width: var(--matrix-width);
+.inactive-control .slider-label {
+    color: #888;
+}
+
+@media (max-width: 1000px) {
+    .main-content {
+        flex-direction: column;
+        align-items: center;
     }
 }
\ No newline at end of file
diff --git a/src/controllerSoftware/templates/index.html b/src/controllerSoftware/templates/index.html
index a423747..e6c5b32 100644
--- a/src/controllerSoftware/templates/index.html
+++ b/src/controllerSoftware/templates/index.html
@@ -148,8 +148,16 @@
                 };
             });
             
-            $('.region-button').on('click', function() {
-                var region = $(this).data('region');
+            $('#region-select').on('change', function() {
+                var region = $(this).val();
+                
+                // Toggle the inactive state of the control panel based on selection
+                if (region) {
+                    $('.control-panel').removeClass('inactive-control');
+                } else {
+                    $('.control-panel').addClass('inactive-control');
+                }
+
                 var newlySelectedLamps = regionMaps[region];
                 
                 // Clear selected class from all lamps
@@ -174,14 +182,11 @@
                 });
                 
                 if (selectedLamps.length > 0) {
-                    $('.control-panel').show();
                     // Update sliders to reflect the state of the first selected lamp
                     var firstLamp = selectedLamps[0];
                     var firstLampState = lampMatrixState[firstLamp.row][firstLamp.col];
                     updateSliders(firstLampState.ww, firstLampState.cw, firstLampState.blue, '');
-                } else {
-                    $('.control-panel').hide();
-                }
+                } 
 
                 // Send the full matrix state
                 sendFullMatrixUpdate(lampsToUpdate, true);
@@ -220,6 +225,11 @@
                 
                 sendFullMatrixUpdate([centerLamp]);
             });
+
+            // Initial check to set the inactive state
+            if (!$('#region-select').val()) {
+                $('.control-panel').addClass('inactive-control');
+            }
         });
     </script>
 </head>
@@ -227,61 +237,68 @@
     <div class="container">
         <h1>Lamp Matrix Control</h1>
         <div class="region-control">
-            <button class="region-button" data-region="Upper">Upper</button>
-            <button class="region-button" data-region="Lower">Lower</button>
-            <button class="region-button" data-region="Left">Left</button>
-            <button class="region-button" data-region="Right">Right</button>
-            <button class="region-button" data-region="Inner ring">Inner ring</button>
-            <button class="region-button" data-region="Outer ring">Outer ring</button>
-            <button class="region-button" data-region="All">All</button>
+            <label for="region-select">Select Region:</label>
+            <select id="region-select">
+                <option value="" disabled selected>-- Select a region --</option>
+                <option value="Upper">Upper</option>
+                <option value="Lower">Lower</option>
+                <option value="Left">Left</option>
+                <option value="Right">Right</option>
+                <option value="Inner ring">Inner ring</option>
+                <option value="Outer ring">Outer ring</option>
+                <option value="All">All</option>
+            </select>
         </div>
-        <div class="matrix-grid">
-            {% for row in range(5) %}
-                {% for col in range(5) %}
-                    <div class="lamp" data-row="{{ row }}" data-col="{{ col }}" style="background-color: {{ matrix[row][col] }}; box-shadow: {{ '0 0 15px ' + matrix[row][col] + ', 0 0 25px ' + matrix[row][col] if matrix[row][col] != '#000000' else 'inset 0 0 5px rgba(0,0,0,0.5)' }}"></div>
+
+        <div class="main-content">
+            <div class="matrix-grid">
+                {% for row in range(5) %}
+                    {% for col in range(5) %}
+                        <div class="lamp" data-row="{{ row }}" data-col="{{ col }}" style="background-color: {{ matrix[row][col] }}; box-shadow: {{ '0 0 15px ' + matrix[row][col] + ', 0 0 25px ' + matrix[row][col] if matrix[row][col] != '#000000' else 'inset 0 0 5px rgba(0,0,0,0.5)' }}"></div>
+                    {% endfor %}
                 {% endfor %}
-            {% endfor %}
-        </div>
-        
-        <div class="slider-controls">
-            <div class="center-lamp-control">
-                <h2>Center Lamp</h2>
-                <div class="slider-group center-slider-group">
-                    <div class="slider-row">
-                        <span class="slider-label">Warm White (3000K)</span>
-                        <input type="range" id="center-ww-slider" min="0" max="255" value="0" class="white-3000k">
-                        <input type="number" id="center-ww-number" min="0" max="255" value="0">
-                    </div>
-                    <div class="slider-row">
-                        <span class="slider-label">Cool White (6500K)</span>
-                        <input type="range" id="center-cw-slider" min="0" max="255" value="0" class="white-6500k">
-                        <input type="number" id="center-cw-number" min="0" max="255" value="0">
-                    </div>
-                    <div class="slider-row">
-                        <span class="slider-label">Blue</span>
-                        <input type="range" id="center-blue-slider" min="0" max="255" value="0" class="blue">
-                        <input type="number" id="center-blue-number" min="0" max="255" value="0">
+            </div>
+            
+            <div class="slider-controls">
+                <div class="center-lamp-control">
+                    <h2>Center Lamp</h2>
+                    <div class="slider-group center-slider-group">
+                        <div class="slider-row">
+                            <span class="slider-label">Warm White (3000K)</span>
+                            <input type="range" id="center-ww-slider" min="0" max="255" value="0" class="white-3000k">
+                            <input type="number" id="center-ww-number" min="0" max="255" value="0">
+                        </div>
+                        <div class="slider-row">
+                            <span class="slider-label">Cool White (6500K)</span>
+                            <input type="range" id="center-cw-slider" min="0" max="255" value="0" class="white-6500k">
+                            <input type="number" id="center-cw-number" min="0" max="255" value="0">
+                        </div>
+                        <div class="slider-row">
+                            <span class="slider-label">Blue</span>
+                            <input type="range" id="center-blue-slider" min="0" max="255" value="0" class="blue">
+                            <input type="number" id="center-blue-number" min="0" max="255" value="0">
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="control-panel">
-                <h2>Selected Region</h2>
-                <div class="slider-group region-slider-group">
-                    <div class="slider-row">
-                        <span class="slider-label">Warm White (3000K)</span>
-                        <input type="range" id="ww-slider" min="0" max="255" value="0" class="white-3000k">
-                        <input type="number" id="ww-number" min="0" max="255" value="0">
-                    </div>
-                    <div class="slider-row">
-                        <span class="slider-label">Cool White (6500K)</span>
-                        <input type="range" id="cw-slider" min="0" max="255" value="0" class="white-6500k">
-                        <input type="number" id="cw-number" min="0" max="255" value="0">
-                    </div>
-                    <div class="slider-row">
-                        <span class="slider-label">Blue</span>
-                        <input type="range" id="blue-slider" min="0" max="255" value="0" class="blue">
-                        <input type="number" id="blue-number" min="0" max="255" value="0">
+                <div class="control-panel">
+                    <h2>Selected Region</h2>
+                    <div class="slider-group region-slider-group">
+                        <div class="slider-row">
+                            <span class="slider-label">Warm White (3000K)</span>
+                            <input type="range" id="ww-slider" min="0" max="255" value="0" class="white-3000k">
+                            <input type="number" id="ww-number" min="0" max="255" value="0">
+                        </div>
+                        <div class="slider-row">
+                            <span class="slider-label">Cool White (6500K)</span>
+                            <input type="range" id="cw-slider" min="0" max="255" value="0" class="white-6500k">
+                            <input type="number" id="cw-number" min="0" max="255" value="0">
+                        </div>
+                        <div class="slider-row">
+                            <span class="slider-label">Blue</span>
+                            <input type="range" id="blue-slider" min="0" max="255" value="0" class="blue">
+                            <input type="number" id="blue-number" min="0" max="255" value="0">
+                        </div>
                     </div>
                 </div>
             </div>