205 lines
8.2 KiB
HTML
205 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<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">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
|
<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="Außen">
|
|
<title>Außensensoren</title>
|
|
<link rel="stylesheet" type="text/css" href="./style.css" />
|
|
<script type="text/javascript" src="./Fremddateien/dygraph-combined.js"></script>
|
|
<script type="text/javascript" src="./Fremddateien/CibulCalendar.min.js"></script>
|
|
<style type="text/css">
|
|
#graphdiv {
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
top: 80px;
|
|
bottom: 50px;
|
|
}
|
|
#legende {
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
#auswahl {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
}
|
|
#link {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 80px;
|
|
}
|
|
#zoom {
|
|
position: relative;
|
|
}
|
|
#inhalt {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 90%;
|
|
}
|
|
#nav {
|
|
margin-bottom: 5px !important;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
.content { padding: 20px; display: inline-block; font-size: 1em; }
|
|
|
|
.ccal { width: 18em; font-size: 0.8em; margin-bottom: 5px;text-align: center; font-family: 'Arial',Tahoma,Helvetica,Sans-Serif;}
|
|
.ccal ul { margin: 0; padding: 0!important; text-align: center; }
|
|
.ccal li { list-style-type: none; display: inline-block; width: 13.2%; cursor: pointer; text-align: center; margin:0; }
|
|
.ccal li span { display: inline-block; line-height: 1.8em; }
|
|
.ccal li.calmonth { width: 66%; }
|
|
.ccal li span { padding: 0.1em 0.05em; display: block; }
|
|
.ccal li.calprev span, .ccal li.calnext span { color: #aaa; }
|
|
.ccal .calbody li.selected span { background: #666; color: white; }
|
|
.ccal .calbody li.preselected span { background: #f0f0f0; }
|
|
.ccal * { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
|
|
.today { font-weight: bold; }
|
|
.calendar-canvas {
|
|
text-align: center;
|
|
background: white;
|
|
v-moz-box-shadow: 0 3px 4px #999999;
|
|
-moz-box-shadow: 0 3px 4px #999999;
|
|
-webkit-box-shadow: 0 3px 4px #999999;
|
|
box-shadow: 0 1px 2px #999999;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body onload="onload()">
|
|
<!--Beginn Navigationsleiste-->
|
|
<div id="nav">
|
|
<ul>
|
|
<li><a href="./index.html">Hauptseite</a></li>
|
|
<li><a href="./aktuell.html">aktuelle Werte</a></li>
|
|
<li><a href="./dygraphs_außen.html" id="aktuell">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-->
|
|
<iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless"></iframe>
|
|
<div id="inhalt">
|
|
<div id="graphdiv"></div>
|
|
<div id="Legende"></div>
|
|
<span id="auswahl">
|
|
<input type=checkbox id="7" checked onClick="change(this)">
|
|
<label for="7" style="color: #00A6A6;font-weight:bold">Außentemperatur</label>
|
|
<input type=checkbox id="6" checked onClick="change(this)">
|
|
<label for="6" style="color: black;font-weight:bold">Luftdruck</label>
|
|
<input type=checkbox id="5" checked onClick="change(this)">
|
|
<label for="5" style="color: #00FF00;font-weight:bold">Luftfeuchtigkeit</label>
|
|
<input type=checkbox id="4" onClick="change(this)">
|
|
<label for="4" style="color: #00A6A6;font-weight:bold">Temperatur (Feuchtesensor)</label>
|
|
<input type=checkbox id="2" checked onClick="change(this)">
|
|
<label for="2" style="color: #0000FF;font-weight:bold">Bodentemperatur</label>
|
|
<input type=checkbox id="0" onClick="change(this)">
|
|
<label for="0" style="color: #D4AE0B;font-weight:bold">Innentemperatur</label>
|
|
<input type=checkbox id="9" onClick="change(this)">
|
|
<label for="9" style="color: #00E7FF;font-weight:bold">Luftqualität</label>
|
|
<input type=checkbox id="8" onClick="change(this)">
|
|
<label for="8" style="color: orange;font-weight:bold">Prozessor</label>
|
|
<input type=checkbox id="1" onClick="change(this)">
|
|
<label for="1" style="color: red;font-weight:bold">Gerätetemperatur 1</label>
|
|
<input type=checkbox id="3" onClick="change(this)">
|
|
<label for="3" style="color: red;font-weight:bold">Gerätetemperatur 2</label>
|
|
</span>
|
|
<span id="zoom">
|
|
<input type="button" value="Letzter Tag" onclick="zoomGraphX(new Date().getTime()-86400000, (new Date().getTime()))">
|
|
<input type="button" value="Letzte Woche" onclick="zoomGraphX(new Date().getTime()-86400000*7, (new Date().getTime()))">
|
|
<input type="text" id="datespan"/>
|
|
</span>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
|
|
document.getElementById('nav').style.display = 'none';
|
|
document.getElementById('inhalt').style.height = "100%";
|
|
}
|
|
g = new Dygraph(
|
|
document.getElementById("graphdiv"),
|
|
"dygraph.csv", // path to CSV file
|
|
{ showRoller: true, //Möglichkeit zum Runden anzeigen
|
|
animatedZooms: true,
|
|
// dateWindow: [ Date.parse("2012/09/29 12:00:00"),Date.parse("2013/11/10 12:00:00") ], //Start- und Endzeitraum
|
|
labels: ["Zeit", "Innentemperatur", "Gerätetemperatur 1", "Bodentemperatur", "Gerätetemperatur 2", "Temperatur (Feuchtesensor)", "Luftfeuchtigkeit", "Luftdruck", "Außentemperatur", "Prozessor", "Luftqualität"],
|
|
labelsDiv: document.getElementById("Legende"), //Legende in einem bestimmten DIV anzeigen
|
|
// 'Luftfeuchtigkeit': { //eigene y-Achse für Luftfeuchtigkeit
|
|
// axis: { valueRange: [1, 99],
|
|
// independentTicks: true
|
|
// }
|
|
// },
|
|
'Luftqualität': { //eigene y-Achse für Luftdruck
|
|
axis: { independentTicks: true
|
|
}
|
|
},
|
|
'Luftdruck': {
|
|
axis: 'Luftqualität'
|
|
},
|
|
ylabel: 'Temperatur (°C), Luftfeuchtigkeit (%)',
|
|
|
|
y2label: 'Luftqualität, Luftdruck (hPa)',
|
|
colors: [ "#D4AE0B", "red", "#0000FF", "red", "#00A6A6", "#00FF00", "black", "#00A6A6", "orange", "#00E7FF" ],
|
|
strokeWidth: 3, // Liniendicke
|
|
rollPeriod: 10, // Runden standardmäßig auf 10 setzen
|
|
visibility: [false, false, true, false, false, true, true, true, false, false]
|
|
// highlightSeriesOpts: {
|
|
// strokeWidth: 5,
|
|
// strokeBorderWidth: 1,
|
|
// }
|
|
// showRangeSelector: true, //Auswahlzeile anzeigen
|
|
// rangeSelectorHeight: 80
|
|
|
|
|
|
|
|
|
|
} // options
|
|
);
|
|
function change(el) {
|
|
g.setVisibility(el.id, el.checked);
|
|
|
|
}
|
|
function zoomGraphX(minDate, maxDate) {
|
|
g.updateOptions({
|
|
dateWindow: [minDate, maxDate]
|
|
});
|
|
}
|
|
|
|
function onload() {
|
|
setCibulCalendar('datespan',{onSelect: function(selected) {
|
|
console.log(selected.begin);
|
|
console.log(selected.end);
|
|
zoomGraphX(selected.begin.getTime(), (selected.end.getTime()+86400000))
|
|
}});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|