FTUI Widget Range

Aus FHEMWiki
Zur Navigation springen Zur Suche springen

Das Range Widget ist ein Widget für FHEM Tablet UI, das einen vertikalen Balkengraphen erzeugt, der Werte zwischen einem Minimal- und einem Maximalwert und Hoch-/Niedrig-Limits in verschieden Farben anzeigt.

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-high Name des Reading, von dem der "High"-Wert gelesen werden kann STATE data-high="high"
data-low Name des Reading, von dem der "Low"-Wert gelesen werden kann data-low="low"
data-max Maximalwert der Skala 30 data-max="25"
data-min Minimalwert der Skala -10 data-min="10"
data-limit-high Wert, ab dem die Farbe auf "high" geändert wird 20 data-limit-high="20"
data-limit-low Wert, ab dem die Farbe auf "low" geändert wird data-limit-low="10"
data-color RGB-Angabe oder Name der Farbe für den "normalen" Bereich des Balkens orange data-color="green"
data-color-high RGB-Angabe oder Name der Farbe für den "high"-Bereich des Balkens red data-color="red"
data-color-low RGB-Angabe oder Name der Farbe für den "low"-Bereich des Balkens blue data-color="blue"
data-width Breite des Balkens 8px data-width="2em"
data-height Höhe des Balkens 220px data-height="100px"

CSS Klassen

nolabels Beschriftungen werden ausgeblendet

Beispiele

Min-/Max-Temperatur

<div data-type="range"
     data-device='OpenWeather'
     data-hight="fc0_tempMax"
     data-low="fc0_tempMin"></div>

FTUI Widget Range 01.png


Ohne Beschriftung

Das Widget ohne Beschriftung, dafür mit individueller Breite.

<div data-type="range"
     data-device='OpenWeather'
     data-hight="fc0_tempMax"
     data-low="fc0_tempMin"
     data-width="2em"
     class="nolabels"></div>

FTUI Widget Range 02.png


Mehrere Balken nebeneinander

In diesem Beispiel werden drei Balken nebeneinander angezeigt. Temperaturen unter Null werden in blau angezeigt, Werte über 2 werden rot. Das Nebeneinander der Balken wird durch die Klasse inline erreicht. Durch die Klasse nolabels werden beim zweiten und dritten Balken die Beschriftungen nicht angezeigt.

<div class="container">
<div data-type="range" data-device="OpenWeather" data-high="fc0_tempMax" data-low="fc0_tempMin" data-max="10" data-min="-10" data-limit-low="0" data-limit-high="2" class="inline"></div>
<div data-type="range" data-device="OpenWeather" data-high="fc1_tempMax" data-low="fc1_tempMin" data-max="10" data-min="-10" data-limit-low="0" data-limit-high="2" class="inline nolabels"></div>
<div data-type="range" data-device="OpenWeather" data-high="fc2_tempMax" data-low="fc2_tempMin" data-max="10" data-min="-10" data-limit-low="0" data-limit-high="2" class="inline nolabels"></div>
</div>

FTUI Widget Range 03.png

Weblinks