Temperatur Diagramm erstellen mit Google Charts

raspberry.tips 23.11.2014 Hausautomatisierung

In meinen bisherigen Projekten habe ich für die Visualisierung der Daten bisher immer verschiedene lokale Libraries verwendet mit dem Effekt das diese entweder sehr kompliziert waren oder einfach nicht den Umfang anbieten den ich mir gewünscht habe. Diese Problemstellung hatte ich auch in meinem Temperatur Sensor Projekt.

Endlich habe ich eine passende Lösung für mich gefunden und zwar die Google Chart Tools, diese haben folgende Vorteile:

Wir brauchen am Webserver des Raspberry Pi keine Libraries mehr, es reicht PHP und eine Datenbank als Datenquelle
Die Formatierung der Daten wird bei den richtigen Datentypen von Google übernommen
Es gibt etliche Diagramme, Vorlagen und Beispiele
Die Charts sind interaktiv und fast unbegrenzt anpassbar
Wir müssen nicht immer einzeln Tages, Wochen, Monats und Jahres Diagramme erstellen

Allerdings sei gesagt das man auch hier Zeit und Entwicklungserfahrung benötigt um die API zu verstehen und das gewünschte Ergebnis zu erzielen. Erwähnt sei natürlich noch die nicht unumstrittene Daten sammelnde Krake Google , es sollte aber jeder für sich selbst entscheiden welche Tools er verwenden. Bei diesen beiden Beispielen werden die Daten NICHT an Google übertragen, die Charts werden in eurem Browser generiert, selbst wenn Daten übertragen werden versichert Google diese direkt nach der Generierung zu löschen und nicht weiter zu verwenden.

Update: Die Methode via Google Charts ist auch recht komplex schaut auch daher am Besten noch das EmonCMS an und entscheidet selbst welche ihr verwenden wollt, alle Methoden benötigen allerdings etwas Wissen rund um die eingesetzten Technologien.

Ausgabe als normales Liniendiagramm

Ausgabe als Diagram vom Typ AnnotatedTimeLine

Wie funktioniert das ganze?

Wie ich bereits erwähnt habe basieren die Diagramme auf den Google Charts. Wir sammeln auf unserem Raspberry Pi aus der Datenbank die benötigten Werte zusammen, in meinem Fall ist es eine Sqlite Datenbank, bringen Sie in das in der Google API definierte DataTable Format und generieren mit den passenden JavaScript Libraries im Browser (nicht auf dem Server) die Diagramme. Ich habe mich anstelle von JSON für das Data Table Format entschieden da mit diesem eine automatische Skalierung der X-Achse möglich ist.

Der Code zum generieren der Diagramme

Die passenden Informationen zum Setup des Webservers und zur Einrichtung des Perl Scripts zur Datenübermittlung findet ihr in meinem Raspberry Pi Projekt Funksensoren selbst bauen.

Die Dateien könnt ihr auch direkt herunterladen www-sensor.

index.php

Die index.php enthält neben den notwendigen SQL Abfragen und dem Auswahl Dialog den notwendigen Java Script Code zum generieren des Diagramm. Es wird eine Listbox mit möglichen Sensoren angezeigt für welche wir dann ein Diagramm generieren.

<?php
//------------------- Config und Funktionen einbinden --------------------------
require_once("config.php");
require_once("functions.php");

//------------------------ PHP Settings ----------------------------------------
ini_set('track_errors', 1);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set("memory_limit","64M");
ini_set("max_execution_time","30");
@ob_implicit_flush(true);
@ob_end_flush();
$_SELF=$_SERVER['PHP_SELF'];

if (!file_exists($DBfile)) { echo "<center>Database missing!</center>n"; _exit(); }
$SelectedNodes = isset($_POST["nodeID"]) ? $_POST["nodeID"] : "";

//------------------------ Daten für Grafik holen ----------------------------------------
	//Aus selektierter Node DataTable für Chart generieren
if (!empty($SelectedNodes))
{
	$SQL="SELECT supplyV,temp,hum,datetime(time,'unixepoch') AS timestamp FROM werte WHERE nodeID='".$SelectedNodes."'";
	
	$db = db_con($DBfile);
	$q = db_query($SQL);

	//Zeilen Header definieren, werden im Chart angezeigt
	$data = "var data = new google.visualization.DataTable();n"
			."data.addColumn('datetime', 'Timestamp');n"
			."data.addColumn('number', 'Volt');n"
			."data.addColumn('number', 'Feuchtigkeit');n"
			."data.addColumn('number', 'Temperatur');nn"
			
			."data.addRows([n";
	
	while ($res = $q->fetch(PDO::FETCH_ASSOC)) {
		
		$temp = (int)$res['temp'] / 100;
		$hum = (int)$res['hum'] / 100;
		$pwr = (int)$res['supplyV'] / 1000;
		$timestamp = $res['timestamp'];
		
		$data = $data."  [new Date('".$timestamp."'), ".$pwr.", ".$hum.", ".$temp."],n";
	}
	$data =	$data."[new Date('2014-11-22 16:01:29'), 4.434, 59, 19.79]";
	$data = $data."]);n";
}

?>

<!-- HTML & Java Script für das Chart -->

<html>
<head>
	<title>http://raspberry.tips - Temperatur Ausgabe</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	
	<!-- Load jQuery -->
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    
	<!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>	
	<script type="text/javascript">
		google.load("visualization", "1", { packages: ["annotatedtimeline"] });
		google.setOnLoadCallback(drawChart);

		function drawChart() {
			<!-- Generierte Data Table integieren -->
			<?php echo $data; ?>
			
			<!-- Chart Optionen -->
			var options = {
				title: 'Raspberry.Tips Daten',
				backgroundColor: {stroke:'black', fill:'#f2f2f2', strokeSize: 0},
				displayZoomButtons: true,
				hAxis: { format: 'dd.MM. HH:mm' }				
			};

			<!-- Chart vom Typ  AnnotatedTimeLine generieren-->
			var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
			chart.draw(data, options);
		}
	</script>
</head>
<body>

<?php

//----------------- Aktuelle Werte Ausgeben ------------------------------------
echo "<center>n";
echo "<table border='0'>n<tr>";

$db = db_con($DBfile);
$q = db_query("SELECT temp,place FROM werte WHERE id IN (SELECT MAX(id) FROM werte GROUP BY nodeID)");

while ($res = $q->fetch(PDO::FETCH_ASSOC)) {

	$temp = $res['temp'] / 100;
	$arrayTemp = explode(".", $temp);

	echo "<td>n<div align='center'>n";
	echo "	<h3>".$res['place']."</h3>n";
	echo "	<div class='container'>n";
	echo "		<div class='de'>n";
	echo "			<div class='den'>n";
	echo "			  <div class='dene'>n";
	echo "				<div class='denem'>n";
	echo "				  <div class='deneme'>n";
	echo "						".$arrayTemp[0]."<span>".$arrayTemp[1]."</span>";
	echo "				  </div>n";
	echo "				</div>n";
	echo "			  </div>n";
	echo "			</div>n";
	echo "		</div>n";
	echo "	</div>n";
	echo "</div>n</td>n"  ;
}
unset($res);
echo "</tr>n</table>n";
echo "</center>n";
//-----------------------------------------------------------------------------------

//----------------- Knoten zur Auswahl holen ------------------------------------
echo "<center>n";
echo "<br/>n";
echo "<br/>n";
echo "<h3>Sensordaten anzeigen</h3>n";
echo "<form action='' name='sensor' method='POST'>n";
echo "<select name='nodeID'>";

$i=0;
$s=" ";
$MAXROW=10;

$db = db_con($DBfile);
$q = db_query("SELECT nodeID,place FROM werte WHERE 1 GROUP BY nodeID ORDER BY nodeID ASC");

while ($res = $q->fetch(PDO::FETCH_ASSOC)) {
	echo "<option value='".$res['nodeID']."'>".$res['place']."</option>'";
}

unset($FoundChecked);
unset($node_id);
unset($res);

echo "</select>n<br><br>n<input type='submit' value='Anzeigen'>n</form>";
echo "</center>n";
?>
<center>
<!-- Chart DIV -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</center>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

//------------------- Config und Funktionen einbinden --------------------------

require_once("config.php");

require_once("functions.php");

//------------------------ PHP Settings ----------------------------------------

ini_set('track_errors', 1);

ini_set('display_errors', 1);

ini_set('log_errors', 1);

ini_set("memory_limit","64M");

ini_set("max_execution_time","30");

@ob_implicit_flush(true);

@ob_end_flush();

$_SELF=$_SERVER['PHP_SELF'];

if (!file_exists($DBfile)) { echo "Database missing!n"; _exit(); }

$SelectedNodes = isset($_POST["nodeID"]) ? $_POST["nodeID"] : "";

//------------------------ Daten für Grafik holen ----------------------------------------

//Aus selektierter Node DataTable für Chart generieren

if (!empty($SelectedNodes))

{

$SQL="SELECT supplyV,temp,hum,datetime(time,'unixepoch') AS timestamp FROM werte WHERE nodeID='".$SelectedNodes."'";

$db = db_con($DBfile);

$q = db_query($SQL);

//Zeilen Header definieren, werden im Chart angezeigt

$data = "var data = new google.visualization.DataTable();n"

."data.addColumn('datetime', 'Timestamp');n"

."data.addColumn('number', 'Volt');n"

."data.addColumn('number', 'Feuchtigkeit');n"

."data.addColumn('number', 'Temperatur');nn"

."data.addRows([n";

while ($res = $q->fetch(PDO::FETCH_ASSOC)) {

$temp = (int)$res['temp'] / 100;

$hum = (int)$res['hum'] / 100;

$pwr = (int)$res['supplyV'] / 1000;

$timestamp = $res['timestamp'];

$data = $data." [new Date('".$timestamp."'), ".$pwr.", ".$hum.", ".$temp."],n";

}

$data = $data."[new Date('2014-11-22 16:01:29'), 4.434, 59, 19.79]";

$data = $data."]);n";

}

http://raspberry.tips - Temperatur Ausgabe

//----------------- Aktuelle Werte Ausgeben ------------------------------------

echo "n";

$db = db_con($DBfile);

$q = db_query("SELECT temp,place FROM werte WHERE id IN (SELECT MAX(id) FROM werte GROUP BY nodeID)");

while ($res = $q->fetch(PDO::FETCH_ASSOC)) {

$temp = $res['temp'] / 100;

$arrayTemp = explode(".", $temp);

echo "

n" ;

}

unset($res);

echo "

n";

echo "

".$res['place']."

n";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo " ".$arrayTemp[0]."".$arrayTemp[1]."";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo "

n";

echo "n";

//-----------------------------------------------------------------------------------

//----------------- Knoten zur Auswahl holen ------------------------------------

echo "n";

echo "
n";

echo "

Sensordaten anzeigen

n";

echo "

echo "n

nn";

echo "n";

functions.php

Das Functions Script enthält wiederverwendbare Funktionen, in meinem Fall die Methoden zur Abfrage der SQL-Lite Datenbank

<?php
function _exit() {
    echo "</body>";
    echo "</html>";
    exit();
}

// DB connect
function db_con($DBfile) {
    if (!$db = new PDO("sqlite:$DBfile")) {
        $e="font-size:23px; text-align:left; color:firebrick; font-weight:bold;";
        echo "<b style='".$e."'>Fehler beim öffnen der Datenbank:</b><br/>";
        echo "<b style='".$e."'>".$db->errorInfo()."</b><br/>";
        die;
    }
    $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    return $db;
}

// DB Query
function db_query($sql) {
    global $db;
    $result = $db->query($sql) OR db_error($sql,$db->errorInfo());
    return $result;
}

//Function to handle database errors
function db_error($sql,$error) {
    die('<small><font color="#ff0000"><b>[DB ERROR]</b></font></small><br/><br/><font color="#800000"><b>'.$error.'</b><br/><br/>'.$sql.'</font>');
}
?>

function _exit() {

echo "";

exit();

}

// DB connect

function db_con($DBfile) {

if (!$db = new PDO("sqlite:$DBfile")) {

$e="font-size:23px; text-align:left; color:firebrick; font-weight:bold;";

echo "Fehler beim öffnen der Datenbank:
";

echo "".$db->errorInfo()."
";

die;

}

$db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);

$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

return $db;

}

// DB Query

function db_query($sql) {

global $db;

$result = $db->query($sql) OR db_error($sql,$db->errorInfo());

return $result;

}

//Function to handle database errors

function db_error($sql,$error) {

die('[DB ERROR]

'.$error.'

'.$sql.'');

}

config.php

Dieses PHP Script definiert globale Variablen wie zum Beispiel den Pfad zur SQLite Datenbank. Der Pfad zur Datenbankdatei muss sicherlich auf eure Umgebung angepasst werden. Der Security Key und die Namensdefinitionen werden im Script add.php verwendet welches als Schnittelle zwischen Sensor und Datenbank fungiert und die Temperaturwerte in die Datenbank einträgt.

<?php
//------------------------------------------------------------------------------
$DBfile = "/var/www/Sensor/.db.sensors";
$SECURITYKEY = "23338d373027ce83b1f81b9e9563b629";
//------------------------------------------------------------------------------
// $Sensor[<nodeID>] = "<Place>";
$Sensor['19'] = "Wohnzimmer";
$Sensor['20'] = "Garage / Schuppen";
$Sensor['21'] = "Garten";
?>

//------------------------------------------------------------------------------

$DBfile = "/var/www/Sensor/.db.sensors";

$SECURITYKEY = "23338d373027ce83b1f81b9e9563b629";

//------------------------------------------------------------------------------

// $Sensor[] = "";

$Sensor['19'] = "Wohnzimmer";

$Sensor['20'] = "Garage / Schuppen";

$Sensor['21'] = "Garten";

add.php

Dieses Script Bilded die Schnittstelle zwischen der UART Ausgabe der Temperatur Sensoren am Raspberry Pi und dem Webserver bzw. der Datenbank für den Fall das ihr den Webserver und die Datenbank nicht direkt bzw. auf dem selben RasPi speichern möchtet. Gefüttert wird die Schnittstelle von einem Perl Script welches auf der UART Schnittelle alle vom Empfänger übertragenen Temperaturen, Spannungen und Daten zur Luftfeuchtigkeit an dieses Script versendet. Details und das Perl Script findet ihr im ursprünglichen Artikel.

<?php
//------------------------------------------------------------------------------
error_reporting(E_ALL);
ini_set('track_errors', 1);
ini_set('display_errors', 1);
ini_set('log_errors', 1);
//------------------------------------------------------------------------------
require_once("config.php");
require_once("functions.php");
//------------------------------------------------------------------------------

// check if sqlite db file exists else create it..
if (!file_exists($DBfile)) {
    $db = db_con($DBfile);
    $SQL = "CREATE TABLE IF NOT EXISTS werte (id INTEGER PRIMARY KEY,time INT,nodeID INT,place TEXT,supplyV TEXT,temp TEXT,hum TEXT)";
    $create = db_query($SQL);
}

if (!empty($_GET)) {
    $ValidKey = false;
    foreach ($_GET AS $arg => $var) {
        if ($arg == "key" AND $var == $SECURITYKEY) { $ValidKey=true; }
        if ($arg == "node") { $nodeID = $var; }
        if ($arg == "v") { $supplyV = $var; }
        if ($arg == "t") { $temp = $var; }
        if ($arg == "h") { $hum = $var; }
    }
    if (!$ValidKey) { echo "Invalid Key!"; exit(); }

    if ( isset($nodeID) AND isset($supplyV) AND (isset($temp) OR isset($hum)) ) {
        if (!isset($hum)) {
            $SQL = "INSERT INTO werte (time,nodeID,place,supplyV,temp) VALUES ('".time()."','".$nodeID."','".$Sensor[$nodeID]."','".$supplyV."','".$temp."')";
        } else {
            $SQL = "INSERT INTO werte (time,nodeID,place,supplyV,temp,hum) VALUES ('".time()."','".$nodeID."','".$Sensor[$nodeID]."','".$supplyV."','".$temp."','".$hum."')";
        }
        $db = db_con($DBfile);
        $insert = db_query($SQL);
    }
}

?>

//------------------------------------------------------------------------------

error_reporting(E_ALL);

ini_set('track_errors', 1);

ini_set('display_errors', 1);

ini_set('log_errors', 1);

//------------------------------------------------------------------------------

require_once("config.php");

require_once("functions.php");

//------------------------------------------------------------------------------

// check if sqlite db file exists else create it..

if (!file_exists($DBfile)) {

$db = db_con($DBfile);

$SQL = "CREATE TABLE IF NOT EXISTS werte (id INTEGER PRIMARY KEY,time INT,nodeID INT,place TEXT,supplyV TEXT,temp TEXT,hum TEXT)";

$create = db_query($SQL);

}

if (!empty($_GET)) {

$ValidKey = false;

foreach ($_GET AS $arg => $var) {

if ($arg == "key" AND $var == $SECURITYKEY) { $ValidKey=true; }

if ($arg == "node") { $nodeID = $var; }

if ($arg == "v") { $supplyV = $var; }

if ($arg == "t") { $temp = $var; }

if ($arg == "h") { $hum = $var; }

}

if (!$ValidKey) { echo "Invalid Key!"; exit(); }

if ( isset($nodeID) AND isset($supplyV) AND (isset($temp) OR isset($hum)) ) {

if (!isset($hum)) {

$SQL = "INSERT INTO werte (time,nodeID,place,supplyV,temp) VALUES ('".time()."','".$nodeID."','".$Sensor[$nodeID]."','".$supplyV."','".$temp."')";

} else {

$SQL = "INSERT INTO werte (time,nodeID,place,supplyV,temp,hum) VALUES ('".time()."','".$nodeID."','".$Sensor[$nodeID]."','".$supplyV."','".$temp."','".$hum."')";

}

$db = db_con($DBfile);

$insert = db_query($SQL);

}

style.css

Styles für die Seite als extra css

@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600);
html, body { height: 100%; }

body { background: #f2f2f2; font-size: 8pt; color: black; font-family: Verdana,arial,helvetica,serif; margin: 0 0 0 0; }

.style1 { color: #999999; font-weight: bold; }

.container { width: 200px; margin: 10px auto 0; }
.de .den, .de .dene, .de .denem, .de .deneme { position: absolute;  left: 50%; top: 50%; }
.de {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    background-color: transparent;
}
.den {
    position: relative;
    width: 210px;
    height: 210px;
    margin: -105px 0 0 -105px;
    border-radius: 100%;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
    background: #df3341;
    background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
    background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
    position:relative;
}
.dene {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    border-radius: 100%;
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
    background: #f2f6f5;
    background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
    background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
    background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}
.denem {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 100%;
    background: #cbd5d6;
    background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
    background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
    padding: 3px 10px 0 10px;
    width: 120px;
    height: 137px;
    display: inline-block;
    margin: -70px 0 0 -70px;
    color: #555;
    text-shadow: 1px 1px 1px white;
    font-family: 'Dosis';
    font-size: 100px;
    font-weight: 400;
    text-align: center;
}
.deneme span { font-size: 30px; font-weight: 200; }
.deneme strong { position: absolute; right: 10px; top: 25px; font-size: 34px; }

@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600);

html, body { height: 100%; }

body { background: #f2f2f2; font-size: 8pt; color: black; font-family: Verdana,arial,helvetica,serif; margin: 0 0 0 0; }

.style1 { color: #999999; font-weight: bold; }

.container { width: 200px; margin: 10px auto 0; }

.de .den, .de .dene, .de .denem, .de .deneme { position: absolute; left: 50%; top: 50%; }

.de {

position: relative;

width: 240px;

height: 240px;

border-radius: 100%;

box-shadow: 0 0 10px rgba(0, 0, 0, .1);

background-color: transparent;

}

.den {

position: relative;

width: 210px;

height: 210px;

margin: -105px 0 0 -105px;

border-radius: 100%;

box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);

background: #df3341;

background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));

background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);

background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);

position:relative;

}

.dene {

width: 180px;

height: 180px;

margin: -90px 0 0 -90px;

border-radius: 100%;

box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);

background: #f2f6f5;

background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));

background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);

background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);

}

.denem {

width: 160px;

height: 160px;

margin: -80px 0 0 -80px;

border-radius: 100%;

background: #cbd5d6;

background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));

background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);

}

.deneme {

padding: 3px 10px 0 10px;

width: 120px;

height: 137px;

display: inline-block;

margin: -70px 0 0 -70px;

color: #555;

text-shadow: 1px 1px 1px white;

font-family: 'Dosis';

font-size: 100px;

font-weight: 400;

text-align: center;

}

.deneme span { font-size: 30px; font-weight: 200; }

.deneme strong { position: absolute; right: 10px; top: 25px; font-size: 34px; }

raspberry.tips Raspberry Pi Projekte und Tutorials

Temperatur Diagramm erstellen mit Google Charts

Wie funktioniert das ganze?

Der Code zum generieren der Diagramme

".$res['place']."

Sensordaten anzeigen

Weitere Beiträge

Tatsächliche Einsparung meines Balkonkraftwerk im April

Arduino MP3 Player / Sound-Maschine bauen

Die Lieferschwierigkeiten und Preise des Raspberry Pi – Rock Pi 4 als Alternative?

Balkonkraftwerk / Photovoltaik Wechselrichter Ertrag auslesen – ESP32 Micro Controller mit OpenDTU

Raspberry Pi MPEG2 Lizenz Hack / Patch

Details zum neuen Raspberry Pi 3B+

PiServer – Raspberry Pi ohne SD-Karte über das Netzwerk starten

Smartmeter Stromzähler mit dem Raspberry Pi auslesen und Stromverbrauch aufzeichnen

Low-Cost WLAN Temperatursensoren mit NodeMCU ESP8266 im Selbstbau

Speicher auf dem Raspberry Pi aufräumen

OwnCloud 9 auf dem Raspberry Pi 2 und 3 mit Apache

Raspberry Pi – Autostart von Skripten und Programmen einrichten

IPTV AddOns für Kodi – Live-TV mit dem Raspberry Pi und OpenELEC

Live TV mit dem Raspberry Pi 2 und OpenELEC – TvHeadend einrichten

Raspberry Pi Einsteiger Guide – Konfigurieren – Teil 3

Raspberry Pi – Pilight mit 433MHz Modulen zur Hausautomatisierung

Raspberry Pi 3 mit Kodi und Amazon Prime Video einrichten – LibreELEC

Raspberry Pi Fernsehen mit TvHeadend

Hausautomatisierung mit FHEM Teil 1 – CUL Stick Selbstbau – 868MHz CUL am Raspberry Pi

OwnCloud 8 auf dem Raspberry Pi 2 & 1