Image Viewer mit Chromium
Es wird immer wieder gefragt wie man "irgendwas" im Full Screen anzeigen kann. Das geht eigentlich ganz einfach, schwieriger wird es wenn die Anzeige updaten will.
In diesem speziellen Fall soll das letzte Bild in einem Directory angezeigt werden.
Chromium
Wenn Chromium (oder Chrome) im Kiosk-Modus gestartet wird, kann man mit einer einfachen HTML-Seite das gewünschte Bild anzeigen. Wenn die Anzeige auf neue Bilder reagieren soll, braucht es ein paar Zeilen JavaScript die beim Server fragen ob es etwas Neues gibt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Viewer</title>
<style>
body { margin: 0; padding: 0; }
img { display: block; width: 100%; }
</style>
</head>
<body>
<img src="/static/te.jpg" alt="Letztes Bild">
<script>
function update()
{
fetch( "/latest" )
.then( response => {
if( !response.ok )
throw new Error( "Fetch failed" ) ;
return response.text() ;
} )
.then( source => {
const img = document.querySelector( "img" ) ;
if( img.src != source )
img.src = source ;
} )
.catch( error => {
alert( error ) ;
} ) ;
}
update() ;
setInterval( update, 5000 ) ;
</script>
</body>
</html>
Das CSS skaliert das Bild auf die volle Breite des Bildschirms, ohne es zu verzerren. In der CSS-Regel zum img kann das einfach geändert werden wenn es ein anderes Verhalten braucht.
flask
Als Webserver habe ich flask genommen. Das hat den Vorteil dass das heraussuchen des letzten Files auch gleich in der Flask-App erledigt werden kann.
Flask gibt aber auch die Directory-Struktur vor. In diesem Fall braucht es unter der Flask-App ein Directory templates mit dem HTML-File.
In static werden die Bilder abgelegt. Das Script erwartet dort mindestens ein Bild, sonst wirft es eine Exception.
Es sollten auch nur Bilder abgelegt werden weil das Script einfach das neuste File heraussucht. Wenn das kein Bild ist, kann der Browser nichts sinnvolles anzeigen. Falls das ein Problem darstellt kann man im Script ein Filter für Bildfiles einbauen.
from flask import Flask, render_template, Response
import os
app = Flask( __name__ )
@app.route( "/" )
def index():
return render_template( "index.html" )
@app.route( "/latest" )
def last():
entries = [f"static/{name}" for name in os.listdir("static")]
files = list( filter(os.path.isfile,entries) )
files.sort( key=lambda name: os.path.getmtime(name) )
return Response( files[-1], 200, mimetype="text/plain" )
Start
Zuerst muss die Flask-App gestartet werden:
export FLASK_APP=app.py flask run --host=0.0.0.0
Dann der Browser im Kiosk-Modus:
chromium --kiosk http://localhost:5000
Download der Flask-App
Für einen ersten Test können Sie die Flask-App hier herunterladen. Alle nötigen Files sind im ZIP enthalten und können an einem beliebigen Ort entpackt werden.
Die Beschreibung und die App gehen davon aus dass alles auf der gleichen Maschine läuft.