Upload files to 'mysql_php'
This commit is contained in:
parent
1ade4137f8
commit
89d4df5524
144
mysql_php/README.md
Normal file
144
mysql_php/README.md
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
# Web- und Datenbankserver
|
||||||
|
|
||||||
|
Voraussetzung: Es steht ein Webserver und ein Datenbankserver zur Verfügung.
|
||||||
|
Getestet wurde die Konfiguration mit
|
||||||
|
|
||||||
|
- MYSQL
|
||||||
|
- APACHE2
|
||||||
|
|
||||||
|
## Dateien
|
||||||
|
|
||||||
|
```
|
||||||
|
info.txt ..... diese Datei
|
||||||
|
chart.js ..... Javascriptdatei für Grafiken
|
||||||
|
dbutil.php ... Datenbankverbindung
|
||||||
|
upload.php ... php-Datei zum Eintragen eines neuen Messwertes
|
||||||
|
wetter.css ... CSS-Formatdatei
|
||||||
|
wetter.php ... Anzeigeseite
|
||||||
|
wetter.sql ... Befehle zum Anlegen der Tabellen
|
||||||
|
```
|
||||||
|
|
||||||
|
# Datenbank anlegen:
|
||||||
|
|
||||||
|
Die Datenbank 'wetter' enthält für jeden Sensor eine Tabelle, deren Aufbau
|
||||||
|
identisch ist:
|
||||||
|
|
||||||
|
```
|
||||||
|
CREATE TABLE `indoor` (
|
||||||
|
`id` int(11) NOT NULL AUTO_INCREMENT,
|
||||||
|
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||||
|
`temperature` float(4,2) NOT NULL,
|
||||||
|
`pressure` float(6,2) NOT NULL,
|
||||||
|
`humidity` float(3,1) NOT NULL,
|
||||||
|
PRIMARY KEY (`id`)
|
||||||
|
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
# Neue Messwerte eintragen
|
||||||
|
|
||||||
|
Das Python-Programm ruft die URL mit Parametern auf:
|
||||||
|
```
|
||||||
|
<server>/upload.php?m=table&t=temp&p=pres&h=hum
|
||||||
|
table = indoor oder outdoor (String
|
||||||
|
temp = Temperatur (double)
|
||||||
|
pres = Luftdruck (double)
|
||||||
|
hum = Luftfeuchtigkeit (double)
|
||||||
|
```
|
||||||
|
Auf dem Server fügt die Auswertung dieser URL die Daten in die Datenbank ein.
|
||||||
|
|
||||||
|
Auf diese Art werden die Daten nur lokal auf dem Server verarbeitet. Ein
|
||||||
|
externer Zugriff auf die Datenbank (direkt vom Raspberry Pi) würde ein
|
||||||
|
Sicherheitsrisiko für die Datenbank darstellen.
|
||||||
|
|
||||||
|
# Messwerte abrufen
|
||||||
|
|
||||||
|
Die grafische Anzeige basiert auf https://d3js.org/d3.v3.min.js.
|
||||||
|
In der Datei **chart.js** werden dazu zwei Funktionen definiert,
|
||||||
|
die für die Anzeige aufgerufen werden.
|
||||||
|
|
||||||
|
```
|
||||||
|
// ************************************************************
|
||||||
|
// Funktion zur Erzeugung einer Grafik (Linie)
|
||||||
|
// Die Daten müssen zwei Spalten enthalten: (zeit | value)
|
||||||
|
//
|
||||||
|
// Parameter:
|
||||||
|
// o titel Diagrammtitel oben
|
||||||
|
// o sql wird z.Zt. nicht genutzt
|
||||||
|
// o textX Beschrfitung der x-Achse
|
||||||
|
// o textY Beschriftung der y-Achse
|
||||||
|
// o breite Breite des Diagramms
|
||||||
|
// o hoehe Höhe des Diagramms
|
||||||
|
// o data Daten im JSON-Format
|
||||||
|
// o scaleY 0=automatisch skalieren, 1=Prozent 0..100
|
||||||
|
// o units Einheiten für die Tooltipps
|
||||||
|
// o id id in css-Klasse
|
||||||
|
// #id ............ Breite, Rand/farbe)
|
||||||
|
// #id .title ...... Farbe, Größe des Titels
|
||||||
|
// #id .y .......... Farbe der y-Beschriftung
|
||||||
|
// #id .linecolor .. Linienfarbe
|
||||||
|
// #id .tooltip .... Frarbe Tooltipps
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
function showDiagram1Line(titel, sql, textX, textY, breite, hoehe,
|
||||||
|
data, scaleY, units, id)
|
||||||
|
|
||||||
|
// ************************************************************
|
||||||
|
// Funktion zur Erzeugung einer Grafik (2 Linien)
|
||||||
|
// Die Daten müssen drei Spalten enthalten: (zeit | value1 | value2 )
|
||||||
|
//
|
||||||
|
// Parameter:
|
||||||
|
// o titel Diagrammtitel oben
|
||||||
|
// o data Daten im JSON-Format
|
||||||
|
// o textX Beschrfitung der x-Achse
|
||||||
|
// o textY1 Beschriftung der y1Achse (links)
|
||||||
|
// o textY2 Beschriftung der y1-Achse (rechts)
|
||||||
|
// o breite Breite des Diagramms
|
||||||
|
// o hoehe Höhe des Diagramms
|
||||||
|
// o scaleY1 0=automatisch skalieren, 1=Prozent 0..100 value1
|
||||||
|
// o scaleY2 0=automatisch skalieren, 1=Prozent 0..100 value2
|
||||||
|
// o units1 Einheiten für die Tooltipps value1
|
||||||
|
// o units2 Einheiten für die Tooltipps value2
|
||||||
|
// o id id in css-Klasse
|
||||||
|
// #id ............ Breite, Rand/farbe)
|
||||||
|
// #id .title ...... Farbe, Größe des Titels
|
||||||
|
// #id .y1 ......... Farbe der y-Beschriftung value1
|
||||||
|
// #id .y2 ......... Farbe der y-Beschriftung value2
|
||||||
|
// #id .linecolor1 . Linienfarbe value1
|
||||||
|
// #id .linecolor2 . Linienfarbe value2
|
||||||
|
// #id .tooltip .... Farbe Tooltipps
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
function showDiagram2Lines(titel, data, textX, textY1, textY2, breite,
|
||||||
|
hoehe, scaleY1, scaleY2, units1, units2, id)
|
||||||
|
```
|
||||||
|
|
||||||
|
Die Anzeige soll exemplarisch an der Temperatur (1 Linie) beschrieben werden.
|
||||||
|
Die Box um den Graphen mit farbigem Titel kann über css realisiert werden.
|
||||||
|
|
||||||
|
<div id="graphTemperature"> ... </div>
|
||||||
|
|
||||||
|
FÜr das Auslesen der Daten wird die Funktion `getJSON_Data1($sqlT)` verwendet,
|
||||||
|
die in `dbutil.php` definiert ist. Das Ergebnis wird in `'data'` gespeichert.
|
||||||
|
|
||||||
|
```
|
||||||
|
<script>
|
||||||
|
<?php
|
||||||
|
$json_data = getJSON_Data1($sqlT);
|
||||||
|
echo "data=".$json_data.";"
|
||||||
|
?>
|
||||||
|
showDiagram1Line("Temperatur (in °C)","","Zeit",
|
||||||
|
"", 600, 300, data, 0, "°C",
|
||||||
|
"#graphTemperature");
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
Der SQL-Befehl zur Abfrage:
|
||||||
|
|
||||||
|
```
|
||||||
|
$sqlT = "SELECT time AS Zeit,
|
||||||
|
temperature AS value
|
||||||
|
FROM (SELECT * FROM outdoor ORDER BY time DESC) AS tab
|
||||||
|
ORDER BY Zeit";
|
||||||
|
```
|
||||||
|
|
||||||
397
mysql_php/chart.js
Normal file
397
mysql_php/chart.js
Normal file
@ -0,0 +1,397 @@
|
|||||||
|
// ***********************************************************
|
||||||
|
//
|
||||||
|
// Globale Einstellungen
|
||||||
|
// gültig für alle Diagramme
|
||||||
|
//
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// Parse the date / time
|
||||||
|
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
|
||||||
|
|
||||||
|
// Einstellung auf deutsche Formate
|
||||||
|
var de_DE = d3.locale({
|
||||||
|
"decimal": ",",
|
||||||
|
"thousands": ".",
|
||||||
|
"grouping": [3],
|
||||||
|
"currency": ["", "€"],
|
||||||
|
"dateTime": "%a %b %e %X %Y",
|
||||||
|
"date": "%d.%m.%Y",
|
||||||
|
"time": "%H:%M:%S",
|
||||||
|
"periods": ["AM", "PM"],
|
||||||
|
"days": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
|
||||||
|
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
|
||||||
|
"months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "July", "August", "September", "Oktober", "November", "Dezember"],
|
||||||
|
"shortMonths": ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Zeit auf deutsches Format einstellen
|
||||||
|
d3.time.format = de_DE.timeFormat;
|
||||||
|
|
||||||
|
// Benutzerdefiniertes Zeitformat
|
||||||
|
var customTimeFormat = d3.time.format.multi([
|
||||||
|
[".%L", function(d) { return d.getMilliseconds(); }],
|
||||||
|
[":%S", function(d) { return d.getSeconds(); }],
|
||||||
|
["%H:%M", function(d) { return d.getMinutes(); }],
|
||||||
|
["%H:%M", function(d) { return d.getHours(); }],
|
||||||
|
["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
|
||||||
|
["%b %d", function(d) { return d.getDate() != 1; }],
|
||||||
|
["%B", function(d) { return d.getMonth(); }],
|
||||||
|
["%Y", function() { return true; }]
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Zeitformat für Tooltipps
|
||||||
|
var formatTimeTooltipp = d3.time.format("%e %B %H:%M");
|
||||||
|
|
||||||
|
// ************************************
|
||||||
|
// define grid line functions
|
||||||
|
// ************************************
|
||||||
|
function make_x_axis1(x) {
|
||||||
|
return d3.svg.axis()
|
||||||
|
.scale(x)
|
||||||
|
.orient("bottom")
|
||||||
|
.ticks(15)
|
||||||
|
}
|
||||||
|
|
||||||
|
function make_y_axis1(yy,dir) {
|
||||||
|
return d3.svg.axis()
|
||||||
|
.scale(yy)
|
||||||
|
.orient(dir)
|
||||||
|
.ticks(5)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ************************************************************
|
||||||
|
// Funktion zur Erzeugung einer Grafik (Linie)
|
||||||
|
// Die Daten müssen zwei Spalten enthalten: (zeit | value)
|
||||||
|
//
|
||||||
|
// Parameter:
|
||||||
|
// o titel Diagrammtitel oben
|
||||||
|
// o sql wird z.Zt. nicht genutzt
|
||||||
|
// o textX Beschrfitung der x-Achse
|
||||||
|
// o textY Beschriftung der y-Achse
|
||||||
|
// o breite Breite des Diagramms
|
||||||
|
// o hoehe Höhe des Diagramms
|
||||||
|
// o data Daten im JSON-Format
|
||||||
|
// o scaleY 0=automatisch skalieren, 1=Prozent 0..100
|
||||||
|
// o units Einheiten für die Tooltipps
|
||||||
|
// o id id in css-Klasse
|
||||||
|
// #id ............ Breite, Rand/farbe)
|
||||||
|
// #id .title ...... Farbe, Größe des Titels
|
||||||
|
// #id .y .......... Farbe der y-Beschriftung
|
||||||
|
// #id .linecolor .. Linienfarbe
|
||||||
|
// #id .tooltip .... Frarbe Tooltipps
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
function showDiagram1Line(titel, sql, textX, textY, breite, hoehe, data, scaleY, units, id) {
|
||||||
|
|
||||||
|
var margin = {top: 30, right: 55, bottom: 30, left: 60},
|
||||||
|
width = breite - margin.left - margin.right,
|
||||||
|
height = hoehe - margin.top - margin.bottom;
|
||||||
|
|
||||||
|
document.write ("<div class='title'>" + titel + "</div>");
|
||||||
|
|
||||||
|
// specify the scales for each set of data
|
||||||
|
var x = d3.time.scale().range([0, width]);
|
||||||
|
var y = d3.scale.linear().range([height, 0]);
|
||||||
|
|
||||||
|
// dynamische Werte anzeigen
|
||||||
|
var div = d3.select("body").append("div")
|
||||||
|
.attr("class", "tooltip tooltippfarbe")
|
||||||
|
.style("opacity", 0);
|
||||||
|
|
||||||
|
|
||||||
|
// axis formatting
|
||||||
|
var xAxis = d3.svg.axis().scale(x)
|
||||||
|
.orient("bottom").ticks(6).tickFormat(customTimeFormat);;
|
||||||
|
var yAxis = d3.svg.axis().scale(y)
|
||||||
|
.tickFormat(d3.format(".1f"))
|
||||||
|
.orient("left").ticks(5);
|
||||||
|
|
||||||
|
// line functions
|
||||||
|
var valueLine = d3.svg.line()
|
||||||
|
.x(function(d) { return x(d.zeit); })
|
||||||
|
.y(function(d) { return y(d.value); });
|
||||||
|
|
||||||
|
|
||||||
|
// setup the svg area
|
||||||
|
var svg = d3.select(id)
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.append("g")
|
||||||
|
.attr("transform",
|
||||||
|
"translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
// wrangle the data into the correct formats and units
|
||||||
|
data.forEach(function(d) {
|
||||||
|
d.zeit = parseDate(d.zeit);
|
||||||
|
d.value = +d.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scale the range of the data
|
||||||
|
x.domain(d3.extent(data, function(d) { return d.zeit; }));
|
||||||
|
if ( scaleY == 0 ) {
|
||||||
|
y.domain([
|
||||||
|
d3.min(data, function(d) {return Math.min(d.value); })-.25,
|
||||||
|
d3.max(data, function(d) {return Math.max(d.value); })+.25]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
y.domain([ 0,100 ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.append("path") // Add the value line.
|
||||||
|
.attr("class", "linecolor")
|
||||||
|
.attr("d", valueLine(data));
|
||||||
|
|
||||||
|
svg.append("g") // Add the X Axis
|
||||||
|
.attr("class", "x axis")
|
||||||
|
.attr("transform", "translate(0," + height + ")")
|
||||||
|
.call(xAxis);
|
||||||
|
|
||||||
|
svg.append("g") // Add the value axis
|
||||||
|
.attr("class", "y axis")
|
||||||
|
//.style("fill", "steelblue")
|
||||||
|
.call(yAxis);
|
||||||
|
|
||||||
|
svg.append("text") // Add the text label for the value axis
|
||||||
|
.attr("class", "y")
|
||||||
|
.attr("transform", "rotate(-90)")
|
||||||
|
.attr("x", 0)
|
||||||
|
.attr("y", -40)
|
||||||
|
//.style("fill", "steelblue")
|
||||||
|
.style("text-anchor", "end")
|
||||||
|
.text(textY);
|
||||||
|
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.attr("class", "grid")
|
||||||
|
.attr("transform", "translate(0," + height + ")")
|
||||||
|
.call(make_x_axis1(x)
|
||||||
|
.tickSize(-height, 0, 0)
|
||||||
|
.tickFormat("")
|
||||||
|
);
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.attr("class", "grid")
|
||||||
|
.call(make_y_axis1(y,"left")
|
||||||
|
.tickSize(-width, 0, 0)
|
||||||
|
.tickFormat("")
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
// dynamische Wertanzeige
|
||||||
|
svg.selectAll("dot")
|
||||||
|
.data(data)
|
||||||
|
.enter().append("circle")
|
||||||
|
.attr("r", 2)
|
||||||
|
.attr("cx", function(d) { return x(d.zeit); })
|
||||||
|
.attr("cy", function(d) { return y(d.value); })
|
||||||
|
.on("mouseover", function(d) {
|
||||||
|
div.transition()
|
||||||
|
.duration(100)
|
||||||
|
.style("opacity", .9);
|
||||||
|
div .html(formatTimeTooltipp(d.zeit) + "<br/>" + d.value + units)
|
||||||
|
.style("left", (d3.event.pageX) + "px")
|
||||||
|
.style("top", (d3.event.pageY - 28) + "px");
|
||||||
|
})
|
||||||
|
.on("mouseout", function(d) {
|
||||||
|
div.transition()
|
||||||
|
.duration(500)
|
||||||
|
.style("opacity", 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ************************************************************
|
||||||
|
// Funktion zur Erzeugung einer Grafik (2 Linien)
|
||||||
|
// Die Daten müssen drei Spalten enthalten: (zeit | value1 | value2 )
|
||||||
|
//
|
||||||
|
// Parameter:
|
||||||
|
// o titel Diagrammtitel oben
|
||||||
|
// o data Daten im JSON-Format
|
||||||
|
// o textX Beschrfitung der x-Achse
|
||||||
|
// o textY1 Beschriftung der y1Achse (links)
|
||||||
|
// o textY2 Beschriftung der y1-Achse (rechts)
|
||||||
|
// o breite Breite des Diagramms
|
||||||
|
// o hoehe Höhe des Diagramms
|
||||||
|
// o scaleY1 0=automatisch skalieren, 1=Prozent 0..100 value1
|
||||||
|
// o scaleY2 0=automatisch skalieren, 1=Prozent 0..100 value2
|
||||||
|
// o units1 Einheiten für die Tooltipps value1
|
||||||
|
// o units2 Einheiten für die Tooltipps value2
|
||||||
|
// o id id in css-Klasse
|
||||||
|
// #id ............ Breite, Rand/farbe)
|
||||||
|
// #id .title ...... Farbe, Größe des Titels
|
||||||
|
// #id .y1 ......... Farbe der y-Beschriftung value1
|
||||||
|
// #id .y2 ......... Farbe der y-Beschriftung value2
|
||||||
|
// #id .linecolor1 . Linienfarbe value1
|
||||||
|
// #id .linecolor2 . Linienfarbe value2
|
||||||
|
// #id .tooltip .... Farbe Tooltipps
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
function showDiagram2Lines(titel, data, textX, textY1, textY2, breite, hoehe, scaleY1, scaleY2, units1, units2, id) {
|
||||||
|
|
||||||
|
var margin = {top: 30, right: 65, bottom: 30, left: 60},
|
||||||
|
width = breite - margin.left - margin.right,
|
||||||
|
height = hoehe - margin.top - margin.bottom;
|
||||||
|
|
||||||
|
document.write ("<div class='title'>" + titel + "</div>");
|
||||||
|
|
||||||
|
// specify the scales for each set of data
|
||||||
|
var x = d3.time.scale().range([0, width]);
|
||||||
|
var y = d3.scale.linear().range([height, 0]);
|
||||||
|
var y2 = d3.scale.linear().range([height, 0]);
|
||||||
|
|
||||||
|
// dynamische Werte anzeigen
|
||||||
|
var div = d3.select("body").append("div")
|
||||||
|
.attr("class", "tooltip tooltippfarbe")
|
||||||
|
.style("opacity", 0);
|
||||||
|
|
||||||
|
|
||||||
|
// axis formatting
|
||||||
|
var xAxis = d3.svg.axis().scale(x)
|
||||||
|
.orient("bottom").ticks(6).tickFormat(customTimeFormat);;
|
||||||
|
var yAxis = d3.svg.axis().scale(y)
|
||||||
|
.tickFormat(d3.format(".1f"))
|
||||||
|
.orient("left").ticks(5);
|
||||||
|
var y2Axis = d3.svg.axis().scale(y2)
|
||||||
|
.tickFormat(d3.format(".1f"))
|
||||||
|
.orient("right").ticks(5);
|
||||||
|
|
||||||
|
// line functions ^
|
||||||
|
var valueLine1 = d3.svg.line()
|
||||||
|
.x(function(d) { return x(d.zeit); })
|
||||||
|
.y(function(d) { return y(d.value1); });
|
||||||
|
// line functions 1
|
||||||
|
var valueLine2 = d3.svg.line()
|
||||||
|
.x(function(d) { return x(d.zeit); })
|
||||||
|
.y(function(d) { return y2(d.value2); });
|
||||||
|
|
||||||
|
|
||||||
|
// setup the svg area
|
||||||
|
var svg = d3.select(id)
|
||||||
|
.append("svg")
|
||||||
|
.attr("width", width + margin.left + margin.right)
|
||||||
|
.attr("height", height + margin.top + margin.bottom)
|
||||||
|
.append("g")
|
||||||
|
.attr("transform",
|
||||||
|
"translate(" + margin.left + "," + margin.top + ")");
|
||||||
|
|
||||||
|
// wrangle the data into the correct formats and units
|
||||||
|
data.forEach(function(d) {
|
||||||
|
d.zeit = parseDate(d.zeit);
|
||||||
|
d.value1 = +d.value1;
|
||||||
|
d.value2 = +d.value2;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Scale the range of the data
|
||||||
|
x.domain(d3.extent(data, function(d) { return d.zeit; }));
|
||||||
|
if ( scaleY1 == 0 ) {
|
||||||
|
y.domain([
|
||||||
|
d3.min(data, function(d) {return Math.min(d.value1); })-.25,
|
||||||
|
d3.max(data, function(d) {return Math.max(d.value1); })+.25]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
y.domain([ 0,100 ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( scaleY2 == 0 ) {
|
||||||
|
y2.domain([
|
||||||
|
d3.min(data, function(d) {return Math.min(d.value2); })-.25,
|
||||||
|
d3.max(data, function(d) {return Math.max(d.value2); })+.25]);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
y2.domain([ 0,100 ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
svg.append("path") // Add the value line.1
|
||||||
|
.attr("class", "linecolor1")
|
||||||
|
.attr("d", valueLine1(data));
|
||||||
|
|
||||||
|
svg.append("path") // Add the value line 2
|
||||||
|
.attr("class", "linecolor2")
|
||||||
|
.attr("d", valueLine2(data));
|
||||||
|
|
||||||
|
svg.append("g") // Add the X Axis
|
||||||
|
.attr("class", "x axis")
|
||||||
|
.attr("transform", "translate(0," + height + ")")
|
||||||
|
.call(xAxis);
|
||||||
|
|
||||||
|
svg.append("g") // Add the value axis
|
||||||
|
.attr("class", "y1 axis")
|
||||||
|
.call(yAxis);
|
||||||
|
svg.append("g") // Add the value axis
|
||||||
|
.attr("class", "y2 axis")
|
||||||
|
.attr("transform", "translate(" + width + " ,0)")
|
||||||
|
.call(y2Axis);
|
||||||
|
|
||||||
|
// Y-Achsen-Beschriftung
|
||||||
|
svg.append("text") // Add the text label for the value1 axis
|
||||||
|
.attr("class", "y1")
|
||||||
|
//.attr("transform", "rotate(-90)")
|
||||||
|
.attr("x", 10)
|
||||||
|
.attr("y", 0)
|
||||||
|
//.style("fill", "steelblue")
|
||||||
|
.style("text-anchor", "begin")
|
||||||
|
.text(textY1);
|
||||||
|
|
||||||
|
svg.append("text") // Add the text label for value 2
|
||||||
|
.attr("class", "y2")
|
||||||
|
//.attr("transform", "rotate(-90)")
|
||||||
|
.attr("x", width-10)
|
||||||
|
.attr("y", 0)
|
||||||
|
//.style("fill", "red")
|
||||||
|
.style("text-anchor", "end")
|
||||||
|
.text(textY2);
|
||||||
|
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.attr("class", "grid")
|
||||||
|
.attr("transform", "translate(0," + height + ")")
|
||||||
|
.call(make_x_axis1(x)
|
||||||
|
.tickSize(-height, 0, 0)
|
||||||
|
.tickFormat("")
|
||||||
|
);
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.attr("class", "grid")
|
||||||
|
.call(make_y_axis1(y,"left")
|
||||||
|
.tickSize(-width, 0, 0)
|
||||||
|
.tickFormat("")
|
||||||
|
)
|
||||||
|
// NEU
|
||||||
|
svg.append("g")
|
||||||
|
.attr("class", "grid")
|
||||||
|
.call(make_y_axis1(y,"right")
|
||||||
|
.tickSize(-width, 0, 0)
|
||||||
|
.tickFormat("")
|
||||||
|
)
|
||||||
|
|
||||||
|
// dynamische Wertanzeige
|
||||||
|
svg.selectAll("dot")
|
||||||
|
.data(data)
|
||||||
|
.enter().append("circle")
|
||||||
|
.attr("r", 2)
|
||||||
|
.attr("cx", function(d) { return x(d.zeit); })
|
||||||
|
.attr("cy", function(d) { return y(d.value1); })
|
||||||
|
.on("mouseover", function(d) {
|
||||||
|
div.transition()
|
||||||
|
.duration(100)
|
||||||
|
.style("opacity", .9);
|
||||||
|
div .html(formatTimeTooltipp(d.zeit) + "<br/>" + d.value1 + units1 + "<br/>" + d.value2 + units2)
|
||||||
|
.style("left", (d3.event.pageX) + "px")
|
||||||
|
.style("top", (d3.event.pageY - 28) + "px");
|
||||||
|
})
|
||||||
|
.on("mouseout", function(d) {
|
||||||
|
div.transition()
|
||||||
|
.duration(500)
|
||||||
|
.style("opacity", 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
230
mysql_php/dbutil.php
Normal file
230
mysql_php/dbutil.php
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Testprogramm zur Erzeugung einer Grafik
|
||||||
|
* mit der Bibliothek d3js.org
|
||||||
|
* Die Daten werden aus einer Datenbank gelesen
|
||||||
|
* DB: wetter
|
||||||
|
* Tabelle: outdoor (id, time, temperature, pressure, humidity)
|
||||||
|
*
|
||||||
|
* Die Ausgabe der Daten am oberen Rand dient nur der Kontrolle
|
||||||
|
* und kann durch auskommentieren der Zeile (direkt unterhalb von body)
|
||||||
|
* entfernt werden.
|
||||||
|
*
|
||||||
|
* Oktober2016
|
||||||
|
*/
|
||||||
|
|
||||||
|
$hostname = 'localhost';
|
||||||
|
$username = 'xxxxxxx';
|
||||||
|
$password = 'xxxxxxx';
|
||||||
|
$table = 'outdoor';
|
||||||
|
$dbname = "wetter";
|
||||||
|
|
||||||
|
$anzahl = 48;
|
||||||
|
if (isset($_GET["dauer"])) $anzahl = $_GET["dauer"];
|
||||||
|
|
||||||
|
// Verwendete SQL-Abfragen
|
||||||
|
// aktuelle Werte
|
||||||
|
$sql1 = "SELECT * from $table ORDER BY time DESC LIMIT 1";
|
||||||
|
|
||||||
|
if ($anzahl == 0) $a =""; else $a = " limit $anzahl";
|
||||||
|
$sql = "select * from (select * from $table order by time desc $a) as tab order by time";
|
||||||
|
|
||||||
|
// Daten für tabellarische Anzeige
|
||||||
|
$sql2 = "select * from $table order by time DESC $a";
|
||||||
|
|
||||||
|
// Mittelwert für den ausgewählten Zeitraum
|
||||||
|
$sql2a = "select avg(t.temperature) as avgT, avg(t.pressure) as avgP, avg(t.humidity) as avgH from (SELECT * FROM $table ORDER BY time DESC $a) AS t";
|
||||||
|
|
||||||
|
// Zeit der letzten Messung
|
||||||
|
$sqlTime = "SELECT time FROM $table ORDER BY time DESC LIMIT 1";
|
||||||
|
|
||||||
|
|
||||||
|
function getJSON_Data() {
|
||||||
|
global $hostname;
|
||||||
|
global $username;
|
||||||
|
global $password;
|
||||||
|
global $dbname;
|
||||||
|
global $sql;
|
||||||
|
try {
|
||||||
|
$dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
|
||||||
|
|
||||||
|
// *** The SQL SELECT statement *** /
|
||||||
|
$sth = $dbh->prepare($sql);
|
||||||
|
$sth->execute();
|
||||||
|
|
||||||
|
// Fetch all of the remaining rows in the result set * /
|
||||||
|
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
// ** close the database connection *** /
|
||||||
|
$dbh = null;
|
||||||
|
}
|
||||||
|
catch(PDOException $e) {
|
||||||
|
echo $e->getMessage();
|
||||||
|
}
|
||||||
|
|
||||||
|
$json_data = json_encode($result);
|
||||||
|
return $json_data;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getJSON_Data1($sq) {
|
||||||
|
global $hostname;
|
||||||
|
global $username;
|
||||||
|
global $password;
|
||||||
|
global $dbname;
|
||||||
|
global $sql;
|
||||||
|
try {
|
||||||
|
$dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password);
|
||||||
|
|
||||||
|
// *** The SQL SELECT statement *** /
|
||||||
|
$sth = $dbh->prepare($sq);
|
||||||
|
//$sth = $dbh->prepare("SELECT `temperatur`, `luftdruck`,`luftfeuchtigkeit`, `zeit` FROM `wetter` order by `zeit`");
|
||||||
|
$sth->execute();
|
||||||
|
|
||||||
|
// Fetch all of the remaining rows in the result set * /
|
||||||
|
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
// ** close the database connection *** /
|
||||||
|
$dbh = null;
|
||||||
|
}
|
||||||
|
catch(PDOException $e) {
|
||||||
|
echo $e->getMessage();
|
||||||
|
}
|
||||||
|
|
||||||
|
$json_data = json_encode($result);
|
||||||
|
return $json_data;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function doQuery($sql) {
|
||||||
|
global $hostname;
|
||||||
|
global $username;
|
||||||
|
global $password;
|
||||||
|
global $dbname;
|
||||||
|
$link = mysqli_connect($hostname, $username, $password, $dbname);
|
||||||
|
if (mysqli_connect_errno()) {
|
||||||
|
printf("Connect failed: %s\n", mysqli_connect_error());
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
if ($result = mysqli_query($link, $sql)) {
|
||||||
|
return $result;
|
||||||
|
}
|
||||||
|
else return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLastTime() {
|
||||||
|
global $sqlTime;
|
||||||
|
$zeit = "";
|
||||||
|
$result = doQuery($sqlTime);
|
||||||
|
if ($result != null) {
|
||||||
|
$obj = mysqli_fetch_object($result);
|
||||||
|
$zeit = $obj->time;
|
||||||
|
}
|
||||||
|
mysqli_free_result($result); // free result set
|
||||||
|
return $zeit;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAktuelleWerte($dauer) {
|
||||||
|
global $sql1;
|
||||||
|
global $sql2;
|
||||||
|
global $sql2a;
|
||||||
|
$html = "";
|
||||||
|
$zeit = ""; // aktuelle Zeit
|
||||||
|
$tA = ""; // aktuelle Temperatur
|
||||||
|
$pA = "";
|
||||||
|
$hA = "";
|
||||||
|
// result hat max. 1 Wert
|
||||||
|
$result = doQuery($sql1);
|
||||||
|
$dauer = $dauer / 72;
|
||||||
|
if ($dauer == 1) $dauer .= " Tag"; else $dauer .= " Tage";
|
||||||
|
|
||||||
|
if ($result != null) {
|
||||||
|
//while ($obj = mysqli_fetch_object($result)) {
|
||||||
|
$obj = mysqli_fetch_object($result);
|
||||||
|
$zeit = $obj->time;
|
||||||
|
$tA = $obj->temperature;
|
||||||
|
$pA = $obj->pressure;
|
||||||
|
$hA = $obj->humidity;
|
||||||
|
}
|
||||||
|
mysqli_free_result($result); // free result set
|
||||||
|
|
||||||
|
|
||||||
|
// Mittelwerte -- max. 1 Ergebniszeile
|
||||||
|
$result1 = doQuery($sql2a);
|
||||||
|
if ($result1 != null) {
|
||||||
|
$obj = mysqli_fetch_object($result1);
|
||||||
|
$avgT = $obj->avgT;
|
||||||
|
$avgP = $obj->avgP;
|
||||||
|
$avgH = $obj->avgH;
|
||||||
|
}
|
||||||
|
mysqli_free_result($result); // free result set
|
||||||
|
|
||||||
|
|
||||||
|
// jetzt min-max-Werte
|
||||||
|
$tmin = 100; $tmax = -100; // Temperatur
|
||||||
|
$pmin = 2000; $pmax = 0; // Luftdruck
|
||||||
|
$lmin = 100; $lmax = 0; // Luftfeuchtigkeit
|
||||||
|
$result = doQuery($sql2);
|
||||||
|
if ($result != null) {
|
||||||
|
while ($obj = mysqli_fetch_object($result)) {
|
||||||
|
if ($obj->temperature < $tmin) $tmin = $obj->temperature;
|
||||||
|
if ($obj->temperature > $tmax) $tmax = $obj->temperature;
|
||||||
|
if ($obj->pressure < $pmin) $pmin = $obj->pressure;
|
||||||
|
if ($obj->pressure > $pmax) $pmax = $obj->pressure;
|
||||||
|
if ($obj->humidity < $lmin) $lmin = $obj->humidity;
|
||||||
|
if ($obj->humidity > $lmax) $lmax = $obj->humidity;
|
||||||
|
}
|
||||||
|
mysqli_free_result($result); // free result set
|
||||||
|
}
|
||||||
|
|
||||||
|
$html = "<p>letzter Messwert um <b>$zeit</b>";
|
||||||
|
$html .= " · Zeitraum: <b>$dauer</b></p>";
|
||||||
|
$html = "<div class='messwert'> <div class='text'>°C</div> <div class='value'>";
|
||||||
|
$html .= sprintf("<div class='aktuell'>T = %6.2f °C </div>",$tA);
|
||||||
|
$html .= sprintf("<div class='min'>min = %6.2f °C </div>",$tmin);
|
||||||
|
$html .= sprintf("<div class='max'>max = %6.2f °C </div>",$tmax);
|
||||||
|
$html .= sprintf("<div class='avg'>avg = %6.2f °C </div>",$avgT);
|
||||||
|
$html .= "</div> </div>";
|
||||||
|
|
||||||
|
$html .= "<div class='messwert'> <div class='text'>Pa</div> <div class='value'>";
|
||||||
|
$html .= sprintf("<div class='aktuell'>p = %6.2f hPa </div>",$pA);
|
||||||
|
$html .= sprintf("<div class='min'>min = %6.2f hPa </div>",$pmin);
|
||||||
|
$html .= sprintf("<div class='max'>max = %6.2f hPa </div>",$pmax);
|
||||||
|
$html .= sprintf("<div class='avg'>avg = %6.2f hPa </div>",$avgP);
|
||||||
|
$html .= "</div> </div>";
|
||||||
|
|
||||||
|
$html .= "<div class='messwert'> <div class='text'>%</div> <div class='value'>";
|
||||||
|
$html .= sprintf("<div class='aktuell'>h = %6.2f % </div>",$hA);
|
||||||
|
$html .= sprintf("<div class='min'>min = %6.1f % </div>",$lmin);
|
||||||
|
$html .= sprintf("<div class='max'>max = %6.1f % </div>",$lmax);
|
||||||
|
$html .= sprintf("<div class='avg'>avg = %6.1f % </div>",$avgH);
|
||||||
|
$html .= "</div> </div>";
|
||||||
|
$html .= "<br clear='all' />";
|
||||||
|
|
||||||
|
mysqli_close($link); // close connection
|
||||||
|
return $html;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getDaten() {
|
||||||
|
global $sql2;
|
||||||
|
$html = "";
|
||||||
|
$result = doQuery($sql2);
|
||||||
|
|
||||||
|
$html .= "<pre>";
|
||||||
|
$html .= sprintf ("%-20s %-8s %-10s %-5s (%) \n", "Zeit", "Temperatur","Luftdruck","Luftfeuchtigkeit");
|
||||||
|
$html .= "-----------------------------------------------------------------------\n";
|
||||||
|
if ($result != null) {
|
||||||
|
while ($obj = mysqli_fetch_object($result)) {
|
||||||
|
$html .= sprintf ("%s %6.2f °C %8.2f hPa %5d % \n", $obj->time, $obj->temperature, $obj->pressure, $obj->humidity);
|
||||||
|
}
|
||||||
|
mysqli_free_result($result); // free result set
|
||||||
|
} else { $html .= "NO - error bei query";}
|
||||||
|
$html .= "</pre>";
|
||||||
|
mysqli_close($link); // close connection
|
||||||
|
return $html;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
28
mysql_php/upload.php
Normal file
28
mysql_php/upload.php
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
if ( isset($_GET["m"])) { $m = $_GET["m"]; } else { exit(); }
|
||||||
|
if ( isset($_GET["t"])) { $t = $_GET["t"]; } else { exit(); }
|
||||||
|
if ( isset($_GET["p"])) { $p = $_GET["p"]; } else { exit(); }
|
||||||
|
if ( isset($_GET["f"])) { $f = $_GET["f"]; } else { exit(); }
|
||||||
|
|
||||||
|
$link = mysqli_connect("localhost", "xxxxxxx", "xxxxxxx", "$m");
|
||||||
|
if (mysqli_connect_errno()) {
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prepare an insert statement */
|
||||||
|
$ins = "INSERT INTO $m (time, temperature, pressure, humidity) VALUES (now(),?,?,?);";
|
||||||
|
$stmt = mysqli_prepare($link, $ins);
|
||||||
|
|
||||||
|
mysqli_stmt_bind_param($stmt, "ddd", $t, $p, $f);
|
||||||
|
|
||||||
|
/* Execute tne statement */
|
||||||
|
mysqli_stmt_execute($stmt);
|
||||||
|
|
||||||
|
/* close statement */
|
||||||
|
mysqli_stmt_close($stmt);
|
||||||
|
|
||||||
|
/* close connection */
|
||||||
|
mysqli_close($link); // close connection
|
||||||
|
|
||||||
|
?>
|
||||||
228
mysql_php/wetter.css
Normal file
228
mysql_php/wetter.css
Normal file
@ -0,0 +1,228 @@
|
|||||||
|
|
||||||
|
body { font: 12px Arial;}
|
||||||
|
|
||||||
|
path {
|
||||||
|
stroke: steelblue;
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axis path,
|
||||||
|
.axis line {
|
||||||
|
fill: none;
|
||||||
|
stroke: grey;
|
||||||
|
stroke-width: 1;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.grid .tick {
|
||||||
|
stroke: lightgrey;
|
||||||
|
stroke-opacity: 0.7;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
.grid path {
|
||||||
|
stroke-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **************************************************
|
||||||
|
* Darstellung Tooltipp Grundfarbe: lightsteelblue
|
||||||
|
* **************************************************
|
||||||
|
* */
|
||||||
|
|
||||||
|
div.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 2px;
|
||||||
|
font: 12px sans-serif;
|
||||||
|
background: lightsteelblue;
|
||||||
|
border: 1px solid lightgray;
|
||||||
|
border-radius: 8px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **************************************************
|
||||||
|
* Darstellung Temperatur Grundfarbe: lightsteelblue
|
||||||
|
* **************************************************
|
||||||
|
* */
|
||||||
|
#graphTemperature {
|
||||||
|
border: 3px solid #7070ED;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperature .title {
|
||||||
|
background: #7070ED;
|
||||||
|
color: white;
|
||||||
|
font-size:2em;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperature .y {
|
||||||
|
fill: steelblue;
|
||||||
|
background: #7070ED;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperature .linecolor {
|
||||||
|
stroke: #7070ED;
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperature .tooltip1 {
|
||||||
|
background: lightsteelblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **************************************************
|
||||||
|
* Darstellung Luftdruck Grundfarbe: dunkelrot
|
||||||
|
* **************************************************
|
||||||
|
* */
|
||||||
|
#graphPressure {
|
||||||
|
border: 3px solid Gray;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphPressure .title {
|
||||||
|
background: #BB0202;
|
||||||
|
color: white;
|
||||||
|
font-size:2em;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphPressure .y {
|
||||||
|
fill: #BB0202
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphPressure .linecolor {
|
||||||
|
stroke: #BB0202;
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphPressure .tooltippfarbe{
|
||||||
|
background: #DCAFAF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **************************************************
|
||||||
|
* Darstellung Luftfeuchtigkeit Grundfarbe: lindgrün
|
||||||
|
* **************************************************
|
||||||
|
* */
|
||||||
|
|
||||||
|
|
||||||
|
#graphHumidity {
|
||||||
|
border: 3px solid #BDE7BD;
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphHumidity .title {
|
||||||
|
background: #BDE7BD;
|
||||||
|
color: gray;
|
||||||
|
font-size:2em;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphHumidity .y {
|
||||||
|
fill: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphHumidity .linecolor {
|
||||||
|
stroke: green;
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphHumidity .tooltip {
|
||||||
|
background: #BDE7BD;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **************************************************
|
||||||
|
* Darstellung TT + P Grundfarbe: hellgrau
|
||||||
|
* **************************************************
|
||||||
|
* */
|
||||||
|
|
||||||
|
|
||||||
|
#graphTemperaturePressure {
|
||||||
|
border: 3px solid #BDE7BD;
|
||||||
|
width: 1220px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperaturePressure .title {
|
||||||
|
background: lightgray;
|
||||||
|
color: black;
|
||||||
|
font-size:2em;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperaturePressure .y1 {
|
||||||
|
fill: blue
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperaturePressure .y2 {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperaturePressure .linecolor1 {
|
||||||
|
stroke: lightsteelblue;
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperaturePressure .linecolor2 {
|
||||||
|
stroke: red;
|
||||||
|
stroke-width: 2;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphTemperaturePressure .tooltip {
|
||||||
|
background: #BDE7BD;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* *************************************************
|
||||||
|
* Darstellung aktueller Werte
|
||||||
|
* *************************************************
|
||||||
|
*/
|
||||||
|
.messwert { float:left;
|
||||||
|
margin-right: 2px;
|
||||||
|
margin-left: 2px;
|
||||||
|
border: 1px solid gray;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-left: 0px;
|
||||||
|
/* width:300px; */
|
||||||
|
/* background-image: url(celsius.png); */
|
||||||
|
height: 85px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text { float:left;
|
||||||
|
font-size:5em;
|
||||||
|
padding-left:0;
|
||||||
|
color:lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {padding-left:85px;
|
||||||
|
margin-top:8px;
|
||||||
|
font-size:1.2em;
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min {margin:2px; background-color:blue; color:white;}
|
||||||
|
|
||||||
|
.max {margin:2px; background-color:red; color:white;}
|
||||||
|
|
||||||
|
.avg {margin:2px; background-color:green; color:white;}
|
||||||
|
|
||||||
|
.aktuell {margin:2px; background-color:yellow; color:black;}
|
||||||
Loading…
Reference in New Issue
Block a user