229 lines
8.1 KiB
HTML
229 lines
8.1 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">
|
|
<!--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>
|
|
</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>-->
|
|
<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>
|
|
<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"];
|
|
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];
|
|
|
|
|
|
|
|
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();
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
|
|
laden();
|
|
window.setInterval(function(){
|
|
laden();
|
|
}, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|