FTUI Widget Simplechart: Unterschied zwischen den Versionen

Aus FHEMWiki
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 3: Zeile 3:
<gallery>
<gallery>
File:FTUI_widget_simplechart_2.png
File:FTUI_widget_simplechart_2.png
File:FTUI_widget_simplechart_mini.png
File:FTUI_widget_simplechart_detailed.png
</gallery>
</gallery>


Zeile 100: Zeile 102:
</div>
</div>
</source>
</source>
[[File:FTUI_widget_simplechart_mini.png]]


===Diagramm in voller Größe===
===Diagramm in voller Größe===

Version vom 12. Februar 2017, 13:41 Uhr

Das Simplechart Widget ist ein Widget für FHEM Tablet UI, mit dem sich einfache X/Y-Diagramme für einzelne Werte erstellen lassen. Die Werte werden direkt aus der Log-Datei gelesen.

Steuer-Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-logdevice Name des Log-Device, das dargestellt werden soll data-logdevice="FileLog_WohnzimmerHeizung"
data-logfile Name des Log-Files, aus dem die Daten entnommen werden sollen '-' = aktuelle Datei data-logfine="WohnzimmerHeizung-2015.log"
data-get Reading, das das Update des Diagramms triggert 'STATE'
data-columnspec Ermittelt den Wert aus dem Log-File, der angezeigt werden soll data-columnspec="4:meas.*"
data-minvalue Minimaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung '10'
data-maxvalue Maximaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung '30'
data-yticks Abstand zwischen den horizontalen Hilfslinien (bezogen auf die Y-Achse) '5'
data-xticks Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) '360' (Minuten)
data-yunit Einheit, die an der Y-Achse angezeigt werden soll
data-daysago Anzahl der vergangenen Tage, die angezeigt werden sollen '0'
data-caption Name, der als Text über dem Diagramm angezeigt werden soll
data-width Breite des Diagramms (in % oder px)
data-height Höhe des Diagramms (in % oder px)

Hinweise

Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von data-get ändert, sowie nach jedem shortpoll-Interval (15 Minuten).

CSS-Klassen

Klasse Beschreibung
fullsize 100% Breite und Höhe
noticks Hilfslinien und Beschriftungen an X- und Y-Achse werden ausgeblendet

Beispiele

Zwei Diagramme nebeneinander

FTUI widget simplechart 2.png

<li data-row="4" data-col="4" data-sizex="8" data-sizey="3">
	<header>CHARTS</header>
	<div data-type="simplechart"
		data-device="WohnzimmerHeizung"
		data-logdevice="FileLog_WohnzimmerHeizung"
		data-columnspec="4:meas.*:1:int"
		data-minvalue="10"
		data-maxvalue="30"
		data-width="250px"
		data-height="120px"
		data-yticks="4"
		data-daysago="0"
		data-caption="Wohnzimmer"
		class="inline">
	</div>
	<div data-type="simplechart"
		data-device="KuecheHeizung"
		data-logdevice="FileLog_KuecheHeizung"
		data-columnspec="4:meas.*:1:int"
		data-minvalue="12"
		data-maxvalue="28"
		data-width="250px"
		data-height="120px"
		data-yticks="6"
		data-daysago="2"
		data-caption="Küche"
		class="inline">
	</div>
</li>

Mini-Diagramm und Details als Popup

Das Mini-Diagramm dient zur Übersicht in der Hauptoberfläche. Nach Klick auf das Mini-Diagramm öffnet sich ein detaillierteres Diagramm mit Skalen.

<div data-type="popup" data-width="450px" class="">
    <div data-type="simplechart" data-device="THSensorWZ" data-logdevice="FileLog_THSensorWZ" data-columnspec="4:temperature" data-minvalue="17" data-maxvalue="23" data-height="60" data-width="90" data-yticks="2" class="">
    </div>
    <div class="dialog">
        <header>TEMPERATURE</header>
        <div data-type="simplechart" data-device="THSensorWZ" data-logdevice="FileLog_THSensorWZ" data-columnspec="4:temperature" data-minvalue="[21,20,16]" data-maxvalue="[35,30,25]" data-yticks="2" data-caption="$min°C - $max°C" data-height="250">
        </div>
    </div>
</div>

FTUI widget simplechart mini.png

Diagramm in voller Größe

Durch die Verwendung der Klasse fullsize wird das Diagramm so groß dargestellt, wie das Gridster-Element Platz bietet.

<li data-row="4" data-col="4" data-sizex="8" data-sizey="3">
	<header>CHART</header>
	<div data-type="simplechart"
		data-device="WohnzimmerHeizung2"
		data-logdevice="FileLog_WohnzimmerHeizung2"
		data-logfile="WohnzimmerHeizung2.log"
		data-columnspec="4:temp:1:int"
		data-minvalue="10"
		data-maxvalue="30"
		data-yticks="4"
		data-daysago="0"
		data-caption="Wohnzimmer"
		class="fullsize">
	</div>
</li>