Appen för Kiosk mode:
https://play.google.com/store/apps/deta ... wser.kiosk
Testade ett gäng olika och den där var bäst. Ska gå att köra i "riktig" helskärm, men jag ville inte sumpa hemknapparna så jag kör i helskärm men med Androids standardknappar kvar.
Själva html-biten är supersimpel, det som var/är lite trixigt är javascripten som uppdataterar.
De 2 nedersta pixlarna på sidan är en progressbar som sakta fylls - så man enkelt kan se när sidan kommer att uppdateras igen. Kan inte sidan uppdateras pga nätbortfall blir progressbaren röd.
Sidan laddas om var femte minut som standard, och ett javascript ligger i bakgrunden och uppdaterar klockan.
Kod: Markera allt
<?php
$wimgPath="wimg/"; //sökväg till vädersymboler
if (isset($_GET["temperaturAlias"]))
$temperaturAlias=$_GET["temperaturAlias"]; //Alias för den mätpunkt på temperatur.nu som skall användas som aktuell temperatur
else
$temperaturAlias="ekholmen";
if (isset($_GET["forecast"]))
$forecast=$_GET["forecast"]; //Sökväg på Yr.no till den prognos som skall användas Län/Ort
else
$forecast="Östergötland/Blästad";
$fontSize="28";
$file=fopen("http://www.temperatur.nu/termo/$temperaturAlias/temp.txt","r");
$temp=fgets($file);
fclose($file);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
<style>*{ font-family:Exo; font-size:<?php echo $fontSize;?>px;padding:0;margin:0; }
.header { font-size:5em;text-align:center;margin:0;font-weight:bold;}
</style>
<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();">
<?/*<p style="text-align:center;margin:0;font-weight:bold;">Aktuell temperatur <?php echo $displayName;?></p>*/
?><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>
<img src="http://www.yr.no/place/Sverige/<?php echo $forecast;?>/meteogram.png" width=1000px>
<div style="font-size:0.4em;position:fixed;bottom:2px; text-align:center;width: 100%; ">Väderprognos från yr.no | Presentation producerad av www.temperatur.nu</div>
</center>
<div id="progress" style="padding:0;margin:0;bottom:0px;position:fixed;height:2px;width:0%;background:#999;">
</body>
</html>
Sidan finns här:
http://www.temperatur.nu/prognos/prognos_clean.php
och tar 2 parametrar:
temperaturAlias och
forecast. Anges inget används ekholmen och Östergötland/Blästad. Prognosen skulle kunna kopplas till alias, men jag valde att frikoppla helt då närmaste temperatur kanske är en bra bit bort och det kan vara bra att välja själv.
ex:
http://www.temperatur.nu/prognos/progno ... kåne/Ystad
Sidan är hårt optimerad för en upplösning på 1024x600px (minus pixlarna för menyraden på surfplattan). Meteogramet är uppskalat då yrs har lite för låg upplösning.
