FHEM Forum

Hallo liebe Leute,

ich habe zufällig in einem Thread gelesen, wie Leute ein Pin Pad für die Alarmanlage realisiert haben und da dachte ich mir, dass man daraus ja auch ein Widget machen kann.
Dabei muss es einen vordefinierten Pin geben, welcher aus 4 Zahlen besteht, die das Widget dann abfragt.
Ich hab versucht es so individuell gestaltbar wie nur möglich zu machen und hoffe dem ein oder anderen nützt es was.
Über Feedback würde ich mich sehr freuen, da dies mein erstes Widget ist.

Was kann das Widget
- 9 Tasten Pinpad mit Anzeige für die Eingabe in Form von Punkten
- Eine Lock Taste mit der ein Alarm scharf gestellt werden kann, sofern der Alarm deaktiviert ist
- Feedback bei Tastendruck und Feedback bei falscher wie richtiger Eingabe
- keine Pin Fixierung auf 4 Stellen (4 - 6 empfohlen)
- Pin in Zahlen anzeigen

Beispielhafte Definition für eine Alarmanlage
define Alarm dummy
attr Alarm room Alarmanlage
attr Alarm setList state:on,off
setreading Alarm pin 2222
Wichtig ist dabei eigentlich nur das setreading für den Pin, da das Widget sich darauf bezieht.

Was ist alles individuell einstellbar

• data-width: Breite des Pin Pads (default and recommended: 300px)
• data-height: Höhe des Pin Pads (default and recommended: 450px)
• data-get: Reading für den Zustand (default: "STATE")
• data-set: setzt das den jeweiligen Zustand des Devices (default: "")
• data-get-pin: ließt das reading für den Pin (default: pin)
• data-icon: font-awesome icons für die Lock Taste (default: fa-key)
• data-bg-color: Hintergrundfarbe des Widgets (default: #565656)
• data-shadow-color: Schattenfarbe des Widgets: Angabe in RGBA (default: rgba(0,0,0,.3) )
• data-btn-size: Buttongröße (default and recommended: 70px)
• data-font-size: Fontgröße des eingesetzen Fonts (default: 40px)
• data-locked-color: Farbe der Message für den locked Status (default: #c60000)
• data-unlocked-color: Farbe der Message für den unlocked Status (default: #56e20b)
• data-text-locked: Text für den locked Status (default: Locked)
• data-text-unlocked: Text für den unlocked Status (default: Unlocked)
• data-button-color: Farbe der Button und Umrisse (default: white)
• data-pin-off-color: Farbe der Punkte in der Anzeige vor der Eingabe (default: #cccccc)
• data-pin-on-color: Farbe der Punkte in der Anzeige während der Eingabe
• data-locked-time: Zeit, die das Pad gesperrt ist, nach mehrmaliger Falscher eingabe (default: 10)
• data-tries: Versuche, bis das Pad blockiert wird für die vorgegebene Zeit (default: 5)
• data-spacing: Abstand zwischen angezeigten Zahlen (default: 10px)
• data-text-blocked: Text der angezeigt wird, wenn die Anzahl der Fehlversuche überschritten ist (default: Locked for: )
• class: show-pin (Zeigt Pin Zahlen an, anstatt von Punkten)
• class: squared (eckige statt runde Buttons)
• class: pop (eigenen Popup Möglichkeit, die auf on und off reagiert || aktuell keine Möglichkeit Alarm wieder einzuschalten)

Höhe und Breite wird es noch geben, wenn ich die Relationen bearbeiten habe, sodass 3 Zahlen weiterhin pro Zeile bleiben und alles sich proportional vergrößert.
Daher im Moment: width: 200px height: 300px

Fixed: width und height sind verfügbar(Layout kann bei Änderungen abweichen)

Zusätzlich zum Widget, was in den Widget Ordner muss, gibt es eine css, die in den Lib ordner muss, um alle Animationen und die Größenverhältnisse zu gewährleisten.

Beispielhafte Minimalanforderungen an das Widget
<div data-type="pinpad"
                 data-device="Alarm"
                 data-get="STATE"
                 data-get-pin="pin">
          </div>


Da es einige Probleme mit dem Widget in einem Popup gab, gibt es eine abgeänderte Version des Originalen Popup Widgets, mit der es funktioniert.
Dazu einfach die angehängte Datei: widget_popup_delay.js einfügen und als data-type="popup_delay" nutzen.
Es macht nicht mehr, als eine kleine Verzögerung beim Öffnen hinzuzufügen und das Scrollen im Popup abzustellen.
Hier ein funktionierender Beispiel Code:

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


Ich hoffe dem ein oder anderen bringt es was. ;D

Funktioniert super.

Wird auch width="100%" gehen?

Wird es noch ein data-set geben, damit man nicht nur STATE setzen kann?

data-bg-color ist in der Beschreibung doppelt

Was noch cool wäre eine Sperren Funktion, wenn z.B. 5 mal falsch eingegeben wurde.

Coole Idee mit dem Sperren. Wird so eingebaut.
data-width wird es geben, genauso wie data-height.
Das kommt entweder noch am Wochenende oder Anfang der nächsten Woche.
data-set kommt dann auch beim nächsten Update mit.

P.S. Du kannst ja data-get auch missbrauchen und dort etwas anderes als state einsetzen.
Sollte funktionieren.

Update
Neue Funktionen:

• data-width: Breite des Pin Pads (default and recommended: 300px)
• data-height: Höhe des Pin Pads (default and recommended: 450px)
• data-set: setzt das den jeweiligen Zustand des Devices (default: "")
• data-locked-time: Zeit, die das Pad gesperrt ist, nach mehrmaliger Falscher eingabe (default: 10)
• data-tries: Versuche, bis das Pad blockiert wird für die vorgegebene Zeit (default: 5)
• data-btn-size: Buttongröße (default and recommended: 70px)
• data-font-size: Fontgröße des eingesetzen Fonts (default: 40px)

default and recommended signalisiert, dass andere Größen zu Layout Problemen führen können, welche selbst angepasst werden müssen über eigenen css code.

Update der Datein im ersten Beitrag

Tolle Sache! Hast Du auch ein Github-Repository, über das man Aktualisierungen vielleicht mit dem FHEM-Update automatisch beziehen kann?
Oder alternativ: lässt Du das setstate einchecken und aktualisierst dann über Pull-Requests?

Und inhaltlich (ich habe es noch nicht ausprobiert): Wieso gibt es keine 0?

Habe kein eigenes Repo. Kann ich aber bestimmt einrichten.

Die 0 gibt es nur wegen dem Layout nicht, da ich persönlich fande, dass es seltsam aussieht.
So unsymetrisch  :P

Zitat von: Syrex-o am 13 November 2017, 19:36:44
Die 0 gibt es nur wegen dem Layout nicht, da ich persönlich fande, dass es seltsam aussieht.
So unsymetrisch  :P

Hab ich mir ehrlichgesagt schon fast gedacht  ;D

Mach doch einfach noch * und # dazu.
Vielleicht fände es der ein oder andere toll, die Code-Länge frei definieren zu können, sodass man vielleicht auch 6 Ziffern nutzen kann?

ZitatMach doch einfach noch * und # dazu.

Im Moment wird das Pad durch einen Loop generiert, damit es schneller geht.
Die letzte Zeile müsste das zusätzlich eingefügt werden. Aber durchaus machbar.

ZitatVielleicht fände es der ein oder andere toll, die Code-Länge frei definieren zu können, sodass man vielleicht auch 6 Ziffern nutzen kann?

Hab ich mir auch schon gedacht. sollte schnell gemacht sein.
Ich sammel erstmal noch paar Vorschläge, damit das Update vielleicht etwas stärker ist  ::)

So, habe mal ein kleines Update:

Anzahl der pin-Stellen ist nun nicht mehr fix auf 4.
Ich empfehle jedoch 4-6.

Außerdem habe ich ein Github repo eingerichtet, jedoch bekomme ich das mit der update txt für fhem nicht hin.
Falls da jemand bescheid weiß würde ich mich freuen.

Hey, schau mal...

So hatte ich das mit der 0 gelöst.

Mit dem Button unten links kann man seine letzte eingabe löschen falls man sich vertippt hat. Equivalent zur Backspace auf der Tastatur. Und die # - Taste dient zur Bestätigung des Codes.
Unten gibt es noch ein Feld dass man sieht was man gerade eintippt. Da mir beim Eintippen niemand zusieht dem ich nicht vertraue, lasse ich das anzeigen. Könnte man natürlich auch weglassen oder Sternchen anzeigen. ;)

Sobald man mit # Taste den Code bestätigt hat und dieser auch korrekt ist, wird der Alarm unscharf geschaltet, das Keypad geht zu und der Hintergrund ist wieder anklickbar.
Bei Fehleingabe wird intern ein Counter hochgezählt und die Eingabe gelöscht. Dann kann man nochmal probieren.

Also schon recht ähnlich zu deinem. :)

VG, Thomas

Bei mir hat es das Layout mit der neuen Version zerrissen.

Auch die neuen Funktionen wie  data-width="150px" funktionieren nicht. Der Wert bleibt gefühlt immer bei 100%.

Super. Auf so ein Widget habe ich lange gewartet. Danke für Deine Arbeit.
Ist es möglich wie beim Homestatus Widget zwei Versionen zur Auswahl einzubauen. Deine schmale und eine Version wie die von ToM_ToM? Ich finde die auch sehr schick und die Möglichkeit einen Vertipper zu korrigieren auch gut.

Das Widget könnte man ja auch nutzen um auf Tablet UI Konfigurationsseiten (z. B. Heizungseinstellungen)  zu sperren.
Mir fehlt gerade nur der Ansatz, wie ich aufgrund eines Status entscheide, ob man auf die nächste Seite gehen darf oder nicht. Habe da einen Knoten im Hirn.
Habt Ihr einen einfachen Lösungsansatz?

ZitatSo hatte ich das mit der 0 gelöst.

Mit dem Button unten links kann man seine letzte eingabe löschen falls man sich vertippt hat. Equivalent zur Backspace auf der Tastatur. Und die # - Taste dient zur Bestätigung des Codes.
Unten gibt es noch ein Feld dass man sieht was man gerade eintippt. Da mir beim Eintippen niemand zusieht dem ich nicht vertraue, lasse ich das anzeigen. Könnte man natürlich auch weglassen oder Sternchen anzeigen. ;)

Sobald man mit # Taste den Code bestätigt hat und dieser auch korrekt ist, wird der Alarm unscharf geschaltet, das Keypad geht zu und der Hintergrund ist wieder anklickbar.
Bei Fehleingabe wird intern ein Counter hochgezählt und die Eingabe gelöscht. Dann kann man nochmal probieren.

Keine schlechte Idee. Ich bin leider nur kein Freund davon, den Pin anzuzeigen.
Könnte man jedoch als Option einbinden, sodass man es entscheiden kann, ob Sterne (Kreise) oder Pinanzeige.
Steht nun auf der Liste für das nächste Update.

ZitatBei mir hat es das Layout mit der neuen Version zerrissen.

Gucke ich mir morgen an und werde ich beheben

ZitatIst es möglich wie beim Homestatus Widget zwei Versionen zur Auswahl einzubauen. Deine schmale und eine Version wie die von ToM_ToM? Ich finde die auch sehr schick und die Möglichkeit einen Vertipper zu korrigieren auch gut.

Kein Problem. Wird es entweder als Auswahlmöglichkeit geben oder es wird 2 Widgets geben
Was wäre dir/euch denn lieber. Alles weitere schlägt ja ein wenig auf die Performance.
Ich würde daher zu 2 verschiedenen widgets tendieren.

ZitatMir fehlt gerade nur der Ansatz, wie ich aufgrund eines Status entscheide, ob man auf die nächste Seite gehen darf oder nicht. Habe da einen Knoten im Hirn. [/quote
Erstell dir doch einfach einen Dummy, der sich nach einem Timer einschaltet.
Dann könntest du nach richtiger Pineingabe den Status schalten und z.B. die Heizung einstellen.
Danach sorgt der Timer dafür, dass z.B. nach 30 Sekunden der State wieder wechselt und die Steuerung wieder gesperrt ist.
So eventuell? nicht verprobt

Code Auswählen Erweitern


define Heizung_Sperren dummy
attr Heizung_Sperren setList state:on,off

define Sperren_doif DOIF ([Heizung_Sperren:state] eq "off") \
(set Heizung_Sperren on)
attr Sperren_doif wait 30


Könnte funktionieren

@all Bitte um Infos, wie ich eine Update txt aus GitHub erstelle, um das Update aus fhem auslösen zu können.

Ich habe nun versucht einen Button auf der Oberfläche zu bauen, der ein Popup öffnet (bitte die Icons vernachlässigen - nur zum Test).

Das Popup öffnet sich auch automatisch wie gewünscht.
Leider schließt sich das Popup (trotz Alarm state gleich "on") nach 2-3 Sekunden wieder.
Mache ich in der Anwendung des Popup einen Fehler (dann mache ich einen neuen Thread auf) oder hängt das mit dem Widget/Popup zusammen)

soe schaut es aus:
<header>Alarmanlage</header>
<!-- ============= Alarmanlage  ================== -->
<div data-type="popup"
data-draggable="false"
data-height="510px"
data-width="340px"
data-device="Alarm"
      data-get-on="on"
      data-get-off="off">
<!-- ============= Widgetinhalt Start  ================== -->
<div data-type="switch" data-device="Alarm"
      data-states='["on","off"]' 
      data-set-states='["","on"]'
      data-icons='["fa-fire","fa-fire"]'
      data-colors='["#ad3333","#6699FF"]'
      data-background-icon=""
      class="big">
</div>
<!-- ============= 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="aktiviert"
        data-text-unlocked="deaktiviert"
        data-locked-time="10"
        data-tries="3">
      </div>
    </div>
<!-- ============= Popupinhalt Ende  ================== -->


</div>

ZitatDas Popup öffnet sich auch automatisch wie gewünscht.
Leider schließt sich das Popup (trotz Alarm state gleich "on") nach 2-3 Sekunden wieder.
Mache ich in der Anwendung des Popup einen Fehler (dann mache ich einen neuen Thread auf) oder hängt das mit dem Widget/Popup zusammen)

Das Popup widget hat eine class Funktion, damit das nicht mehr passieren sollte:
https://wiki.fhem.de/wiki/FTUI_Widget_Popup

Stichwort interclock

Zu Deinen (meinen  :P) Punkten:

Einbau der Option mit 0 und */#:
finde ich super!

ein Widget mit Option vs. 2 widgets
Wenn die Performance nicht extrem darunter leidet, wäre vermutlich ein Widget zukunftssicherer, da bei Optionserweiterungen nicht zwei gepflegt werden müssten.
Da ich kein Entwickler bin, ist das nur die bescheidene Usersicht. Ich beuge mich da den Entscheidungen der Profis.

Seitenzugriff nur nach erfolgreicher Pineingabe
Ich bin nicht sicher, ob ich mich richtig ausgedrückt habe.
Was ich möchte ist, dass wenn ich auf meinen Menüpunkt "Einstellungen Heizung" gehe, das nur möglich ist, wenn der richtige Pin eingegeben wird.
Somit vermeide ich, dass Kiddies hier versehentlich meine Heizkurve anpassen oder die Frostgrenze verstellen.
Das bedeutet, dass ich nicht auf eine Einstellung abhängig vom Dummy gehen möchte, sondern die Seite sich gar nicht erst öffnet.

Zitat von: Syrex-o am 18 November 2017, 13:49:49
Das Popup widget hat eine class Funktion, damit das nicht mehr passieren sollte:
https://wiki.fhem.de/wiki/FTUI_Widget_Popup

Stichwort interclock

Danke für den Tipp. Das Popup sollte ja auch da bleiben, wenn ich nichts manuell antippe. Trotzdem habe ich es mal probliert mit der Class interlock.
Ändert leider nichts.
Popup schließt sich wieder.
Komisch ist, dass die komplette Seite abgedunkelt bleibt und zwar so, als ob das Popup noch auf ist, nur dass es eben nicht mehr sichtbar ist.

ZitatZu Deinen (meinen  :P) Punkten:

Einbau der Option mit 0 und */#:
finde ich super!

ein Widget mit Option vs. 2 widgets
Wenn die Performance nicht extrem darunter leidet, wäre vermutlich ein Widget zukunftssicherer, da bei Optionserweiterungen nicht zwei gepflegt werden müssten.
Da ich kein Entwickler bin, ist das nur die bescheidene Usersicht. Ich beuge mich da den Entscheidungen der Profis.

Seitenzugriff nur nach erfolgreicher Pineingabe
Ich bin nicht sicher, ob ich mich richtig ausgedrückt habe.
Was ich möchte ist, dass wenn ich auf meinen Menüpunkt "Einstellungen Heizung" gehe, das nur möglich ist, wenn der richtige Pin eingegeben wird.
Somit vermeide ich, dass Kiddies hier versehentlich meine Heizkurve anpassen oder die Frostgrenze verstellen.
Das bedeutet, dass ich nicht auf eine Einstellung abhängig vom Dummy gehen möchte, sondern die Seite sich gar nicht erst öffnet.

1. Dann wird es 1 Widget. Wird etwas deuern.  ;)

2. Setze das doch mit einem Popup um. Sobald sich die Seite öffnet kommt sofort das Popup. Dann gibst du den korrekten pin ein und das Popup schließt sich wegen dem wechsel des States.

ZitatDanke für den Tipp. Das Popup sollte ja auch da bleiben, wenn ich nichts manuell antippe. Trotzdem habe ich es mal probliert mit der Class interlock.
Ändert leider nichts.
Popup schließt sich wieder.
Komisch ist, dass die komplette Seite abgedunkelt bleibt und zwar so, als ob das Popup noch auf ist, nur dass es eben nicht mehr sichtbar ist.

Du musst nicht nur interclock verwenden, sondern auch angeben, wann es wieder geschlossen werden soll. Könnte es sein?.

Schick mir mal deinen aktuellsten HTML Auszug, dann teste ich es.

Zitat von: Syrex-o am 18 November 2017, 14:09:33
2. Setze das doch mit einem Popup um. Sobald sich die Seite öffnet kommt sofort das Popup. Dann gibst du den korrekten pin ein und das Popup schließt sich wegen dem wechsel des States.

ok, wenn man den Code nicht kennt, kann man auch wieder abbrechen und kommt nicht weiter?

Zitat von: Syrex-o am 18 November 2017, 14:09:33
Du musst nicht nur interclock verwenden, sondern auch angeben, wann es wieder geschlossen werden soll. Könnte es sein?.

gehe nicht davon aus. Dann sollte das Popup ja stehen bleiben. Es schließt sich ja automatisch nach 3-4 Sekunden.

<header>Alarmanlage</header>
<!-- ============= Alarmanlage  ================== -->
<div data-type="popup"
data-draggable="false"
data-height="510px"
data-width="340px"
data-device="Alarm"
      data-get-on="on"
      data-get-off="off"
      class="interlock">
<!-- ============= Widgetinhalt Start  ================== -->
<div data-type="switch" data-device="Alarm"
      data-states='["on","off"]' 
      data-set-states='["","on"]'
      data-icons='["fa-fire","fa-fire"]'
      data-colors='["#ad3333","#6699FF"]'
      data-background-icon=""
      class="big">
</div>
<!-- ============= 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="aktiviert"
        data-text-unlocked="deaktiviert"
        data-locked-time="10"
        data-tries="3">
      </div>
    </div>
<!-- ============= Popupinhalt Ende  ================== -->


</div>

Zitat1. Dann wird es 1 Widget. Wird etwas deuern.

Cool. Vielleicht kann ich dann meinen Eigenbau dadurch ablösen. :) Auch wenn er tadellos funktioniert. Jedoch ist er nur aus vielen anderen Widgets zusammengebastelt und kommuniziert mit einem Dummy Device in FHEM, welches wiederum mit dem Alarm Modul von PAH verbunden ist. ^^

Da ich dein Widget nicht getestet habe, eine Frage: Gibst du einen Ton zurück wenn du die Tasten betätigst? Also einen Piepton (akustisches Feedback)?
Das hatte ich bei meinem System auf dem Tablet nicht hinbekommen. Der Ton wurde mir leider nur am PC/Notebook abgespielt, aber nicht auf den Tablets.

VG, Thomas

EDIT:
Anbei mein selbstgebauter Aufbau (falls es jemanden interessiert - eventuell für Gunther interessant da es ein funktionierendes Beispiel ist wo sich das Popup erst nach korrekter Pineingabe schließt und man nichts anderes betätigen kann):


<!-- Alarmanlage Keypad -->
<div data-type="popup" data-device="AlarmKeypadDummy" data-get-on="locked" data-get-off="unlocked" data-width="400px" data-height="500px" class="interlock">
<div class="red bold top-space-2x"></div>
<div class="dialog">
<header>Alarm deaktivieren</header>
<div data-type="label" class="cell big top-space-2x wider">Alarm unscharf schalten (PIN-Code)</div>
<div class="inline big top-space">
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="1" onclick="playTouchSound();">1</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="4" onclick="playTouchSound();">4</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="7" onclick="playTouchSound();">7</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="fa-long-arrow-left" data-off-background-color="#ff471a" data-off-color="#FFFFFF" data-device="AlarmKeypadDummy" data-set="key" data-set-on="<" onclick="playTouchSound();"></div>
</div>
<div class="inline big">
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="2" onclick="playTouchSound();">2</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="5" onclick="playTouchSound();">5</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="8" onclick="playTouchSound();">8</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="0" onclick="playTouchSound();">0</div>
</div>
<div class="inline big">
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="3" onclick="playTouchSound();">3</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="6" onclick="playTouchSound();">6</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-device="AlarmKeypadDummy" data-set="key" data-set-on="9" onclick="playTouchSound();">9</div>
  <div data-type="push" data-background-icon="fa-square-o" data-icon="" data-off-background-color="#8cd98c" data-device="AlarmKeypadDummy" data-set="key" data-set-on="#" onclick="playTouchSound();">#</div>
</div>
<div class="bg-lightgray border-white top-space centered" style="width:280px; height:50px;">
<div data-type="label" data-device="AlarmKeypadDummy" data-get="inputPin" class="tall"></div>
</div>
</div>
</div>


Zitatgehe nicht davon aus. Dann sollte das Popup ja stehen bleiben. Es schließt sich ja automatisch nach 3-4 Sekunden.

Bei mir schließt es sich nicht automatisch.
Habe die Tablet Ui version 2.6.15
Musst mal gucken ob dir da paar updates fehlen könnten.

So sieht es jetzt bei mir funktionierend aus:
<section>
            <div    data-type="popup"
                    data-draggable="false"
                    data-height="510px"
                    data-width="340px"
                    data-device="Alarm"
                    data-get-on="on"
                    data-get-off="off"
                    class="interlock">
            <!-- ============= Widgetinhalt Start  ================== -->
                <div    data-type="switch" data-device="Alarm"
                        data-states='["on","off"]' 
                        data-set-states='["","on"]'
                        data-icons='["fa-fire","fa-fire"]'
                        data-colors='["#ad3333","#6699FF"]'
                        data-background-icon=""
                        class="big">
                </div>
            <!-- ============= 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="aktiviert"
                        data-text-unlocked="deaktiviert"
                        data-locked-time="10"
                        data-tries="3">
                        </div>
                    </div>
            <!-- ============= Popupinhalt Ende  ================== -->


            </div>
       </section>

ZitatDa ich dein Widget nicht getestet habe, eine Frage: Gibst du einen Ton zurück wenn du die Tasten betätigst? Also einen Piepton (akustisches Feedback)?
Das hatte ich bei meinem System auf dem Tablet nicht hinbekommen. Der Ton wurde mir leider nur am PC/Notebook abgespielt, aber nicht auf den Tablets.

Akustisches feedback kann ich als Option sicherlich einbinden.
Kommt auch auf die Liste  ;)

Zitat von: Syrex-o am 18 November 2017, 14:37:36
Habe die Tablet Ui version 2.6.15

Ich habe vorgestern geupdatet.
Wo kann ich die Version nachschauen.
Habe: Version: 2.6.12
(gefunden im Ordner js/fhem-tablet-ui.js)

Ich update mal und prüfe nochmal
hmm:
update check:
fhemtabletui
nothing to do...

ich mache einen neuen Thread auf.

kleines Problem:

Zeile 72: elem.getReading("get-pin").val.length;

Wenn schon beim init Readings benutzt werden, kann es sein, dass diese noch nicht lokal bekannt sind, also 'undefined'
Dann kommt es beim Abfragen der length zu einem Fehler.

Nette Idee.
Die Realisierung von "data-get-on/off" und "data-set-on/off" wäre noch traumhaft :)
Meine Alarmanlage benötigt nämlich ein "scharfschalten/unscharfschalten" als set, und gibt "scharf/scharfschalten/unscharf/unscharfschalten" als reading aus.

Das kannst Du doch über den oben beschriebenen Dummy mit einem notify oder doif erledigen oder verstehe ich Dich gerade falsch?

ZitatDas kannst Du doch über den oben beschriebenen Dummy mit einem notify oder doif erledigen oder verstehe ich Dich gerade falsch?

Jop, da hast du recht.

Werde morgen das Update raus bringen und versuche so viel wie möglich einzubinden.

@setstate wann ist der beste moment um ein reading abzufragen. Da ich auf der Basis des Readings die Punkte erstelle, muss es doch beim initialisieren passieren. Ich könnte es höchstens in eine andere nachgelagerte funktion umlagern.
Reicht das ?
Und wie kann ich das update über Github möglich machen ?

Zitat von: Syrex-o am 19 November 2017, 22:01:11

@setstate wann ist der beste moment um ein reading abzufragen. Da ich auf der Basis des Readings die Punkte erstelle, muss es doch beim initialisieren passieren. Ich könnte es höchstens in eine andere nachgelagerte funktion umlagern.
Reicht das ?

genau, das Zeichnen in eine Funktion und diese erst in update rufen.

FHEM holt die Updateinfos aus der controls_xxx.txt Datei.

Update:
Neue Version PinPad.

Leider konnten noch nicht alle Funktionen eingebunden werden und es könnte zu Bugs kommen.
Bitte darüber berichten.
Neue Funktionen:
- class = show-pin (zeigt den pin an, anstatt von Punkten)
- Back Button, um das letzte Zeichen zu löschen.
- 0 in Layout eingefügt.

Beide Datein müssen ersetzt werden.

Grüße

Kleiner Nachtrag:
class="squared" Eckige statt runge Buttons
Fix: Konsoleneinträge waren noch aktiv
      bei class="show-pin" Verbesserung der Anzeige

Grüße

Die Zahlen sind nur zentral im Kreis, back und der Schlüssel noch nicht.

Mit dem back button wird nur virtuell die Zahl entfernt, sichbar ist sie immer noch.

Macht ein Button Sinn, mit dem man show-pin beinflussen kann?

Macht es Sinn mit beim Sperren ein Reading zu setzen? Dann könnte ein Admin jederzeit das Gerät entsperren und muss nicht warten.
Wird die Seite im Sperrmodus neu geladen, ist der Timer weg. ggf. muss das auch über ein Reading gelöst werden.

Kann man bei show-pin die Zahlen weiter voneinander entfernt anzeigen lassen, ähnlich wie ohne show-pin?

Danke für Deine Arbeit!
Leider schließt es bei mir jetzt auch wenn ich symbol einsetze.

Mein Code:
<header>Alarmanlage</header>
<!-- ============= Alarmanlage================== -->
<div data-type="popup"
data-draggable="false"
data-device="Alarm"
data-get-on="on"
data-get-on="off"
data-height="510px"
data-width="340px"
class="interlock">
<!-- ============= Widgetinhalt Start  ================== -->
<div data-type="symbol"
data-device="Alarm"
      data-states='["on","off"]' 
      data-icons='["mi mi-lock_open","mi mi-lock_outline"]'
      data-colors='["#ad3333","#6699FF"]'
      data-background-icon=""
      class="big">
</div>
<div  data-type="label" data-device="Alarm" data-get="state" class="darker small"/>
<!-- ============= 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="aktiviert"
        data-text-unlocked="deaktiviert"
data-locked-time="10"
        data-tries="3">
      </div>
    </div>
<!-- ============= Popupinhalt Ende ================== -->
</div>
<!-- ============= Alarmanlage Ende ================== -->



auch wenn ich
data-get-on="on"
data-get-on="off"
weglasse.

jetzt bleibts gerade offen... (?)

trotz
data-locked-time="10"
        data-tries="3"
ist nach einer Fehleingabe keine wirkliche Eingabe mehr möglich

Edit1:
Seite aktualisiert. Nun schließt sich das Ding wieder von alleine

Edit2:
Der richtige Pin entsperrt nicht.

Verbesserungsvorschlag: für "locked for 9,8..." customizebar machen in z. B. "gesperrt für..."

ZitatDie Zahlen sind nur zentral im Kreis, back und der Schlüssel noch nicht.

Gefixt: Andere Größen als default sind noch nicht verprobt.

ZitatMit dem back button wird nur virtuell die Zahl entfernt, sichbar ist sie immer noch.

Gefixt.

ZitatMacht es Sinn mit beim Sperren ein Reading zu setzen? Dann könnte ein Admin jederzeit das Gerät entsperren und muss nicht warten.
Wird die Seite im Sperrmodus neu geladen, ist der Timer weg. ggf. muss das auch über ein Reading gelöst werden.

Verstehe ich das richtig? Du möchtest bei Fehlversuchen ein Reading setzen und von da soll der Countdown kommen?
Aktueller Stand: Wenn Seite neu geladen wird, dann umgeht man das warten und auch die Fehlversuche.

ZitatMacht ein Button Sinn, mit dem man show-pin beinflussen kann?

Ich finde nicht, da du dich ja entweder dafür entscheiden kannst den Pin anzuzeigen oder eben auch nicht.

ZitatKann man bei show-pin die Zahlen weiter voneinander entfernt anzeigen lassen, ähnlich wie ohne show-pin?

Eingebaut: data-spacing (default: 20px)

ZitatLeider schließt es bei mir jetzt auch wenn ich symbol einsetze.

Hab mal rumprobiert. Aktuell ist es nur möglich das Pinpad auf einer Seite zu verwenden.
Muss ich mich noch mit beschäftigen.
Also deine Fehler können an folgendem liegen:

• Pinpad in mehreren HTML Datein
• Falsche Syntax

Habe hier mal ein Muster für dich, welches bei mir funktioniert:
<section>
           <div data-type="popup"
             data-height="500"
             data-width="400"
             data-draggable="false">
            <div data-type="symbol"
                 data-device="Alarm"
                 data-states='["on","off"]' 
                 data-icons='["mi mi-lock_open","mi mi-lock_outline"]'
                 data-colors='["#ad3333","#6699FF"]'
                 data-background-icon=""
                 class="big">
            </div>
            <div  data-type="label" data-device="Alarm" data-get="state" class="darker small"/>
            <div class="dialog">
                <header>Alarmanlage</header>
                <div data-type="pinpad"
                     data-device="Alarm"
                     data-get="STATE"
                     data-get-pin="pin"
                     class="center">
                </div>
            </div>
        </div>
       </section>

Update
Manche Fixes

Neue Funktionen:
- data-spacing: Abstand zwischen Zahlen, wenn class="show-pin" (default: 10px)
- data-text-blocked: Text der angezeigt wird, wenn Fehlversuche überschritten sind (default: Locked for:)

Vielen Dank für das tolle Widget!
Das hätte ich mal vor 2-3 Jahren gebraucht, das hätte mir vieles erleichtert...

Wäre es möglich das Schlüsselsymbol umzufunktionieren?
Würde damit z.B. gerne das Popup schließen da ich für den Schlüssel keine verwendung habe.

Grüße Dave

ZitatVielen Dank für das tolle Widget!
Das hätte ich mal vor 2-3 Jahren gebraucht, das hätte mir vieles erleichtert...

Wäre es möglich das Schlüsselsymbol umzufunktionieren?
Würde damit z.B. gerne das Popup schließen da ich für den Schlüssel keine verwendung habe.

Für was würdest du Ihn denn gerne benutzen, dann kann ich mir besser vorstellen wie das implementiert werden soll.

Grüße

Zitat von: Syrex-o am 21 November 2017, 12:39:57
Gefixt: Andere Größen als default sind noch nicht verprobt.

Die beiden Icons sind immer noch leicht versetzt.

Zitat von: Syrex-o am 21 November 2017, 12:39:57
Verstehe ich das richtig? Du möchtest bei Fehlversuchen ein Reading setzen und von da soll der Countdown kommen?
Aktueller Stand: Wenn Seite neu geladen wird, dann umgeht man das warten und auch die Fehlversuche.

z.B. ja oder wie das auch immer gelöst werden kann.
Sonst könnte ein User den Schutz ziemlich einfach umgehen.

Zitat von: Syrex-o am 21 November 2017, 12:39:57
Eingebaut: data-spacing (default: 20px)

Die Zahl sind dann noch nicht ganz zentral.

Zitat von: Syrex-o am 21 November 2017, 12:39:57
Habe hier mal ein Muster für dich, welches bei mir funktioniert:

Danke Dir.
Genrell läuft das.

Erst, wenn ich
data-get-on="on"
data-get-on="off"
nutze und der Alarm auf "on" steht, poppt das Popup auf und verschwindet in Kürze wieder.
Habe es mit Deinen Code direkt auf meine Hauptseite (also nicht als weitere html-Datei) getestet.

Klappt das bei Dir mit:
data-get-on="on"
data-get-on="off"?

Komischerweise konnte ich teilweise mal testen, ohne das das Popup verschwunden ist. Leider hat der richtige Code nicht funktioniert. Hast Du mit Nullen schon getestet?

EDIT: Also: Wenn die Seite schon geladen ist und dann der Alarm auf on geht, bleibt das Popup da. Wenn ich die Seite mit Alarm = on neu lade, dann öffnet das Popup und verschwindet wieder. Kannst Du das bitte einmal bei Dir nachstellen?

Danke für das Modul!
Kann ich gut gebrauchen!

Beim Testen habe ich bei mir festgestellt, dass ein Code mit Nullen nicht funktioniert!?

Gruß Photon68

Nochetwas komisches habe ich festgestellt.

Wenn ich einen neuen Pin mit
setreading Alarm pin 1234
setze, dann habe ich auf einmal 8 "Pinpunkte" im Widget (vgl. Screenshot)

ZitatWenn ich einen neuen Pin mit
setreading Alarm pin 1234
setze, dann habe ich auf einmal 8 "Pinpunkte" im Widget (vgl. Screenshot)

Fehlerquelle schon gefunden. Fix sollte Morgen oder Mittwoch da sein.

ZitatBeim Testen habe ich bei mir festgestellt, dass ein Code mit Nullen nicht funktioniert!?

Auch schon erkannt. Selbes wie oben.
Habe vergessen, das die 0 extra erstellt wird und somit nicht wie die anderen Zahlen funktioniert.  ;D

@TWART016
Ich versuche alles noch genauer zu treffen. ;D

ZitatEDIT: Also: Wenn die Seite schon geladen ist und dann der Alarm auf on geht, bleibt das Popup da. Wenn ich die Seite mit Alarm = on neu lade, dann öffnet das Popup und verschwindet wieder. Kannst Du das bitte einmal bei Dir nachstellen?

Ich versuche dir morgen mal eine Lösung für das Problem zu geben und stelle den Hergang nach. ;)

Danke für Deine Hilfe und Arbeit! Freu mich auf eine Lösung.

Zitat von: Gunther am 21 November 2017, 21:57:05
Danke für Deine Hilfe und Arbeit! Freu mich auf eine Lösung.

So folgendes Problem: Es scheint so, dass wenn kein cache aufgebaut ist, dass Widget nicht lädt.
Bsp. Wenn ich die Developer Tools auf habe, (habe dabei den Cache aus gestellt) dann lädt das Pinpad nicht.
Wenn der Cache jedoch existiert funktioniert es.
Hier mal 2 Möglichkeiten für dich (hab mal einen quick fix für die 0 raus gebracht):
1. Popup was nur auf den Status reagiert und somit keinen Click button hat, weil er überflüssig ist:
<!DOCTYPE html>
<html>
<head>Home</head>
<body>
    <div class="page" id="content_testing">
       <section>
           <div data-type="popup"
                data-device="Alarm"
                data-height="500"
                data-width="400"
                data-get-on="on"
                data-get-off="off"
                data-draggable="false"
                class="interlock">
            <div class="dialog">
                <header>Alarmanlage</header>
                <div data-type="pinpad"
                     data-device="Alarm"
                     data-get="STATE"
                     data-get-pin="pin"
                     class="center">
                </div>
            </div>
        </div>
       </section>
    </div>
</body>
</html>

2. Popup was auf click events reagiert (daher kein data-on/data-off)
<!DOCTYPE html>
<html>
<head>Home</head>
<body>
    <div class="page" id="content_testing">
       <section>
           <div data-type="popup"
                data-device="Alarm"
                data-height="500"
                data-width="400"
                data-draggable="false">
            <div data-type="symbol"
                 data-device="Alarm"
                 data-states='["on","off"]' 
                 data-icons='["mi mi-lock_open","mi mi-lock_outline"]'
                 data-colors='["#ad3333","#6699FF"]'
                 data-background-icon=""
                 class="big">
            </div>
            <div  data-type="label" data-device="Alarm" data-get="state" class="darker small"/>
            <div class="dialog">
                <header>Alarmanlage</header>
                <div data-type="pinpad"
                     data-device="Alarm"
                     data-get="STATE"
                     data-get-pin="pin"
                     class="center">
                </div>
            </div>
        </div>
       </section>
    </div>
</body>
</html>

Hoffe es hilft dir und alles funktioniert. ;D

EDIT: Gerade festgestellt, dass es manchmal trotzdem nicht geladen wird.
Vielleicht baue ich diese Funktion auch einfach in das Widget ein. Somit könnte es sein eigenes Popup sein.
Glaube es gibt einen Konflikt zwischen beiden Widgets.
@Gunther guter Vorschlag ?

Zitat von: Syrex-o am 22 November 2017, 09:23:58
So folgendes Problem: Es scheint so, dass wenn kein cache aufgebaut ist, dass Widget nicht lädt.
Bsp. Wenn ich die Developer Tools auf habe, (habe dabei den Cache aus gestellt) dann lädt das Pinpad nicht.

Das hatte ich doch schon irgendwo mal angesprochen: Im Init sollte man noch keine Readings benutzen

elem.getReading("get-pin").val.length

Und auch nicht sofort "length" abfragen, wenn man nicht weiß, ob "val" nicht vielleicht "undefined" ist. Dann kommt es zu einer Exception.

Erst wenn Update() gerufen wird, hat man Readings lokal und kann diese benutzen

ZitatDas hatte ich doch schon irgendwo mal angesprochen: Im Init sollte man noch keine Readings benutzen

Huch, ich dachte, ich hab die Funktion schon aussortiert.
Dann wird es das sein.

EDIT: Habe nochmal nachgescheut und ich habe sie ausgelagert.
Die Dots stecken jetzt in einer eigenen funktion, die außerhalb von init ist.
Reicht das noch nicht?
Darf sie nur in Update auftauchen?

ich mache das gerne so "sicher"


var state = elem.getReading('get').val;
if (ftui.isValid(state)) {
...
}


@Syrex-o

Ein PIN mit Nullen wird jetzt korrekt verarbeitet.
Vielen Dank für das schnelle Update.

Gruß

Nullen gehen. Danke!

Das alte Problem besteht leider weiterhin - auch mit Deinem Beispielcode.

Update
Hab mich mal an paar Fixes gesetzt.

Infos:
- Das Widget geht im Popup immer noch nicht, da es überhaupt nicht initialisiert wird.
@setstate habe alles probiert. Schluss endlich kommt es dazu, dass das Widget überhaupt nicht ausgeführt wird, wenn es im Popup liegt.

- Für @Gunter: da das Popup nicht geht habe ich die Möglichkeit über class: pop eingebaut, die bisher nur auf on und off reagiert.
on = zeigt pinpad, off = versteckt pinpad.
Stehe nur gerade auf dem Schlauch, wie man es haben will, dass man den Alarm auch wieder scharf stellen kann. Dies geht aktuell nur aus der normalen Oberfläche. Vorschläge sehr willkommen.

- bezüglich der 8 Pinpunkte: Wenn ein neuer pin eingegeben wird per setreading, muss die Seite nur einmal aktuallisiert werden und alles wird neu berechnet. Also sollte kein Problem mehr sein.

Grüße

Ich schau mir das am Sonntag an. Danke für Deine Mühen.
Scharf schalten werde ich über den Hausstatus.
Das Popup will ich aktiv haben, wenn der Alarm aktiv ist, so dass derjenige, der ins Haus kommt den Alarm eigeben kann/muss -falls er nicht über den Fingerprintsensor schon deaktiviert wurde (der Alarmstatus 😉)

Hallo Zusammen,

erstmal danke fürs Widget!

Ich verwende das Widget auch, aber ich versteh die Popup-Problematik noch nicht ganz. Ist das ein generelles Problem oder tritt es nur vereinzelt auf?

Ich frage deshalb, da dieses Problem bei mir nicht auftaucht. Ich verwende allerdings noch die "erste" Version des Widgets, also da wo die Zahlen noch "verrutscht" sind.

Momentan traue ich mich jedoch noch nicht auf die aktuelle Version umzusteigen. Ich befürchte dass danach das Problem auch bei mir auftritt.

Hier mal mein Code mit dem es zuverlässig funktioniert (wie gesagt bei mir):

<!-- Alarmanlage Keypad -->
<div data-type="popup" data-device="DI_AlarmKeypad" data-get-on="on" data-get-off="off" data-width="350px" data-height="540px" class="interlock">
<div class="dialog">
<header>Alarm deaktivieren</header>
<div data-type="label" class="cell big top-space-2x wider">Alarm unscharf schalten (PIN-Code)</div>
<div data-type="pinpad" class="inline"
                 data-device="DI_AlarmKeypad"
                 data-get="STATE"
data-get-pin="pin">
</div>
</div>
</div>
<!-- Alarmanlage Keypad Ende -->

VG
Daniel

auch wenn Du die Seite komplett neu lädst?

Achja: speicher doch einfach die beiden Dateien, die Du gerade nutzt weg und teste einfach mit der neuen Version. Dann weißt Du ob es bei Dir geht.

Zitat von: friesenjung am 24 November 2017, 23:31:57
Hallo Zusammen,

erstmal danke fürs Widget!

Ich verwende das Widget auch, aber ich versteh die Popup-Problematik noch nicht ganz. Ist das ein generelles Problem oder tritt es nur vereinzelt auf?

Habe deinen Code mit der neusten Version getestet. Meistens funktioniert es. Jedoch wird das Widget oft auch nicht aktiviert, wenn man die Seite aktualisiert.

Kannst du bei dir mal versuchen die Seite einfach mal 20 mal zu aktualisieren und dann berichten, wie oft das Widget nicht geladen wird.?

Grüße

HI,

also ich habe meinen aktuellen Stand mal getestet. 20x den Browser refreshed, 20x war das PinPad aktiv!

Ich werden nun mal die neuen Dateien testen und berichten...

VG

Hallo.
Ich habe mich bisher im Forum noch nicht geäußert. Aber ich lese schon länger mit. Ich wollte mich aber einmal Bedanken für die tolle Arbeit.
Habe dieses Widget eingebunden. Bei mir funktioniert es halbwegs zuverlässig.. Hab gerade versucht, dass PopUp öfters hintereinander zu öffnen. (Also sozusagen die Alarmanlage scharf zu schalten) bei 6 Versuchen hat es 5 mal zuverlässig funktioniert. Das 6. Mal dann leider nicht. Mir kommt aber vor, dass das einfach mit der Last zu tun hat. Wenn ich dann wieder ein paar Sekunden warte, dann gehts wieder.

Mir ist aber auch gerade aufgefallen, dass ich plötzlich auch 8 Sternchen oben sehe. Bisher waren es immer 4.

EDIT!:
Hab gerade den Cache gecleared. Sieht wieder in Ordnung aus.

Hi,

also auch die aktuelle Version verrichtet Ihren Dienst tadellos. Wieder 20x versucht und 20x hats geklappt.

Welche Browser verwendet Ihr und auf welcher Plattform?

Ich habe den FullyBrowser (Plus-Version) auf einem 60€-China-Tablet mit Android 7 laufen...

VG

Bei mir ebenfalls fully (nicht plus, noch nicht, erst mal testen)

Auf einem Fire-HD-10

Zitat von: friesenjung am 25 November 2017, 17:26:16
Hi,

also auch die aktuelle Version verrichtet Ihren Dienst tadellos. Wieder 20x versucht und 20x hats geklappt.

Welche Browser verwendet Ihr und auf welcher Plattform?

Ich habe den FullyBrowser (Plus-Version) auf einem 60€-China-Tablet mit Android 7 laufen...

VG

Klingt gut. Bin aktuell nicht zuhause, aber werde den Browser mal testen. Funktioniert denn fullscreen ?
Ich tippe aktuell auf ein Problem beim cache, da ich logs gesetzt habe und das Modul in ca. 40% der Fälle überhaupt nicht ausgelöst wird.
Verwende chrome.

Bei Verbesserungsvorschlägen bitte einfach antworten.
Liebe Grüße

P.s. was für praktische Widgets würden euch noch in Tablet Ui fehlen ?

Ich bin auch mit Chrome am Rechner (Mac) und Fully am Androidtab unterwegs.

Ein Tabellenwidget wäre cool um tabellarisch Infos aufbauen zu können.

Zitat von: Syrex-o am 26 November 2017, 00:26:42
...
P.s. was für praktische Widgets würden euch noch in Tablet Ui fehlen ?

Behalte ich im Hinterkopf.

Mein größter Nikolaus-Wunsch bezieht sich allerdings auf ein vorhandenes Widget: eine Möglichkeit, durch einen Event automatisch auf eine bestimmte Pagebuttonseite wechseln zu können.
Wer ein Widget programmieren kann, hat bestimmt auch den richtigen Blick auf vorhandenen Programmcode. Wäre schön, wenn Du da mal einen Blick drauf werfen könntest.
Ziel bleibt natürlich, das via setstate zum neuen Standard zu machen. Aber der gute Mann braucht ja nicht alles selbst zu machen.

Zitat von: Syrex-o am 26 November 2017, 00:26:42
...Funktioniert denn fullscreen ?
...

Hi, ja Fullscreen. Selbst wenn ich den Browser schließe und wieder öffne kommt sofort das PinPad in den Vordergrund.

VG

PS: Fully verwendet ja (meines wissens nach) auch die Chromium-Engine...

Zitat von: Ulm32b am 26 November 2017, 13:25:14
Mein größter Nikolaus-Wunsch bezieht sich allerdings auf ein vorhandenes Widget: eine Möglichkeit, durch einen Event automatisch auf eine bestimmte Pagebuttonseite wechseln zu können.
Wer ein Widget programmieren kann, hat bestimmt auch den richtigen Blick auf vorhandenen Programmcode. Wäre schön, wenn Du da mal einen Blick drauf werfen könntest.
Ziel bleibt natürlich, das via setstate zum neuen Standard zu machen. Aber der gute Mann braucht ja nicht alles selbst zu machen.

Das muss schon mal funktioniert haben. Ich sehe aber gerade, macht's nicht ....
Bin dran.
Update: funktioniert

Super. Herzlichen Dank. Habe es bei mir zum Laufen gebracht.
Allerdings brauchte ich etwas Zeit, um die Attribute zusammenzustöpseln, weil das im Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton)) bisher nicht dokumentiert war. Das muss natürlich geändert werden, deshalb nachfolgend meine Erkenntnisse, verbunden mit der Frage, ob das so o.k. und vollständig ist.

Als Ausgangspunkt nehmen wir das Beispiel aus dem Wiki (Hinweis für Nachahmer: Der nachfolgende Code betrifft nur die Menüleiste und stellt keine vollständige Lösung einer Pagebuttonnavigation dar):

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
    <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-weekend"
         class="default"></div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"></div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv"></div>
</li>

#page2 soll automatisiert aufgerufen werden, wenn das device Musik den Zustand on annimmt. Dafür ist der Code folgendermaßen zu ergänzen:

...
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"
         data-device="Musik"
         data-get="STATE"
         data-get-on="on"></div>
...

Kleiner Schönheitsfehler (?): Wenn das Device Musik anschließend wieder auf off geht, bleibt die Seite aufgerufen (das ist gewollt), das Symbol in der Menüleiste geht aber wieder auf den Zustand off. Die ggf. eingestellte Rückkehr zur Hauptseite (data-return-time) funktioniert weiterhin.

Diese Erklärung könte ich ins Wiki aufnehmen. Außerdem ist das Attribut data-return-time zu ergänzen. Fehlt sonst noch etwas?

Das ist richtig.
data-device, data-get,  data-get-on und ggf. data-get-off ist nötig, um die gesteuerte Umschaltung per Reading zu realisieren.

Idealerweise mit einem Reading, was die Zustände für alle "Knöpfe" abbildet. Also, Reading-Wert="1" dann Button 1 aktiv, Reading-Wert="2" dann Button 2 aktiv, usw.
Somit haben alle Buttons das selbe data-device und data-get und Button 1 hat data-get-on="1", Button 2 hat data-get-on="2" usw.

Wenn du nur ein Reading mit on/off für einen bestimmten Pagebutton hast, müsste man mindestens den Home-Pagebutton mit data-get-on="off" versehen, damit dorthin zurück gesprungen werden kann.

Alles klar. Ist jetzt auch im Wiki nachzulesen. Ich bin sicher, dass sich weitere Anwender finden werden. 8)

So, ich habe heute die letzte Version aus dem ersten Thread nochmal getestet. Kann es sein, dass da wieder eine ältere Version drin ist?

1. Pins mit Nullen gehen nicht.
2. Bekomme ich im Toast eine Fehlermeldung (geht sehr schnell, daher nur so ungefähr)
cannot read property ''length" - undefined
3. Mein Popup-Problem ist leider noch nicht gelöst. Es wäre super, wenn das grundlegend gelöst wird.
Vielleicht kann Setstate nochmal draufschauen?

Zitat1. Pins mit Nullen gehen nicht.

War ein Tippfehler. Ist wieder gelöst.

Zitat2. Bekomme ich im Toast eine Fehlermeldung (geht sehr schnell, daher nur so ungefähr)

Mach bitte einfach mal die Console auf, da stehen die selben Fehlermeldungen.
Bei mir kommt dieser Fehler nicht, daher schwer zu reproduzieren.

Zitat3. Mein Popup-Problem ist leider noch nicht gelöst. Es wäre super, wenn das grundlegend gelöst wird.

Wie vorher schon manche geschrieben haben, hängt es auch vom Browser ab. Daher solange bis die Lösung gefunden ist einfach: class="pop" benutzen.
So weit ich verstanden habe, war es doch das was du gebraucht hast oder?

Grüße

Zu 1. Danke! Teste ich.
Zu 2. welche Konsole meinst Du?
Zu 3. muss gestehen, dass ich die class Version noch nicht getestet habe. Mache ich.

Zitatwelche Konsole meinst Du?

Meine die Entwickler Werkzeuge.
In Chrome "Strg + Umschalt + I"

Grüße

Zitat von: Syrex-o am 24 November 2017, 13:18:18

- Für @Gunter: da das Popup nicht geht habe ich die Möglichkeit über class: pop eingebaut, die bisher nur auf on und off reagiert.
on = zeigt pinpad, off = versteckt pinpad.
Stehe nur gerade auf dem Schlauch, wie man es haben will, dass man den Alarm auch wieder scharf stellen kann. Dies geht aktuell nur aus der normalen Oberfläche. Vorschläge sehr willkommen.

Wie muss der Code den aussehen, wenn ich mit dem class pop arbeite? Wie kann ich da verhindern, dass das Popup geschlossen wird?

So schaut mein Code momentan aus:

<!-- ============= Alarmanlage================== -->
<div data-type="popup"
data-draggable="false"
data-device="Alarm"
data-get-on="on"
data-get-on="off"
data-height="470px"
data-width="300px"
class="interlock"">
<!-- ============= Widgetinhalt Start  ================== -->
<div data-type="symbol"
data-device="Alarm"
      data-states='["on","off"]' 
      data-icons='["mi mi-lock_outline","mi mi-lock_open"]'
      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">
      </div>
    </div>
<!-- ============= Popupinhalt Ende ================== -->
</div>
<!-- ============= Alarmanlage Ende ================== -->

ZitatWie muss der Code den aussehen, wenn ich mit dem class pop arbeite? Wie kann ich da verhindern, dass das Popup geschlossen wird?

Aktuell einfach so:
<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="pop">
</div>

Dann reagiert das Widget auf: "on" und "off".
Also musst du aktuell das device zum Beispiel mit einem Notify wieder scharf stellen.

Für deinen Code bedeutet es, dass das Popup komplett weg fällt.
Ich werde eventuell noch einbauen, dass es auf andere States reagiert.

Schreibe aber gerade Klausuren in der Uni und muss das leider vorziehen  ;D

Grüße

Hallo zusammen,

Zitat von: Ulm32b am 27 November 2017, 22:09:10
Super. Herzlichen Dank. Habe es bei mir zum Laufen gebracht.
Allerdings brauchte ich etwas Zeit, um die Attribute zusammenzustöpseln, weil das im Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton)) bisher nicht dokumentiert war. Das muss natürlich geändert werden, deshalb nachfolgend meine Erkenntnisse, verbunden mit der Frage, ob das so o.k. und vollständig ist.

Als Ausgangspunkt nehmen wir das Beispiel aus dem Wiki (Hinweis für Nachahmer: Der nachfolgende Code betrifft nur die Menüleiste und stellt keine vollständige Lösung einer Pagebuttonnavigation dar):

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
    <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-weekend"
         class="default"></div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"></div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv"></div>
</li>

#page2 soll automatisiert aufgerufen werden, wenn das device Musik den Zustand on annimmt. Dafür ist der Code folgendermaßen zu ergänzen:

Code Auswählen Erweitern

...
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"
         data-device="Musik"
         data-get="STATE"
         data-get-on="on"></div>
...

Kleiner Schönheitsfehler (?): Wenn das Device Musik anschließend wieder auf off geht, bleibt die Seite aufgerufen (das ist gewollt), das Symbol in der Menüleiste geht aber wieder auf den Zustand off. Die ggf. eingestellte Rückkehr zur Hauptseite (data-return-time) funktioniert weiterhin.

Diese Erklärung könte ich ins Wiki aufnehmen. Außerdem ist das Attribut data-return-time zu ergänzen. Fehlt sonst noch etwas?

Dieses hier von Ulm32b beschriebene Coole-Feature geht vermutlich nur mit dem pagebutton-widget und nicht mit dem link-widget oder? Meine versuche landeten in einer Fehlermeldung

        <div data-type="link" class="nocache large top-space-2x left-space-3x"
            data-width="150"
            data-icon-left="fa-music"
            data-color="white"
            data-text-align="right"
            data-load="div#content7"
            data-url="#content_musik.html"
            data-active-color="cornflowerblue"
            data-device="myMPD"
            data-get="STATE"
            data-get-on="play"
            data-active-pattern=".*#content_musik.html">Musik</div>

File not found: ./www/tablet/play beim anzeigen der Seite.

Mikka

Zitat von: Syrex-o am 06 Dezember 2017, 14:19:43
Aktuell einfach so:

Code Auswählen Erweitern


<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="pop">
</div>

Dann reagiert das Widget auf: "on" und "off".
Also musst du aktuell das device zum Beispiel mit einem Notify wieder scharf stellen.

Für deinen Code bedeutet es, dass das Popup komplett weg fällt.
Ich werde eventuell noch einbauen, dass es auf andere States reagiert.

Schreibe aber gerade Klausuren in der Uni und muss das leider vorziehen  ;D

Grüße

Habe es nun iauf einer Seite eingebaut und bin davon ausgegangen, dass dann ein Popup hochkommt (Größe?).

Leider öffnet sich kein Popup sondern ein Bereich hinter meinen anderen Widgets (vgl. Screenshot).

Schreib Du erstmal Deine Klausuren. Die sind wichtiger. Was machste denn? Viel Erfolg!

ZitatHabe es nun iauf einer Seite eingebaut und bin davon ausgegangen, dass dann ein Popup hochkommt (Größe?).

Leider öffnet sich kein Popup sondern ein Bereich hinter meinen anderen Widgets (vgl. Screenshot).

Das gesamte Pinpad had die ID: pinpad.

Da ich aktuell nur am Laptop bin, habe ich die Dateien nicht, daher kann ich nichts ausprobieren.

gehe mal in deine custom css und gib folgendes ein:

#pinpad{
z-index: 1000;
}

Das könnte schon reichen, um das pinpad nach vorne zu holen.

[quote]Schreib Du erstmal Deine Klausuren. Die sind wichtiger. Was machste denn? Viel Erfolg![/quote]
Vielen dank. Bin Student für Business Administration im 5. Semester in Berlin ;)

[quote]Dieses hier von Ulm32b beschriebene Coole-Feature geht vermutlich nur mit dem pagebutton-widget und nicht mit dem link-widget oder? Meine versuche landeten in einer Fehlermeldung [/quote]
Warum benutzt du nicht einfach das feature vom pagebutton?
Sonst hier nachlesen: https://wiki.fhem.de/wiki/FTUI_Widget_Link

Grüße



Danke! Klappt leider nicht. Final wäre es natürlich toll, wenn das auf dem normalen Weg klappen würde.

SO mach Du mal Deine Klausuren. Und genieß die Studienzeit...  ::)

Hi,

hab mich heute mal versucht das pinpad bei mir auf dem TabletUI einzubauen.
Leider scheitere ich bereits am Style da sich bei mir alles verzieht.
Wenn ich data-width und data-height mit rein nehme ändert er nur die Hintergrundhöhe und Breite.
Mir scheint als wenn irgend etwas mit den Zahlenfeldern nicht stimmt. Wenn ich mit der Maus neben die Zahlenfelder gehe änder sich der Cursor wie als wenn ich über den Button gehe.

Hat evtl jemand einen Tipp für mich?

Gruß Jan

Hast Du die css Datei bei Dir eingebunden?

Zitat von: Gunther am 08 Dezember 2017, 14:11:57
Hast Du die css Datei bei Dir eingebunden?

Danke...Eingebunden ja, aber falscher Ordner...*Daumenhoch

Gruß Jan

Hallo zusammen,

ich habe das Pinpad heute auch eingebaut und würde es gerne in so fern abändern, dass die Alarmanlage nicht automatisch mit dem Drücken des Buttons scharf geschaltet ist, sondern durch das Drücken auf den Button das Pinpad kommt, auf die richtige Pin gewartet wird und somit erst die Alarmanlage scharf geschaltet wird. Danach soll alles wie bisher auch weiterlaufen (Pinpad bleibt zu sehen, Hintergrund gesperrt, etc...).
Habt ihr einen Ansatz, wie ich das Einbauen kann?

Vielen Dank!

Weiß nicht ob Ich Dich richtig verstanden habe, aber Du kannst ja mit einem notify oder doif auf den dummy abfragen.

ZitatHabt ihr einen Ansatz, wie ich das Einbauen kann?

Du könntest im Widget die Pineingabe bei ausgeschaltetem Alarm deaktivieren und erst nach dem Klicken auf den Lock Button die Eingabe wieder erlauben. Somit kannst du schon mal sicher sein, dass davor keine Eingaben zustande kommen.
Anschließend wertest du, so wie es bisher auch schon passiert den richtigen Pin aus. Bei falscher Eingabe könntest du dann genauso den Lock for Timer screen anzeigen lassen.

Hoffe das hilft dir.
Wenn dazu Script fragen sein sollten, einfach her damit  ;)

Ich hoffe Deine letzten Wochen waren erfolgreich!
Hast Du Lust nochmal an das Popup-Thema zu gehen? Wäre klasse!

ZitatIch hoffe Deine letzten Wochen waren erfolgreich!
Hast Du Lust nochmal an das Popup-Thema zu gehen? Wäre klasse!

Jop schaue ich mir die Tage an.

Grüße

Ja Mensch, so ein geniales Widget, ich bastel schon ewig an der anderen Pinpad-Lösung, aber das will nicht so ganz. Dein Widget funktioniert einwandfrei - allerdings habe ich auch das Problem mit dem Popup. Ich nutze das Framework von hier: http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui/ftui-2-6 als Grundlage. Da kommt das Popup leider auch nicht mittig in den Vordergrund, sondern batzt sich oben links einfach hin ;-) Das wäre jetzt gar nicht sooo schlimm, weil nur ein Schönheitsfehler, aber problematisch ist, dass ich trotzdem alle anderen Buttons (die ja eigentlich im Hintergrund sein sollten) drücken kann. Ich habe mal zwei Bilder angehängt.
Das mit dem z-index habe ich auch probiert, aber ohne Erfolg.
Guten Rutsch und viele Grüße
doc

Habe leider aufgrund von Zeitmangel im Moment nur einen Workaround gefunden.
Ich hoffe er bringt erst einmal trotzdem was.
Folgendes Problem tritt auf:
Das Popup widget reagiert auf den State und öffnet bei aktivem Alarm das Popup sofort beim laden der Seite. Dann ist das Pinpad meist nicht zu sehen. Daher nehmt dem Popup einfach das Device weg. Funktioniert bei mir aktuell in 10/10 mal.
Würde dann so aussehen:
<!-- ============= Alarmanlage================== -->
<div data-type="popup"
data-draggable="false"
data-height="470px"
data-width="300px"
class="center">
<!-- ============= 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">
      </div>
    </div>
<!-- ============= Popupinhalt Ende ================== -->
</div>
<!-- ============= Alarmanlage Ende ================== -->


ZitatDa kommt das Popup leider auch nicht mittig in den Vordergrund, sondern batzt sich oben links einfach hin ;-)

Das Pinpad reagiert auf alle normalen class Befehle der Tablet UI. Also einfall im Pinpad in der HTML: class="center" eingeben.
Dann positioniert es sich in der Mitte.
Ich würde dir empfehlen eine eigene Sektion für das Pinpad zu nehmen, damit es nichts überlappt.
Also so:
<section>
           <div data-type="pinpad"
                data-device="Alarm"
                data-get="STATE"
                class="center">
           </div>
       </section>


Werde mir heute Nacht mal das Popup widget angucken und versuchen zu finden, was sich hier im weg steht.
Grüße

Hallo zusammen
Ich benutze das PinPad für mein Garagentor - Danke an dieser Stelle für das schöne Widget! Wenn wir verreisen, geht einer unserer Nachbarn bei uns durch die Garage ins Haus, da wäre es cool, wenn ich einen weiteren PIN definieren könnte. Ist so etwas möglich?

Besten Dank!

ZitatWenn wir verreisen, geht einer unserer Nachbarn bei uns durch die Garage ins Haus, da wäre es cool, wenn ich einen weiteren PIN definieren könnte. Ist so etwas möglich?

Erstell doch einfach ein zweites Reading:

setreading "name des dummys" pin_nachbar 1234


Dann stellst du einfach vor dem Urlaub auf den pin_nachbar um:

<div     data-type="pinpad"
           data-device="Alarm"
           data-get="STATE"
           data-get-pin="pin_nachbar"
           data-text-locked="scharf"
           data-text-unlocked="unscharf"
   data-locked-time="10"
           data-tries="3"
           class="center">
</div>


Grüße

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

ZitatHast 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:
$('div[data-id="' + id + '"].dialog-starter').trigger('click');
ändern in:

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

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

ZitatHi,
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.

ZitatDie 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

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?

ZitatKann 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

ja, das Hauptlog?

Zitat von: Syrex-o am 04 Januar 2018, 21:21:46
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.

<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

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

ZitatZiel 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

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. ;D ;D ;D
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  ;)

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

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

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:

<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

ZitatGeht ü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.

ZitatZudem 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

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

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

Ich komme gerade leider nicht zum Testen. Melde mich!

Danke für Deine weitere Arbeit und Hilfe!
So, bin eben zum Testen gekommen.

generell geht es. :-)

Aber leider noch Folgendes:
1.) Wenn meine Seite neu lädt, und dann der Alarm an ist, verschwindet das Pinpad leider immer noch.
Ich nutze eine Seite mit Pagebutton und prefetch (da wird ne Menge geladen)
Das bedeutet, wenn man rein kommt und den Alarm deaktivieren möchte, aber die Seite neu lädt, dann geht das nicht.
Habe auf der Seite noch ein zweites Popup. Kann das damit zusammenhängen?

2. sind noch Punkte da, vgl. Screenshot

So jetzt komme ich mal wieder dazu.

ZitatHabe auf der Seite noch ein zweites Popup. Kann das damit zusammenhängen?

Bitte versuche das veränderte Popup widget von mir. Das soll eigentlich genau das verhindern.

Zitatsind noch Punkte da, vgl. Screenshot

Verstehe nicht genau wie es bei dir zustande kommt.
Bitte ein wenig ausführlicher, damit ich es reproduzieren kann.

Grüße

Hallo habe die 4 Dateien js,css und png überall hinkopiert
und bekomme das hier:

in der html Seite habe ich dazu gefügt:

           <link rel="stylesheet" href="/fhem/tablet1/lib/pinpad.css" />
      <script type="text/javascript" src="/fhem/tablet1/lib/widget_popup_delay.js"></script>
      <script type="text/javascript" src="/fhem/tablet1/lib/widget_pinpad.js"></script>

Debugger im Explorer ergibt:
"widget_popup_delay" ist undefiniert

was habe ich bitte übersehen ?

Du musst in der Index nichts hinzufügen.

Lediglich in den Ordner js das widget widget_popup_delay.js oder das andere kopieren.
Die pinpad.css kopierst Du in den Ordner lib.

Notfalls noch User/Gruppe/Berechtigungen anpasen

Dann fügst Du den entsprechenden Code in Deine html-Seite ein (oben sind genug Beispiele).
Natürlich brauchst Du auch noch einen Dummy in FHEM und ein Reading für den PIN.

Zitat von: Syrex-o am 03 Februar 2018, 11:52:56
So jetzt komme ich mal wieder dazu.
Bitte versuche das veränderte Popup widget von mir. Das soll eigentlich genau das verhindern.
Verstehe nicht genau wie es bei dir zustande kommt.
Bitte ein wenig ausführlicher, damit ich es reproduzieren kann.

Grüße

Also, ich habe ein Update von FTUI gemacht. Das Problem mit den Punkten ist weg.

Ich nutze Deine veränderte Version.
Solange wie die Seite noch lädt, ist das Problem, dass das Popup verschwindet.

Wenn die Seite nicht lädt funktioniert das generell. Sieht aber so aus, als wenn das ein generelles Problem des Popups ist.
Bedeutet: Wenn der Alarm aktiv ist, dann darf Tablet UI nicht aktualisiert werden, weil man dann nicht mehr ans Pinpad kommt. Alternative ist das manuell per Button nach vorne zu holen. Das ist aber für Nicht-Technik-Affine nicht immer ganz einfach.

Trotzdem danke für Deine Hilfe!

ZitatSolange wie die Seite noch lädt, ist das Problem, dass das Popup verschwindet.

Egal wie oft ich bei mir bei "scharfem" Alarm aktualisiere, ich bekomme immer das Pinpad.

Hier nochmal mein Code:
<section>
           <!-- ============= 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 ================== -->
       </section>

Falls es sich um ein dauerhaftes Popup Problem handelt, werde ich mich mal dransetzen.
Jedoch glaube ich das eigentlich nicht

Grüße

So, ich habe nun erstmal mein Tablet-UI um einige Fehler bereinigt (https://forum.fhem.de/index.php/topic,67141.0.html (https://forum.fhem.de/index.php/topic,67141.0.html)).

Bei meinem Test ist nun folgendes herausgekommen:
Ein Popup (nicht Pinpad) bleibt geöffnet auch wenn die Seite aktualisiert.
Pinpad (auch die Popup-Version) verhält sich anders und "schließt" bei Aktualisierung. Das bedeutet, die Seite ist nicht mehr zugreifbar (was ja auch soll) aber ich komme nicht mehr ans Pinpad.

Schicke Dir gerne ein Video dazu, wenn Du mir per PN nochmal Deine E-Mail-Adresse zukommen lässt.

Ich muss das mit dem Popup doch revidieren. Unter bestimmten Umständen verschwindet ein NICHT-Pinpad Popup auch.

Hallo zusammen!

Ich bin ganz neu beim Thema Tablet UI und auch im Programmieren nicht bewandert.

Ich wollte das PIN PAD benutzen, habe dazu auch in FHEM einen dummy (aus dem 1. Post) zum testen angelegt und mir eine Tablet UI-Seite nach der Anleitung https://waschto.eu/mein-tabletui eingerichtet.

Mein Popup wird nur genau einmal gezeigt, dann nicht mehr, auch ein schließen des Browsers bringt nichts. Ich habe es mit Chrome und Firefox auf meinem MacBook und Safari auf meinem iPad versucht.

TabletUI-Index.html:

<!DOCTYPE html>
<html>
<head>
    <!--
     * Version: 1.4.4
     * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1">
    <meta name="debug" content="0">

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/pinpad.css" />

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>

<!--************** hier kommen die Widgets hin ****************-->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <Header>Lampe 1</header>
        <div class="top-space">
            <div data-type="switch"
                 data-device="Lampe1"
                 data-get-on="on.*"
                 data-set-on="on"
            </div>
        </div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
    <Header>PIN PAD</header>
        <div class="top-space">

           <!-- ============= 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 ================== -->     
  </div>
</li>
</ul>
</div>
</body>
</html>

Habt ihr eine Idee?

Beste Grüße
Jan

Moin,

Also:
<link rel="stylesheet" href="/fhem/tablet/css/pinpad.css" /> brauchst du nicht zu definieren. Macht das Widget selber.

Aktuell regiert dein Popup auf die Änderung des Status vom Alarm.
Somit muss entweder irgendetwas deinen Alarm wieder scharf schalten, oder du machst es aus der FHEM Oberfläche selbst.

Code für das PinPad müsste dann so aussehen:

<div data-type="popup_delay"
data-draggable="false"
data-height="500px"
data-width="320px"
class="center">

Sonst gerne einfach mal das Wiki vom Tablet UI Popup lesen.
Alle funktionen sind beim Popup_delay identisch.

Grüße

Ach ja
und an @Gunther
Um da was verbessern zu können brauche ich ein wenig Input.
Irgendwelche Consolen Logs die hilfreich sind?
Was verwendest du genau an Hard- und Software?

Grüße

So, habe Dir mal ein Video zukommen lassen.

Meine Hardware: Vorher: Pi2b, mittlerweile läuft FHEM deutlich performanter auf einem Intel Nuc I3 (in einem Proxmox-Container auf Ubuntu).

Egal ob ich auf meinem MacBookPro (I7) unter Chrome oder auf meinen Acer Tablets unter Fully teste, habe ich das Phänomen des "Verschwindens" beim Reload. (Im Video nachgestellt).

So, habe es mir mal angesehen.

Dein Log ist so voll, dass ich glaube, dass da irgendwas nicht mehr hinterherkommt.
Obwohl du nur auf einer Oberfläche bist, sieht es so aus, als würden 1000 Widgets geladen werden.

Check mal ob das Problem auch auftritt, wenn du das Popup auf einer eigenen Seite als einziges Widget benutzt.

Grüße

Hallo,
ich finde das Widget echt Klasse. Danke für die Arbeit.
Ich würde gern popup_delay verwenden, da ich beim normalen popup die Scrollbalken erhalte.
Nur funktioniert "data-return-time" hier nicht. Wurde das gezielt abgeschaltet?
Das brauche ich, da ich nicht die Oberfläche komplett sperren möchte, sondern ein device "ftuilock" an/aus schalten lasse.
Das wird dann wiederum in verschiedenen Widgets mit "data-lock" verwendet.
Danke und viele Grüße,
Dirk

ZitatNur funktioniert "data-return-time" hier nicht. Wurde das gezielt abgeschaltet?

Hab das Update bisher nicht gemacht gehabt. Die Funktion ist neu.
Hab die neue Datei in den ersten Post angehängt (unverprobt).
Um scrollbars hab ich mich noch nicht gekümmert. Das musst du mal gucken.
Falls welche da sind, änder ich die Version nochmal ab.
Oder du gibst in deiner css Datei der ID oder der Klasse vom pinpad das Attribut: overflow: hidden;

Bei Fragen, einfach melden  ;)

Frohe Ostern

Hallo,
danke für die schnelle Reaktion.
Aber ich glaube, da ist irgendwo ein Fehler drin.
Bei mir popt gerade gar nichts mehr auf...

ZitatAber ich glaube, da ist irgendwo ein Fehler drin.
Bei mir popt gerade gar nichts mehr auf...

Jop, schnelle Reaktion, aber idiotisch von mir  :'( ;D
Hab da so manches vergessen gehabt.
Jetzt ist alles dabei.
Lade die Datei jetzt in den ersten Beitrag hoch.

Grüße

Hi,
jetzt funktioniert es wie es soll.
besten Dank.
grüße, dirk

Hi,
ich habe grade diesen Threat entdeckt, und hänge mein Problem mal hier an, vieleicht hat ja hier einer eine idee wieso das bei mir nicht funktioniert mit dem Pad

https://forum.fhem.de/index.php/topic,91512.0/topicseen.html

Danke

Zitat von: Tommy82 am 02 Oktober 2018, 19:59:59
Hi,
ich habe grade diesen Threat entdeckt, und hänge mein Problem mal hier an, vieleicht hat ja hier einer eine idee wieso das bei mir nicht funktioniert mit dem Pad

https://forum.fhem.de/index.php/topic,91512.0/topicseen.html

Danke

Hey,

genau das Problem wurde hier schon mal thematisiert.
Probier einfach mal die geänderte Popup Datei im Thread hier aus.
Die Definition ist dort auch beschrieben.

Grüße

Hi,
denk mal du meinst den ersten Beitrag hier, hab danach die .css und die . delay.js runtergeladen (steht so auch nicht im WIki oder hab ich das überlesen!?) und in die entsprechenden Ordner gepackt, meine FTUI angepasst und Fhem neugestartet, allerdings keine besserung.
<!-- ========= Einbruchmeldeanlage ========== -->
<!-- ====================================== -->
  <!-- Alarmanlage Keypad -->
  <li data-row="3" data-col="2" data-sizex="2" data-sizey="2">
    <div data-type="popup_delay" data-device="Alarmanlage_Dummy" data-get-on="locked" data-get-off="unlocked"
      data-width="400px" data-height="500px" class="interlock"
      style="position: fixed; left: 0px; top: 0px;">
      <div class="red bold top-space-2x"></div>
      <div class="dialog">
        <header>Alarm deaktivieren</header>
        <div data-type="label" class="cell big top-space-2x wider">PIN-Code</div>
        <div class="inline big top-space">
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="1"
            onclick="">1</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="4"
            onclick="">4</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="7"
            onclick="">7</div>
          <div data-type="push" data-icon="fa-long-arrow-left" data-device="Alarmanlage_Dummy" data-set="key"
            data-set-on="&lt;" onclick=""></div>
        </div>
        <div class="inline big">
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="2"
            onclick="">2</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="5"
            onclick="">5</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="8"
            onclick="">8</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="0"
            onclick="">0</div>
        </div>
        <div class="inline big">
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="3"
            onclick="">3</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="6"
            onclick="">6</div>
          <div data-type="push" data-icon="" data-device="Alarmanlage_Dummy" data-set="key" data-set-on="9"
            onclick="">9</div>
          <div data-type="push" data-off-color="green" data-icon="fa-unlock" data-device="Alarmanlage_Dummy"
            data-set="key" data-set-on="#" onclick=""></div>
        </div>
        <div class="bg-lightgray border-white top-space centered" style="width:280px; height:50px;">
          <div data-type="label" data-device="Alarmanlage_Dummy" data-get="inputPin" class="tall"></div>
        </div>
      </div>
    </div>
</li>

Hey,

Genau. Den Beitrag mein ich  ;)
Was gibt denn deine Console für Fehler aus?
Was soll denn im Wiki stehen? Das delay_popup war die ganze Zeit nur eine Notlösung.

Grüße

Hi,
was meinst du mit Console?
Ah Ok, hatte das als normales vorgehen verstanden mit der delay datei

Zitatwas meinst du mit Console?

Deine Brwser konsole.
Welchen Browser benutzt du denn?
Unter chrome strg + umschalt + i drücken und deine seite neu laden.
Dann sollte da jede menge zu sehen sein.

Kann gerade leider selbst nicht testen, aber warum benutzt du nicht einfach das Widget von hier?

Grüße

Was meinst du mit Widget von hier? Bin nach dem Wiki Artikel vorgegangen.

Nutze Opera, hab die Console auch gefunden, es gibt auch beim Neuladen der Seite keine Error meldung. Oder worauf muss ich noch achten?

Vieleicht habe ich aber auch noch einen Denkfehler drin, wann müsste das POP Up kommen?

ZitatWas meinst du mit Widget von hier? Bin nach dem Wiki Artikel vorgegangen.

Der Thread hier stellt doch ein Pinpad vor, damit keine händische html mehr erstellt werden muss.

ZitatNutze Opera, hab die Console auch gefunden, es gibt auch beim Neuladen der Seite keine Error meldung. Oder worauf muss ich noch achten?

Keine angezeigten Fehler deuten schon mal stark darauf hin, dass es was mit dem popup zu tun hat.
Das Problem hatten einige in dem Thread hier auch.

Lies dir mal alles hier durch.
Ich richte mal kurz einen Test bei mir ein.

Grüße

Hab es auch mit Chrome und FF versucht keine anderen Ergebnisse.
Glaub ja noch das mit meinem DUmmy zu tun hat, da der immer noch den STATE ??? hat.
Hab jetzt auch den Thread verstanden  8) könnte auch das Pinpad Widget nutzen :-) Brauche aber ja dann trotzdem den Dummy und das notify!?

Ich hab mir das Alarm Modul noch nie angeguckt.

Aber du könntest eine einfache Brücke bauen, wenn du das benutzen willst.
Der Dummy ist ja ganz einfach:
define Alarm dummy
attr Alarm room Alarmanlage
attr Alarm setList state:on,off
setreading Alarm pin 2222

Dann reagierst du mit einem Notify auf den state:

define alarm_ntfy notify Alarm:.* {
  my $state = Value("Alarm");
  if ($state eq "on"){
    #Alarm an Aktion
  }
  if($state eq "off"){
    #Alarm aus aktion
  }
}


Oder du schaltest einfach ein anderes Gerät mit dem Pinpad

Grüße

Hi,
hab jetzt nur mal mit dem PinPad rumgespielt, sieht irgendwie noch nicht richtig aus, wie auf dem Bild zu sehen, z.b passt die Hintergrundfarbe nicht zum Rest der Seite, sowie die Ausrichtung der Zahlen passt auch nicht, was muss ich da ändern?

<!-- ========= Einbruchmeldeanlage ========== -->
<!-- ====================================== -->
  <!-- Alarmanlage Keypad -->
  <li data-row="2" data-col="6" data-sizey="1" data-sizex="1">
      <div data-type="pinpad" data-device="Alarmanlage_Dummy" data-get="STATE" data-get-on="locked" data-get-off="unlocked" data-get-pin="inputPin" data-btn-size="40" data-font-size="20"
    data-width="250px" data-height="350px" >
    </div> 
       
</li>

Dazu kommt noch die Fehlermeldung die links unten im Bild zu sehen ist, wenn ich eine der Zahlen drücke

Dazu gibt es in der Konsole diese Fehlermeldung:
widget_pinpad.js:145 Uncaught TypeError: Cannot read property 'length' of undefined
    at HTMLDivElement.<anonymous> (widget_pinpad.js:145)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
(anonymous) @ widget_pinpad.js:145
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

Der zugehörige Dummy sieht so aus:
Internals:
   NAME       Alarmanlage_Dummy
   NR         370
   STATE      ???
   TYPE       dummy
   READINGS:
     2018-10-02 20:04:45   unlockPin       1905
Attributes:
   alarmDevice Sensor
   alarmSettings alarm0,|||on
   devStateIcon locked:locked2.svg locked.*uncertain.*:pah_locked-uncertain.29 set_unlock:pah_set-unlocked:locked.svg@red unlocked:unlocked.svg@green unlocked.*uncertain.*:pah_unlocked-uncertain.29 set_lock:pah_set-locked.29
   event-on-change-reading state,inputPin
   event-on-update-reading key
   readingList key,inputPin,fails,unlockPin
   room       Alarm
   setList    unlockPin
   userReadings inputPin:key:.[0-9] { return ReadingsVal($NAME, "inputPin", "*") . ReadingsVal($NAME, "key", "0");; }, fails:key:.# { if (ReadingsVal($NAME, "inputPin", "0") ne ReadingsVal($NAME, "unlockPin", "0")) { return ReadingsVal($NAME, "fails", 0)+1;; } else { return 0;; } }, state:key:.# { if (ReadingsVal($NAME, "inputPin", "0") ne ReadingsVal($NAME, "unlockPin", "0")) { return "locked";; } else { return "unlocked";; } }, inputPin:key:.[\<] { my $inputVal = ReadingsVal($NAME, "inputPin", "0");; chop($inputVal);; return $inputVal;; },  inputPin:key:.# { return "";; }

Hey,

Änderungen kannst du in css natürlich selbst vornehmen.
Auf die schnelle sehe ich, dass du auf inputPin verweist aber nur ein unlockPin reading hast.
Das sollte identisch sein.

Habe mir mein Widget schon lange nicht mehr angeguckt.
Heute Abend gibts mehr Infos.

Grüße

Hi, ok dann warte ich mal auf heute Abend, aber in der readingList gibt es ja den inputPin, müsste der dann nicht gefüllt werden? readingList key,inputPin,fails,unlockPin

Ohha, css und ich, wir mögen uns nicht :-) Aber die schönheit guck ich mir an wenn es funktioniert

So...
Ich hab das Widget wieder eingebunden und es funktioniert auf Anhieb.
Nur die Popup Funktion geht nicht.
Dafür, muss ich leider ehrlich sagen, ist mir aktuell der Aufwand zu groß, den Fehler zu beheben.
Eventuell musst du mal ein FTUI Update machen.

Folgendes funktioniert sofort:
Gerät definieren:

define Alarm dummy
attr Alarm room Alarmanlage


Dann einmal per "setreading pin" den Pin setzen.

HTML ist dann folgendes:

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


Sogar alle Attribute funktionieren noch.
Die Liste aller Einstellungen findest du im ersten Post.
Einfach mal rumprobieren.
Wenn man keine Größe festlegt, dann ist alles so ausgerichtet, dass es passt.
CSS einfach in den lib Ordner.

Ich kann deinen Fehler leider nicht reproduzieren. :-\

Grüße

Hi,
erstmal Danke für deine Mühe,
was meinst du hier mit genau

ZitatDann einmal per "setreading pin" den Pin setzen.

ein "set Alarm setreading pin 0815" ? oder das Attribut setList mit dem Pin anlegen?

Hab deine HTML Code 1 zu 1 übernommen, und bekomme trotzdem sowohl im FF wie auch in Opera die Fehlermeldung:
TypeError: elem.getReading(...).val is undefined, can't access property "length" of it[Learn More] beim Drücken einer Taste

Die FTUI habe ich gestern noch aktualisiert, daran sollte es nicht liegen

Hey,

Du musst einmal einen pin per setreading festlegen, auf den das widget zugreifen kann.

Grüße

Also über ein set Alarm setreading pin 0815!?

Der Dummy sieht dann so aus:
Internals:
   CFGFN     
   NAME       Alarm
   NR         29862
   STATE      setreading pin 0815
   TYPE       dummy
   Helper:
     DBLOG:
       state:
         myDbLog:
           TIME       1538759057.46619
           VALUE      setreading pin 0815
   READINGS:
     2018-10-05 19:04:17   state           setreading pin 0815
Attributes:
   room       Alarm

Die Error meldungen bleiben

Jetzt hast du ja als STATE den ganzen Befehl stehen  ;)
Einmal in der Fhem Kommandozeile setreading Alarm pin 1111 eingeben

Grüße

Oh man, manchmal steh ich mir auch auf dem Schlauch  8)
Jetzt kommt der Fehler auch nicht mehr.

Jetzt müsste ich ja eiegntlich nur noch mit einem notify drauf reagieren!?

Wenn ich diese notify nutzen will
define alarm_ntfy notify Alarm:.* {
  my $state = Value("Alarm");
  if ($state eq "on"){
    set Alarmanlage armed 0
  }
  if($state eq "off"){
    set Alarmanlage disarmed 0
  }
}

bekomme ich diese Meldung beim anlegen und sehe den Fehler nicht
Missing right curly or square bracket at (eval 1716) line 1, at end of line
syntax error at (eval 1716) line 1, at EOF

IF: no left bracket: {     set Alarmanlage armed 0   }    if($state eq "off"){     set Alarmanlage disarmed 0   } }

Hey,

ist das: define alarm_ntfy notify Alarm:.* {
  my $state = Value("Alarm");
  if ($state eq "on"){
    set Alarmanlage armed 0
  }
  if($state eq "off"){
    set Alarmanlage disarmed 0
  }
}
deine definition in der fhem.cfg direkt?

falls ja, dann sollte es eher so aussehen:
define alarm_ntfy notify Alarm:.* {\
  my $v=Value("Alarm");;\
  if($v eq "on"){\
    fhem("set Alarmanlage armed 0");;\
  } else {\
    fhem(" set Alarmanlage disarmed 0");;\
  }\
}

Ich würde nicht state benutzen, da es da durchaus zu Konflikten kommen kann.

Grüße

Hi,
nein das was ins Kommando Feld eingeben wollte.
Wenn ich deinen empfehlung dort eingebe bekomme ich:

Experimental aliasing via reference not enabled at (eval 3409) line 1.

Hatte mir jetzt nochmal die Platzierung deines Pinpads in meiner FTUI angesehen, und habe den Code dafür so geändert:
<!-- ========= Einbruchmeldeanlage ========== -->
<!-- ====================================== -->
  <!-- Alarmanlage Keypad -->
<li data-row="3" data-col="6" data-sizey="1" data-sizex="1">
   <header>Alarmanlage aktivieren</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>
</li>

Wie du aber auf dem Bild sehen kannst, wird das Pad zu hoch angezeigt

ZitatWenn ich deinen empfehlung dort eingebe bekomme ich:

Meine Empfehlung ist auch nur direkt für die fhem.cfg.
Probier es mal mit:
define alarm_ntfy notify Alarm:.* {
  my $v=Value("Alarm");
  if($v eq "on"){
    fhem("set Alarmanlage armed 0");
  } else {
    fhem(" set Alarmanlage disarmed 0");
  }
}

Das sollte funktionieren.

ZitatWie du aber auf dem Bild sehen kannst, wird das Pad zu hoch angezeigt

Ja stimmt wohl. Ich hab mich nie so richtig an den standard gehalten.

Entweder du legst beim stylen noch etwas selbst hand an oder ich versuche mal die Tage ein neues PinPad zu schreiben.
Je nach Bedarf...

Grüße

Also das notify funktioniert jetzt, danke dafür.

Was müsste ich denn an hand anlegen beim styling? Kenne es in der FTUI eigentlich so, das man die Widges z.b. über die Listen Elemente mit "li" gruppieren kann, allerdings funktioniert das hier leider nicht

Hey,

ZitatWas müsste ich denn an hand anlegen beim styling? Kenne es in der FTUI eigentlich so, das man die Widges z.b. über die Listen Elemente mit "li" gruppieren kann, allerdings funktioniert das hier leider nicht

Folgendes sollte gehen "ungetestet":

Das Pinpad hat eine absolute Positionierung, deshalb schiebt es sich einfach nach oben.
Das kannst du beheben, indem du deinem "li" ein style Attribut gibst.

Das könnte dann so aussehen:

<ul>
  <li>"Anderes Zeug"</li>
  <li style="position:relative;">hier das Pinpad einfügen.</li>
</ul>

Grüße

Hi,
du meinst so?
<!-- ========= Einbruchmeldeanlage ========== -->
<!-- ====================================== -->
  <!-- Alarmanlage Keypad -->

  <li style="position:relative; "data-row="2" data-col="8" data-sizey="1" data-sizex="1">
  <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>
</li>

Ändert sich das ergebnis leider nicht

Hey,

Zitat<li style="position:relative;

Dir fehlen Anführungsstriche.
<li style="position:relative;"
Keine Garantie ;)

Bitte erst lesen und ein wenig selber denken oder "recherchieren".

Grüße

Hi,
lesen tu ich und recherchieren/Probieren auch:-) Die Anführungszeichen waren auch da, nur hatte sich eine leerstelle eingeschlichen.....

Hab es jetzt einigermassen positioniert, allerdings passt es nicht sauber in das Element, wie es auf dem Bild zusehen ist, aber damit könnte ich leben wenn ich die Farbe wenigstens gleich hinbekäme, hast du da noch einen Tip?

Danke

Hey,

Zitatwenn ich die Farbe wenigstens gleich hinbekäme, hast du da noch einen Tip?

Zitatlesen tu ich und recherchieren/Probieren auch:-)

Wirklich ?   :P
Wenn ja, dann hättest du einfach die Dokumentation auf Seite 1 gelesen und da steht, wie du Farbe, Größe und alles andere verändern kannst.  ;)

Grüße

Hallo zusammen,

vielen Dank für die Entwicklung des Moduls! Lange Zeit hat es immer super funktioniert, seit dem Umstieg auf ein Display mit Raspberry und dem Browser Chrome bekomme ich allerdings angehängte Fehlermeldung beim nutzen des Pinpad Moduls. Vorher lief Tablet Ui auf einem Android Tablet, der Browser Fully hat sich daran wohl nie gestört. Ich habe mal versucht die Variable zu definieren, aber so einfach ist es nicht und meine Programmierkenntnisse sind dann doch eher eingeschränkt. Vielleicht hat ja noch jemand das Problem und bereits eine Lösung dafür gefunden?

Vielen Dank

Zitat von: nerothos am 10 Februar 2021, 22:16:14
Hallo zusammen,

vielen Dank für die Entwicklung des Moduls! Lange Zeit hat es immer super funktioniert, seit dem Umstieg auf ein Display mit Raspberry und dem Browser Chrome bekomme ich allerdings angehängte Fehlermeldung beim nutzen des Pinpad Moduls. Vorher lief Tablet Ui auf einem Android Tablet, der Browser Fully hat sich daran wohl nie gestört. Ich habe mal versucht die Variable zu definieren, aber so einfach ist es nicht und meine Programmierkenntnisse sind dann doch eher eingeschränkt. Vielleicht hat ja noch jemand das Problem und bereits eine Lösung dafür gefunden?

Vielen Dank

Hey,
Ich habe das Modul mal entwickelt, aber habe schon ewig nichts mehr daran gemacht. Alle Ressourcen von mir wandern in
FhemNative (https://forum.fhem.de/index.php/board,102.0.html)
Lohnt sich eventuell anzugucken. Dort gibt es das Pinpad auch und wird bei Fehlern weiter entwickelt.

Beste Grüße

Hallo, mal eine kurze Rückfrage.

Ich habe die beiden js-Dateien in den Ordner ".\Fhem\www\tablet\js" kopiert (ist doch der Wirdget-Ordner, oder nicht?), und die css. in ".\Fhem\www\tablet\lib".

Leider bekomme ich beim Aufrufen der Minimal-Lösung aus dem Post auf der ersten Seite nur eine Fehlermeldung:
ERROR
Widget-Pinpad.js:1
SyntexError Uninspected Indentifier

Hier das List vom Dummy (hab nur den Device-Namen abgeändert):
Internals:
   CFGFN     
   FUUID      6081c253-f33f-793a-d121-5b7ff9b35183f20b
   NAME       Alarmcenter
   NR         238309
   STATE      off
   TYPE       dummy
   .attraggr:
   .attrminint:
   READINGS:
     2021-04-25 14:55:54   pin             7335
     2021-04-25 15:16:51   state           off
Attributes:
   alias      AlarmCenter
   cmdIcon    on:secur_locked off:secur_open
   devStateIcon on:secur_locked:off off:secur_open:on
   group      Alarm
   icon       security_password
   room       System,Wohnung->Allgemein
   webCmd     on:off

Aufruf im FTUI sieht so aus:
<div data-type="pinpad" data-device="Alarmcenter" data-get="STATE" data-get-pin="pin"></div>

Zitat von: Superposchi am 25 April 2021, 15:19:07
Hallo, mal eine kurze Rückfrage.

Ich habe die beiden js-Dateien in den Ordner ".\Fhem\www\tablet\js" kopiert (ist doch der Wirdget-Ordner, oder nicht?), und die css. in ".\Fhem\www\tablet\lib".

Leider bekomme ich beim Aufrufen der Minimal-Lösung aus dem Post auf der ersten Seite nur eine Fehlermeldung:

Code Auswählen Erweitern

ERROR
Widget-Pinpad.js:1
SyntexError Uninspected Indentifier

Hier das List vom Dummy (hab nur den Device-Namen abgeändert):

Code Auswählen Erweitern

Internals:
   CFGFN     
   FUUID      6081c253-f33f-793a-d121-5b7ff9b35183f20b
   NAME       Alarmcenter
   NR         238309
   STATE      off
   TYPE       dummy
   .attraggr:
   .attrminint:
   READINGS:
     2021-04-25 14:55:54   pin             7335
     2021-04-25 15:16:51   state           off
Attributes:
   alias      AlarmCenter
   cmdIcon    on:secur_locked off:secur_open
   devStateIcon on:secur_locked:off off:secur_open:on
   group      Alarm
   icon       security_password
   room       System,Wohnung->Allgemein
   webCmd     on:off

Aufruf im FTUI sieht so aus:

Code Auswählen Erweitern

<div data-type="pinpad" data-device="Alarmcenter" data-get="STATE" data-get-pin="pin"></div>

Ich verweise Mal auf den Post direkt über deinem.

Schade, aber ich werde nicht Monate voller Arbeit wegwerfen und jetzt die Oberfläche wechseln.