UZSU icon in einem popup

[fuxl66]

Hi,

Grundsätzlich habe ich im Laufe der Zeit meine komplette Steuerung innerhalb meiner navigation.html in Popups verlegt.
Das klappt eigentlich sehr gut, ausser mit den UZSU Icons. Wie in folgendem Bild. Das Icon wird zwar angezeigt, jedoch ist es nicht klickbar. Läßt sich das lösen?
image.png

Ausschnitt:

<div id="popupIndoor" data-role="popup" style="width:380px; height:760px; border-color: white; border-style=solid;" data-theme="a">
    <table border="0" width="100%" cellpadding="0" cellspacing="8" align="center" border-spacing="9">
        <tr>
            <th colspan="2" align=left width="70%">{{ basic.print('', 'Text.WW', 'text', '', '', 'icon1') }}</th>
            <th colspan="1" align=right width="30%">{{ basic.symbol('', 'LWZ.iconDHW', '', 'sani_water_tap.svg', 1, '', 'icon1', '', '', 'micro') }}</th>
        </tr>
        <tr>
            <th  width="100%" colspan="3" align="center" style="border-top: 1px solid white;"></th>
        </tr>
        <tr>
            <td align=left width="35%">{{ basic.print('', 'Text.IST', 'text', '', '', 'icon0') }}</td>
            <td align=center width="35%"><b>{{ basic.print('', 'ModbusItems.LWZ404.dhwTemp', '°', '', '', 'icon1', '', '', 'micro') }}</b></td>
            <td align=center width="30%"></td>
        </tr>
        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" border-spacing="0">
            <tr>
                <td width="35%" align=left style="text-indent: 5px;">{{ basic.print('', 'Text.SollTag', 'text', '', '', 'icon0') }}</td>
                <td width="35%" align=left>{{ basic.select('', 'ModbusItems.LWZ404.p04DHWsetDayTemp', 'mini', [37,45,50], '', ['37°C','45°C','50°C']) }}</td>
                <td width="30%" align=center></td>
            </tr>
            <tr>
                <td align=left style="text-indent: 5px;">{{ basic.print('', 'Text.SollNacht', 'text', '', '', 'icon0') }}</td>
                <td align=left>{{ basic.select('', 'ModbusItems.LWZ404.p05DHWsetNightTemp', 'mini', [37,45,50], '', ['37°C','45°C','50°C']) }}</td>
                <td align=right>{{ device.uzsuicon('', 'ModbusItems.LWZ404.p05DHWsetNightTemp.uzsu', 'WW Nacht Automatik Mod', '', '', 'list', [37, 40, 43, 47, 53]) }}</td>

            </tr>
        </table>
    </table>​

mfg
Markus

[wvhn]

Moin Markus,

Eine schicke Visu hast Du da gebaut!

Leider lassen sich Popups mit jQuery mobile nicht verketten. Da device.uzsuicon selbst ein Popup ist, kann das eben nicht in einem übergeordneten Popup funktionieren. Das ist mit smartVISU Bordmitteln nicht zu lösen.

Es gibt aber einen Trick, mit dem man das neue Popup erst per Timeout öffnet, nachdem das erste geschlossen ist. Das ist hier ganz gut beschrieben.

Gruß
Wolfram

[schuma]

Du könntest das erste Fenster als Block erstellen und den schließen/ öffnen. Darin funktioniert dann wieder ein Popup (Uzsu).
Falls es in das Design passt.
Ich hatte das so im AlexaRadio Widget so gemacht.

[wvhn]

Es ist doch einfacher, als gedacht. Da device.uzsuicon einen eigenen click-Handler hat, kann man mit diesem das übergeordnete Popup finden und schließen, wie in dem o.g. Link vorgeschlagen.

Probier mal, ob folgender Code in der ./widgets/device.js für Dich funktioniert:

  _events: {
    'click': function(event) {
      // hier werden die Parameter aus den Attributen herausgenommen und beim Öffnen mit .open(....) an das Popup Objekt übergeben
      // und zwar mit deep copy, damit ich bei cancel die ursprünglichen werte nicht überschrieben habe
      var response = jQuery.extend(true, {}, this._uzsudata);
	  var that = this;

      if (this._uzsuParseAndCheckResponse(response)) {
		  // Öffnen des Popups bei clicken des icons und Ausführung der Eingabefunktion
		  // vorher das übergeordnete Popup schließen, falls uzsuicon in einem Popup platziert ist
		  var target = $(this.element).parents('[data-role="popup"]');
		  if (target.length != 0){
			  target.popup('close');
			  setTimeout(function(){that._uzsuRuntimePopup(response);}, 100)
		  } 
		  else
			  this._uzsuRuntimePopup(response);
      }
    }
  },

Der Einfachheit halber habe ich den gesamten Event-Handler angegeben, damit Du nicht einzelne Zeilen einfügen musst, sondern den Handler komplett tauschen kannst. In der Version v3.5.0 beginnt dieser in Zeile 1644. In der develop-Version v3.5.a ist dies Zeile 1700.

Falls Du eine Sicherheitskopie der device.js anlegst, benenne bitte die Deteiendung um, da jede .js-Datei im Widgets-Verzeichnis importiert wird und es dann zu Konflikten kommt.

Gruß
Wolfram

[fuxl66]

Es ist doch einfacher, als gedacht. Da device.uzsuicon einen eigenen click-Handler hat, kann man mit diesem das übergeordnete Popup finden und schließen, wie in dem o.g. Link vorgeschlagen.

Probier mal, ob folgender Code in der ./widgets/device.js für Dich funktioniert:

Hi Wolfram, Danke für deine Nachricht. Leider ändert das nichts. Beim Klick auf das UZSU icon öffnet sich nichts.
Auch bei allen anderen UZSU icons nicht mehr, bis ich die Seite wieder neu gelanden habe.

mfg
Markus

[wvhn]

Moin Markus,

das Code-Snippet war natürlich getestet. Ich habe jetzt nochmal ein zweites Popup mit UZSU auf der Testseite angelegt und Deine device.js aus dem ZIP in meine Testumgebung mit smartVISU v3.5.0 kopiert. Die Datei ist in Ordnung, denn die Seite funzt mit beiden Popups wie sie soll.

Gibt es bei Dir irgendwelche Fehlermeldungen auf der Konsole? Cache wurde gelöscht und der Hinweis zur Benennung einer Kopie von device.js (s.o.) beachtet?

Wenn Du den Fehler nicht eingrenzen kannst, kannst Du mir gerne per P/N einen Link auf eine Dropbox o.ä. mit Deiner gesamten smartVISU-Installlation schicken. Dann lasse ich die mal bei mir laufen.

Gruß
Wolfram

[fuxl66]

Moin Markus,
Cache wurde gelöscht und der Hinweis zur Benennung einer Kopie von device.js (s.o.) beachtet?

Jep, beides ist beachtet bzw. deaktiviert.

Moin Markus,
Gibt es bei Dir irgendwelche Fehlermeldungen auf der Konsole? Cache wurde gelöscht und der Hinweis zur Benennung einer Kopie von device.js (s.o.) beachtet?

In der Tat gibt es die.
image.png

[wvhn]

Wie sieht denn das UZSU-Dict für dieses item aus? Kannst Du das mal bitte auslesen und hier posten? Es scheint für eine Schaltuhr in dem Dict keinen Wert zu geben. Warum sich das innerhalb eines Popups anders auswirkt, als auf der Seite, verstehe ich allerdings noch nicht.

[fuxl66]

Wie sieht denn das UZSU-Dict für dieses item aus? Kannst Du das mal bitte auslesen und hier posten? Es scheint für eine Schaltuhr in dem Dict keinen Wert zu geben. Warum sich das innerhalb eines Popups anders auswirkt, als auf der Seite, verstehe ich allerdings noch nicht.

[LIST][*]Dictionary {"interpolation": {"type": "none", "initialized": false, "interval": "5", "initage": "0", "itemtype": "num", "perday": false}, "list": [{"active": true, "rrule": "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU", "value": "37", "activeToday": false, "once": false, "time": "19:00"}, {"active": false, "rrule": "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU", "value": "47", "activeToday": false, "once": false, "time": "03:00"}, {"active": false, "rrule": "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU", "value": "37", "activeToday": false, "once": false, "time": "05:30"}], "active": true, "once": false, "sunrise": "07:12", "sunset": "16:11", "plugin_version": "2.1.0", "SunCalculated": {"sunrise": {"WE": "07:10", "TH": "07:12", "FR": "07:13", "SA": "07:15", "SU": "07:16", "MO": "07:18", "TU": "07:19"}, "sunset": {"WE": "16:11", "TH": "16:10", "FR": "16:09", "SA": "16:09", "SU": "16:08", "MO": "16:07", "TU": "16:06"}}}[/LIST]​​

Bitte sehr. Wie schon erwähnt, klappt das UZSU Popup auf einer "normalen" Seite problemlos.

image.png

[wvhn]

Der Fehler in der Konsole ist ein Folgefehler, wenn man ein uzsuicon angeklickt hat, dieses sich nicht öffnet und man dann nochmal klickt. Ich konnte den Fehler reproduzieren, indem ich die Zeit für den Timeout verkürzt habe.

Du kannst mal versuchen, den Timeout zu verlängern. Es kann schon sein, dass ein großes Popup länger zum Schließen braucht. Also einfach die Zahl 100 in der Zeile „setTimeout …“ auf z.B. 200 erhöhen.

Gruß
Wolfram

[wvhn]

... alternativ einen Eventhandler für das Schließen des Popups registrieren. Die if-Anweisung sieht dann so aus:

		  if (target.length != 0){
			  target.popup().on('popupafterclose', function(){
				  that._uzsuRuntimePopup(response);
				  target.popup().off('popupafterclose');
				  });
			  target.popup('close');

Das sollte noch besser gehen, als der Timeout.

[fuxl66]

... alternativ einen Eventhandler für das Schließen des Popups registrieren. Die if-Anweisung sieht dann so aus:

if (target.length != 0){
target.popup().on('popupafterclose', function(){
that._uzsuRuntimePopup(response);
target.popup().off('popupafterclose');
});
target.popup('close');

Das sollte noch besser gehen, als der Timeout.

Danke für deine Mühe. Werde ich zeitnah testen. Wo genau muss dieser Code hin?

[wvhn]

In dem von Dir schon eingebauten Code ist nur der Block ab "if(target.length..." bis vor die geschweiften Klammer vor dem nächsten "else" zu ersetzen. Die geschweifte Klammer muss stehen bleiben.

[fuxl66]

... alternativ einen Eventhandler für das Schließen des Popups registrieren. Die if-Anweisung sieht dann so aus:

if (target.length != 0){
target.popup().on('popupafterclose', function(){
that._uzsuRuntimePopup(response);
target.popup().off('popupafterclose');
});
target.popup('close');

Das sollte noch besser gehen, als der Timeout.

Beide Varianten funktionieren (setTimeout = 200).
Ich bleibe mal bei dieser.
DANKE dir für deine Hilfe. Echt super flexibel.

P.S.: Wie ich soeben festgestellt habe, klappt es nur mit aktiviertem Cache.

mfg
Markus

[wvhn]

P.S.: Wie ich soeben festgestellt habe, klappt es nur mit aktiviertem Cache.

Dann probier mal. den Timeout noch weiter hochzusetzen. Das Popup muss komplett geschlossen und abgemeldet sein, bevor uzsuicon die Rolle des Popups übernehmen kann. Der Timeout setzt einfach nur eine Wartezeit in der Hoffnung, dass das Popup dann geschlossen ist. Man kann aber den Status des Popups nicht abfragen.

Deshalb ist aus meiner Sicht die Alternativlösung besser. jQuery mobile "feuert" einen Event, wenn das Popup komplett geschlossen ist. Mit diesem Event kann man dann das UZSU-Popup öffnen. Diese Lösung würde ich in das nächste Release nehmen und wäre deshalb für einen Test dankbar.

Ich habe übrigens auch einen Weg gefunden, das erste Popup wieder zu öffnen, nachdem das UZSU-Popup wieder geschlossen wurde. Das macht aber nur Sinn, wenn das Popup per CSS eindeutig positioniert ist. Wäre das für Dich von Interesse? Ich könnte das einbauen und mit einer zusätzlichen Klasse für jedes Popup einzeln steuern, ob es wieder geöffnet wird.

Gruß
Wolfram