Neues FTUI Widget PinPad für Alarmanlagen

[docb]

Hi,
naja, wenn ich class="center" mache, schaut das widget toll aus, dann ist es aber kein Popup mehr
Also bleibt es dominant in der Mitte, egal ob unlocked oder locked.
Habe mich jetzt extra bei Udemy in einen Javascript-Kurs eingeschrieben, damit ich da selber mal besser durchblicke. Ich habe auch mal versucht in deinem js rumzupfuschen, allerdings ohne Erfolg mangels Fachwissen. Ich tippe mal auf die Stelle hier:

Code Auswählen Erweitern

            .each(function (index) {
                var elem = $(this);
                var value = elem.getReading("get");
                if (elem.hasClass("pop")){
                if (value.val === "off"){
                $("#pinpad").css({
                "position": "absolute",
                "transform": "translate(0, -100%)",
                "opacity": "0"
                });
                }
                if (value.val === "on"){
                $("#pinpad").css({
                "position": "relative",
                "transform": "translate(0, 0%)",
                "opacity": "1"
                                                        hier meine fehlgeschlagenen Testergänzungen:
"z-index": "1000",
"top": "50%"
                })
                }
                }

Die andere Popup-Version aus deinem Post (wohl die ursprünglich Version das mit Popup zu realisieren) ist ja doch eigentlich mit der class "pop" obsolet oder verstehe ich da was falsch?

Vielen Dank für alles und viele Grüße
doc

[Syrex-o]

Hast Du Lust nochmal an das Popup-Thema zu gehen? Wäre klasse!

Endlich getan. Hatte gedacht es ist mehr zu tun, aber meine kleinen Änderungen sollten es tun.
Wer es selber vornehmen will:
in der widget_popup.js einfach in Zeile 186 folgendes:

Code Auswählen Erweitern

$('div[data-id="' + id + '"].dialog-starter').trigger('click');
ändern in:

Code Auswählen Erweitern


setTimeout(function() {
                            $('div[data-id="' + id + '"].dialog-starter').trigger('click');
                        }, 200);


Somit verzögere ich das Aufgehen des Popups um wenige 200ms.
Das ist denke ich eine Verzögerung mit der man leben kann
Für alle die selbst nichts ändern wollen ist im Anhang die Datei: widget_popup_delay.js
Diese hat den selben Code eingebaut und zusätzlich habe ich das Scrollen abgeschaltet, was für das Pinpad meiner Meinung nach doof ist.
Daher müssen die werte des Popups exakt sein, damit alles dargestellt wird. Dafür aber auch schöner 

Der funktionierende und vollständige Code für das Popup wäre demnach mit der neuen Popup Datei folgender:

Code Auswählen Erweitern


<!-- ============= Alarmanlage================== -->
<div data-type="popup_delay"
data-draggable="false"
data-device="Alarm"
data-get-on="on"
data-get-off="off"
data-height="500px"
data-width="320px"
class="center interlock">
<!-- ============= Widgetinhalt Start  ================== -->
<div data-type="symbol"
data-device="Alarm"
      data-states='["on","off"]' 
      data-icon="fa-lightbulb-o"
      data-colors='["#ad3333","#6699FF"]'
      data-background-icon=""
      class="big">
</div>
<div  data-type="label" data-device="Alarm" data-get="state" class="darker"/>
<!-- ============= Widgetinhalt Ende  ================== -->
<!-- ============= Popupinhalt Start  ================== -->
<div class="dialog">
        <header>Pin Alarmanlage</header>
            <div data-type="pinpad"
            data-device="Alarm"
            data-get="STATE"
            data-get-pin="pin"
            data-text-locked="scharf"
        data-text-unlocked="unscharf"
data-locked-time="10"
        data-tries="3"
        class="center">
      </div>
    </div>
<!-- ============= Popupinhalt Ende ================== -->
</div>
<!-- ============= Alarmanlage Ende ================== -->


Beachten: data-type ist demnach popup_delay

@Gunther class="interlock" sorgt jetzt denke ich für alles was du dir gewünscht hast und blockiert es das Popup zu schließen, solange kein richtiger Pin eingegeben ist.

Ich hoffe das ist nicht zu umständlich.
Wer natürlich das normale Popup in anderem Kontext verwendet, sollte sie abgeänderte Version benutzen, um seine anderen Seiten nicht mit zu verzögern.

Bei anderen Wünschen gerne melden.
Grüße

[Syrex-o]

Hi,
naja, wenn ich class="center" mache, schaut das widget toll aus, dann ist es aber kein Popup mehr
Also bleibt es dominant in der Mitte, egal ob unlocked oder locked.
Habe mich jetzt extra bei Udemy in einen Javascript-Kurs eingeschrieben, damit ich da selber mal besser durchblicke. Ich habe auch mal versucht in deinem js rumzupfuschen, allerdings ohne Erfolg mangels Fachwissen. Ich tippe mal auf die Stelle hier:

Mir ist leider noch nicht ganz klar was du realisieren willst. Erklär mal.

Die andere Popup-Version aus deinem Post (wohl die ursprünglich Version das mit Popup zu realisieren) ist ja doch eigentlich mit der class "pop" obsolet oder verstehe ich da was falsch?

Genau. class="popup" war ein kleiner Workaround von mir, der aber jetzt nicht mehr benötigt wird, wenn man das widget Popup_delay benutzt.
Siehe neuen Post.

Grüße

[Gunther]

Danke für Deine Arbeit!

Keine Ahnung ob es an Pinpad liegt. Habe gerade getestet und kann FHEM nun nicht mehr starten.
Habe die Definition aus Tablet UI wieder rausgeworfen und die js wieder gelöscht. Bekomme aber das System trotzdem nicht gestartet. Kann es damit zusammenhängen?

[Syrex-o]

Kann es damit zusammenhängen?

Kann ich mir überhaupt nicht vorstellen. Die Files nehmen keinen Einfluss auf den Ablauf anderer FHEM Prozesse.
Und das Pinpad Widget greift nur auf Dummys zu.
Sehe da keine Verbindung.
Kommst du irgendwie an das log ran ?

Grüße

[Gunther]

ja, das Hauptlog?

[docb]

Mir ist leider noch nicht ganz klar was du realisieren willst. Erklär mal.

Ziel ist folgendes: Wenn mein Alarm_test dummy auf off steht, soll kein Pinpad zu sehen sein. Sobald die Variable auf on geht, soll das Pinpad als Popup mittig über allem im Vordergrund liegen, so dass nur das Popup (Pinpad) zu bedienen ist. Wenn die Pin stimmt, dann wieder weg damit und alles kann benutzt werden.

Code Auswählen Erweitern

<div data-type="pinpad"
                 data-device="Alarm_test"
                 data-get="STATE"
                 data-get-pin="pin"
data-shadow-color="FFF"
class="pop">
          </div>

So wie im Anhang dargestellt läuft das mit meinem alten Workaround. Das hat nur den Nachteil, dass sich das Popup oft nicht richtig aufbaut, vor allem wenn ich länger nicht zu Hause war und dann das Tablet angeht. Vermutlich lähmen die ganzen Polls im Hintergrund den Seitenaufbau. Deswegen würde ich gerne dein Popup testen, ob das hilft.
Viele Grüße
doc

[Syrex-o]

Deswegen würde ich gerne dein Popup testen, ob das hilft.

Habe für meinen Geschmack oft genug getestet und das ohne cache.
Mit dem widget popup_delay funktioniert es.
class="interlock" hilft dabei, dass du eine Seite komplett sperren kannst, sodass kein klicken abseits des Popups möglich ist ohne korrekten pin.
Siehe code in vorherigen Posts.

Ziel ist folgendes: Wenn mein Alarm_test dummy auf off steht, soll kein Pinpad zu sehen sein. Sobald die Variable auf on geht, soll das Pinpad als Popup mittig über allem im Vordergrund liegen, so dass nur das Popup (Pinpad) zu bedienen ist. Wenn die Pin stimmt, dann wieder weg damit und alles kann benutzt werden.

Genau das macht das geänderte Popup widget von mir. 

Grüße

[docb]

Oh mein Gott - an deinem vorigen Post hängt ja eine widget_popup_delay.js dran. Ich dachte das wäre in der normalen widget_pinpad.js integriert.
Jetzt kommt schon mal was, sogar schön zentriert. Jetzt muss ich nur noch hinbekommen, dass da keine Glühbirne angezeigt wird, sondern meine normale Seite, wenn das Popup nicht aktiv ist. Ich bastel mal, jetzt geht es auf alle Fälle mal vorwärts bei mir 

[docb]

Hm. Bin zu noobig. Wenn das Alarm dummy auf an ist, super - perfekt zentriertes Pinpad. Wenn es allerdings auf aus ist, wird nicht meine Seite angezeigt, sondern nur der lightbulb. Kann ich das irgendwie so umbasteln, dass statt dem "Widgetinhalt Start" einfach meine normale Seite angezeigt wird?
Viele Grüße
doc

[Syrex-o]

Du kannst auch einfach ein Popup ohne Button bauen, dass nur auf States reagiert.
Oder du guckst mal 2 Seiten in dem Thread zurück. Da ist kurz mal erwähnt, wie man so etwas mit Pagebutton lösen könnte.

Grüße

[docb]

Yeeeeha, jetzt läufts, DANKE, DANKE, DANKE.
Bei mir ging es ewig nicht, weil class="interlock center" anscheinend alles durcheinandergebracht hat - daher immer das leere Fenster. Mit class ="interlock" geht es wunderbar. Zudem hat es mir noch Scrollbars beim Popup angezeigt, die habe ich mit style="overflow:hidden" wegretuschiert

Hier mein Code, falls es jemand brauchen kann:

Code Auswählen Erweitern

<div data-type="popup_delay"
data-draggable="false"
data-device="Alarm_test"
data-get-on="on"
data-get-off="off"
data-height="500px"
data-width="320px"
class="interlock">

<div class="dialog" style="overflow:hidden">
        <header>Pin Alarmanlage</header>
            <div data-type="pinpad"
            data-device="Alarm_test"
            data-get="STATE"
            data-get-pin="pin"
            data-text-locked="scharf"
        data-text-unlocked="unscharf"
data-locked-time="10"
        data-tries="3"
        class="center">
      </div>
    </div>
</div>

Geht übrigens auch klassisch mit "popup" ohne popup_delay im ersten data-type.
JUHUUUUUU, ich freu mich so.
Viele Grüße
doc

[Syrex-o]

Geht übrigens auch klassisch mit "popup" ohne popup_delay im ersten data-type.

Welchen Browser benutzt du denn?
Und auf welchen Geräten?
Das Problem tritt meist bei häufigem neuladen auf und bei Seitenwechseln.
Über paar Tests und Daten dazu würde ich mich freuen.

Zudem hat es mir noch Scrollbars beim Popup angezeigt, die habe ich mit style="overflow:hidden" wegretuschiert

Eigentlich hatte ich das mit eingefügt. Muss ich nochmal überprüfen.

Grüße

[docb]

Ich nutze firefox, chrome, edge (nur zum testen) und fully. Das Problem mit dem Neuladen war nur mit dem alten Pinpad aus einem anderen Post - deines kommt zuverlässig. Allerdings - und ich weiß nicht warum - bleibt das Popup (egal ob data-type popup oder popup_delay) zwar im Vordergrund, aber ich kann trotzdem im Hintergrund die Buttons bedienen. Beim Seite laden wird der Hintergrund zwar kurz dunkler, aber wird dann wieder hell. Und Komischerweise kommen jetzt auch ohne overflow:hidden keine Scrollbalken mehr. Ich versteh die Welt nicht mehr. Verrückt. Ich lade jetzt erstmal nochmal alle Originaldateien von dir runter, falls da noch Mist von mir drin ist. Und dann wird neu getestet.

Viele Grüße

PS: Das hier wäre mein Code:

Code Auswählen Erweitern

<div data-type="popup_delay"
data-draggable="false"
data-device="Alarm_keypad"
data-get-on="on"
data-get-off="off"
data-height="480px"
data-width="300px"
class="interlock">

<div class="dialog"">
        <header>Pin Alarmanlage</header>
            <div data-type="pinpad"
            data-device="Alarm_keypad"
            data-get="STATE"
            data-get-pin="pin"
            data-text-locked="scharf"
        data-text-unlocked="unscharf"
data-locked-time="10"
        data-tries="3"
        class="interlock">
      </div>
    </div>
</div>


Ergänzung: habe alle Dateien neu heruntergeladen uns sogar in Linux alle Rechte gleich gesetzt wie die anderen Dateien im jeweiligen Verzeichnis. Hilft nichts, das Popup bleibt zwar vorne, ich kann die Elemente hinten weiter bedienen...


Nächste Ergänzung: Problem gelöst. Es war noch ein zweites Popup auf der Seite,  das alte Pinpad und das war nicht auskommentiert -> das hat wohl reingefunkt. Jetzt klappt endlich alles wie es soll!

[Syrex-o]

Nächste Ergänzung: Problem gelöst. Es war noch ein zweites Popup auf der Seite,  das alte Pinpad und das war nicht auskommentiert -> das hat wohl reingefunkt. Jetzt klappt endlich alles wie es soll!

Perfekt, hab mir fast gedacht, dass da noch verbasteltes mit drin war.
Genau auf diesem Grund gibt es ja jetzt zwei Popups, damit sie sich nicht gegenseitig im weg sind.

Jetzt nur noch auf bisschen Feedback von @Gunther warten 

Weitere Anregungen?

Grüße