FTUI Widget Bar
Das Bar Widget ist ein Widget für FHEM Tablet UI V2, mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens angezeigt wird.
Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde
Attribute
| Attribut | Beschreibung | Standard-Wert | Beispiel |
|---|---|---|---|
| data-get | Name des Readings, dessen Wert angezeigt werden soll | data-get="measured-temp" | |
| data-part | RegEx oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll | ||
| data-fix | Angegebene Anzahl an Dezimalstellen einhalten | (-1 -> nicht numerisch) | |
| data-factor | Multipliziert Wert des Readings mit angegebener Zahl | 1 | data-factor="3.6" |
| data-color | Fester Wert oder Device:Reading eines Devices für die Label-Farbe | data-color="red" | |
| data-colors | Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das data-limits-Attribut bestimmt | data-colors='["red","yellow","green"]' | |
| data-classes | Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im data-limits-Attribut ab | data-classes='["bg-red","bg-yellow","bg-green"]' data-classes='["blink","blurry","shake"]' | |
| data-limits | Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert | data-limits='[1,15,30]' | |
| data-limits-get | Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden | data-get | data-limits-get="Dummy01:Limits" |
| data-limits-part | Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx | '-1' -> alle | |
| data-unit | Einheit nach Zahl hinzufügen | data-unit="%B0C%0A" | |
| data-substitution | Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen | siehe #Hinweise | |
| data-pre-text | Text, der vor dem empfangenen Wert stehen soll | data-pre-text="Es ist " | |
| data-post-text | Text, der nach dem empfangenen Wert sehen soll | data-post-text=" Grad warm" | |
| data-hide | Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht | STATE | data-hide="power-on" |
| data-hide-on | Wert, bei dem das Widget versteckt wird | true,1,on | data-hide-on="on" |
| data-hide-off | Wert, bei dem das Widget angezeigt wird | !on | data-hide-off="!on" |
| data-hideparents | jQuery-Selector, um auch die Eltern-Elemente zu verstecken | data-hideparents="#Name" | |
| data-refresh | Anzahl Sekunden, nach denen das Widget aktualisiert werden soll | 0 -> kein Auto-Refresh | data-refresh="10" |
CSS Klassen
| Klasse | Beschreibung |
|---|---|
| small | Setzt die Größe des Elementes auf 80% |
| large | Setzt die Größe des Elementes auf 125% |
| big | Setzt die Größe des Elementes auf 150% |
| bigger | Setzt die Größe des Elementes auf 200% |
| thin | dünne Schrift |
| bold | fette Schrift |
| red | Vordergrundfarbe rot |
| green | Vordergrundfarbe grün |
| blue | Vordergrundfarbe blau |
| orange | Vordergrundfarbe orange |
| darker | Schriftfarbe grau |
| timestamp | Zeigt den Timestamp eines Readings statt dessen Inhalt |
| w1x | Einfache fixe Breite |
| w2x | Doppelte fixe Breite |
| w3x | Dreifache fixe Breite |
| circleborder | Runder Rahmen um ein Label-Widget |
| squareborder | Eckiger Rahmen um ein Label-Widget |
| bg-limit | Ändert bei Label-Widgets die Hinter- statt der Vordergrundfarbe in Abhängigkeit von data-limit |
| icon square | Erzeugt einen Hintergrund mit eckigen Kanten |
| icon round | Erzeugt einen Hintergrund mit abgerundeten Kanten |
| truncate | Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt |
| fixedlabel | Verhindert bei verschachtelten labels das Überschreiben von data-get |
| blink | Blinkende Animation für Label- oder Switch-Widget |
| blurry | Element wird in einen stark verschwommen, grauen Schatten umgewandelt |
| shake | Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden. |
Installation
Dazu muss im ersten Schritt eine Widget-Datei widget_bar.js erstellt werden, die (mit den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.
/* FTUI Plugin
* Copyright (c) 2018 Prof. Dr. Peter A. Henning
* GPL License
*/
/* global ftui:true, Modul_widget:true */
"use strict";
function depends_bar() {
var deps =[];
return deps;
}
var Modul_bar = function () {
function drawBar(elem) {
var id = elem.prop('id');
var max = elem.data('max');
var val = elem.data('value');
var uni = elem.data('unit');
var val1 = Math.floor(val / max * 228 + 24);
var style;
var textpos;
if (val1 > 148) {
textpos = 28;
style = "text-anchor:start;font-family:Helvetica;font-size:30px;font-weight:bold";
} else {
textpos = 252;
style = "text-anchor:end;font-family:Helvetica;font-size:30px;font-weight:bold";
}
var bar = document.getElementById(id);
if (bar) {
bar.getElementsByClassName("side")[0].setAttribute("width", val1 + 16);
bar.getElementsByClassName("top")[0].setAttribute("x", val1);
bar.getElementsByClassName("topline")[0].setAttribute("x", val1);
bar.getElementsByClassName("labele")[0].textContent = val + " " + uni;
bar.getElementsByClassName("labele")[0].setAttribute("x", textpos);
bar.getElementsByClassName("labele")[0].setAttribute("style", style);
}
}
function init_attr(elem) {
//init standard attributes
base.init_attr.call(me, elem);
elem.initData('get', 'STATE');
elem.initData('unit', '');
elem.initData('value', 20);
elem.initData('max', 100);
elem.initData('font-size', 12);
elem.initData('interval', 5000);
}
function init_ui(elem) {
var svg = document.getElementById('svg200x150')
var p = document.getElementById("barwidget");
var svg_prime = svg.cloneNode(true);
var p_prime = p.cloneNode(true);
var bar = svg_prime.appendChild(p_prime);
var id = elem.prop('id');
document.getElementById(id).appendChild(svg_prime);
var color = elem.data('color');
switch (color) {
case "red":
bar.getElementsByClassName("side")[0].setAttribute("fill", "url(#grad1r)");
bar.getElementsByClassName("top")[0].setAttribute("fill", "url(#grad2r)");
break;
case "green":
bar.getElementsByClassName("side")[0].setAttribute("fill", "url(#grad1g)");
bar.getElementsByClassName("top")[0].setAttribute("fill", "url(#grad2g)");
break;
case "blue":
bar.getElementsByClassName("side")[0].setAttribute("fill", "url(#grad1b)");
bar.getElementsByClassName("top")[0].setAttribute("fill", "url(#grad2b)");
break;
case "pink":
bar.getElementsByClassName("side")[0].setAttribute("fill", "url(#grad1p)");
bar.getElementsByClassName("top")[0].setAttribute("fill", "url(#grad2p)");
break;
case "orange":
bar.getElementsByClassName("side")[0].setAttribute("fill", "url(#grad1o)");
bar.getElementsByClassName("top")[0].setAttribute("fill", "url(#grad2o)");
break;
}
}
function update(dev, par) {
me.elements.filterDeviceReading('get', dev, par).each(function (index) {
var elem = $(this);
var val = elem.getReading('get').val;
val = ftui.getPart(val, elem.data('part'));
val = me.substitution(val, elem.data('substitution'));
val = me.map(elem.data('map-get'), val, val);
val = me.fix(val, elem.data('fix'));
elem.data('value', val);
drawBar(elem);
});
}
// public
// inherit all public members from base class
var parent = new Modul_widget();
var base = {
init_attr: parent.init_attr
};
var me = $.extend(parent, {
//override or own public members
widgetname: 'bar',
init_attr: init_attr,
init_ui: init_ui,
update: update
});
return me;
};