FTUI eigene Widgets - Beispiel - Versionsgeschichte

Ph1959de: source tag(s) auf syntaxhighlight umgestellt

2024-11-12T15:10:23Z

source tag(s) auf syntaxhighlight umgestellt

Pahenning am 2. August 2024 um 15:36 Uhr

2024-08-02T15:36:03Z

← Nächstältere Version		Version vom 2. August 2024, 17:36 Uhr
Zeile 261:		Zeile 261:
	Nicht jeder wird alle 4 Tonnen benötigen, also werden wir über einen Parameter die benötigten Tonnen selektieren können.		Nicht jeder wird alle 4 Tonnen benötigen, also werden wir über einen Parameter die benötigten Tonnen selektieren können.

	[[Kategorie:~~FHEM_Tablet_UI~~]]		[[Kategorie:FHEM Tablet UI V2]]

Krikan: kategorisiert

2018-11-07T14:11:13Z

kategorisiert

← Nächstältere Version		Version vom 7. November 2018, 16:11 Uhr
Zeile 260:		Zeile 260:

	Nicht jeder wird alle 4 Tonnen benötigen, also werden wir über einen Parameter die benötigten Tonnen selektieren können.		Nicht jeder wird alle 4 Tonnen benötigen, also werden wir über einen Parameter die benötigten Tonnen selektieren können.

			[[Kategorie:FHEM_Tablet_UI]]

Bruchbude: FTUI eigene Widgets - Schritt für Schritt Beispiel (Teil 2/?)

2018-08-17T19:44:28Z

FTUI eigene Widgets - Schritt für Schritt Beispiel (Teil 2/?)

@@ Zeile 1: / Zeile 1: @@
 Wir werden nun unser erstes eigenes FTUI Widget Schritt für Schritt erstellen.
 Es wird unterstellt das [[FTUI eigene Widgets]] bereits gelesen wurde.
@@ Zeile 172: / Zeile 171: @@
+	}
 </source>

Bruchbude: Die Seite wurde neu angelegt: „==FTUI eigene Widgets - Schritt für Schritt Beispiel== Wir werden nun unser erstes eigenes FTUI Widget Schritt für Schritt erstellen. Es wird unterstellt das…“

2018-08-16T14:49:33Z

Die Seite wurde neu angelegt: „==FTUI eigene Widgets - Schritt für Schritt Beispiel== Wir werden nun unser erstes eigenes FTUI Widget Schritt für Schritt erstellen. Es wird unterstellt das…“

Neue Seite

==FTUI eigene Widgets - Schritt für Schritt Beispiel==
Wir werden nun unser erstes eigenes FTUI Widget Schritt für Schritt erstellen.
Es wird unterstellt das [[FTUI eigene Widgets]] bereits gelesen wurde.
{{Hinweis| '''Wichtig:''' Nach jeder Änderung an einem widget '''muss''' der Browsercache geleert werden damit die Änderungen wirksam werden! }}

Als Grundgerüst dient [[FTUI eigene Widgets]] und daraus bauen wir nun unser neues Widget.

{| class="wikitable"
|-
!align="right" |Name
|widget_abfall.js
|-
!align="right" |Funktion
|Die Anzeige von Müllabfuhrdaten aus einer .ics Datei
|-
!align="right" |Fhem-Modul
|Calendar
|-
|}

Als erstes benennen wir das widget um und fügen einen Copyright Vermerk hinzu.

aus:
<source lang="javascript">
var Modul_mywidget = function () {
widgetname: 'mywidget',
</source>
wird:
<source lang="javascript">
/* FTUI Plugin
* Copyright (c) 2018 by Bruchbude
* Under MIT License (http://www.opensource.org/licenses/mit.license.php)
*/
var Modul_abfall = function () {
widgetname: 'abfall',
</source>

Wir erstellen einen Calender Eintrag für unsere Abfalldaten.
Dazu geben wir in der fhem Kommandozeile folgendes ein:
<source lang="bash">
define Abfallkalender Calendar ical file /opt/fhem/www/tablet/abfallkalender.ics
</source>
Die Datei wird von Hand runtergeladen (die diversen Städte unterscheiden sich hier, weshalb wir erstmal alles von Hand machen) und in das entsprechende Verzeichnis kopiert.

Nun auf der linux Kommandozeile die Dateirechte setzen:
<source lang="bash">
sudo chown fhem:dialout /opt/fhem/www/tablet/abfallkalender.ics
</source>
Später wird der download per knopfdruck erfolgen.

Nun erstellen wir einen Eintrag in unserer .html Datei
<source lang="HTML">
<li data-col="6" data-row="1" data-sizex="1" data-sizey="3">
<div class="cell" data-type="abfall" data-device="Abfallkalender" data-detail='["Grau","Blau","Gelb","Braun"]'></div>
</li>
</source>

Als nächstes sehen wir im Abfallkalender-Modul nach welches Reading wir benötigen.

Die Daten befinden sich in '''modeUpcoming''' welches wir in unserem Modul in der init() funktion wie folgt eintragen:
<source lang="javascript">
elem.initData('get', 'STATE');
me.addReading(elem, 'get');
</source>
wird zu:
<source lang="javascript">
elem.initData('modeUpcoming', 'modeUpcoming');
me.addReading(elem, 'modeUpcoming'); // update() wird aufgerufen wenn modeUpcoming sich ändert
</source>

Dazu kommt eine Änderung in der update() Funktion:
<source lang="javascript">
me.elements.filterDeviceReading('get', device, reading)
var value = elem.getReading('get').val;
</source>
wird zu:
<source lang="javascript">
me.elements.filterDeviceReading('modeUpcoming', device, reading)
var value = elem.getReading('modeUpcoming').val;
</source>

Dann bauen wir noch eine Ausgabe ein um zu sehen ob alles funktioniert.
Damit sieht unser Modul so aus:

<source lang="javascript">
/* FTUI Plugin
* Copyright (c) 2018 by Bruchbude
* Under MIT License (http://www.opensource.org/licenses/mit.license.php)
*/
var Modul_abfall = function () {
function init() {
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
me.elements.each(function (index) {
var elem = $(this);
elem.initData('modeUpcoming', 'modeUpcoming');
me.addReading(elem, 'modeUpcoming');
});
}

function update(device, reading) {
me.elements.filterDeviceReading('modeUpcoming', device, reading)
.each(function (index) {
var elem = $(this);
var value = elem.getReading('modeUpcoming').val;
if (value) {
alert(value);
//elem.html(value);
}
});
}

var me = $.extend(new Modul_widget(), {
widgetname: 'abfall',
init: init,
update: update,
});
return me;
};
</source>

Jetzt bauen wir das parsing für die calendar daten ein. Die Calendar Daten sehen so aus: <source lang="bash">20181211GraueTonnegdabfallkalender</source>
...getrennt durch ein Semikolon. Das Datum nehmen wir für die Berechnung der Tage und die Farbe zur Unterscheidung der Tonnen.
Der Rest des Strings interessiert uns nicht.

<source lang="javascript">
function update(device, reading) {
me.elements.filterDeviceReading('modeUpcoming', device, reading).each(function (index){
var elem = $(this);
var value = elem.getReading('modeUpcoming').val;
if (!value) return; // error: no data found in calendar modul
var strArray = value.split(";");
strArray.sort(); // just to be sure all is sorted
var today = new Date();
today = parseInt(today.yyyymmdd().replace(/-/g,"")); // delete all "-" and convert to int
alert("grau: "+ getDaysToEmpty(strArray, "Grau", today) );
getDaysToEmpty(strArray, "Blau", today);
getDaysToEmpty(strArray, "Gelb", today);
getDaysToEmpty(strArray, "Braun", today);
elem.html();
});
}
</source>
Die Funktion getDaysToEmpty() sieht so aus:
<source lang="javascript">
//////////////////////////////////////////////////////////////////////////////
// Get the number of days until garbage collection
//////////////////////////////////////////////////////////////////////////////
function getDaysToEmpty(array, wasteColor, today){
var waste = array.filter(s => s.includes(wasteColor)); // get all dates for the selected waste container
for (var i =0; i< waste.length; ++i)
{
if (parseInt(waste[i]) >= today) // we need nothing from the past
return parseInt(waste[i]) - today;
}
return -1; // error
}
</source>

Jetzt da wir wissen wie lange es noch dauert bis die Müllabfuhr kommt können wir ein wenig html bauen
<source lang="javascript">
//////////////////////////////////////////////////////////////////////////////
// Draw an icon
//////////////////////////////////////////////////////////////////////////////
function addIcon(days, vertical, colorCircle, colorWaste)
{
var myHtml= "<div class='famultibutton fa-stack fa-2x' onclick='this.childNodes[1].classList.remove(\"blink\")'>"
myHtml+= "<i id='bg' class='fa fa-stack-2x fa-circle-thin' style='color: "+colorCircle+";'></i>"
myHtml+= "<i id='fg' class='fa fa-stack-1x fa-trash warn" + (days <2?' blink':'') + "' style='color: "+colorWaste+";'></i>"
myHtml+= "<i id='warn'>"+ days +"</i></div>" + (vertical?"<br>":"");
return myHtml;
}
</source>