Eine Raspberry Pi-Webcam, ein neues Browserfenster … und immer verfügbar: der schönste Ausblick der Stadt!
Ach, „so much Raspberry Pi, so little time“.
Eigentlich würde ich ja gerne mal die Kombi Pi & Arduino Board ausprobieren – so als Touch Screen Lichtschalter. Aber bis hier mal Zeit, Material und Enthusiasmus des Moments zusammenkommen … Spielereien mit der Pi Cam, bzw. aktuell mit deren Ergebnissen.
Szenario aktuell (totaaaaaal basic):
Jede Minute macht die Pi Cam ein Bild, schiebt das per FTP zu AWS, dort läuft ein Script (in Wechselwirkung mit Franks Code entstanden), was Overlay und Uhr berechnet und zeichnet.
Das wiederum wird minütlich kopiert, umbenannt und archiviert.
Soweit also läuft das. Aber ist ja schade, wenn man nix davon hat (außer einem täglichen tweet zum Sonnenaufgang).
Mein Browser ist mein Fenster zur Welt
Nun kann ich trotz tollem Ausblick nicht den ganzen Tag aus dem Fenster starren – aber in den Browser. Und für den flüchtigen Blick nach draußen muss ich nicht mehr compuccino.tv aktiv ansteuern – das ist jetzt immer hinterlegt. Selbst wenn ich offline bin.
Der Aufbau ist recht simpel: ich will das jeweils aktuelle Bild haben, größtmöglich und selbstverständlich zentriert. Die Bild-URL bei mir ist http://tv.cmp.io/live/compuccino_cam.jpg, also sieht das dann so aus:
<html>
<head>
<title>compuccino TV</title>
</head>
<body style="
background: url(http://tv.cmp.io/live/compuccino_cam.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;">
</body>
</html>
Startseite ungleich Neuer Tab
Schön, einfach – jetzt muss das nur noch meine Startseite werden. Klappt aber nicht: Die Startseite erscheint irgendwie nur einmal, an geraden Tagen die auf -abend enden, wenn die Sonne scheint wenn man den Browser startet. Also komplett neu. Ohne wiederhergestellte Tabs etc. … Sprich: bringt nix.
Also muss ich jeden neuen Tab direkt abfangen, was im Chrome nicht mehr so einfach geht. Dafür aber mit einer Extension, bzw. einer Vielzahl von Extensions, wobei ich nach etwas testen „New Tab Redirect“ am komfortabelsten gefunden habe.
Neuer Tab … ohne Fokus
Soweit: done, könnte man meinen. Wäre ich nicht ein Tastatur-Freund und großer Anhänger von CMD+T und CMD+L. Denn mit dem neuen individuellen Tab geht das nicht mehr. Es gibt ein leichtes Delay beim Aufruf des Tabs, d.h. es wird erst ein Tab geladen, der Fokus verbleibt in der Adresszeile. Aber dann wird über die Extension „meine“ Seite geladen, womit der Fokus in den Body wechselt. Oder irgendwohin … außerhalb der Adresszeile. Umständlich beschrieben, aber ich kann nun im neuen Tab nicht direkt z.B. eine Google-Suche starten, weil ich den Fokus auf die Eingabezeile verliere. Doof, umständlich, unhandlich.
Google als Fensterbild
Fingerübung. Einfach ein Suchfeld zentriert auf das Bild legen, was dann den Fokus beim Laden erhält. Passt:
<form method="get" action="http://www.google.com/search" target="_blank" style=" position: absolute; top: 30%; width: 100%; text-align: center; "> <input type="text" name="q" style=" font-size: 3em; padding: 0.25em; background: rgba(239, 239, 239, 0.4);" autocomplete="off" autofocus /> </form>
Sitzt, wackelt, hat Luft … solange man eben online ist.
Ausblick, manifestiert
Das Webcam-Bild kommt besonders gut an, wenn man auf großen Bildschirmen oder Beamern was zeigen will. Nicht so gut, wenn man dabei offline ist, denn dann – bleibt das Bild leer. Und auch der Browser-Cache kann nicht greifen, da jeder neue Tab erstmal versucht, die Seite zu laden.
Darum muss jetzt ein Manifest her, was den Browser quasi zwingt, etwas zu speichern. Im Header der Seite ungefähr so eingebunden
<html manifest="cam.appcache">
ist das eigentliche Manifest recht schlicht:
CACHE MANIFEST http://tv.cmp.io/live/compuccino_cam.jpg
Idee, Syntax und allgemeinen Aufbau entnehme man bitte den entsprechenden Tutorials. Zu beachten ist aber, dass es in dem genannten Szenario nicht damit getan ist, die Bild-URL einmal im Manifest zu platzieren … denn sieht man nie wieder Sonnenschein. Oder Regen. Denn es aktualisiert sich einfach nix mehr. Das hat bei mir doch etwas zu verstehen gedauert – aber simple Logik ist ja auch nicht immer jedermanns Sache.
Lösung des ganzen habe ich hier gefunden, generelle Vorschläge sind aber zahlreich:
<?php
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
echo "# REV ".date("dmyHi")."\n";
// DAMIT wird markiert, dass sich Daten verändert haben
echo "http://tv.cmp.io/live/compuccino_cam.jpg\n";
?>
Was hier passiert ist schlicht, dass per PHP regelmäßig (jede Minute) die Revisionsnummer (REV) des Manifest verändert wird, was zum aktualisieren der hinterlegten Daten zwingt. Das Mini-Skript ist bei mir dann als manifest.php abgelegt und eingebunden:
<html manifest="manifest.php">
Klingt gut, klappt auch fast … ich habe die Untiefen des sequentiellen Ladens nicht lange versucht zu durchschauen, sondern mir mit ein paar Zeilen JS Abhilfe verschaffen können, die jeweils a) gucken, was der Browser so tut und b) die „Daten“ (aka „das Bild“) runterladen und c) austauschen. Wiederum total basic aus Tutorials zusammengestoppelt:
var cache = window.applicationCache;
cache.addEventListener(
'updateready',
function(){
cache.swapCache();
console.log('Tausche Cache');
UpdatePIC();
},
false
);
function UpdatePIC() {
// Bild aktualisieren, kann man immer gebrauchen
var body = document.getElementsByTagName('article')[0];
body.style.backgroundImage = 'url(http://tv.cmp.io/live/compuccino_cam.jpg)';
console.log('Bild aktualisiert');
}
// Und hier stellen wir die Eieruhr
setInterval(function(){cache.update()}, 120000);
setInterval(function(){UpdatePIC()}, 300000);
Jetzt ist aber alles da:
- Das Bild sitzt im Hintergrund
- Der Tab ist benutzbar
- Offline ist auch schick
- Es ist so aktuell wie möglich
- Fast wie von selbst.
Öfter mal raus … gucken
In Summe habe ich nun 2 Dateien, das minütlich aktualisierte Manifest:
manifest.php (Beispiel)
<?php
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
echo "# REV ".date("dmyHi")."\n";
echo "http://tv.cmp.io/live/compuccino_cam.jpg\n";
?>
und die eigentliche Seite
New Tab Page (Beispiel)
<html manifest="manifest.php">
<head>
<title>compuccino TV</title>
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<script type="text/javascript">
var cache = window.applicationCache;
function UpdatePIC() {
var body = document.getElementsByTagName('article')[0];
body.style.backgroundImage = 'url(http://tv.cmp.io/live/compuccino_cam.jpg)';
console.log('Bild aktualisiert');
}
cache.addEventListener(
'updateready',
function(){
cache.swapCache();
console.log('swap cache has been called');
},
false
);
setInterval(function(){cache.update()}, 120000);
setInterval(function(){UpdatePIC()}, 300000);
</script>
</head>
<body style="margin: 0;">
<article style="background: url(http://tv.cmp.io/live/compuccino_cam.jpg); width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; margin: 0; background-position: center center; padding: 0;">
<form method="get" action="http://www.google.com/search" target="_blank" style="position: absolute; top: 30%; width: 100%; text-align: center;">
<input type="text" name="q" style="font-size: 3em; padding: 0.25em; background: rgba(239, 239, 239, 0.4);" autocomplete="off" onfocus="UpdatePIC();" autofocus />
</form>
</article>
</body>
</html>
Viel Spaß damit.