tami/llinescan
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add Flask web interface for image timeline visualization

Browse Source 
- 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
This commit is contained in:
wissotsky  
2025-11-16 00:51:11 +02:00
committed by ro
parent 94633491b0
commit 2ab014c88c
1 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
webserver.py Normal file
View File

@@ -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)