165 lines
6.5 KiB
HTML
165 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Aktuelles Wetter</title>
|
|
<style>
|
|
div.wert {
|
|
clear: left;
|
|
margin-top:10px;
|
|
}
|
|
div {
|
|
float: left;
|
|
}
|
|
.bar {
|
|
transition: 2s;
|
|
|
|
position:absolute;
|
|
left:300px;
|
|
}
|
|
span {
|
|
position:absolute;
|
|
left:200px;
|
|
}
|
|
body
|
|
{
|
|
margin: 0;
|
|
width: 700px;
|
|
height: 450px;
|
|
-webkit-border-radius: 50px;
|
|
-moz-border-radius: 50px;
|
|
border-radius: 50px;
|
|
}
|
|
p {
|
|
position:absolute;
|
|
right:10px;
|
|
top:10px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body onresize="bar()" id="viewport">
|
|
<h1>Aktuell</h1>
|
|
<iframe width="1" scrolling="no" height="1" frameborder="0" src="http://sandgrube.no-ip.org/control.php?aktion=running" seamless="seamless"></iframe>
|
|
<p><button onclick="laden()">Neuladen</button></p>
|
|
<div class="wert">
|
|
<div class="label">Datum/Uhrzeit:</div>
|
|
<div><span id="uhrzeit" style="font-weight:bold;"></span></div>
|
|
</div>
|
|
|
|
<div class="wert" style="margin-top:30px;">
|
|
<div class="label">Innen­temperatur:</div>
|
|
<div><span id="innen"></span> °C</div>
|
|
<div id="innen_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Luft­qualität:</div>
|
|
<div><span id="qualität"></span></div>
|
|
<div id="qualität_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Geräte­temperatur 1:</div>
|
|
<div><span id="ger1"></span> °C</div>
|
|
<div id="ger1_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Geräte­temperatur 2:</div>
|
|
<div><span id="ger2"></span> °C</div>
|
|
<div id="ger2_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Prozessor:</div>
|
|
<div><span id="prozessor"></span></div>
|
|
<div id="prozessor_w" class="bar"> </div>
|
|
</div>
|
|
|
|
<div class="wert" style="margin-top:30px;">
|
|
<div class="label">Außen­temperatur:</div>
|
|
<div><span id="aussen"></span> °C</div>
|
|
<div id="aussen_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Temperatur ­<font style="font-size:70%;">(Luftfeuchtesensor)</font>:</div>
|
|
<div><span id="temp_luft"></span> °C</div>
|
|
<div id="temp_luft_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Boden­temperatur:</div>
|
|
<div><span id="boden"></span> °C</div>
|
|
<div id="boden_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Luft­feuchte:</div>
|
|
<div><span id="feuchte"></span> % rel LF</div>
|
|
<div id="feuchte_w" class="bar"> </div>
|
|
</div>
|
|
|
|
<div class="wert">
|
|
<div class="label">Luft­druck:</div>
|
|
<div><span id="druck"></span> hPa</div>
|
|
<div id="druck_w" class="bar"> </div>
|
|
</div>
|
|
|
|
<script type="text/javascript" >
|
|
|
|
|
|
function laden() {
|
|
if (window.XMLHttpRequest)
|
|
{// code for IE7+, Firefox, Chrome, Opera, Safari
|
|
xmlhttp=new XMLHttpRequest();
|
|
}
|
|
else
|
|
{// code for IE6, IE5
|
|
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
|
|
}
|
|
var lower = 0;
|
|
var upper = 100000000;
|
|
xmlhttp.open("GET","http://sandgrube.no-ip.org/text_ws.txt?"+(Math.floor(Math.random()*(upper-lower))+lower),false); //Da der Internet Explorer sogar diese Abfrage immer cached, wird die URL immer verändert
|
|
xmlhttp.send();
|
|
inhalt=xmlhttp.responseText;
|
|
werte=inhalt.split(',');
|
|
document.getElementById('uhrzeit').innerHTML = werte[0];
|
|
document.getElementById('innen').innerHTML = werte[1];
|
|
document.getElementById('ger1').innerHTML = werte[2];
|
|
document.getElementById('boden').innerHTML = werte[3];
|
|
document.getElementById('ger2').innerHTML = werte[4];
|
|
document.getElementById('temp_luft').innerHTML = werte[5];
|
|
document.getElementById('feuchte').innerHTML = werte[6];
|
|
document.getElementById('aussen').innerHTML = werte[7];
|
|
document.getElementById('druck').innerHTML = werte[8];
|
|
document.getElementById('prozessor').innerHTML = werte[9];
|
|
document.getElementById('qualität').innerHTML = werte[10];
|
|
bar()
|
|
}
|
|
function bar() {
|
|
document.getElementById('innen_w').style.width = (werte[1]-10) / 30 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('ger1_w').style.width = (werte[2]-10) / 30 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('boden_w').style.width = (werte[3]+20) / 60 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('ger2_w').style.width = (werte[4]-10) / 30 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('temp_luft_w').style.width = (werte[5]+20) / 60 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('feuchte_w').style.width = (werte[6]-35) / 65 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('aussen_w').style.width = (werte[7]+20) / 60 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('druck_w').style.width = (werte[8]-950) / 250 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('prozessor_w').style.width = (werte[9]-30) / 30 * (document.body.offsetWidth-300) + "px";
|
|
document.getElementById('qualität_w').style.width = werte[10] / 5000 * (document.body.offsetWidth-300) + "px";
|
|
|
|
document.getElementById('innen_w').style.backgroundColor = "rgb(" + Math.round((werte[1]-10) / 30 * 255) + ",0," + Math.round(255-((werte[1]-10) / 30 * 255)) + ")";
|
|
document.getElementById('ger1_w').style.backgroundColor = "rgb(" + Math.round((werte[2]-10) / 30 * 255) + ",0," + Math.round(255-((werte[2]-10) / 30 * 255)) + ")";
|
|
document.getElementById('boden_w').style.backgroundColor = "rgb(" + Math.round((werte[3]+20) / 60 * 255) + ",0," + Math.round(255-((werte[3]+20) / 60 * 255)) + ")";
|
|
document.getElementById('ger2_w').style.backgroundColor = "rgb(" + Math.round((werte[4]-10) / 30 * 255) + ",0," + Math.round(255-((werte[4]-10) / 30 * 255)) + ")";
|
|
document.getElementById('temp_luft_w').style.backgroundColor = "rgb(" + Math.round((werte[5]+20) / 60 * 255) + ",0," + Math.round(255-((werte[5]+20) / 60 * 255)) + ")";
|
|
document.getElementById('feuchte_w').style.backgroundColor ="rgb(" + Math.round((werte[6]-35) / 65 * 255) + ",0," + Math.round(255-((werte[6]-35) / 65 * 255)) + ")";
|
|
document.getElementById('aussen_w').style.backgroundColor = "rgb(" + Math.round((werte[7]+20) / 60 * 255) + ",0," + Math.round(255-((werte[7]+20) / 60 * 255)) + ")";
|
|
document.getElementById('druck_w').style.backgroundColor = "rgb(" + Math.round((werte[8]-950) / 250 * 255) + ",0," + Math.round(255-((werte[8]-950) / 250 * 255)) + ")";
|
|
document.getElementById('prozessor_w').style.backgroundColor = "rgb(" + Math.round((werte[9]-30) / 30 * 255) + ",0," + Math.round(255-((werte[9]-30) / 30 * 255)) + ")";
|
|
document.getElementById('qualität_w').style.backgroundColor = "rgb(" + Math.round(werte[10] / 5000 * 255) + ",0," + Math.round(255-(werte[10] / 5000 * 255)) + ")";
|
|
}
|
|
|
|
laden();
|
|
window.setInterval(function(){
|
|
laden();
|
|
}, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|