2014-03-04 19:57:26 +01:00
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "utf-8" / >
2014-03-13 20:56:03 +01:00
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" >
2014-04-21 16:05:13 +02:00
< link rel = "icon" href = "favicon.ico" type = "image/x-icon" >
< link rel = "shortcut icon" type = "image/x-icon" href = "favicon.ico" / >
< link type = "image/x-icon" href = "favicon.ico" / >
< link rel = "apple-touch-icon" sizes = "57x57" href = "images/logo57x57.png" > <!-- iOS 6 iPhone -->
< link rel = "apple-touch-icon" sizes = "72x72" href = "images/logo72x72.png" > <!-- iOS 6 iPad -->
< link rel = "apple-touch-icon" sizes = "76x76" href = "images/logo76x76.png" > <!-- iOS 7 iPad -->
< link rel = "apple-touch-icon" sizes = "114x114" href = "images/logo114x114.png" > <!-- iOS 6 iPhone (retina) -->
< link rel = "apple-touch-icon" sizes = "120x120" href = "images/logo120x120.png" > <!-- iOS 7 iPhone (retina) -->
< link rel = "apple-touch-icon" sizes = "144x144" href = "images/logo144x144.png" > <!-- iOS 6 iPad (retina) -->
< link rel = "apple-touch-icon" sizes = "152x152" href = "images/logo152x152.png" > <!-- iOS 7 iPad (retina) -->
<!-- iOS 6 & 7 iPad (retina, landscape) -->
< link href = "images/apple-touch-startup-image-1496x2048.png" media = "(device-width: 768px ) and ( device-height: 1024px )
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, portrait) -->
< link href = "images/apple-touch-startup-image-1536x2008.png" media = "(device-width: 768px ) and ( device-height: 1024px )
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
2014-03-14 16:54:53 +01:00
< meta name = "apple-mobile-web-app-title" content = "Temperatur" >
2014-04-12 13:38:26 +02:00
< meta name = "viewport" content = "width=device-width,initial-scale=1.0" >
2014-03-14 16:54:53 +01:00
<!-- "Zum Homebildschirm hinzufügen" Benachrichtigung -->
< link rel = "stylesheet" href = "./Fremddateien/add2home.css" >
< script type = "application/javascript" src = "./Fremddateien/add2home.js" > < / script >
< script type = "text/javascript" >
var addToHomeConfig = {
touchIcon: true,
returningVisitor: true,
};
< / script >
2014-03-04 19:57:26 +01:00
< title > Aktuelles Wetter< / title >
2014-05-14 20:25:27 +02:00
< link rel = "stylesheet" type = "text/css" href = "./style.css" / >
2014-03-04 19:57:26 +01:00
< style >
div.wert {
clear: left;
margin-top:10px;
2014-05-23 18:50:32 +02:00
margin-left: 10px;
2014-03-04 19:57:26 +01:00
}
div {
float: left;
}
.bar {
transition: 2s;
position:absolute;
2014-05-23 18:50:32 +02:00
left:310px;
2014-03-04 19:57:26 +01:00
}
2014-05-23 18:50:32 +02:00
span.zahl {
2014-03-04 19:57:26 +01:00
position:absolute;
2014-05-23 18:50:32 +02:00
left:210px;
}
span.einheit {
font-weight: bold;
font-style: italic;
}
p {
margin-top: 10px;
clear: both;
2014-03-04 19:57:26 +01:00
}
< / style >
< / head >
2014-03-14 16:54:53 +01:00
< body onresize = "bar()" id = "viewport" >
2014-05-14 20:25:27 +02:00
<!-- Beginn Navigationsleiste -->
< div id = "nav" >
< ul >
< li > < a href = "./index.html" > Hauptseite< / a > < / li >
2014-05-23 19:57:23 +02:00
< li > < a href = "./aktuell.html" id = "aktuell" > aktuelle Werte< / a > < / li >
2014-05-14 20:25:27 +02:00
< li > < a href = "./dygraphs_außen.html" > Diagramm (Außen)< / a > < / li >
< li > < a href = "./dygraphs_innen.html" > Diagramm (Innen)< / a > < / li >
2014-05-16 19:12:55 +02:00
< li > < a href = "./projekt.html" > Über das Projekt< / a > < / li >
< li > < a href = "./links.html" > weitere Informationen< / a > < / li >
2014-05-14 20:25:27 +02:00
< / ul >
< / div >
<!-- Ende Navigationsleiste -->
2014-03-04 19:57:26 +01:00
< h1 > Aktuell< / h1 >
2014-04-15 14:15:54 +02:00
< iframe width = "1" scrolling = "no" height = "1" frameborder = "0" src = "control.php?aktion=running" seamless = "seamless" > < / iframe >
2014-03-04 19:57:26 +01:00
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Datum/Uhrzeit:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "uhrzeit" style = "font-weight:bold;" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< / div >
< div class = "wert" style = "margin-top:30px;" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Innen­ temperatur:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "innen" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "innen_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Luft­ qualität:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "qualität" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "qualität_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Geräte­ temperatur 1:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "ger1" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "ger1_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Geräte­ temperatur 2:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "ger2" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "ger2_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Prozessor:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "prozessor" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "prozessor_w" class = "bar" > < / div >
< / div >
< div class = "wert" style = "margin-top:30px;" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Außen­ temperatur:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "aussen" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "aussen_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Temperatur ­ < font style = "font-size:70%;" > (Luftfeuchtesensor)< / font > :< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "temp_luft" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "temp_luft_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Boden­ temperatur:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "boden" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "boden_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Luft­ feuchte:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "feuchte" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "feuchte_w" class = "bar" > < / div >
< / div >
< div class = "wert" >
2014-04-12 13:38:26 +02:00
< div class = "label" > Luft­ druck:< / div >
2014-05-23 18:50:32 +02:00
< div > < span class = "zahl" id = "druck" > < / span > < / div >
2014-03-04 19:57:26 +01:00
< div id = "druck_w" class = "bar" > < / div >
< / div >
2014-05-23 18:50:32 +02:00
< p style = "font-size:small;" > < a href = "./aktuell_einfach.html" > einfache tabellarische Darstellung< / a > < br / >
< button onclick = "laden()" > manuell neu laden< / button > < / p >
2014-03-04 19:57:26 +01:00
< script type = "text/javascript" >
2014-05-23 19:57:23 +02:00
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
document.getElementById('nav').style.display = 'none';
}
2014-04-19 19:49:49 +02:00
var tmp = document.documentMode, e, isIE;
2014-05-23 18:50:32 +02:00
// ----Erkennung des Internetexplorer von http://www.pinlady.net/PluginDetect/IE/
2014-04-19 19:49:49 +02:00
// Try to force this property to be a string.
try{document.documentMode = "";}
catch(e){ };
// If document.documentMode is a number, then it is a read-only property, and so
// we have IE 8+.
// Otherwise, if conditional compilation works, then we have IE before 11.
// Otherwise, we have a non-IE browser.
isIE = typeof document.documentMode == "number" || eval("/*@cc_on!@*/!1");
// Switch back the value to be unobtrusive for non-IE browsers.
try{document.documentMode = tmp;}
catch(e){ };
2014-05-23 18:50:32 +02:00
// ----Ende der IE-Erkennung
2014-04-19 19:49:49 +02:00
2014-05-23 18:50:32 +02:00
function laden() { //neueste Daten nachladen und Balken bar() ausführen
if (window.XMLHttpRequest) //Bei IE6 und IE5 ActiveXObject verwenden
2014-03-04 19:57:26 +01:00
{// code for IE7+, Firefox, Chrome, Opera, Safari
2014-04-19 19:49:49 +02:00
xmlhttp=new XMLHttpRequest();
2014-03-04 19:57:26 +01:00
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2014-05-23 18:50:32 +02:00
if(typeof tmp == "number"){ //Wenn ein Internet Explorer verwendet wird ...
2014-04-19 19:49:49 +02:00
var lower = 0;
var upper = 100000000;
2014-05-23 18:50:32 +02:00
xmlhttp.open("GET","http://sandgrube.no-ip.org/text_ws.txt?"+(Math.floor(Math.random()*(upper-lower))+lower),false); //... wird die URL immer verändert, da der Internet Explorer sonst sogar diese Abfrage cached,
2014-04-19 19:49:49 +02:00
} else {
xmlhttp.open("GET","text_ws.txt",false);
}
2014-03-04 19:57:26 +01:00
xmlhttp.send();
inhalt=xmlhttp.responseText;
werte=inhalt.split(',');
2014-05-23 18:50:32 +02:00
var einheiten=["","°C","°C","°C","°C","°C","% rel LF","°C","hPa","°C",""]
document.getElementById('uhrzeit').innerHTML = werte[0] + " < span class = 'einheit' > " + einheiten[0] + "< / span > ";
document.getElementById('innen').innerHTML = werte[1] + " < span class = 'einheit' > " + einheiten[1] + "< / span > ";
document.getElementById('ger1').innerHTML = werte[2] + " < span class = 'einheit' > " + einheiten[2] + "< / span > ";
document.getElementById('boden').innerHTML = werte[3] + " < span class = 'einheit' > " + einheiten[3] + "< / span > ";
document.getElementById('ger2').innerHTML = werte[4] + " < span class = 'einheit' > " + einheiten[4] + "< / span > ";
document.getElementById('temp_luft').innerHTML = werte[5] + " < span class = 'einheit' > " + einheiten[5] + "< / span > ";
document.getElementById('feuchte').innerHTML = werte[6] + " < span class = 'einheit' > " + einheiten[6] + "< / span > ";
document.getElementById('aussen').innerHTML = werte[7] + " < span class = 'einheit' > " + einheiten[7] + "< / span > ";
document.getElementById('druck').innerHTML = werte[8] + " < span class = 'einheit' > " + einheiten[8] + "< / span > ";
document.getElementById('prozessor').innerHTML = werte[9] + " < span class = 'einheit' > " + einheiten[9] + "< / span > ";
document.getElementById('qualität').innerHTML = werte[10] + " < span class = 'einheit' > " + einheiten[10] + "< / span > ";
2014-03-04 19:57:26 +01:00
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 >
