<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sensordaten anzeigen &#8211; bubuxblog</title>
	<atom:link href="https://www.bubuxblog.de/tag/sensordaten-anzeigen/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.bubuxblog.de</link>
	<description></description>
	<lastBuildDate>Tue, 10 Apr 2018 15:48:29 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>Webseite zur Darstellung der Sensordaten</title>
		<link>https://www.bubuxblog.de/webseite-zur-darstellung-der-sensordaten/</link>
					<comments>https://www.bubuxblog.de/webseite-zur-darstellung-der-sensordaten/#respond</comments>
		
		<dc:creator><![CDATA[diefenbecker]]></dc:creator>
		<pubDate>Mon, 09 Apr 2018 18:08:04 +0000</pubDate>
				<category><![CDATA[Haustechnik]]></category>
		<category><![CDATA[Heimautomatisierung]]></category>
		<category><![CDATA[Odroid]]></category>
		<category><![CDATA[Programmierung]]></category>
		<category><![CDATA[Raspberry Pi]]></category>
		<category><![CDATA[Gaszähler]]></category>
		<category><![CDATA[Hausautomatisierung]]></category>
		<category><![CDATA[Homeautomation]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Sensordaten anzeigen]]></category>
		<category><![CDATA[Webseite]]></category>
		<guid isPermaLink="false">http://blog.bubux.de/?p=1526</guid>

					<description><![CDATA[Da ich in der letzten Zeit sehr oft bezüglich der Erstellung einer Webseite zur Darstellung der Sensordaten (Heizung, Strom, Wasser, Gas, &#8230;) angesprochen wurde, habe ich mich entschlossen eine abgespeckte Variante meiner internen Webseite zu veröffentlichen. Die Webseite nutzt eine ältere Version der Metro UI-Oberfläche als &#8222;Framework&#8220; zur Darstellung der HTML-Seiten, sowie pChart zum Zeichnen [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Da ich in der letzten Zeit sehr oft bezüglich der Erstellung einer Webseite zur Darstellung der Sensordaten (Heizung, Strom, Wasser, Gas, &#8230;) angesprochen wurde, habe ich mich entschlossen eine abgespeckte Variante meiner internen Webseite zu veröffentlichen. Die Webseite nutzt eine ältere Version der <a href="https://metroui.org.ua/" target="_blank" rel="noopener">Metro UI-Oberfläche</a> als &#8222;Framework&#8220; zur Darstellung der HTML-Seiten, sowie <a href="http://www.pchart.net/" target="_blank" rel="noopener">pChart</a> zum Zeichnen der Graphen in den Detailansichten.</p>
<p>Meine Implementierung ist schon etwas älter und auch mit der Zeit gewachsen. Da es sich bei dieser Webseite um ein recht überschaubares Projekt handelt und ich mit dem Ergebnis zufrieden bin, habe ich mir nie die Mühe gemacht die Seite generischer zu gestalten. Daher muss bei nötigen Anpassungen der Code direkt geändert werden und es gibt auch keine Trennung von HTML und PHP, keine durchgehende allumfassende Fehlerbehandlung, evtl. &#8222;unschönes&#8220; HTML usw.</p>
<p>Der Code soll als <strong>Anregung und Grundlage</strong> für eine eigene Seite dienen&#8230;nicht mehr, nicht weniger. Wem´s ausreicht kann es natürlich auch 1:1 übernehmen. Positiv an meiner Lösung finde ich immer noch die Flexibilität in den Auswertungen die direkt auf der Datenbank mittels SQL ausgeführt werden können.</p>
<h3>Die Startseite</h3>
<p><a href="http://blog.bubux.de/wp-content/uploads/2018/04/index.png"><img fetchpriority="high" decoding="async" class="alignnone wp-image-1537 size-large" src="http://blog.bubux.de/wp-content/uploads/2018/04/index-1024x538.png" alt="Übersicht Webseite Sensordaten" width="768" height="404" srcset="https://www.bubuxblog.de/wp-content/uploads/2018/04/index-1024x538.png 1024w, https://www.bubuxblog.de/wp-content/uploads/2018/04/index-300x158.png 300w, https://www.bubuxblog.de/wp-content/uploads/2018/04/index-768x404.png 768w, https://www.bubuxblog.de/wp-content/uploads/2018/04/index.png 1397w" sizes="(max-width: 768px) 100vw, 768px" /></a></p>
<p>Die Startseite wird mittels &#8222;Meta-Refresh&#8220; alle 180 Sekunden neu geladen und dient der Übersicht der wichtigsten Sensordaten. Mit Klick auf die (verlinkten) Boxen gelangt man jeweils zu einer detaillierteren Übersicht der Sensordaten. In der Übersicht werden keine komplizierten Datenbankauswertungen gemacht. Hier werden die Snapshot-Tabellen mit den aktuellen Werten ausgelesen und einige SQL-Aggregat-Funktionen genutzt. Das ging auch auf einem alten Raspi einigermaßen schnell. Das hängt natürlich von den Tabellengrößen in den Datenbanken ab. Da bei mir einige Tabellen mit den Jahren relativ groß geworden sind (~500k Zeilen), bin ich irgendwann auf einen <a href="http://blog.bubux.de/odroid-c2-vs-raspberry-pi-2/">Odroid</a> umgestiegen.</p>
<p><span id="more-1526"></span></p>
<h3>Übersicht der Außentemperaturen</h3>
<p><a href="http://blog.bubux.de/wp-content/uploads/2018/04/aussentemperatur.png"><img decoding="async" class="alignnone wp-image-1541 size-large" src="http://blog.bubux.de/wp-content/uploads/2018/04/aussentemperatur-1024x606.png" alt="AUssentemperatur Webseite" width="768" height="455" srcset="https://www.bubuxblog.de/wp-content/uploads/2018/04/aussentemperatur-1024x606.png 1024w, https://www.bubuxblog.de/wp-content/uploads/2018/04/aussentemperatur-300x178.png 300w, https://www.bubuxblog.de/wp-content/uploads/2018/04/aussentemperatur-768x455.png 768w, https://www.bubuxblog.de/wp-content/uploads/2018/04/aussentemperatur.png 1395w" sizes="(max-width: 768px) 100vw, 768px" /></a></p>
<p>Die Übersicht der Außentemperatur wird aus den Daten des Außenfühlers der Viessmann-Heizung generiert. Die Übersichten für anderen Sensoren sehen analog dieser Ansicht aus.</p>
<p>&nbsp;</p>
<h3>Die Übersicht der Heizungsdaten</h3>
<p><a href="http://blog.bubux.de/wp-content/uploads/2018/04/heizung.png"><img decoding="async" class="alignnone size-large wp-image-1543" src="http://blog.bubux.de/wp-content/uploads/2018/04/heizung-1024x610.png" alt="" width="768" height="458" srcset="https://www.bubuxblog.de/wp-content/uploads/2018/04/heizung-1024x610.png 1024w, https://www.bubuxblog.de/wp-content/uploads/2018/04/heizung-300x179.png 300w, https://www.bubuxblog.de/wp-content/uploads/2018/04/heizung-768x458.png 768w, https://www.bubuxblog.de/wp-content/uploads/2018/04/heizung.png 1393w" sizes="(max-width: 768px) 100vw, 768px" /></a></p>
<p>Die Übersicht der Heizungsdaten stellt verschiedene Daten dar die mittels <a href="https://github.com/openv/openv/wiki">openv</a> aus der Heizung ausgelesen werden. Aktuell lese ich mit openv nur aus und setze keine Werte (z.B. Sommer-/Winterumschaltung).</p>
<p>&nbsp;</p>
<h3>Voraussetzung und Grundlagen</h3>
<p>Details zum Auslesen der verschiedenen Sensordaten findet ihr in vorangegangenen Artikeln hier im Blog:</p>
<ul>
<li><a href="http://blog.bubux.de/viessmann-heizung-auslesen/">Viessmann Heizung mittels openv auslesen</a></li>
<li><a href="http://blog.bubux.de/m-bus-wasserzaehler/">M-Bus Wasserzähler auslesen</a></li>
<li><a href="http://blog.bubux.de/gaszaehler-auslesen/">Gaszähler mit Reed auslesen</a></li>
<li><a href="http://blog.bubux.de/raspberry-pi-ehz-auslesen/">Stromzähler mit optischem Lesekopf auslesen</a></li>
</ul>
<p>Die Webseite liest die Datenbanken des Wasserzähler, des Gaszählers, der Heizung und des Stromzählers aus. Folgend nochmal eine Übersicht der Tabellenstrukturen welche auch in den Artikel oben zu finden sind. In MySQL (bzw. MariaDB) habe ich zwei Datenbanken angelegt (vito, haus) mit verschiedenen Tabellen.</p>
<h4>Die Tabellen der Datenbank &#8222;vito&#8220;:</h4>
<pre class=""> CREATE TABLE `brenner` (
 `timestamp` datetime NOT NULL,
 `brennerstarts` float NOT NULL,
 `brennerstunden` float NOT NULL,
 `brennerstatus` int(11) NOT NULL,
 KEY `timestamp` (`timestamp`)
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `snapshot` (
 `timestamp` datetime NOT NULL,
 `brennerstatus` float NOT NULL,
 `brennerstarts` float NOT NULL,
 `brennerstunden` float NOT NULL,
 `solarstunden` float NOT NULL,
 `solarleistung` float NOT NULL,
 `aussentemperatur` float NOT NULL,
 `warmwasser` float NOT NULL,
 `speicher_unten` float NOT NULL,
 `kollektor` float NOT NULL,
 `kesseltemperatur` float NOT NULL,
 `vorlauftemperaturM2` float NOT NULL,
 `vorlaufsolltemperaturM2` float NOT NULL,
 `raumsolltemperaturM1` float NOT NULL,
 `raumsolltemperaturM2` float NOT NULL,
 `raumsolltemperaturredM1` float NOT NULL,
 `raumsolltemperaturredM2` float NOT NULL,
 `warmwassersoll` float NOT NULL,
 `kesseltemperatursoll` float NOT NULL,
 `pumpestatusM1` float NOT NULL,
 `pumpestatusSP` float NOT NULL,
 `pumpestatussolar` float NOT NULL,
 `statusstoerung` varchar(100) CHARACTER SET latin1 COLLATE latin1_german1_ci NOT NULL,
 `systemzeit` varchar(100) CHARACTER SET latin1 COLLATE latin1_german1_ci NOT NULL,
 `error0` varchar(500) CHARACTER SET latin1 COLLATE latin1_german1_ci NOT NULL,
 `BetriebArt` varchar(20) NOT NULL,
 `BetriebArtM2` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `solar` (
 `timestamp` datetime NOT NULL,
 `solarstunden` float NOT NULL,
 `solarleistung` float NOT NULL,
 `solarpumpe` int(11) NOT NULL,
 KEY `timestamp` (`timestamp`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `temperaturen` (
 `timestamp` datetime NOT NULL,
 `aussentemperatur` float NOT NULL,
 `warmwasser` float NOT NULL,
 `speicher_unten` float NOT NULL,
 `kollektor` float NOT NULL,
 `vorlaufsolltemperaturM2` float NOT NULL,
 KEY `timestamp` (`timestamp`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<h3>&nbsp;</h3>
<h4>Die Tabellen der Datenbank &#8222;haus&#8220;:</h4>
<pre class="">CREATE TABLE `gaszaehler` (
 `timestamp` datetime NOT NULL,
 `zaehlerstand` float NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `stromzaehler` (
 `timestamp` datetime NOT NULL,
 `public_key` varchar(100) NOT NULL,
 `zaehlerstand` float DEFAULT NULL,
 `active_power` float NOT NULL,
 KEY `strom_index` (`timestamp`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `strom_snapshot` (
 `zeitstempel` date NOT NULL,
 `zaehlerstand` float NOT NULL,
 `wirkleistung` float NOT NULL,
 `aktuelles_jahr` float NOT NULL,
 `aktueller_monat` float NOT NULL,
 `aktueller_tag` float NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `wasserzaehler` (
 `timestamp` datetime NOT NULL,
 `zaehlerid` int(11) NOT NULL,
 `zaehlerstand` float NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<pre class="">CREATE TABLE `wasser_snapshot` (
 `timestamp` date NOT NULL,
 `zaehlerstand` float NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1</pre>
<h3>&nbsp;</h3>
<h3>&#8222;Installation&#8220;</h3>
<p>Einen funktionierenden Webserver (z.B. Apache) mit PHP und eine MySQL oder MariaDB vorausgesetzt, muss das unten verlinkte tar.gz in ein beliebiges Verzeichnis im www-Verzeichnis des Webservers entpackt werden.</p>
<p>Das funktioniert mit&nbsp;</p>
<pre class="toolbar:2 nums:false lang:default decode:true ">tar -xvzf webseite_sensordaten.tar.gz</pre>
<h3>&nbsp;</h3>
<h3>Konfiguration</h3>
<p>In der Datei config.inc müssen ein paar wenige Einstellungen vorgenommen werden. Folgende Einstellungen werden für die Verbindung zur Datenbank benötigt:</p>
<pre class="toolbar:2 nums:false lang:default decode:true">$mysqlhost="&lt;hostname&gt;";
$mysqluser="&lt;username&gt;";
$mysqlpwd="&lt;passwort&gt;";
$mysqldbvito="&lt;name_der_db_mit_den_vito_tabellen&gt;";
$mysqldbhaus="&lt;name_der_db_mit_den_haus_tabellen&gt;";</pre>
<p>Die folgenden Werte dienen der Auswertung des Gaszählers. Da dieser per Reed-Kontakt ausgelesen keinen Gesamtstand ausgibt und nur die einzelnen Impulse zählt, kann hier ein Startwert definiert. Auch die Werte zur Umrechnung von m³ in KW werden hier eingetragen. Diese Informationen gibt es beim Gaslieferanten.</p>
<p>Zudem kann noch definiert werden wie viel Tage in der Übersicht angezeigt werden sollen. Entsprechender Werte gibt es auch für den Wasserzähler und den Stromzähler.</p>
<pre class="toolbar:2 nums:false lang:default decode:true">$gas_startwert="2311650";
$brennwert_gas=10.097;
$zustandszahl_gas=0.9309;
$anz_tage_gas=7;

$anz_tage_wasser=7;

$anz_tage_strom=7;</pre>
<p>&nbsp;</p>
<p><strong>Wichtiger und letzter Schritt:</strong> Das Verzeichnis &#8222;tmp&#8220; muss schreibbar für den Webserver sein. Dort werden die generierten Graphen als PNG gespeichert. Das war es schon!</p>
<p><strong>Fehlt nur noch das Paket mit den PHP-Seiten: <a href="http://blog.bubux.de/wp-content/uploads/2018/04/webseite_sensordaten.tar.gz">webseite_sensordaten.tar.gz</a></strong></p>
<p>&nbsp;</p>
<p>Viel Spaß mit</p>
<p>Chris</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.bubuxblog.de/webseite-zur-darstellung-der-sensordaten/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
