mirror/Umweltdatenmessung
Archived
1
0
Fork 0
Code Releases Activity

Balkendiagramm hinzugefügt

Browse source
This commit is contained in:
Findus23 2014-03-04 19:57:26 +01:00
parent 30524ca686
commit 7138791a6d
1 changed files with 147 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
Webinterface/aktuell_bar.html Normal file
View file

@ -0,0 +1,147 @@
<!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;
}
</style>
</head>
<body onresize="bar()">
<h1>Aktuell</h1>
<p><button onclick="laden()">Neuladen</button></p>
<div class="wert">
<div>Datum/Uhrzeit:</div>
<div><span id="uhrzeit" style="font-weight:bold;"></span></div>
</div>
<div class="wert" style="margin-top:30px;">
<div>Innentemperatur:</div>
<div><span id="innen"></span> °C</div>
<div id="innen_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Luftqualität:</div>
<div><span id="qualität"></span></div>
<div id="qualität_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Gerätetemperatur 1:</div>
<div><span id="ger1"></span> °C</div>
<div id="ger1_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Gerätetemperatur 2:</div>
<div><span id="ger2"></span> °C</div>
<div id="ger2_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Prozessor:</div>
<div><span id="prozessor"></span></div>
<div id="prozessor_w" class="bar">&nbsp;</div>
</div>
<div class="wert" style="margin-top:30px;">
<div>Außentemperatur:</div>
<div><span id="aussen"></span> °C</div>
<div id="aussen_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Temperatur <font style="font-size:70%;">(Luftfeuchtesensor)</font>:</div>
<div><span id="temp_luft"></span> °C</div>
<div id="temp_luft_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Bodentemperatur:</div>
<div><span id="boden"></span> °C</div>
<div id="boden_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Luftfeuchte:</div>
<div><span id="feuchte"></span> % rel LF</div>
<div id="feuchte_w" class="bar">&nbsp;</div>
</div>
<div class="wert">
<div>Luftdruck:</div>
<div><span id="druck"></span> hPa</div>
<div id="druck_w" class="bar">&nbsp;</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");
}
xmlhttp.open("GET","text_ws.txt",false);
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>