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-09-02 18:01:12 +02:00
< body onresize = "bar_width()" id = "viewport" > <!-- Wenn die Fenstergröße verändert wird, die Balkenbreite neu berechnen -->
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-06-13 18:57:27 +02:00
< li > < a href = "./gnuplot.html" > Gnuplot< / 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-06-13 18:57:27 +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-09-02 18:01:12 +02:00
< img src = "" alt = "Wettericon" id = "wettericon" width = "300px" style = "float:right;z-index: -1;" / > <!-- hier wird per JS der Link zum richtigen Wettericon eingefügt -->
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 / >
2014-09-02 18:22:19 +02:00
< button onclick = "laden()" > manuell neu laden< / button > < / p > < a href = "#" onclick = "debug(); alert(" Bitte die Entwickler-Console öffnen ( Werte mit debug ( ) anzeigen ) " ) style = "position: absolute;right: 10px;" > debug< / a >
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",""];
2014-09-02 18:01:12 +02:00
var ids=["uhrzeit","innen","ger1","boden","ger2","temp_luft","feuchte","aussen","druck","prozessor","qualität"]; //IDs der SPANs, in die die Temperaturen eingesetzt werden
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"]; // IDs der DIVs der Balken
var min=[0,10,10,-10,10,-10,35,-10,950,30,400]; // Minima und Maxima für die Balkendarstellung
2014-05-31 10:08:24 +02:00
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;
2014-09-02 18:01:12 +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-05-31 10:08:24 +02:00
} 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-05-31 15:41:13 +02:00
wettericon();
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
}
2014-05-31 15:41:13 +02:00
function wettericon() {
boden=werte[3];
temp_luft=werte[5];
feuchte=werte[6];
aussen=werte[7];
druck=werte[8];
2014-09-02 18:01:12 +02:00
var monate=[0.6,0.8,4.9,9.3,14.6,17.6,19.5,18.9,14.3,8.9,3.7,0.7]; // Monatsmitteltemperaturen von http://www.zamg.ac.at/fix/klima/oe71-00/klima2000/klimadaten_oesterreich_1971_frame1.htm
2014-05-31 15:41:13 +02:00
jetzt=new Date();
dieses_monat=monate[jetzt.getMonth()];
nächstes_monat=monate[jetzt.getMonth()+1];
2014-09-02 18:01:12 +02:00
mitteltemp=dieses_monat + (jetzt.getDate()/30)*(nächstes_monat-dieses_monat); //Monatsmittel "vom aktuellen Tag"
stunden=jetzt.getMinutes()/60 + jetzt.getHours(); //Stunden in Dezimaldarstellung
temp_schätzung = -5 * Math.cos(stunden * 2 * Math.PI / 24) + mitteltemp; // Tagesschwankung als Cosinusfunktion
if (jetzt.getHours >= 18 || jetzt.getHours < = 7) { //von 7 bis 18 Uhr Tagessymbole anzeigen
2014-05-31 15:41:13 +02:00
tag="1";
} else {
tag="0";
}
bewölkungsgrad=(aussen-temp_schätzung);
bewölkungsgrad+=(druck-980)/10;
if (bewölkungsgrad >= 7) {
bewölkung=0; //sonnig
} else if (bewölkungsgrad < =-7) {
bewölkung=2; //stark bewölkt
} else {
bewölkung=1; //leicht bewölkt
}
if (feuchte < 85 ) {
ns=0; // kein Niederschlag
} else if (aussen < = -5) {
ns=2; // Schnee
if (bewölkung==0) {
bewölkung=1;
}
} else if (aussen < = 0) {
ns=4; //Schnee-Regen
} else if ((jetzt.getMonth()== 6 || jetzt.getMonth()== 7) & & (aussen-temp_schätzung) > 0) {
ns=1; //Gewitter
bewölkung=2;
} else {
ns=3; //Regen
if (bewölkung==0) {
bewölkung=1;
}
}
// Zusammenfügen
tag+="";
bewölkung+="";
ns+="";
ges = tag + ns + bewölkung;
// Zuordnung zu den Dateien
switch(ges) {
case "012":
case "112":
file="Gewitter.svg";
break;
case "100":
file="Mond.svg";
break;
case "042":
case "041":
case "142":
case "141":
file="schwacher_Schnee.svg";
break;
case "000":
file="Sonne.svg";
break;
case "001":
file="Sonne_mit_Wolke.svg";
break;
case "101":
file="Wolke_mit Mond.svg";
break;
case "002":
case "102":
file="Stark_bewölkt.svg";
break;
case "022":
case "021":
case "122":
case "121":
file="starker_Schnee.svg";
break;
case "001":
case "002":
case "101":
case "102":
file="Wolke_einzeln.svg";
break;
case "032":
case "132":
file="starker_Regen.svg";
break;
case "031":
case "131":
file="leichter_Regen.svg";
break;
}
file="images/wetter/" + file;
$("#wettericon").attr("src",file );
}
2014-09-02 18:01:12 +02:00
function debug() {
console.log("Luftfeuchte: " + feuchte);
console.log("Temperatur: " + aussen);
console.log("Druck: " + druck);
console.log("Jetzt: " + jetzt);
console.log("mitteltemp: " + mitteltemp);
console.log("temp_schätzung: " + temp_schätzung);
console.log("bewölkungsgrad1: " + (aussen-temp_schätzung));
console.log("bewölkungsgrad2: " + ((druck-980)/10));
console.log("bewölkungsgrad: " + bewölkungsgrad);
2014-09-02 18:22:19 +02:00
console.log("ges: " + ges);
console.log("Datei: " + file);
2014-09-02 18:01:12 +02:00
}
2014-03-04 19:57:26 +01:00
laden();
window.setInterval(function(){
laden();
}, 5000);
< / script >
< / body >
< / html >
