Neues FTUI Widget PinPad für Alarmanlagen

[Syrex-o]

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

Code Auswählen Erweitern

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

Code Auswählen Erweitern

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

Code Auswählen Erweitern


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


Ich hoffe dem ein oder anderen bringt es was.

[TWART016]

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.

[Syrex-o]

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.

[Syrex-o]

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

[Standarduser]

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?

[Syrex-o]

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 

[Standarduser]

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

Hab ich mir ehrlichgesagt schon fast gedacht 

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?

[Syrex-o]

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

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?

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 

[Syrex-o]

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.

[ToM_ToM]

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

[TWART016]

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

[Gunther]

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.

[Gunther]

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?

[Syrex-o]

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.

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.

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

Gucke ich mir morgen an und werde ich beheben

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.

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.

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

[Gunther]

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:

Code Auswählen Erweitern

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