From 7495a445967f50476072ff8eb8d11a2b3c996429 Mon Sep 17 00:00:00 2001
From: gitGnome <a@a.pl>
Date: Wed, 1 Apr 2026 13:24:13 +0200
Subject: [PATCH] add mirroring state onto web server

---
 rpi/server.py | 95 ++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 76 insertions(+), 19 deletions(-)
diff --git a/rpi/server.py b/rpi/server.py
index f9c0998..9b13244 100644
--- a/rpi/server.py
+++ b/rpi/server.py
@@ -1,5 +1,9 @@
 from flask import Flask, request, jsonify, Response
 import threading
+import json
+
+import low_level
+from config import DISPLAY_MAX_X, DISPLAY_MAX_Y
 
 app = Flask(__name__)
 
@@ -19,8 +23,12 @@ INDEX_HTML = """<!DOCTYPE HTML><html>
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { font-family: Arial, sans-serif; background: #1a1a2e; color: #eee; padding: 20px; }
-    h1 { text-align: center; margin-bottom: 30px; font-size: 1.5em; }
-    .container { max-width: 400px; margin: 0 auto; }
+    h1 { text-align: center; margin-bottom: 20px; font-size: 1.5em; }
+    .container { max-width: 600px; margin: 0 auto; }
+    .display-wrapper { background: #0a0a0a; border-radius: 12px; padding: 12px; margin-bottom: 20px; overflow-x: auto; }
+    .display-grid { display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px; width: 100%; aspect-ratio: 3/1; }
+    .dot { aspect-ratio: 1; border-radius: 50%; background: #111; }
+    .controls { max-width: 400px; margin: 0 auto; }
     .card { background: #16213e; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px;
             display: flex; align-items: center; justify-content: space-between; }
     .card-label { font-size: 1em; }
@@ -43,27 +51,65 @@ INDEX_HTML = """<!DOCTYPE HTML><html>
 <body>
   <div class="container">
     <h1>LED Panel Control</h1>
-    <div class="card">
-      <div class="card-label">Top Text<small>Witamy w PTI</small></div>
-      <label class="toggle"><input type="checkbox" id="top_text" checked onchange="toggle('top_text', this.checked)"><span class="slider"></span></label>
+    <div class="display-wrapper">
+      <div class="display-grid" id="grid"></div>
     </div>
-    <div class="card">
-      <div class="card-label">Bottom Text<small>School programs</small></div>
-      <label class="toggle"><input type="checkbox" id="bottom_text" checked onchange="toggle('bottom_text', this.checked)"><span class="slider"></span></label>
-    </div>
-    <div class="card">
-      <div class="card-label">Vehicles<small>Vehicle interruptions</small></div>
-      <label class="toggle"><input type="checkbox" id="vehicles" checked onchange="toggle('vehicles', this.checked)"><span class="slider"></span></label>
-    </div>
-    <div class="brightness-card">
-      <label>Brightness</label>
-      <div class="brightness-row">
-        <input type="range" id="brightness" min="0" max="100" value="100" oninput="updateBrightnessLabel()" onchange="sendBrightness()">
-        <span id="brightnessValue">100</span>
+    <div class="controls">
+      <div class="card">
+        <div class="card-label">Top Text<small>Witamy w PTI</small></div>
+        <label class="toggle"><input type="checkbox" id="top_text" checked onchange="toggle('top_text', this.checked)"><span class="slider"></span></label>
+      </div>
+      <div class="card">
+        <div class="card-label">Bottom Text<small>School programs</small></div>
+        <label class="toggle"><input type="checkbox" id="bottom_text" checked onchange="toggle('bottom_text', this.checked)"><span class="slider"></span></label>
+      </div>
+      <div class="card">
+        <div class="card-label">Vehicles<small>Vehicle interruptions</small></div>
+        <label class="toggle"><input type="checkbox" id="vehicles" checked onchange="toggle('vehicles', this.checked)"><span class="slider"></span></label>
+      </div>
+      <div class="brightness-card">
+        <label>Brightness</label>
+        <div class="brightness-row">
+          <input type="range" id="brightness" min="0" max="100" value="100" oninput="updateBrightnessLabel()" onchange="sendBrightness()">
+          <span id="brightnessValue">100</span>
+        </div>
       </div>
     </div>
   </div>
   <script>
+    var COLS = 48, ROWS = 16;
+    var dots = [];
+    var grid = document.getElementById("grid");
+    for (var i = 0; i < ROWS * COLS; i++) {
+      var d = document.createElement("div");
+      d.className = "dot";
+      grid.appendChild(d);
+      dots.push(d);
+    }
+
+    function pollDisplay() {
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", "/display", true);
+      xhr.onload = function() {
+        if (xhr.status === 200) {
+          var px = JSON.parse(xhr.responseText);
+          for (var y = 0; y < ROWS; y++) {
+            for (var x = 0; x < COLS; x++) {
+              var c = px[y][x];
+              var idx = y * COLS + x;
+              if (c[0] === 0 && c[1] === 0 && c[2] === 0) {
+                dots[idx].style.background = "#111";
+              } else {
+                dots[idx].style.background = "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
+              }
+            }
+          }
+        }
+      };
+      xhr.send();
+    }
+    setInterval(pollDisplay, 100);
+
     function toggle(program, enabled) {
       var xhr = new XMLHttpRequest();
       xhr.open("POST", "/toggle-program", true);
@@ -95,7 +141,7 @@ INDEX_HTML = """<!DOCTYPE HTML><html>
       };
       xhr.send();
     }
-    window.onload = fetchStatus;
+    window.onload = function() { fetchStatus(); pollDisplay(); };
   </script>
 </body>
 </html>"""
@@ -106,6 +152,17 @@ def index():
     return Response(INDEX_HTML, mimetype='text/html')
 
 
+@app.route('/display', methods=['GET'])
+def handle_display():
+    pixels = []
+    for y in range(DISPLAY_MAX_Y + 1):
+        row = []
+        for x in range(DISPLAY_MAX_X + 1):
+            row.append(low_level.get_pixel_color(x, y))
+        pixels.append(row)
+    return Response(json.dumps(pixels), mimetype='application/json')
+
+
 @app.route('/brightness', methods=['POST'])
 def handle_brightness():
     value = request.form.get('value')
