I Raspberry Pi Kiosk mode går vi igenom hur man kan göra för att starta upp en Raspberry Pi och direkt visa en webbsida i helskärmsläge. Sidan som visas uppdaterar sig självt, och det finns ett par olika sätt att se till att sidan fortsätter att visas (med gamal kopia visserligen) om internetuppkopplingen går ner. Det är ju inte särskilt kul om systemet visar “Sidan kan inte nås” eller liknande fel.
Det finns flera sätt att lösa detta problem på.
Shellscript
Vi har löst det med ett litet skript som körs via crontab en gång per minut. Scriptet laddar ner den externa sidan till vår Raspberry Pi. I praktiken fortsätter därmed vår Raspberry Pi att visa den lokala sidan, och skriptet ser till att den lokala kopian är uppdaterad så långt det går. Om internetuppkopplingen går ner kommer filerna sluta att uppdateras, men Inget felmeddelande visas på vår Raspberry Pi.
#!/bin/bash if ping -q -c1 www.m.nu; then echo "HOST UP" wget -O /var/www/xxx.php.tmp https://www.m.nu/xxx.php wget -O /var/www/xxx.css.tmp https://www.m.nu/xxx.css FILENAME=/var/www/xxx.php.tmp FILESIZE=$(stat -c%s "$FILENAME") echo "Size of $FILENAME = $FILESIZE bytes." if [ $FILESIZE -gt 1000 ]; then echo "OK, moving" mv /var/www/xxx.php.tmp /var/www/xxx.php else echo "0 size" rm $FILENAME fi FILENAME=/var/www/xx.css.tmp FILESIZE=$(stat -c%s "$FILENAME") echo "Size of $FILENAME = $FILESIZE bytes." if [ $FILESIZE -gt "200" ]; then echo "OK, moving" mv /var/www/xxx.css.tmp /var/www/xxx.css else echo "0 size" rm $FILENAME fi fi
I korthet kan scriptet sammanfattas med att två filer xxx.php och xxx.css laddas ner och scriptet kollar så att filerna inte är tomma innan de kopieras in och ersätter filerna som visas på vår Raspberry Pi.
Javascript
Ett lite elegantare sätt att lösa det på är via Javascript,
I exemplet nedan visas en klocka som uppdateras via javascript, men hela sidan laddas även om med förinställt intervall så länge det går att nå servern. (För mer detaljer om vad exemplet egentligen gör, se denna forumtråd)
<html> <head> <script> var timerId; // current timer if started var freq=300000; //uppdateringsintervall - millisekunder var startDate = new Date(); var startTime = startDate.getTime(); function microseconds_elapsed () { var date_now = new Date (); var time_now = date_now.getTime (); var seconds_elapsed = time_now - startTime; return ( seconds_elapsed ); } function doesConnectionExist() { var xhr = new XMLHttpRequest(); var file = "http://www.temperatur.nu/favicon.ico"; var randomNum = Math.round(Math.random() * 10000); xhr.open('HEAD', file + "?rand=" + randomNum, false); try { xhr.send(); if (xhr.status >= 200 && xhr.status < 304) { return true; } else { return false; } } catch (e) { return false; } } function start() { update_time(); timerId = setInterval(update_progress, 100); timerID2 = setInterval(update_time, 1000); timerId3 = setInterval(function() { if (doesConnectionExist() == true) location.reload(); }, freq); /* 120000 ~> 2 minutes */ } function update_progress() { //Progressbaren var progress=Math.round(microseconds_elapsed()*100/freq*100)/100; if (progress>99){ document.getElementById("progress").style.backgroundColor = 'red'; progress=100 } document.getElementById('progress').style.width = progress+"%"; } function update_time(){ var date = new Date(); var hours = date.getHours() if (hours < 10) hours = '0'+hours var minutes = date.getMinutes() if (minutes < 10) minutes = '0'+minutes document.getElementById('time').innerHTML = hours+":"+minutes; } </script> </head> <body onload="start();"> <center> <table width=100%> <tr><td class=header id=time><td width=50px;> <td class=header id=temp> <? echo trim(str_replace(".",",",$temp));?>°C</div> </table> </center> <div id="progress" style="padding:0;margin:0;bottom:0px;position:fixed;height:2px;width:0%;background:#999;"> </body> </html>
I korthet fungerar scriptet på följande sätt:
- När sidan laddas körs funktionen start().
- I startfunktionen finns tre setInterval-funktioner:
- En som uppdaterar progressbaren längst ner på sidan (det går att se hur lång tid det är kvar till nästa uppdatering, och progressbaren ändrar färg om det inte går att uppdatera sidan)
- En som uppdaterar klockan
- En som efter förinställd tid kör funktionen doesConnectionExist. Om funktionen returnerar true går det att nå servern och sidan laddas om. Om servern inte går att nå kommer sidan inte att laddas om och nytt försök görs efter det förinställda intervallet.