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 >
2014-05-31 10:08:24 +02:00
< script src = "//code.jquery.com/jquery-1.11.0.min.js" > < / script >
2014-03-14 16:54:53 +01:00
< 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;
2014-05-31 10:10:08 +02:00
clear: both;
position:relative;
margin-top: 20px;
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-31 10:10:08 +02:00
left:50%;
2014-05-23 18:50:32 +02:00
}
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-05-31 10:08:24 +02:00
< body onresize = "bar_width()" 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-05-31 10:08:24 +02:00
<!-- <iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless">ifames werden nicht unterstützt</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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "uhrzeit" style = "font-weight:bold;" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "innen" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "qualität" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "ger1" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "ger2" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "prozessor" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "aussen" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "temp_luft" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "boden" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "feuchte" > 0< / 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-31 10:08:24 +02:00
< div > < span class = "zahl" id = "druck" > 0< / 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-31 10:08:24 +02:00
//Allgemeine Einstellungen:
var einheiten=["","°C","°C","°C","°C","°C","% rel LF","°C","hPa","°C",""];
var ids=["uhrzeit","innen","ger1","boden","ger2","temp_luft","feuchte","aussen","druck","prozessor","qualität"];
var ids_w=["uhrzeit","innen_w","ger1_w","boden_w","ger2_w","temp_luft_w","feuchte_w","aussen_w","druck_w","prozessor_w","qualität_w"];
var min=[0,10,10,-10,10,-10,35,-10,950,30,400];
var max=[0,40,40,40,40,40,100,40,1200,60,5000];
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
2014-05-31 10:08:24 +02:00
if (window.XMLHttpRequest) //Bei IE6 und IE5 ActiveXObject verwenden
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2014-04-19 19:49:49 +02:00
2014-05-31 10:08:24 +02:00
if(typeof tmp == "number"){ //Wenn ein Internet Explorer verwendet wird ...
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); //... wird die URL immer verändert, da der Internet Explorer sonst sogar diese Abfrage cached,
} else {
xmlhttp.open("GET","text_ws.txt",false);
}
xmlhttp.send();
inhalt=xmlhttp.responseText;
werte=inhalt.split(',');
for (index = 0; index < ids.length ; + + index ) {
$("#" + ids[index] ).html(werte[index] + " < span class = 'einheit' > " + einheiten[index] + "< / span > ");
}
bar_width();
bar_color();
2014-04-19 19:49:49 +02:00
}
2014-05-31 10:08:24 +02:00
function bar_width() {
browserbreite=document.body.offsetWidth;
for (index = 1; index < ids_w.length ; + + index ) {
2014-05-31 10:10:08 +02:00
breite=(werte[index]-min[index])/(max[index]-min[index]) * (browserbreite);
2014-05-31 10:08:24 +02:00
$("#" + ids_w[index] ).css("width", breite +"px");
}
2014-03-04 19:57:26 +01:00
}
2014-05-31 10:08:24 +02:00
function bar_color() {
for (index = 1; index < ids_w.length ; + + index ) {
anteil=(werte[index]-min[index])/(max[index]-min[index]);
farbwert=anteil*255;
rgb="rgb(" + Math.round(farbwert) + ",0," + Math.round(255-farbwert) + ")" ;
$("#" + ids_w[index] ).css("backgroundColor", rgb);
}
2014-03-04 19:57:26 +01:00
}
laden();
window.setInterval(function(){
laden();
}, 5000);
< / script >
< / body >
< / html >