feat: add Flask web interface for image timeline visualization

- Horizontal scrolling timeline view of captured images - Gradient background loading for better UX performance - Metadata-driven image dimensions and styling - Static file serving from output directory - Responsive full-viewport height display
2025-11-16 00:51:11 +02:00
parent 94633491b0
commit 2ab014c88c
1 changed files with 98 additions and 0 deletions
--- a/webserver.py
+++ b/webserver.py
@@ -0,0 +1,98 @@
+from flask import Flask, render_template_string
+import os
+import re
+import json
+
+app = Flask(__name__)
+
+HTML_TEMPLATE = '''
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Live Linescan Images</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow-x: auto;
+            overflow-y: hidden;
+            white-space: nowrap;
+        }
+        img {
+            display: inline-block;
+            height: 100vh;
+            width: auto;
+            vertical-align: top;
+            background-size: 100% 100%;
+        }
+    </style>
+    <link rel="preconnect" href="/output">
+</head>
+<body>
+    {% for image_info in images %}<img src="/output/{{ image_info.name }}" width="{{ image_info.width }}" height="{{ image_info.height }}" loading="lazy" decoding="async" style="background: {{ image_info.gradient }}" alt="{{ image_info.name }}">{% endfor %}
+</body>
+</html>
+'''
+
+def extract_timestamp(filename):
+    """Extract timestamp from filename like 'live-1763227690-...'"""
+    match = re.match(r'live-(\d+)-', filename)
+    if match:
+        return int(match.group(1))
+    return 0
+
+def extract_length(filename):
+    """Extract length from filename like 'live-timestamp-start-end-length.ext'"""
+    match = re.match(r'live-\d+-\d+-\d+-(\d+)\.', filename)
+    if match:
+        return int(match.group(1))
+    return None
+
+@app.route('/')
+def index():
+    output_dir = os.path.join(os.path.dirname(__file__), 'output')
+    
+    # Load metadata from jsonl file
+    metadata_map = {}
+    metadata_path = os.path.join(output_dir, 'metadata.jsonl')
+    if os.path.exists(metadata_path):
+        with open(metadata_path, 'r') as f:
+            for line in f:
+                if line.strip():
+                    data = json.loads(line)
+                    metadata_map[data['filename']] = data
+    
+    # Get all image files
+    image_files = []
+    if os.path.exists(output_dir):
+        image_files = [f for f in os.listdir(output_dir) 
+                 if f.lower().endswith(('.png', '.jpg', '.jpeg', '.webp', '.gif','.avif'))]
+        
+        # Sort by timestamp in filename, reverse for latest first
+        image_files.sort(key=extract_timestamp, reverse=True)
+    
+    # Create list with name, width, and gradient info
+    images = []
+    for img in image_files:
+        metadata = metadata_map.get(img, {})
+        width = metadata.get('length') or extract_length(img) or 1
+        gradient = metadata.get('gradient', 'none')
+        
+        images.append({
+            'name': img,
+            'width': width,
+            'height': 2456,  # Fixed height for aspect ratio hint
+            'gradient': gradient
+        })
+    
+    return render_template_string(HTML_TEMPLATE, images=images)
+
+@app.route('/output/<path:filename>')
+def serve_image(filename):
+    """Serve images from the output folder"""
+    from flask import send_from_directory
+    output_dir = os.path.join(os.path.dirname(__file__), 'output')
+    return send_from_directory(output_dir, filename)
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=10104)