Automatisk omladdning av extern webbsida med felhantering

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;>&nbsp;<td class=header id=temp>
<? echo trim(str_replace(".",",",$temp));?>&deg;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:

  1. När sidan laddas körs funktionen start().
  2. I startfunktionen finns tre setInterval-funktioner:
    1. 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)
    2. En som uppdaterar klockan
    3. 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.

 

Ett svar till Automatisk omladdning av extern webbsida med felhantering

  • […] midori -e Fullscreen -a  http://localhost/helskarm.php Startar webbläsaren midori i helskärmsläge med angiven url. Vi har valt att köra sidan lokalt på vår raspberry pi, men det går lika bra att hämta en extern sida. (I själva verket är det en extern sida som hämtas via ett crontab-jobb, vi vill inte att vi ska få upp felmedelanden om internetanslutningen går ner. Här finns beskrivet hur vi gjort för att ladda ner den externa sidan till vår Raspberry pi.) […]

  • Lämna ett svar