[FTUI3] new PinPad für FTUI3

[mr_petz]

Hi @all,

Ich habe jetzt das PinPad für FTUI3 soweit zum testen.
Persönlich nutze ich es um einen ftui-tab-view zu sperren.
Man kann es aber auch als AlarmPinPad nutzen (siehe pinpad-example File).
Edit: Code eingekürzt...
Edit: fix overlay...

Settings:

• (device)="" ->fhem Dummy/Device
• [pin]="" ->fhem Dummy/Device pin
• shape="round" ->default eckig
• name="" ->header über dotsbox
• bgcolor="" ->Farbe des PinPad und der Button (default=#444444)
• txtcolor="" ->Farbe der Schrift (default=#9b9b9b)
• dotcolor="" ->Farbe der Dot´s (default=#7b7b7b)
• fsize="" ->Schriftgröße der Button 0-9 (default=1.3em)
• fsizeb="" ->Schriftgröße der Button enter und clear (default=1em)
• width="" ->Breite (default=280px)
• height="" ->Höhe (default=390px)
• left="" ->Position von Links des PinPad (default=40%)
• top="" ->Position von Oben des PinPad (default=22%)
• flat ->flaches Design (default=3D Effect)
• popup ->z-Index wird auf 100 gesetzt um über ein ftui-popup zu kommen(default=99)
• fully ->es wird der komplette Hintergrund für PointerEvents gesperrt (default links 75px Abstand frei)
• overlay="" ->linker Abstand für PointerEvents (default links 75px Abstand)
• set="" ->optionaler set Befehl an Fhem
• noshake -> Pad schüttelt sich nicht, nur die dots werden rot
• [hidden]
• [open]
• [trigger]

In fhem wird ein Dummy-Device angelegt. Bsp.:

Code: [Auswählen]

defmod PinPad dummy
attr PinPad readingList pin
attr PinPad setList on off pinIm Beispiel ist hier bei setlist der pin der gesetzt werden kann.

Um eine Alarmanlage über das PinPad ein und aus zuschalten, muss ein 2. Dummy angelegt werden.
Das pinpad-example File zeigt warum und wie es machbar wäre.
Man kann das aber auch über zwei Button lösen.

Den Dummy kann man dann mit einem <ftui-button> auf "on" setzen und das PinPad poppt durch das [hidden] oder [open] auf. Bsp:

Code: [Auswählen]

  <ftui-button fill="none" (value)="PinPad" states="on">
  <ftui-icon name="th"></ftui-icon>
  </ftui-button>
Und dann noch der PinPad Beispielcode im FTUI3:

Code: [Auswählen]

<ftui-pinpad
  (device)="PinPad"
  [pin]="PinPad:pin"
  shape="round"
  name="PinPad"
  bgcolor="#ededed"
  fully
  [hidden]="PinPad | map('on:false, off:true')">
</ftui-pinpad>

Viel Freude damit.

Edit:
set geändert nach Update im masterGit

Edit:
noshake hinzugefügt
noshake -> Pad schüttelt sich nicht, nur die dots werden rot

Gruß Thomas

[vaulie]

Hi, vielen Dank für das schöne PinPad!
Ich möchte es gerne auch einsetzen, habe aber das Problem, dass ich ein (kleines) Handy im Querformat an die Wand geklebt habe. Das untere Drittel des PinPad verschwindet "unterhalb" des sichtbaren Bereichs.
Erfolgreich habe ich in der Stylesheet-Definition den Abstand zum oberen Rand reduzieren können. Da wäre es allgemein vielleicht noch schön, diesen Wert auch per Parameter aus der ftui-Definition zu übergeben (vergleichbar mit der left-Angabe). Magst Du das einbauen?
Leider hat diese Maßnahme mir nicht gereicht. Daher habe ich versucht, im Javascript (etwa Zeile 60) die Tasten in zwei Reihen (1-5 und clear, dann 6-0 und enter) anzuordnen. Laut dem html müsste es auch klappen, die Reihenfolge der Tasten ist auch verändert. Aber irgendwie wirkt der Zeilenumbruch nicht wie erwartet. Die Tasten scheinen durch andere Definitionen fest positioniert zu werden - ich habe nicht rausgefunden wie... Mache ich das PinPad einfach breiter, verzerrt das PinPad lediglich.
Magst Du mir einen Hinweis geben?
Danke!

[mr_petz]

Hi, sag mal bitte deine grid Größe oder besser wie groß du es brauchst.

[vaulie]

Hi, also ich muss gestehen, so genau weiß ich es noch nicht 
Mittlerweile habe ich weiter rumprobiert und mit ftui-grid base-width="50" base-height="50" margin="5", 2% Abstand nach oben und einer Höhe des PinPads von 260px zu einer Lösung gekommen. Es passt nun gerade so auf meinen Bildschirm und ist nicht zu klein.
Trotzdem würde mich interessieren, wie die Positionierung der Tasten funktioniert ;-)

[mr_petz]

Eigentlich in der klasse .PINButton, .clear und .enter

[Phiolin]

Ich hab da auch Layout Probleme. Selbst wenn ich einfach nur deine pinpad.html aus den Examples aufrufe, sieht das bei mir schon nicht ok aus, siehe Anhänge.
Selbst wenn ich width+height anpasse, bekomme ich zwar die Buttons in eine Reihe, aber die letzte Reihe wird bei mir im 2. Fall auch dann nicht angezeigt.

Eigentlich gefällt mir das technisch soweit ganz gut, werde mal ein wenig basteln um das Layout hinzubiegen.

Mit height="auto" und angepasster width klappt auch die Anzeige. Ich glaube es würde Sinn machen, die Beispiele mit fixen Pixel-Angaben bei Breite und Höhe zu machen. Prozentwerte sind auf jedem Screen anders und je nach Auflösung klappt das vermutlich nicht auf Anhieb bei jedem.

[mr_petz]

Ok und danke fürs testen.
Am Layout habe ich lange nichts gemacht (css ist nicht mein ding). Kannst dich aber gern einbringen.
Ich kann es dann mit einfügen wenn du magst.
LG mr_petz

[StephanFHEM]

hab es bei mir jetzt auch eingebaut und hab auch 2 Themen mit dem Layout (in einem Popup).

Ziel: Pad soll von der Größe zu 100% mit Popup-Größe übereinstimmen.

1. zuerst war das Pad stark nach Rechts verschoben. Das konnte ich mit left="0" beheben. Allerdings ist es aktuell auch nach unten verschoben und ein top="0" hat nichts gebracht.
2. wenn ich testweise eine falsche PIN eingebe dann schüttelt das Pad sich (finde ich cool). Allerdings scheint er beim Schütteln das left="0" nicht zu berücksichtigen. Während der Animation wird es wieder am falschen Ort dargestellt

[mr_petz]

Hi, ich habe gerade nicht viel Zeit mir das in Ruhe anzusehen.
Das war mein erstes Projekt. Du kannst gern ein wenig alles anpassen und mir dann deinen Code zusenden.
Der js code ist auch nicht so schwer zu verstehen.
Im CSS kann ich es nicht viel besser.Sorry Da könntest du mich gern Unterstützen wenn du magst.
LG

[mr_petz]

Hi@all die das PinPad benutzen.
Ich habe die Buttons jetzt in ein grid gepackt. Jetzt sollten die sich nicht mehr falsch untereinander anordnen.
Eine kleine Größe ist jetzt möglich.
Die Position von Top kann ich noch einbauen...
Top ist eingebaut...
Ist erstmal nur hier im Anhang erster Beitrag..
LG

[StephanFHEM]

Hallo,

Danke! bin jetzt endlich zum Einbau gekommen und Top funktioniert. Kann es jetzt genau an das Popup anpassen. Nur der Schütteleffekt passt dann nicht ganz ins Popup (vielleicht könnte man noch eine Variable machen "noshake" womit er das unterlässt).

Ein Bug ist mir noch aufgefallen:
wenn ich den Dummy PinPad nehme dann geht alles. Wenn ich den Dummy anders nenne (zB für ein zweites PinPad) dann schaltet er den Dummy nicht mehr auf off nach Pin-Eingabe.
Denke mal, dass da irgendwo noch PinPad als fix gesetzt ist und nicht an die device-variable angepasst wird

[mr_petz]

Kann ich leider so nicht nachvollziehen...
Zeige mal bitte deine Definitionen.
Mein Dummy heisst "Heizung_Settings_PIN" und wird auf off geschalten.
Cache geleert nach der Änderung?
Aber schaue ich mir nochmal an.
NoShake kann ich noch einbauen. Da werden dann nur die dots rot.

ps in dem example heisst der dummy dummy (und dummy2 und 3) und es wird auch ein toast mit 'set dummy off' angezeigt und getriggert...

[StephanFHEM]

hier bitte:

Code: [Auswählen]

     <ftui-pinpad
        device="PinPad_Kinder"
        [pin]="PinPad_Kinder:pin"
        shape="round"
        name="PinPad"
        txtcolor="white"
        bgcolor="midnightblue"
        set="Kindersicherung Sicherung aus"
        width="280"
        height="390"
        left="0"
        top="0"
        popup
        [hidden]="PinPad_Kinder:state | map('on:false, off:true')">
      </ftui-pinpad>
das gleiche Popup hab ich mit device PinPad ... und da klappt es. hatte auch device mit (PinPad_Kinder) und [(PinPad_Kinder)] probiert...

[mr_petz]

Hi, dir fehlt das Banana
so sollte es gehen:

Code: [Auswählen]

<ftui-pinpad
  (device)="PinPad_Kinder"
  [pin]="PinPad_Kinder:pin"
  shape="round"
  name="PinPad"
  txtcolor="white"
  bgcolor="midnightblue"
  set="Kindersicherung Sicherung aus"
  width="280"
  height="390"
  left="0"
  top="0"
  popup
  [hidden]="PinPad_Kinder | map('on:false, off:true')">
</ftui-pinpad>

Edit:
Gif angehangen

bei hidden brauchst du kein ':state'.
LG

[mr_petz]

Ich habe noshake als Attribute hinzugefügt...
siehe oben.

LG mr_petz