[widget_uwz] widget für UWZ Unwetterzentrale.

[Bruchbude]

Moin,
habe die Zeile if (spalte == 'IconURL') ...  so geändert:

Code Auswählen Erweitern

if (spalte == 'IconURL')  { mytext += "<div class=\"col-1-5 inline cell\"><img src=\"" + elem.getReading('Warn_'+i+'_'+spalte).val + "\" onerror=\"javascript:this.src='/fhem/images/openautomation/message_attention.svg'\" width=\""+ elem.data('imgsize')+"\" height=\""+elem.data('imgsize')+"\" class=\"cell centered\"></div>"; }

sieht jetzt so aus:
(https://www2.pic-upload.de/thumb/35551398/uwz_neu.png)

Aber das Modul hat keine gute Formatierung der Ausgabe und es werden extrem viele unnötige Schleifendurchläufe gemacht um die Daten aufzubereiten. An das Widget muss wohl nochmal Hand angelegt werden...

[CoolTux]

Moin,
habe die Zeile if (spalte == 'IconURL') ...  so geändert:

Code Auswählen Erweitern

if (spalte == 'IconURL')  { mytext += "<div class=\"col-1-5 inline cell\"><img src=\"" + elem.getReading('Warn_'+i+'_'+spalte).val + "\" onerror=\"javascript:this.src='/fhem/images/openautomation/message_attention.svg'\" width=\""+ elem.data('imgsize')+"\" height=\""+elem.data('imgsize')+"\" class=\"cell centered\"></div>"; }

sieht jetzt so aus:
(https://www2.pic-upload.de/thumb/35551398/uwz_neu.png)

Aber das Modul hat keine gute Formatierung der Ausgabe und es werden extrem viele unnötige Schleifendurchläufe gemacht um die Daten aufzubereiten. An das Widget muss wohl nochmal Hand angelegt werden...

Ich denke mal Chris hat bestimmt nichts gegen einen Patch ein zu wenden. Nur Mut!

[Bruchbude]

moin,
habe folgende änderungen gemacht:
- icon "fällt" nicht mehr nach rechts bei kurzen texten
- anzeige eines standard icons falls icon nicht gefunden wird
- icon hintergrundfarbe passt jetzt zur hintergrundfarbe
- start/end zeit wird aus warn_x_start/end berechnet
- text der rechts aus div ragt wird abgeschnitten
- uniqueID für swiper

update: refresh problem auch gelöst... funzt jetzt alles bei mir (setTimout(...) brachte die Lösung)

Code Auswählen Erweitern

// widget_uwz last changed 2018-07-19 by Bruchbude
//-------------------------------------------------------------------
//-------------------------------------------------------------------
// 2018-01-28 added data-hide
// 2018-07-08 modified by Bruchbude

"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': '#ff00ff', // 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('WarnCount', 'WarnCount');
elem.initData('detail', ["WarnUWZLevel_Color", "uwzLevel", "IconURL", "ShortText", "LongText", "Start", "End", "WarnTime", ]);
elem.initData('fontcolor', '#222222');
elem.initData('imgsize', 30);
elem.initData('swiperstyle', 'no');
elem.initData('lngtxtstyle', '');
elem.initData('uID', getUniqueID()); // Each Swiper needs an uniqueID
// init all default values and use addReding for every value that needs updates
elem.initData("WarnCount", "WarnCount");
me.addReading(elem, "WarnCount");
var readingGroupWarn = ["uwzLevel", "IconURL", "ShortText", "LongText", "Start", "End"];
for (var j = 0; j < elem.data('max'); j++) {
for (var i = 0; i < readingGroupWarn.length; i++) {
var strValue = "Warn_" + j + "_" + readingGroupWarn[i];
elem.initData(strValue, strValue);
me.addReading(elem, strValue);
}
}
});
}

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 myHtml = "";
var sumWarnings = parseInt(elem.getReading('WarnCount').val);
// No warnings
if (!sumWarnings)
    return elem.html("<div class=\"cell top-space\">Aktuell keine Warnmeldungen.</div>");
// We got some warnings
if (sumWarnings > elem.data('max')) sumWarnings = elem.data('max');
var imageMargin = elem.data('detail').includes('IconURL') ? parseInt(elem.data('imgsize')) + 10 : 4;
if (elem.data('swiperstyle') != 'yes') {
for (var i = 0; i < sumWarnings; i++) {
var prefix = "Warn_" + i + "_";
var color = elem.getReading(prefix + 'uwzLevel').val;
if (color >= colormap.length) color = colormap.length - 1;
myHtml += "<div style=\"float:left;width:100%;overflow-x:hidden;margin:3px;border-radius:4px;color:" + elem.data('fontcolor') + ";background-color:" + colormap[color] + ";\">";
if (elem.data('detail').includes('IconURL') && typeof elem.getReading(prefix + 'IconURL').val != "undefined") myHtml += "<div class=\"\" style=\"float:left;margin:4px;\"><img src=\"" + elem.getReading(prefix + 'IconURL').val + "\" 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')) {
if (typeof elem.getReading(prefix + 'ShortText').val != "undefined") myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\"" + elem.data('shttxtstyle') + ">" + elem.getReading(prefix + 'ShortText').val;
} else {
if (typeof elem.getReading(prefix + 'LongText').val != "undefined") myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\"" + elem.data('lngtxtstyle') + ">" + elem.getReading(prefix + 'LongText').val;
}
if ((typeof elem.getReading(prefix + 'Start').val != "undefined") && (typeof elem.getReading(prefix + 'End').val != "undefined")) myHtml += elem.data('textdivider') + "Gültig vom " + elem.getReading(prefix + 'Start').val.toDate().ddmmhhmm() + " bis " + elem.getReading(prefix + 'End').val.toDate().ddmmhhmm();
myHtml += "</div></div>";
}
}
else // swiper
{
myHtml += "<div class=\"swiper-container\" id=\"uwz-swiper" + elem.data('uID') + "\">";
myHtml += "<div class=\"swiper-wrapper\">"
for (var i = 0; i < sumWarnings; i++) {
myHtml += "<div class=\"swiper-slide\">";
var prefix = "Warn_" + i + "_";
var color = elem.getReading(prefix + 'uwzLevel').val;
if (color >= colormap.length) color = colormap.length - 1;
myHtml += "<div style=\"float:left;width:98%;overflow-x:hidden;margin:3px;border-radius:4px;color:" + elem.data('fontcolor') + ";background-color:" + colormap[color] + ";\">";
if (elem.data('detail').includes('IconURL') && typeof elem.getReading(prefix + 'IconURL').val != "undefined") myHtml += "<div class=\"\" style=\"float:left;margin:4px;\"><img src=\"" + elem.getReading(prefix + 'IconURL').val + "\" 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')) {
if (typeof elem.getReading(prefix + 'ShortText').val != "undefined") myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + elem.getReading(prefix + 'ShortText').val;
} else {
if (typeof elem.getReading(prefix + 'LongText').val != "undefined") myHtml += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + elem.getReading(prefix + 'LongText').val;
}
if ((typeof elem.getReading(prefix + 'Start').val != "undefined") && (typeof elem.getReading(prefix + 'End').val != "undefined")) myHtml += elem.data('textdivider') + "Gültig vom " + elem.getReading(prefix + 'Start').val.toDate().ddmmhhmm() + " bis " + elem.getReading(prefix + 'End').val.toDate().ddmmhhmm();
myHtml += "</div></div></div>";
}
myHtml += "</div>";
myHtml += "<div class=\"swiper-pagination\" id=\"uwz-swiper-pagination" + elem.data('uID') + "\" style=\"position:static\"></div>";
myHtml += "</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: 8000,\
autoplayDisableOnInteraction: false,\
hashnav: false,\
hashnavWatchState: true\
});\
setTimeout(function(){ uwzswiper" + elem.data('uID')+".update(); }, 10);\
</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;
};


[ToM_ToM]

Hallo Zusammen,

funktioniert das UWZ bei euch korrekt? Bei mir scheint er den Swiper zu ignorieren und alles untereinander zu packen. Müsste das nicht eig. durchwischbar (keine Ahnung wie man das auf Deutsch sagt) sein?

Siehe Screenshot anbei.

VG, Thomas

[chris1284]

swiper funktioniert hier einwandfrei, def?

[ToM_ToM]

Hi Chris,

anbei meine UWZ Def:

Code Auswählen Erweitern


<div data-type="uwz"
data-device="Wetter_MA_Unwetterzentrale"
data-imgsize="50"
data-detail='["IconURL","ShortText","WarnTime"]'
data-lngtxtstyle="normal"
data-max="5"
data-textdivider="<br />"
data-swiperstyle="yes"
data-swipername="uwzswiper"
data-tabclass="uwzswiper"
data-hashtxt="uwzslide"
                   class="top-space">
</div>


Es hatte bei mir auch schon mal funktioniert. Ich bin jedoch umgestiegen auf Apache und nutze keinen eigenen HTTPSRV mehr für FUTI (falls das hier relevant ist).

VG, Thomas

[Bruchbude]

moin tom_tom,

u.a. swiper der original version hat bei mir auch nicht funktioniert.
einen dicken bock hast du auf jeden fall mit 

Code Auswählen Erweitern

data-textdivider="<br />" geschossen. mach mal mit

Code Auswählen Erweitern

data-textdivider="<br>"
falls es dann immer noch nicht klappt teste mal bitte meine version.
(nach überschreiben der widget_uwz.js aber browsercache leeren)

Bruchbude

[ToM_ToM]

Hallo Bruchbude,

das mit dem textdevider habe ich geändert und schon steht es nicht mehr untereinander. Aber einen richtigen Swiper habe ich noch nicht. Es ist jetzt eher eine Art Scrollfunktion und kein Swipe.
Aber schon mal deutlich besser als vorher.
Habe auch deine Version am Start.

VG, Thomas

[Bruchbude]

moin tom_tom,
hört sich nach dem swiper internen problem an...
wenn du einen resize vom browserfenster machst oder das aktuelle browserfenster neu lädst - funzt es dann?
falls ja dann versuch mal im widget_uwz.js die setTimeout( .... )  auf einen höheren wert als 10 zu setzen
(zum testen ruhig mal auf 1000 was einer sekunde entspricht)

bruchbude

[ext23]

Bei mir macht der mit aktiviertem swiper ständig ein Seiten Refresh, ich kommt da auch nicht so ganz klar mit.

/Daniel

[ToM_ToM]

falls ja dann versuch mal im widget_uwz.js die setTimeout( .... )  auf einen höheren wert als 10 zu setzen

Hi Bruchbude, habe den Wert auf 100, 1000, 2000, 3000, 10000 und 100000 probiert.
Macht jedoch keinen Unterschied.

Es funktioniert nur dann korrekt, wenn sich das UWZ-Widget auf der Seite befindet die als erstes geladen wird. Dann geht es auch mit dem Standard-Timeout von 10.
Meine Konstellation ist jedoch die, dass ich mit Pagebutton eine Unterseite lade auf der das Widget dargestellt wird (diese hat auch die prefetch - Klasse).
Wenn ich dann von der Home-Seite auf die Weather-Seite wechsle, dann funktioniert das Swipen nicht korrekt.


VG, Thomas

[Bruchbude]

moin ext23, tom_tom,
ich bin mir nicht sicher ob ihr nicht noch irgendwas von ner alten version im cache habt....
ich hatte das problem beim testen ein paar mal das mein firefox-addon zwar so getan hat als ob der cache leer ist, aber erst nachdem ccleaner drübergelaufen ist war alles ok.
ich füge morgen mal irgendeine testausgabe ein damit wir das dann schonmal als fehlerquelle ausschliessen können

@tom_tom

wenn du einen resize vom browserfenster machst oder das aktuelle browserfenster neu lädst - funzt es dann?

[ToM_ToM]

Hi Bruchbude,

jap, nach nem Resize läuft es. Den Cache kann ich bei mir auschließen da ich jeden Test mit einer neuen privaten Session starte.

VG, Thomas

[ext23]

Bei mir haut es jetzt hin mit der gepatchten Version.

Danke.

[Bruchbude]

moin,

@ext23: sehr schön
@tom_tom:
hehe, dann wollen wir mal gucken wie private deine sessions so sind...
in der neuen version habe ich den autoplay parameter drin, das können wir gleichzeitig zum testen deines cachs nehmen.
wenn der swiper also nicht wie wild hin und her tanzt, dann liegts am cache.
(nicht vergessen  data-device="Unwetterzentrale" auf deinen devicenamen zu ändern)

Code Auswählen Erweitern


<div class="row" data-type="uwz" data-device="Unwetterzentrale" data-detail='["IconURL","ShortText","Swiper"]' data-swiperstyle="yes" data-autoplay="8" data-max="5" data-imgsize="40" data-textdivider="<br>"></div>


Code Auswählen Erweitern


// 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

"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. We 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
// init all default values and use addReding for every value that needs updates
elem.initData('WarnCount', 'WarnCount');
me.addReading(elem, "WarnCount");
var readingGroupWarn = ["End", "IconURL", "LongText", "ShortText", "Start", "uwzLevel"];
for (var j = 0; j < elem.data('max'); j++) {
for (var i = 0; i < readingGroupWarn.length; i++) {
var strValue = "Warn_" + j + "_" + readingGroupWarn[i];
elem.initData(strValue, strValue);
me.addReading(elem, strValue);
}
}
});
}

function getWarnings(elem, sumWarnings, strtSlide, width, stopSlide)
{
var html = ""
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 = elem.getReading(prefix + 'uwzLevel').val;
if (color >= colormap.length) color = colormap.length - 1;
html+= strtSlide; // startcode for a slider (swiper)
html+= "<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') && typeof elem.getReading(prefix + 'IconURL').val != "undefined") html += "<div class=\"\" style=\"float:left;margin:4px;\"><img src=\"" + elem.getReading(prefix + 'IconURL').val + "\" 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')) {
if (typeof elem.getReading(prefix + 'ShortText').val != "undefined") html += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + elem.getReading(prefix + 'ShortText').val;
} else {
if (typeof elem.getReading(prefix + 'LongText').val != "undefined") html += "<div class=\"left-align\" style=\"margin-left:" + imageMargin + "px;\">" + elem.getReading(prefix + 'LongText').val;
}
if ((typeof elem.getReading(prefix + 'Start').val != "undefined") && (typeof elem.getReading(prefix + 'End').val != "undefined")) html+= elem.data('textdivider') + "Gültig vom " + elem.getReading(prefix + 'Start').val.toDate().ddmmhhmm() + " bis " + elem.getReading(prefix + 'End').val.toDate().ddmmhhmm();
html+= "</div></div>";
html+= stopSlide; // stopcode for a slider (swiper)
}
return html;
}

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 myHtml = "";
var sumWarnings = parseInt(elem.getReading('WarnCount').val);
if (!sumWarnings)
    return elem.html("<div class=\"cell top-space\">Aktuell keine Warnmeldungen.</div>");
// We got some warnings
if (sumWarnings > elem.data('max')) sumWarnings = elem.data('max');
if (elem.data('swiperstyle') != 'yes') {
myHtml+= getWarnings(elem, sumWarnings, "", "width:100%", "");
} else {
myHtml+= "<div class=\"swiper-container\" id=\"uwz-swiper" + elem.data('uID') + "\">";
myHtml+= "<div class=\"swiper-wrapper\">"
myHtml+= getWarnings(elem, 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\
});\
setTimeout(function(){ uwzswiper" + elem.data('uID')+".update(); }, 10);\
</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;
};