Style von Webinterface verändert
* relative Positionierung * body ohne margin
This commit is contained in:
parent
6ad9ef206f
commit
183666e095
3 changed files with 76 additions and 97 deletions
|
@ -36,34 +36,6 @@
|
||||||
<script type="text/javascript" src="./Fremddateien/dygraph-combined.js"></script>
|
<script type="text/javascript" src="./Fremddateien/dygraph-combined.js"></script>
|
||||||
<script type="text/javascript" src="./Fremddateien/CibulCalendar.min.js"></script>
|
<script type="text/javascript" src="./Fremddateien/CibulCalendar.min.js"></script>
|
||||||
<style type="text/css">
|
<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 {
|
#nav {
|
||||||
margin-bottom: 5px !important;
|
margin-bottom: 5px !important;
|
||||||
}
|
}
|
||||||
|
@ -108,10 +80,23 @@
|
||||||
</div>
|
</div>
|
||||||
<!--Ende Navigationsleiste-->
|
<!--Ende Navigationsleiste-->
|
||||||
<iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless"></iframe>
|
<iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless"></iframe>
|
||||||
<div id="inhalt">
|
<div id="inhalt_diagramm">
|
||||||
<div id="graphdiv"></div>
|
<div 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"/>
|
||||||
|
<select name="data" id="data" size="1" title="anderen Datensatz auswählen" onchange="g.updateOptions({file: (options[selectedIndex].value)})">
|
||||||
|
<option value="dygraph.csv" title="momentan laufende Messung">aktuelle Messung</option>
|
||||||
|
<option value="dygraph8A.csv">Schulbegin 8A</option>
|
||||||
|
<option value="dygraph_ocg.csv" title="Messung wärend des Finales bei der OCG">OCG Finale</option>
|
||||||
|
<option value="dygraph_schule.csv" title="Mai-Juni 2014">Schule</option>
|
||||||
|
<option value="dygraph_gemischt.csv">Testdaten 1</option>
|
||||||
|
<option value="dygraph_lange.csv">Testdaten 2</option>
|
||||||
|
<select>
|
||||||
|
</div>
|
||||||
<div id="Legende"></div>
|
<div id="Legende"></div>
|
||||||
<span id="auswahl">
|
<div id="graphdiv"></div>
|
||||||
|
<div id="auswahl">
|
||||||
<input type=checkbox id="7" checked onClick="change(this)">
|
<input type=checkbox id="7" checked onClick="change(this)">
|
||||||
<label for="7" style="color: #00A6A6;font-weight:bold">Außentemperatur</label>
|
<label for="7" style="color: #00A6A6;font-weight:bold">Außentemperatur</label>
|
||||||
<input type=checkbox id="6" checked onClick="change(this)">
|
<input type=checkbox id="6" checked onClick="change(this)">
|
||||||
|
@ -132,26 +117,11 @@
|
||||||
<label for="1" style="color: red;font-weight:bold">Gerätetemperatur 1</label>
|
<label for="1" style="color: red;font-weight:bold">Gerätetemperatur 1</label>
|
||||||
<input type=checkbox id="3" onClick="change(this)">
|
<input type=checkbox id="3" onClick="change(this)">
|
||||||
<label for="3" style="color: red;font-weight:bold">Gerätetemperatur 2</label>
|
<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"/>
|
|
||||||
<select name="data" id="data" size="1" title="anderen Datensatz auswählen" onchange="g.updateOptions({file: (options[selectedIndex].value)})">
|
|
||||||
<option value="dygraph.csv" title="momentan laufende Messung">aktuelle Messung</option>
|
|
||||||
<option value="dygraph8A.csv">Schulbegin 8A</option>
|
|
||||||
<option value="dygraph_ocg.csv" title="Messung wärend des Finales bei der OCG">OCG Finale</option>
|
|
||||||
<option value="dygraph_schule.csv" title="Mai-Juni 2014">Schule</option>
|
|
||||||
<option value="dygraph_gemischt.csv">Testdaten 1</option>
|
|
||||||
<option value="dygraph_lange.csv">Testdaten 2</option>
|
|
||||||
<select>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
|
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
|
||||||
document.getElementById('nav').style.display = 'none';
|
document.getElementById('nav').style.display = 'none';
|
||||||
document.getElementById('inhalt').style.height = "100%";
|
|
||||||
}
|
}
|
||||||
g = new Dygraph(
|
g = new Dygraph(
|
||||||
document.getElementById("graphdiv"),
|
document.getElementById("graphdiv"),
|
||||||
|
@ -179,7 +149,8 @@ g = new Dygraph(
|
||||||
colors: [ "#D4AE0B", "red", "#0000FF", "red", "#00A6A6", "#00FF00", "black", "#00A6A6", "orange", "#00E7FF" ],
|
colors: [ "#D4AE0B", "red", "#0000FF", "red", "#00A6A6", "#00FF00", "black", "#00A6A6", "orange", "#00E7FF" ],
|
||||||
strokeWidth: 3, // Liniendicke
|
strokeWidth: 3, // Liniendicke
|
||||||
rollPeriod: 10, // Runden standardmäßig auf 10 setzen
|
rollPeriod: 10, // Runden standardmäßig auf 10 setzen
|
||||||
visibility: [false, false, true, false, false, true, true, true, false, false]
|
visibility: [false, false, true, false, false, true, true, true, false, false],
|
||||||
|
legend: "always"
|
||||||
// highlightSeriesOpts: {
|
// highlightSeriesOpts: {
|
||||||
// strokeWidth: 5,
|
// strokeWidth: 5,
|
||||||
// strokeBorderWidth: 1,
|
// strokeBorderWidth: 1,
|
||||||
|
|
|
@ -37,34 +37,6 @@
|
||||||
<script type="text/javascript" src="./Fremddateien/dygraph-combined.js"></script>
|
<script type="text/javascript" src="./Fremddateien/dygraph-combined.js"></script>
|
||||||
<script type="text/javascript" src="./Fremddateien/CibulCalendar.min.js"></script>
|
<script type="text/javascript" src="./Fremddateien/CibulCalendar.min.js"></script>
|
||||||
<style type="text/css">
|
<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 {
|
#nav {
|
||||||
margin-bottom: 5px !important;
|
margin-bottom: 5px !important;
|
||||||
}
|
}
|
||||||
|
@ -109,10 +81,23 @@
|
||||||
</div>
|
</div>
|
||||||
<!--Ende Navigationsleiste-->
|
<!--Ende Navigationsleiste-->
|
||||||
<iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless"></iframe>
|
<iframe width="1" scrolling="no" height="1" frameborder="0" src="control.php?aktion=running" seamless="seamless"></iframe>
|
||||||
<div id="inhalt">
|
<div id="inhalt_diagramm">
|
||||||
<div id="graphdiv"></div>
|
<div 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"/>
|
||||||
|
<select name="data" id="data" size="1" title="anderen Datensatz auswählen" onchange="g.updateOptions({file: (options[selectedIndex].value)})">
|
||||||
|
<option value="dygraph.csv" title="momentan laufende Messung">aktuelle Messung</option>
|
||||||
|
<option value="dygraph8A.csv">Schulbegin 8A</option>
|
||||||
|
<option value="dygraph_ocg.csv" title="Messung wärend des Finales bei der OCG">OCG Finale</option>
|
||||||
|
<option value="dygraph_schule.csv" title="Mai-Juni 2014">Schule</option>
|
||||||
|
<option value="dygraph_gemischt.csv">Testdaten 1</option>
|
||||||
|
<option value="dygraph_lange.csv">Testdaten 2</option>
|
||||||
|
<select>
|
||||||
|
</div>
|
||||||
<div id="Legende"></div>
|
<div id="Legende"></div>
|
||||||
<span id="auswahl">
|
<div id="graphdiv"></div>
|
||||||
|
<div id="auswahl">
|
||||||
<input type=checkbox id="7" onClick="change(this)">
|
<input type=checkbox id="7" onClick="change(this)">
|
||||||
<label for="7" style="color: #00A6A6;font-weight:bold">Außentemperatur</label>
|
<label for="7" style="color: #00A6A6;font-weight:bold">Außentemperatur</label>
|
||||||
<input type=checkbox id="6" onClick="change(this)">
|
<input type=checkbox id="6" onClick="change(this)">
|
||||||
|
@ -133,26 +118,12 @@
|
||||||
<label for="1" style="color: red;font-weight:bold">Gerätetemperatur 1</label>
|
<label for="1" style="color: red;font-weight:bold">Gerätetemperatur 1</label>
|
||||||
<input type=checkbox id="3" checked onClick="change(this)">
|
<input type=checkbox id="3" checked onClick="change(this)">
|
||||||
<label for="3" style="color: red;font-weight:bold">Gerätetemperatur 2</label>
|
<label for="3" style="color: red;font-weight:bold">Gerätetemperatur 2</label>
|
||||||
</span>
|
</div>
|
||||||
<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"/>
|
|
||||||
<select name="data" id="data" size="1" title="anderen Datensatz auswählen" onchange="g.updateOptions({file: (options[selectedIndex].value)})">
|
|
||||||
<option value="dygraph.csv" title="momentan laufende Messung">aktuelle Messung</option>
|
|
||||||
<option value="dygraph8A.csv">Schulbegin 8A</option>
|
|
||||||
<option value="dygraph_ocg.csv" title="Messung wärend des Finales bei der OCG">OCG Finale</option>
|
|
||||||
<option value="dygraph_schule.csv" title="Mai-Juni 2014">Schule</option>
|
|
||||||
<option value="dygraph_gemischt.csv">Testdaten 1</option>
|
|
||||||
<option value="dygraph_lange.csv">Testdaten 2</option>
|
|
||||||
<select>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
|
if (window.navigator.standalone) { // Wenn die Seite als Webapp aufgerufen wird, soll die Navigationsleiste verschwinden
|
||||||
document.getElementById('nav').style.display = 'none';
|
document.getElementById('nav').style.display = 'none';
|
||||||
document.getElementById('inhalt').style.height = "100%";
|
|
||||||
}
|
}
|
||||||
g = new Dygraph(
|
g = new Dygraph(
|
||||||
document.getElementById("graphdiv"),
|
document.getElementById("graphdiv"),
|
||||||
|
@ -180,7 +151,8 @@ g = new Dygraph(
|
||||||
colors: [ "#D4AE0B", "red", "#0000FF", "red", "#00A6A6", "#00FF00", "black", "#00A6A6", "orange", "#00E7FF" ],
|
colors: [ "#D4AE0B", "red", "#0000FF", "red", "#00A6A6", "#00FF00", "black", "#00A6A6", "orange", "#00E7FF" ],
|
||||||
strokeWidth: 3, // Liniendicke
|
strokeWidth: 3, // Liniendicke
|
||||||
rollPeriod: 10, // Runden standardmäßig auf 10 setzen
|
rollPeriod: 10, // Runden standardmäßig auf 10 setzen
|
||||||
visibility: [true, true, false, true, false, false, false, false, true, false]
|
visibility: [true, true, false, true, false, false, false, false, true, false],
|
||||||
|
legend: "always"
|
||||||
// highlightSeriesOpts: {
|
// highlightSeriesOpts: {
|
||||||
// strokeWidth: 5,
|
// strokeWidth: 5,
|
||||||
// strokeBorderWidth: 1,
|
// strokeBorderWidth: 1,
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
|
html,body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* Navigationsleiste */
|
/* Navigationsleiste */
|
||||||
#nav {
|
#nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -5,6 +10,7 @@
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
float: none;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
list-style-type:none;
|
list-style-type:none;
|
||||||
|
@ -45,7 +51,7 @@ h1 {
|
||||||
color: #4B5E10;
|
color: #4B5E10;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
h2 {
|
h2,h3 {
|
||||||
color: #3F4F0D;
|
color: #3F4F0D;
|
||||||
margin: 20px
|
margin: 20px
|
||||||
}
|
}
|
||||||
|
@ -66,6 +72,36 @@ img {
|
||||||
html {
|
html {
|
||||||
background-color: #E0FFE0;
|
background-color: #E0FFE0;
|
||||||
}
|
}
|
||||||
|
object {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
/*Diagramme*/
|
||||||
|
#Legende {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#inhalt_diagramm {
|
||||||
|
width: 100%;
|
||||||
|
height: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
.float {
|
.float {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
#graphdiv {
|
||||||
|
width: 100%;
|
||||||
|
height: 85vh;
|
||||||
|
}
|
||||||
|
#auswahl {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
#link {
|
||||||
|
bottom: 10px;
|
||||||
|
right: 80px;
|
||||||
|
}
|
||||||
|
#zoom {
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
#zoom,#Legende,#auswahl {
|
||||||
|
margin-left:10px;
|
||||||
|
margin-right:10px;
|
||||||
|
}
|
||||||
|
|
Reference in a new issue