349 lines
12 KiB
HTML
349 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<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">
|
|
|
|
<meta name="apple-mobile-web-app-title" content="Temperatur">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<!-- "Zum Homebildschirm hinzufügen" Benachrichtigung -->
|
|
<link rel="stylesheet" href="./Fremddateien/add2home.css">
|
|
<script type="application/javascript" src="./Fremddateien/add2home.js"></script>
|
|
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
<script type="text/javascript">
|
|
var addToHomeConfig = {
|
|
touchIcon: true,
|
|
returningVisitor: true,
|
|
};
|
|
</script>
|
|
|
|
<title>Aktuelles Wetter</title>
|
|
<link rel="stylesheet" type="text/css" href="./style.css" />
|
|
<style>
|
|
div.wert {
|
|
clear: left;
|
|
margin-top:10px;
|
|
margin-left: 10px;
|
|
}
|
|
div {
|
|
float: left;
|
|
}
|
|
.bar {
|
|
transition: 2s;
|
|
clear: both;
|
|
position:relative;
|
|
margin-top: 20px;
|
|
}
|
|
span.zahl {
|
|
position:absolute;
|
|
left:50%;
|
|
}
|
|
span.einheit {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
p {
|
|
margin-top: 10px;
|
|
clear: both;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body onresize="bar_width()" id="viewport"><!-- Wenn die Fenstergröße verändert wird, die Balkenbreite neu berechnen-->
|
|
<!--Beginn Navigationsleiste-->
|
|
<div id="nav">
|
|
<ul>
|
|
<li><a href="./index.html">Hauptseite</a></li>
|
|
<li><a href="./aktuell.html" id="aktuell">aktuelle Werte</a></li>
|
|
<li><a href="./dygraphs_außen.html">Diagramm (Außen)</a></li>
|
|
<li><a href="./dygraphs_innen.html">Diagramm (Innen)</a></li>
|
|
<li><a href="./projekt.html">Über das Projekt</a></li>
|
|
<li><a href="./links.html">weitere Informationen</a></li>
|
|
<li><a href="./gnuplot.html">Gnuplot</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--Ende Navigationsleiste-->
|
|
<h1>Aktuell</h1>
|
|
<iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless">ifames werden nicht unterstützt</iframe>
|
|
<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 -->
|
|
<div class="wert">
|
|
<div class="label">Datum/Uhrzeit:</div>
|
|
<div><span class="zahl" id="uhrzeit" style="font-weight:bold;">0</span></div>
|
|
</div>
|
|
|
|
<div class="wert" style="margin-top:30px;">
|
|
<div class="label">Innen­temperatur:</div>
|
|
<div><span class="zahl" id="innen">0</span></div>
|
|
<div id="innen_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Luft­qualität:</div>
|
|
<div><span class="zahl" id="qualität">0</span></div>
|
|
<div id="qualität_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Geräte­temperatur 1:</div>
|
|
<div><span class="zahl" id="ger1">0</span></div>
|
|
<div id="ger1_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Geräte­temperatur 2:</div>
|
|
<div><span class="zahl" id="ger2">0</span></div>
|
|
<div id="ger2_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Prozessor:</div>
|
|
<div><span class="zahl" id="prozessor">0</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 class="zahl" id="aussen">0</span></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 class="zahl" id="temp_luft">0</span></div>
|
|
<div id="temp_luft_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Boden­temperatur:</div>
|
|
<div><span class="zahl" id="boden">0</span></div>
|
|
<div id="boden_w" class="bar"> </div>
|
|
</div>
|
|
<div class="wert">
|
|
<div class="label">Luft­feuchte:</div>
|
|
<div><span class="zahl" id="feuchte">0</span></div>
|
|
<div id="feuchte_w" class="bar"> </div>
|
|
</div>
|
|
|
|
<div class="wert">
|
|
<div class="label">Luft­druck:</div>
|
|
<div><span class="zahl" id="druck">0</span></div>
|
|
<div id="druck_w" class="bar"> </div>
|
|
</div>
|
|
<p style="font-size:small;"><a href="./aktuell_einfach.html">einfache tabellarische Darstellung</a><br />
|
|
<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>
|
|
<script type="text/javascript" >
|
|
//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"]; //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
|
|
var max=[0,40,40,40,40,40,100,40,1200,60,5000];
|
|
|
|
|
|
|
|
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
|
|
document.getElementById('nav').style.display = 'none';
|
|
}
|
|
var tmp = document.documentMode, e, isIE;
|
|
// ----Erkennung des Internetexplorer von http://www.pinlady.net/PluginDetect/IE/
|
|
// 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){ };
|
|
// ----Ende der IE-Erkennung
|
|
|
|
|
|
function laden() { //neueste Daten nachladen und Balken bar() ausführen
|
|
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");
|
|
}
|
|
|
|
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();
|
|
wettericon();
|
|
}
|
|
function bar_width() {
|
|
browserbreite=document.body.offsetWidth;
|
|
for (index = 1; index < ids_w.length; ++index) {
|
|
breite=(werte[index]-min[index])/(max[index]-min[index]) * (browserbreite);
|
|
$("#" + ids_w[index] ).css("width", breite +"px");
|
|
}
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
function wettericon() {
|
|
boden=werte[3];
|
|
temp_luft=werte[5];
|
|
feuchte=werte[6];
|
|
aussen=werte[7];
|
|
druck=werte[8];
|
|
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
|
|
jetzt=new Date();
|
|
dieses_monat=monate[jetzt.getMonth()];
|
|
nächstes_monat=monate[jetzt.getMonth()+1];
|
|
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
|
|
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 );
|
|
}
|
|
|
|
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);
|
|
console.log("ges: " + ges);
|
|
console.log("Datei: " + file);
|
|
}
|
|
|
|
laden();
|
|
window.setInterval(function(){
|
|
laden();
|
|
}, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|