[widget_uwz] widget für UWZ Unwetterzentrale.

Begonnen von chris1284, 07 Januar 2017, 18:39:45

Vorheriges Thema - Nächstes Thema

ToM_ToM

Hi Bruchbude,

also das mit dem "Hin und Hertanzen" funktioniert. Aber auch nur dann wenn ich meiner Seite beim Öfnnen gleich die korrekte Unterseite mitgebe. Öffne ich die Startseite und wechsle dann auf die Wetter-Seite, passiert natürlich nichts, da ja auch der Swiper nicht korrekt geladen wurde. Da wird dann zwar nach einem Resize der Swiper geladen und mir angezeigt (sehe ich ja an den Page-Punkten), aber der verrückte Autoplay-Tanz startet dann erst sobald ich einmal swipe. ;)

PS: Den weg über Änderungen am FTUI vornehmen, Private Session öffnen, URL öffnen, testen, Private Session schließen, und wieder von vorne.... muss ich leider gehen seit ich auf Apache umgestellt habe. Ansonsten müsste ich immer meinen gesamten Cache leeren. Selbst Strg+F5, Shift+F5 usw... funktioniert hier nicht. Weder in Firefox noch, Chrome oder Opera, IE...
Daher leider der umständliche Weg und somit Sicherheit dass alles weg ist und er komplett neu lädt.

VG, Thomas
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Bruchbude

moin tom_tom,
ich habe das mal mit den privaten fenstern versucht und das funzt nicht wirklich. bischen rumgespielt und bekam relativ schnell darstellungsfehler und in der konsole fehlermeldungen bezüglich json.
ich nutze ein addon für firefox wo ich auf knopfdruck den cache leere, in seltenen fällen muss ich dann trotzem nach dem leeren firefox komplett schließen.

wenn cache leeren nicht hilft bin ich mit meinem latain am ende. hatte noch was im netz gefunden wo jemand meinte mit swiper.appendSlide() die slides zu bauen aber hatte bei mir auch erst nach setTimeout() gefunzt - also keine option.

vielleicht hat ja jemand noch ne andere idee...

Bruchbude

so, hatte jetzt auch den letzten punkt in angriff genommen - die vielen schleifendurchläufe.

@tom_tom: versuch mal die neue version. bei mir brauche ich jetzt kein setTimeout() mehr. vielleicht löst das ja dein problem.

// widget_uwz last changed 2018-07-29 by Bruchbude
//-------------------------------------------------------------------
//-------------------------------------------------------------------
// 2018-01-28 added data-hide
// 2018-07-08 modified by Bruchbude
// 2018-07-29 added autoplay param, code cosmetics
// 2018-08-04 switching to sendFhemCommand() now we get only 1 update() on changes instead of countless

"use strict";

function depends_uwz() {
var deps = [];
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/swiper.min.css" type="text/css" />');
    if (!$.fn.Swiper) {
        deps.push(ftui.config.basedir + "lib/swiper.jquery.min.js");
    }
return deps;
};
var Modul_uwz = function() {
var colormap = {
'0': '#00ff00', // Keine Warnung
'1': '#009b00', // Wetterhinweise
'2': '#ffe900', // Vorwarnung für Unwetterwarnung
'3': '#ffB400', // Unwetterwarnung
'4': '#e30000', // Unwetterwarnung stark
'5': '#e900e9', // Unwetterwarnung extrem
};
var getUniqueID = (function() {
var staticVar = 0;
return function() {
return (++staticVar).toString();
}
})();

function init() {
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
// We can can more then one widget_uwz, so init all of them
me.elements.each(function(index) {
var elem = $(this);
elem.initData('max', 10);
elem.initData('device', "noUWZDeviceDefined");
elem.initData('detail', ["IconURL", "ShortText", "LongText", "Swiper"]);
elem.initData('swiperstyle', 'no'); // Deprecated. Will be replaced by "Swiper" in 'detail' array soon
elem.initData('fontcolor', '#222222');
elem.initData('imgsize', 30);
elem.initData('autoplay', '8000');
elem.initData('uID', getUniqueID()); // Each Swiper needs an uniqueID
elem.initData('WarnCount', 'WarnCount');
me.addReading(elem, "WarnCount"); // if this value changes, update() is called.
});
}

function getWarnings(elem, res, sumWarnings, strtSlide, width, stopSlide)
{
var myHtml = ""
var imageMargin = elem.data('detail').includes('IconURL') ? parseInt(elem.data('imgsize')) + 10 : 4;
for (var i = 0; i < sumWarnings; i++)
{
var prefix = "Warn_" + i + "_";
var color = res.Readings[prefix + 'uwzLevel'].Value;
if (color >= colormap.length) color = colormap.length - 1;
myHtml+= strtSlide; // startcode for a slider (swiper)
myHtml+= "<div style=\"float:left;" + width + ";overflow-x:hidden;margin:3px;border-radius:4px;color:" + elem.data('fontcolor') + ";background-color:" + colormap[color] + ";\">";
if (elem.data('detail').includes('IconURL')) myHtml += "<div class=\"\" style=\"float:left;margin:4px;\"><img src=\"" + res.Readings[prefix + 'IconURL'].Value + "\" onerror=\"javascript:this.src='/fhem/images/openautomation/message_attention.svg'\" width=\"" + elem.data('imgsize') + "\" height=\"" + elem.data('imgsize') + "\"></div>";
if (!elem.data('detail').includes('LongText')) {
myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + res.Readings[prefix + 'ShortText'].Value;
} else {
myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + res.Readings[prefix + 'LongText'].Value;
}
myHtml+= elem.data('textdivider') + "Gültig vom " + res.Readings[prefix + 'Start'].Value.toDate().ddmmhhmm() + " bis " + res.Readings[prefix + 'End'].Value.toDate().ddmmhhmm();
myHtml+= "</div></div>";
myHtml+= stopSlide; // stopcode for a slider (swiper)
}
return myHtml;
}

function update(device, reading) {
// we need only updates for our device, so filter out all other widgets
me.elements.filter('div[data-device="' + device + '"]').each(function(index) {
var elem = $(this);
var sumWarnings = parseInt(elem.getReading('WarnCount').val);
if (!sumWarnings)
return elem.html("<div class=\"cell top-space\">Aktuell keine Warnmeldungen.</div>");
// build a string with all keywords we want to receive from the fhem weather device
var readingGroupWarn = ["End", "IconURL", "LongText", "ShortText", "Start", "uwzLevel"];
var strDaten = " STATE longpoll lastConnection WarnCount";
if (sumWarnings > elem.data('max'))
    sumWarnings = elem.data('max');
for (var j = 0; j < sumWarnings; j++) {
for (var i = 0; i < readingGroupWarn.length; i++) {
strDaten+= " Warn_" + j + "_" + readingGroupWarn[i];
}
}
var fhemJSON = ftui.sendFhemCommand("jsonlist2 WEB," + device + strDaten).done(function(fhemJSON) {
var res = fhemJSON.Results[1]; // 0 = Arg, 1 =Results
var myHtml = "";
if (sumWarnings > elem.data('max')) sumWarnings = elem.data('max');
// We got some warnings
if (elem.data('swiperstyle') != 'yes') {
myHtml+= getWarnings(elem, res, sumWarnings, "", "width:100%", "");
} else {
myHtml+= "<div class=\"swiper-container\" id=\"uwz-swiper" + elem.data('uID') + "\">";
myHtml+= "<div class=\"swiper-wrapper\">"
myHtml+= getWarnings(elem, res, sumWarnings, "<div class=\"swiper-slide\">", "width:98%", "</div>");
myHtml+= "</div><div class=\"swiper-pagination\" id=\"uwz-swiper-pagination" + elem.data('uID') + "\" style=\"position:static\"></div></div>";
myHtml+= "<script>\
var uwzswiper" + elem.data('uID') + " = new Swiper(this.document.getElementById('uwz-swiper" + elem.data('uID') + "'), {\
pagination: this.document.getElementById('uwz-swiper-pagination" + elem.data('uID') + "'),\
spaceBetween: 30, autoplay: " + elem.data('autoplay') + ",\
autoplayDisableOnInteraction: false,\
hashnav: false, hashnavWatchState: true\
});\
</script>";
}
elem.html(myHtml);
});
//extra reading for hide
me.update_hide(device, reading);
});
};

// public
// inherit all public members from base class
var me = $.extend(new Modul_widget(), {
//override or own public members
widgetname: 'uwz',
init: init,
update: update,
});
return me;
};

// needs testing:
// after switching to sendFhemCommand() is setTimout() no longer needed?
// setTimeout(function(){ uwzswiper" + elem.data('uID')+".update(); }, 10);\
// (was located in the line before </script>")


ToM_ToM

Zitat@tom_tom: versuch mal die neue version. bei mir brauche ich jetzt kein setTimeout() mehr. vielleicht löst das ja dein problem.

Leider nicht. Immer noch das gleiche Verhalten wie vorher auch. Das Problem tritt aber nur auf wenn ich für den Pagebutton die prefetch - Klasse verwende und die Seite quasi vorgeladen wird.

VG, Thomas
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Bruchbude

@tom_tom: mist, sollte unter allen bedingungen funzen. ich bin überfragt. muss sich wohl mal einer von den alten hasen angucken.

@chris1284: würde mich freuen wenn du meine änderungen einpflegst. alles was ich brauche funzt, ziehe jetzt zum nächsten widget was nicht macht was ich will...

...nur noch ne kleine änderung um bandbreite zu sparen:
// widget_uwz last changed 2018-08-04 by Bruchbude
//-------------------------------------------------------------------
//-------------------------------------------------------------------
// 2018-08-04 switching to sendFhemCommand() now we get only 1 update() on changes instead of countless
// 2018-08-04 request shorttext or longtext from device, not both

"use strict";

function depends_uwz() {
var deps = [];
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/swiper.min.css" type="text/css" />');
    if (!$.fn.Swiper) {
        deps.push(ftui.config.basedir + "lib/swiper.jquery.min.js");
    }
return deps;
};
var Modul_uwz = function() {
var colormap = {
'0': '#00ff00', // Keine Warnung
'1': '#009b00', // Wetterhinweise
'2': '#ffe900', // Vorwarnung für Unwetterwarnung
'3': '#ffB400', // Unwetterwarnung
'4': '#e30000', // Unwetterwarnung stark
'5': '#e900e9', // Unwetterwarnung extrem
};
var getUniqueID = (function() {
var staticVar = 0;
return function() {
return (++staticVar).toString();
}
})();

function init() {
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
// We can can more then one widget_uwz, so init all of them
me.elements.each(function(index) {
var elem = $(this);
elem.initData('max', 10);
elem.initData('device', "noUWZDeviceDefined");
elem.initData('detail', ["IconURL", "ShortText", "LongText", "Swiper"]);
elem.initData('swiperstyle', 'no'); // Deprecated. Will be replaced by "Swiper" in 'detail' array soon
elem.initData('fontcolor', '#222222');
elem.initData('imgsize', 30);
elem.initData('autoplay', '8000');
elem.initData('uID', getUniqueID()); // Each Swiper needs an uniqueID
elem.initData('WarnCount', 'WarnCount');
me.addReading(elem, "WarnCount"); // if this value changes, update() is called.
});
}

function getWarnings(elem, res, sumWarnings, strtSlide, width, stopSlide)
{
var myHtml = ""
var imageMargin = elem.data('detail').includes('IconURL') ? parseInt(elem.data('imgsize')) + 10 : 4;
for (var i = 0; i < sumWarnings; i++)
{
var prefix = "Warn_" + i + "_";
var color = res.Readings[prefix + 'uwzLevel'].Value;
if (color >= colormap.length) color = colormap.length - 1;
myHtml+= strtSlide; // startcode for a slider (swiper)
myHtml+= "<div style=\"float:left;" + width + ";overflow-x:hidden;margin:3px;border-radius:4px;color:" + elem.data('fontcolor') + ";background-color:" + colormap[color] + ";\">";
if (elem.data('detail').includes('IconURL')) myHtml += "<div class=\"\" style=\"float:left;margin:4px;\"><img src=\"" + res.Readings[prefix + 'IconURL'].Value + "\" onerror=\"javascript:this.src='/fhem/images/openautomation/message_attention.svg'\" width=\"" + elem.data('imgsize') + "\" height=\"" + elem.data('imgsize') + "\"></div>";
if (!elem.data('detail').includes('LongText')) {
myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + res.Readings[prefix + 'ShortText'].Value;
} else {
myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + res.Readings[prefix + 'LongText'].Value;
}
myHtml+= elem.data('textdivider') + "Gültig vom " + res.Readings[prefix + 'Start'].Value.toDate().ddmmhhmm() + " bis " + res.Readings[prefix + 'End'].Value.toDate().ddmmhhmm();
myHtml+= "</div></div>";
myHtml+= stopSlide; // stopcode for a slider (swiper)
}
return myHtml;
}

function update(device, reading) {
// we need only updates for our device, so filter out all other widgets
me.elements.filter('div[data-device="' + device + '"]').each(function(index) {
var elem = $(this);
var sumWarnings = parseInt(elem.getReading('WarnCount').val);
if (!sumWarnings)
return elem.html("<div class=\"cell top-space\">Aktuell keine Warnmeldungen.</div>");
// build a string with all keywords we want to receive from the fhem weather device
var readingGroupWarn = (elem.data('detail').includes('LongText')?["End", "IconURL", "LongText", "Start", "uwzLevel"]:["End", "IconURL", "ShortText", "Start", "uwzLevel"]);
var strDaten = " STATE longpoll lastConnection WarnCount";
if (sumWarnings > elem.data('max'))
    sumWarnings = elem.data('max');
for (var j = 0; j < sumWarnings; j++) {
for (var i = 0; i < readingGroupWarn.length; i++) {
strDaten+= " Warn_" + j + "_" + readingGroupWarn[i];
}
}
var fhemJSON = ftui.sendFhemCommand("jsonlist2 WEB," + device + strDaten).done(function(fhemJSON) {
var res = fhemJSON.Results[1]; // 0 = Arg, 1 =Results
var myHtml = "";
if (sumWarnings > elem.data('max')) sumWarnings = elem.data('max');
// We got some warnings
if (elem.data('swiperstyle') != 'yes') {
myHtml+= getWarnings(elem, res, sumWarnings, "", "width:100%", "");
} else {
myHtml+= "<div class=\"swiper-container\" id=\"uwz-swiper" + elem.data('uID') + "\">";
myHtml+= "<div class=\"swiper-wrapper\">"
myHtml+= getWarnings(elem, res, sumWarnings, "<div class=\"swiper-slide\">", "width:98%", "</div>");
myHtml+= "</div><div class=\"swiper-pagination\" id=\"uwz-swiper-pagination" + elem.data('uID') + "\" style=\"position:static\"></div></div>";
myHtml+= "<script>\
var uwzswiper" + elem.data('uID') + " = new Swiper(this.document.getElementById('uwz-swiper" + elem.data('uID') + "'), {\
pagination: this.document.getElementById('uwz-swiper-pagination" + elem.data('uID') + "'),\
spaceBetween: 30, autoplay: " + elem.data('autoplay') + ",\
autoplayDisableOnInteraction: false,\
hashnav: false, hashnavWatchState: true\
});\
</script>";
}
elem.html(myHtml);
});
//extra reading for hide
me.update_hide(device, reading);
});
};

// public
// inherit all public members from base class
var me = $.extend(new Modul_widget(), {
//override or own public members
widgetname: 'uwz',
init: init,
update: update,
});
return me;
};

Bruchbude

Zitat
@chris1284: würde mich freuen wenn du meine änderungen einpflegst. alles was ich brauche funzt, ziehe jetzt zum nächsten widget was nicht macht was ich will..

ja/nein/vielleicht?

ext23

Ich tippe auf "nein", ich muss es auch jedes mal wieder zurückändern. Verstehe ich auch nicht wieso das nicht endlich übernommen wird.

/Daniel
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

yersinia

#232
@ext23:
Ich hab es so gelöst, dass die widget_uwz.js nichtmehr fhem:dialout gehört sondern root. Damit bricht das FTUI Update allerdings ab (komplett!). Will ich ein FTUI Update durchlaufen lassen, dann ziehe ich ein backup der uwz, ändere den eigentümer, führe das Update durch und stelle die alte version wieder her.
Auf der RasPi Console wär es dann (ohne Gewähr):
cd /opt/fhem/www/tablet/js
sudo cp widget_uwz.js widget_uwz.bck
sudo chown fhem:dialout widget_uwz.js
## update durchführen
sudo rm widget_uwz.js
sudo cp widget_uwz.bck widget_uwz.js
sudo chown root:root widget_uwz.js
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

setstate

Wie kann ich hier helfen? Soll ich eine bestimmte Version auf Github hochladen?

ext23

Ich denke es macht Sinn die letzte Version: https://forum.fhem.de/index.php/topic,64334.msg824389.html#msg824389

einzuchecken. Bei mir funktioniert alles und vor allem das Swipe/Slider oder wie man es nennt funktioniert hier gut ohne das die Seite ständig refreshed wird etc.

@yersinia: stimmt, gute Idee, oder aus den updates excluden bei globals.

/Daniel
HM, KNX, FS20, 1-Wire, PanStamp, AVR-NET-IO, EM1000EM, PCA301, EC3000, HM-LAN, CUL868, RFXtrx433, LGW, DMX @Ubuntu-Server (Hauptsystem) & Raspberry Pi (Satellit)

curt

#235
Fullquote, da schon etwas her - betrifft #79 / #80 dieses Threads:
Zitat von: XXL-Wing am 20 Januar 2017, 19:54:05
wäre es möglich einen Modus zu bauen, in dem die einzelnen Meldungen nebeneinander angezeigt werden und nicht untereinander?

Zitat von: chris1284 am 21 Januar 2017, 08:23:15
eigentlich müsste das schon gehen. das widget erzeugt pro meldung einen n <div></div> von class "cell". wenn du darum eine hbox baust sollten die meldungen nebeneinander erscheinen würde ich meinen.
leider finde ich gerade keine meldungen / regionen mit mind. 2 meldungen um das mal zu testen. außer schweden/norwegen die haben ja ordentlich meldungen aber bekomme ich nicht eingebunden

EDIT: noch mal drüber nachgedacht: im grid ist es ja nur ein element, wird wohl doch nicht gehen, ich kann das aber dneke ich einbauen

hbox bringt zwar beide Icons in ein Kästchen - aber auch untereinander. Hat sich denn in Sachen "ich kann das aber denke ich einbauen" etwas getan?

Freundliche Grüße

P.S: @chris1284
RPI 4 - Jeelink HomeMatic Z-Wave

Thorsten Pferdekaemper

Hi,
wer ist denn zurzeit der Maintainer des Teils? ...und welches ist die aktuelle Version bzw. über welchen Weg wird diese ausgeliefert?
Ich frage deshalb, weil die mit FTUI mitgelieferte Version in FUIP nicht läuft, da die "depends" unsauber programmiert sind. Die beiden weiter oben in diesem Thread angegebenen Versionen schreiben immer ein "undefined" mit rein, da "textdivider" nicht gesetzt wird. Außerdem stimmt die Angabe der Farben nicht mit der Doku im Wiki überein.
Gruß,
   Thorsten
FUIP

curt

Zitat von: Thorsten Pferdekaemper am 22 Oktober 2018, 16:21:19
wer ist denn zurzeit der Maintainer des Teils?

Mal ganz allgemein zu FTUI-Maintainern: Das scheint mir (im Gegensatz) zu FHEM nicht wirklich strukturiert, vielleicht sollten wir das angehen. So fehlt mir zum Beispiel in den Wiki-FTUI-Widget-Artikeln rechts oben ein Kasten (wie bei den FHEM-Modul-Artikeln), der u.a. sagt, wer Maintainer ist. Das wird wohl nur gehen, wenn @setstate das auch so sieht und somit auch so will.

Zitat von: Thorsten Pferdekaemper am 22 Oktober 2018, 16:21:19
...und welches ist die aktuelle Version

Wohl
// widget_uwz last changed 2017-11-17 17:00:00 by chris1284

Zitat von: Thorsten Pferdekaemper am 22 Oktober 2018, 16:21:19
bzw. über welchen Weg wird diese ausgeliefert?

IMHO über den FTUI-Update-Zweig.

Aber -wieder allgemein- scheint mir das alles wacklig, Beispiele:
Seit einem Jahr gibt es den Hinweis, dass das svgplot-widget nicht läuft - gleich mit dem Vorschlag, wo genau man da gegentreten muss. Leider war das unter Neulingsfragen. Ich habe dann @setstate gebeten, da mal in das fremde Modul einzugreifen.
(Hat er sofort gemacht, das ist als update schon auf dem Weg.)

Oder das Calendar-Widget, da schaut wohl @OdfFhem grad drüber, das hat seine letzte Änderung auch von @chris1284 .

HINT: Ich habe nichts über oder gar gegen @chris1284 gesagt. Ich kann da nichts beurteilen. Das steht mir überhaupt nicht zu. - Es geht um was ganz anderes: Wie gehen wir mit fehlerhaften und/oder verwaisten FTUI-Modulen um? Und wie sorgen wir dafür, dass jedes Modul eine einigermaßen klare (aktueller Maintainer, letzte produktive Version, aktuelle Testversion) Wiki-Dokumentation hat bzw. bekommt?
RPI 4 - Jeelink HomeMatic Z-Wave

der Bernhard

#238
hi,

ist es eigtl. möglich die einzelnen warnings untereinander zu haben und wie eine laufschrift automatisch nach oben rennen zu lassen. Beiß mir da momentan echt die zähne aus...

Habe nur 880 x 80 px platz und würde gerne die warnings nach oben oder unten rennen lassen..

Danke.. Bernhard

edit: ok geht anscheinend mit swiper und autoplay... hat da irgendwer einen tipp für mich?

der Bernhard

Hallo,

ich habe jetzt die Pagination entfernt. Keine Ahnung wie man das als eigenes Attribut macht welches dann in den html files gesetzt werden kann und ob das so korrekt ist aber es funktioniert. Jedenfalls wenn man den pagination Wert wieder gegen 'uID' (comments im js) tauscht ist er wieder da. Weiters habe ich den grünen Hintergrund an das Grün vom Icon angepasst, den Text mit einem Margin-Top versehen, damit der nicht so oben klebt und die Zeit mit dem Wort "Uhr" ergänzt.

Für mehr Änderungen ist mein Basiswissen leider nicht ausreichend.

LG Bernhard


// widget_uwz last changed 2018-08-04 by Bruchbude
//-------------------------------------------------------------------
//-------------------------------------------------------------------
// 2018-08-04 switching to sendFhemCommand() now we get only 1 update() on changes instead of countless
// 2018-08-04 request shorttext or longtext from device, not both
// 2018-12-12 removed pagination and cosmetics

"use strict";

function depends_uwz() {
var deps = [];
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir + 'lib/swiper.min.css" type="text/css" />');
    if (!$.fn.Swiper) {
        deps.push(ftui.config.basedir + "lib/swiper.jquery.min.js");
    }
return deps;
};
var Modul_uwz = function() {
var colormap = {
'0': '#00ff00', // Keine Warnung
'1': '#439400', // Wetterhinweise
'2': '#ffe900', // Vorwarnung für Unwetterwarnung
'3': '#ffB400', // Unwetterwarnung
'4': '#e30000', // Unwetterwarnung stark
'5': '#e900e9', // Unwetterwarnung extrem
};
var getUniqueID = (function() {
var staticVar = 0;
return function() {
return (++staticVar).toString();
}
})();

function init() {
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
// We can can more then one widget_uwz, so init all of them
me.elements.each(function(index) {
var elem = $(this);
elem.initData('pagination', 'null');
elem.initData('max', 10);
elem.initData('device', "noUWZDeviceDefined");
elem.initData('detail', ["IconURL", "ShortText", "LongText", "Swiper"]);
elem.initData('swiperstyle', 'no'); // Deprecated. Will be replaced by "Swiper" in 'detail' array soon
elem.initData('fontcolor', '#222222');
elem.initData('imgsize', 30);
elem.initData('autoplay', '6000');
elem.initData('uID', getUniqueID()); // Each Swiper needs an uniqueID
elem.initData('WarnCount', 'WarnCount');
me.addReading(elem, "WarnCount"); // if this value changes, update() is called.
});
}

function getWarnings(elem, res, sumWarnings, strtSlide, width, stopSlide)
{
var myHtml = ""
var imageMargin = elem.data('detail').includes('IconURL') ? parseInt(elem.data('imgsize')) + 10 : 4;
for (var i = 0; i < sumWarnings; i++)
{
var prefix = "Warn_" + i + "_";
var color = res.Readings[prefix + 'uwzLevel'].Value;
if (color >= colormap.length) color = colormap.length - 1;
myHtml+= strtSlide; // startcode for a slider (swiper)
myHtml+= "<div style=\"float:left;" + width + ";overflow-x:hidden;border-radius:4px;color:" + elem.data('fontcolor') + ";background-color:" + colormap[color] + ";\">";
if (elem.data('detail').includes('IconURL')) myHtml += "<div class=\"\" style=\"float:left;margin:4px;\"><img src=\"" + res.Readings[prefix + 'IconURL'].Value + "\" onerror=\"javascript:this.src='/fhem/images/openautomation/message_attention.svg'\" width=\"" + elem.data('imgsize') + "\" height=\"" + elem.data('imgsize') + "\"></div>";
if (!elem.data('detail').includes('LongText')) {
myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;margin-top:14px;\">" + res.Readings[prefix + 'ShortText'].Value; // for text margin change margin-top value
} else {
myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;margin-top:14px\">" + res.Readings[prefix + 'LongText'].Value; // for text margin change margin-top value
}
myHtml+= elem.data('textdivider') + "Gültig vom " + res.Readings[prefix + 'Start'].Value.toDate().ddmmhhmm() + " Uhr  bis " + res.Readings[prefix + 'End'].Value.toDate().ddmmhhmm() + " Uhr";
myHtml+= "</div></div>";
myHtml+= stopSlide; // stopcode for a slider (swiper)
}
return myHtml;
}

function update(device, reading) {
// we need only updates for our device, so filter out all other widgets
me.elements.filter('div[data-device="' + device + '"]').each(function(index) {
var elem = $(this);
var sumWarnings = parseInt(elem.getReading('WarnCount').val);
if (!sumWarnings)
return elem.html("<div class=\"cell top-space\">Aktuell keine Warnmeldungen.</div>");
// build a string with all keywords we want to receive from the fhem weather device
var readingGroupWarn = (elem.data('detail').includes('LongText')?["End", "IconURL", "LongText", "Start", "uwzLevel"]:["End", "IconURL", "ShortText", "Start", "uwzLevel"]);
var strDaten = " STATE longpoll lastConnection WarnCount";
if (sumWarnings > elem.data('max'))
    sumWarnings = elem.data('max');
for (var j = 0; j < sumWarnings; j++) {
for (var i = 0; i < readingGroupWarn.length; i++) {
strDaten+= " Warn_" + j + "_" + readingGroupWarn[i];
}
}
var fhemJSON = ftui.sendFhemCommand("jsonlist2 WEB," + device + strDaten).done(function(fhemJSON) {
var res = fhemJSON.Results[1]; // 0 = Arg, 1 =Results
var myHtml = "";
if (sumWarnings > elem.data('max')) sumWarnings = elem.data('max');
// We got some warnings
if (elem.data('swiperstyle') != 'yes') {
myHtml+= getWarnings(elem, res, sumWarnings, "", "width:100%", "");
} else {
myHtml+= "<div class=\"swiper-container\" id=\"uwz-swiper" + elem.data('uID') + "\">";
myHtml+= "<div class=\"swiper-wrapper\">"
myHtml+= getWarnings(elem, res, sumWarnings, "<div class=\"swiper-slide\">", "width:98%", "</div>");
myHtml+= "</div><div class=\"swiper-pagination\" id=\"uwz-swiper-pagination" + elem.data('uID') + "\" style=\"position:static\"></div></div>";
myHtml+= "<script>\
var uwzswiper" + elem.data('uID') + " = new Swiper(this.document.getElementById('uwz-swiper" + elem.data('uID') + "'), {\
pagination: this.document.getElementById('uwz-swiper-pagination" + elem.data('pagination') + "'),\  // If pagination wanted, change value 'pagination' to 'uID'
spaceBetween: 30, autoplay: " + elem.data('autoplay') + ",\
autoplayDisableOnInteraction: false,\
hashnav: false, hashnavWatchState: true\
});\
</script>";
}
elem.html(myHtml);
});
//extra reading for hide
me.update_hide(device, reading);
});
};

// public
// inherit all public members from base class
var me = $.extend(new Modul_widget(), {
//override or own public members
widgetname: 'uwz',
init: init,
update: update,
});
return me;
};