Autor Thema: Neues FTUI Widget PinPad für Alarmanlagen  (Gelesen 13783 mal)

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Neues FTUI Widget PinPad für Alarmanlagen
« am: 09 November 2017, 20:47:13 »
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
« Letzte Änderung: 02 April 2018, 13:03:59 von Syrex-o »
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline TWART016

  • Sr. Member
  • ****
  • Beiträge: 858
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #1 am: 10 November 2017, 18:51:21 »
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.
Intel NUC, Raspberry Pi,CUL 433+868, JeeLink, Uniroll, LD382/LD686 + WifiLight, Eventghost, Tablet UI, Homekit/Homebridge/Siri, Alexa, Squeezebox, Onkyo, MAX, Harmony, KODI, Winconnect, Geofancy, Nmap, Sysmon, Telegram

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #2 am: 11 November 2017, 10:18:42 »
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.
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #3 am: 12 November 2017, 18:54:59 »
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
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261

Offline Standarduser

  • Sr. Member
  • ****
  • Beiträge: 508
    • indiBit.de
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #4 am: 13 November 2017, 19:33:14 »
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?

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #5 am: 13 November 2017, 19:36:44 »
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
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261

Offline Standarduser

  • Sr. Member
  • ****
  • Beiträge: 508
    • indiBit.de
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #6 am: 13 November 2017, 19:41:02 »
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?

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #7 am: 13 November 2017, 19:44:14 »
Zitat
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.

Zitat
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  ::)
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #8 am: 17 November 2017, 16:49:10 »
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.
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261

Offline ToM_ToM

  • Sr. Member
  • ****
  • Beiträge: 935
    • ThomasZFoto
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #9 am: 17 November 2017, 17:09:48 »
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
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

Offline TWART016

  • Sr. Member
  • ****
  • Beiträge: 858
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #10 am: 18 November 2017, 00:09:27 »
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%.
Intel NUC, Raspberry Pi,CUL 433+868, JeeLink, Uniroll, LD382/LD686 + WifiLight, Eventghost, Tablet UI, Homekit/Homebridge/Siri, Alexa, Squeezebox, Onkyo, MAX, Harmony, KODI, Winconnect, Geofancy, Nmap, Sysmon, Telegram

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #11 am: 18 November 2017, 08:45:37 »
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.
« Letzte Änderung: 18 November 2017, 11:06:25 von Gunther »
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #12 am: 18 November 2017, 11:11:34 »
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?
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden

Offline Syrex-o

  • Full Member
  • ***
  • Beiträge: 204
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #13 am: 18 November 2017, 12:56:56 »
Zitat
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.

Zitat
Bei mir hat es das Layout mit der neuen Version zerrissen.
Gucke ich mir morgen an und werde ich beheben

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

Zitat
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
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.
FhemNative
Anonymer Developer Support: https://paypal.me/pools/campaign/111903736516136261

Offline Gunther

  • Hero Member
  • *****
  • Beiträge: 1400
Antw:Neues FTUI Widget PinPad für Alarmanlagen
« Antwort #14 am: 18 November 2017, 13:43:36 »
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>
FHEM@Proxmox@Nuc: TabletUI als User-Interface (4 Wandtablets) / IOs per ser2net gekapselt
Homematic: Heizung, Fenster, Bewegung | Jeelink: Temperatur | Z-Wave: Bewegung, Temperatur | FS20: Temperatur, Fenster | Viessmann-Heizung eingebunden