[widget_uwz] widget für UWZ Unwetterzentrale.

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

Vorheriges Thema - Nächstes Thema

yersinia

Die JS hatte ich nicht angepackt. Und ansonsten waren es nur Standardwidgets - wie das andere Swiper-Widget.

Dann ich hab mal im Netz gestöbert und hab für mich eine funktionierende Lösung gefunden.
Erst hatte ich versucht, eine Vererbung der CSS Klassen zu erwirken und diese anstelle von swiper-pagination etc. zu nutzen. Aber Vererbung, wie ich diese mir vorstellte, funktioniert so mit CSS nicht.  :-\
In der Swiper-API steht es etwas versteckt (hier und hier) , aber man kann auch HTML Elemente mit normalen JS ansprechen: setzt man im HTML Element eine ID, kann man mit document.getElementById() darauf referenzieren.
Ich habe die widget_uwz.js wie folgt angepasst:
Zeile 131 - hinzufügen von id=\"uwz-swiper\":
mytext += "<div class=\"swiper-container\" id=\"uwz-swiper\">";
Zeile 132 - hinzufügen von id=\"uwz-wrapper\":
mytext += "<div class=\"swiper-wrapper\" id=\"uwz-wrapper\">"
Zeile 134 - hinzufügen von id=\""+elem.data('hashtxt')+""+i+"\":
mytext += "<div class=\"swiper-slide\" data-hash=\""+elem.data('hashtxt')+""+i+"\" id=\""+elem.data('hashtxt')+""+i+"\">";
Zeile 157 - hinzufügen von id=\"uwz-swiper-pagination\":
mytext += "<div class=\"swiper-pagination\" id=\"uwz-swiper-pagination\" style=\"position:static\"></div>";
Zeile 161 - ersetzen von '.swiper-container' durch this.document.getElementById('uwz-swiper'):
var "+elem.data('swipername')+" = new Swiper(this.document.getElementById('uwz-swiper'), {\
Zeile 162 - ersetzen von '.swiper-pagination' durch this.document.getElementById('uwz-swiper-pagination'):
pagination: this.document.getElementById('uwz-swiper-pagination'),\
Zeile 166 - hashnav auf false gesetzt:
hashnav: false,\

@chris1284: kannst du das mal testen und ggf mit in die widget_uwz.js übernehmen?
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

chris1284

man müsste aber eine ID generieren die unic ist da man mehrere UWZ-widgets auf einer Seite haben kann.

yersinia

mmmh, dies stimmt.  :o
Das Problem besteht doch auch wenn man mehr als ein UWZ Widgets bzw swiper auf einer seite benutzt - oder nicht? Es fehlt doch die eindeutige Zuordnung.
Mehrere swiper instanzen scheinen wohl schwierig zu sein (siehe hier). Sie müssten dann individuell über das JS initialisiert werden.

Zumindestens mir hilft es den UWZ swiper von dem anderen Swiper zu unterscheiden - und beide funktionieren parallel.
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

Sailor

Hallo zusammen

für den Fall, dass ich ein bereits bestehendes Problem anspreche, bitte ich nur um link yu dem entsprechenden Beitrag.

Mein Problem:

Meine Einstellung

<div data-type="uwz" data-device="OS_BadWeatherWarning" data-detail='["WarnUWZLevel_Color", "IconURL", "ShortText","WarnTime"]' data-max="5" class="top-space"></div>

sorgt mit oder ohne Icon dafür, dass das Message - Band etwas breiter ist als 2 Kästen des ftui und somit knapp darüber hianus ragt.
3 Kästen will ich nicht spendieren, da dann sehr viel Platz verschwendet wird.

Gibt es eine Möglichkeit das Band per Parameter in seiner Grösse zu gestalten oder dies automatisch an der jeweiligen Kastengröße zu orientieren?
Der Abstand auf der linken Seite ist nämlich schon optimal.

Danke!

Gruss
    Sailor
******************************
Man wird immer besser...

Wasserwerk33

Hi Leute

habe mein Tablet Ui etwas überarbeitet nun läd er aber leider meine Unwetterdaten nicht mehr aus meinem Fhem bereich.
Vielleicht kann mir jemand sagen wo mein fehler ist. Habe es mit dem auf der 1. Seite verglichen.

defmod Unwetterzentrale UWZ DE 49479 1800
attr Unwetterzentrale event-on-change-reading Status
attr Unwetterzentrale humanreadable 1
attr Unwetterzentrale lang de
attr Unwetterzentrale room Wetter

setstate Unwetterzentrale Warnungen: 1
setstate Unwetterzentrale 2018-05-13 14:33:57 WarnCount 1
setstate Unwetterzentrale 2018-05-13 14:33:57 WarnUWZLevel 2
setstate Unwetterzentrale 2018-05-13 14:33:57 WarnUWZLevel_Color gelb
setstate Unwetterzentrale 2018-05-13 14:33:57 WarnUWZLevel_Str Stufe Gelb (Vorwarnung für Unwetterwarnung)
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_AltitudeMax 9000
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_AltitudeMin -10
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Creation 1526114040
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Creation_Date 12.05.2018
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Creation_Time 10:34
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_End 1526256000
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_End_Date 14.05.2018
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_End_Time 02:00
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_EventID 15261041014137
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Hail 1
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_IconURL http://www.unwetterzentrale.de/images/icons/gewitter-gelb.gif
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_LongText Am Sonntag können sich im Tagesverlauf starke Regenschauer und Gewitter bilden. Unter Umständen sind die Gewitter sehr blitzintensiv und können mit Starkregen von 15 bis 45 Litern Regen pro Quadratmeter binnen ein bis zwei Stunden einhergehen. Stellenweise ist auch Hagel mit Korngrößen bis etwa 3 cm Zentimeter nicht ausgeschlossen. Stürmischen Böen odr Sturmböen bis um 80 km/h sind ebenfalls möglich. Da die Gewitter mangels Höhenwind nur langsam ziehen sind vereinzelt auch Regenmengen über 50 Liter pro Quadratmeter binnen weniger Stunden nicht auszuschließen.
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Severity 8
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_ShortText Örtl. Starkregen oder heftige Gewitter mit Starkregen, Hagel, stürmische Böen
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Start 1526209200
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Start_Date 13.05.2018
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Start_Time 13:00
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Type 7
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_Type_Str Gewitter
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_levelName alert_forewarn_red
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_uwzLevel 2
setstate Unwetterzentrale 2018-05-13 14:33:57 Warn_0_uwzLevel_Str Stufe Gelb (Vorwarnung für Unwetterwarnung)
setstate Unwetterzentrale 2018-05-13 14:33:57 currentIntervalMode normal
setstate Unwetterzentrale 2018-05-13 14:33:57 durationFetchReadings 0.00
setstate Unwetterzentrale 2018-05-13 14:33:57 lastConnection 27 values captured in 0.00 s
setstate Unwetterzentrale 2018-05-13 14:33:57 state Warnungen: 1


<!DOCTYPE html>
<html>

<head>
    <!-- Template für Wetterwarnung -->
</head>

<body>
<div data-type="popup" id="wetterwarung" data-height="500px" data-width="1000px" data-return-time="100" data-draggable="false">
<div data-type="symbol"
data-device="Unwetterzentrale"
data-get="WarnUWZLevel"
data-states='["0","1","2","3","4","5"]'
data-icons='["mf1-cloud-alert","mf1-cloud-alert","mf1-cloud-alert","mf1-cloud-alert","mf1-cloud-alert blink","mf1-cloud-alert blink"]'
data-colors='["white","SeaGreen","yellow","Orange","Crimson","#FF0000"]'
data-warn-color="#FFFFFF"
data-warn="Unwetterzentrale:WarnCount"
data-hide="WarnCount"
data-hide-on="0"
data-hide-off="!0" style="font-size:175%; margin-left:-15px;"></div>
<div class="dialog">
<header style="background-color:#202020;">
<div class="sheet">
<div class="left" style="margin-left:50px; margin-top:17px; margin-bottom:15px; font-size:30px; color:white;">WETTERWARNUNG</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right bigger" style="margin-top:10px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
<div class="top-space center">
<div class="hbox center">
<div data-type="uwz"
data-device="Unwetterzentrale"
data-imgsize="50"
data-detail='["uwzLevel","IconURL","ShortText","LongText","WarnTime"]'
data-textdivider="<br>"
data-max="5" class="nocache left-space-2x col-1-1">
</div>
<div data-type="image"
data-refresh="900"
data-width="415"
data-height="415"
data-url="http://www.unwetterzentrale.de/images/map/nrw_index.png"
class="nocache top-space col-1-1">
</div>
</div>
</div>
</div>
</div>
</body>

</html>


Hoffe jemand kann mir sagen wieso es nicht klappt

ext23

Gibt es hier schon was Neues wegen dem Swiper?!? Wenn ich data-swiperstyle="yes" setze dann refreshed sich bei mir die komplette Seite im loop.

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

ToM_ToM

#201
Zitatman müsste aber eine ID generieren die unic ist da man mehrere UWZ-widgets auf einer Seite haben kann.

Kann man die nicht per Device parameter übergeben? Also so data-unique-id="4711" Nur mal so eine Idee. :)


@yersinia: Ich habe die Anpassungen von dir mal übernommen, aber bekomme leider immer noch die Fehlermeldung auf dem angehängten Screenshot.


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

yersinia

#202
@Sailor:
Hast du mal versucht, das UWZ widget in eine Zelle zu packen oder mit style="width:###px;" in der Breite zu begrenzen? Ich hab das so gelöst:
<!-- UNWETTERZENTRALE -->
                        <div class="row">
                                <div class="col">
                                <div data-type="uwz"
                                        data-device="Unwetterzentrale"
                                        data-detail='["uwzLevel", "IconURL", "ShortText","WarnTime"]'
                                        data-max="5"
                                        data-imgsize="70"
                                        data-lngtxtstyle="normal"
                                        data-shttxtstyle="normal"
                                        data-swiperstyle="yes"
                                        data-swipername="uwzswiper"
                                        data-tabclass="uwzswiper"
                                        data-hashtxt="uwzslide"
                                        data-textdivider="<br>"
                                        class="top-narrow-10"
                                        style="width:640px;"> <!-- <--- style der die Breite einschränkt -->
                                </div>
                                </div>
                        </div>


@ToM_ToM:
Ich hab mein widget_uwz.js mal angehängt. Vielleicht hilft dies in Kombination mit dem Quellcode oben.
Die Fehlermeldung ist aber schon kurios. Welcher identifier könnte denn fehlen? Seite mal neu geladen? Die widget_swiper.js eingebunden?
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

ToM_ToM

ZitatDie Fehlermeldung ist aber schon kurios. Welcher identifier könnte denn fehlen? Seite mal neu geladen? Die widget_swiper.js eingebunden?

Neu geladen schon mehrfach auch Cache geleert usw.
Wie meinst du die widget_swiper.js eingebunden? Ich hatte die swiper lib eingebunden, hat aber auch nichts gebracht.

Das ist mein Widget:


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

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

yersinia

Hi ToM_ToM,
ich hab in der index.html die swiper css eingebunden, ansonsten gibt es keine andere lib - das uwz widget lädt die lib selbstständig nach bei Bedarf
<link rel="stylesheet" href="lib/swiper.min.css" />

Bist du dir zudem sicher, dass die Fehlermeldung von dem UWZ-swiper-aufruf kommt?
Hast du auch den code nochmal überprüft? getElementById ist zB case-sensitive.

Die Fehlermeldung komtm recht früh und möglicherwiese geht schon beim swiper-Aufruf etwas schief. Bei mir sieht es so aus (Zeile 160ff):
mytext += "<script>\
                                                var "+elem.data('swipername')+" = new Swiper(this.document.getElementById('uwz-swiper'), {\
                                                        pagination: this.document.getElementById('uwz-swiper-pagination'),\
                                                        spaceBetween: 30,\
                                                        autoplay: 4000,\
                                                        autoplayDisableOnInteraction: false,\
                                                        hashnav: false,\
                                                        hashnavWatchState: true\
                                                });\
                                                </script>";


Btw, mWn ist das so falsch:
data-textdivider="</br>"
richtig wäre
data-textdivider="<br>"
oder
data-textdivider="<br />"
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

ToM_ToM

Hi yersinia,

die swiper.css muss ich ja nicht einbinden, die wird ja durch das swiper widget eingebunden.


ZitatBist du dir zudem sicher, dass die Fehlermeldung von dem UWZ-swiper-aufruf kommt?
Ja. Sobald ich das UWZ widget rausnehme, ist auch die Fehlermeldung verschwunden.

Den Code habe ich auch nochmal verglichen. Bekomme den Fehler sowohl mit der Anpassung von dir als auch mit dem orginal UWZ widget.

Das mit dem "data-textdivider" stimmt. Das hatte ich gar nicht gesehen. Danke. :) Ist jetzt korrigiert. War aber leider nicht der Grund für meinen Fehler.^^

Hier mal die Auflistung was ich alles in der index im header initialisiere:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="widget_base_width" content="51">
<meta name="widget_base_height" content="57">
<meta name="widget_margin" content="0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='gridster_disable' content='1'>
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name="longpoll_type" content="websocket">
<meta http-equiv="Cache-Control" content="no-store" />

<!--<script type="text/javascript" src="/../fhem/pgm2/jquery.min.js"></script>-->
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>

<!-- Widget analogclock von http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-widget-analogclock -->
<script type="text/javascript" src="/fhem/tablet/lib/analogclock.js"></script>

<!-- define your personal style here, it wont be overwritten  -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user2.css" />

<!-- WDTimer Widget Styles -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />

<!-- GMaps Widget Styles -->
<link rel="stylesheet" href="/fhem/tablet/css/ftui_gmaps.css" />

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

ToM_ToM

Hey yersinia,

ich weiß jetzt woher der Fehler kommt. Meine Seiten liegen in einem Unterordner. Und anscheinend gibt es noch Widgets die damit noch nicht klar kommen da darin noch relative Pfade angegeben sind.
setstate hatte ja damals die Widgets angepasst, aber anscheind gibt es noch irgendwo code der noch nicht angepasst ist. Das könnte jetzt am swiper oder am uwz liegen. Nur leider bin ich in JavaScript nicht so fit.
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

yersinia

Hey ToM_ToM,

das kann natürlich sein. Ich hatte im Fehlerfall auch mal beobachtet, dass der Swiper die Swiperslides ungefähr so referenziert:
http://fhem-ip/fhem/ftui/index.html#swiperslide1
Dabei liegt die index.html unter /opt/fhem/www/tablet

Würde es ein Unterschied machen, wenn du das UWZ widget (evtl inkl. swiper widget) auf der Seite in der du das uwz modul nutzt direkt einbindest?

Aber zugegebener Maßen ist ds für mich auch nur Trial&Error. -.-
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

ToM_ToM

#208
Hallo yersinia,

das funktioniert leider auch nicht. Habe jetzt nochmal die erste Funktion depends_uwz() im UWZ-Widget um den ftui Basispfad angepasst. Aber das hat leider auch nicht geholfen.
Irgendwo ist noch der Wurm drin.


EDIT: Habe nochmal den Browser-Cache geleert. Die folgende Anpassung hat doch geholfen. :)


"use strict";
function depends_uwz() {
    var deps = [ftui.config.basedir + "lib/swiper.jquery.min.js"];
$('head').append('<link rel="stylesheet" href="' + ftui.config.basedir +  'lib/swiper.min.css" type="text/css" />');
    return deps;
}
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Bruchbude

Moin,
bin neu hier und auf dem Feld der Hausautomation. Fange gerade an mit Hilfe von fhem und Tablet UI meine Bruchbude zu pimpen..

Zum Thema:
Ich habe meinem Tablet eine Internetsperre verpasst und das problem das ich bei der IconURL ein BrokenLink Icon zu sehen bekomme.
Könnte man das Widget so ändern das ein default warnungs-icon eingestellt wird?