FTUI Widget Bar: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Das [[{{PAGENAME}}|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 <gallery> File:FTUI_Widget_Label_01.png File:FTUI_Widget_Label_02.png File:FTUI_Widget_Label_03.png File:FTUI_Widget_Label_04.png File:FTUI_Widget_Label_05.png </gallery> ==Attribute== {|class="wikitable" !Attribut !Be…“) |
|||
Zeile 77: | Zeile 77: | ||
"use strict"; | "use strict"; | ||
function depends_bar() { | function depends_bar() { |
Version vom 4. August 2024, 10:10 Uhr
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; };