[FTUI3] new PinPad für FTUI3

Begonnen von mr_petz, 05 April 2021, 11:12:24

Vorheriges Thema - Nächstes Thema

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=wird kalkuliert)
  • fsizeb="" ->Schriftgröße der Button enter und clear (default=1em)
  • width="" ->Breite (default=260px)
  • height="" ->Höhe (default=wird errechnet)
  • 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.:
defmod PinPad dummy
attr PinPad readingList pin
attr PinPad setList on off pin

Im 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:
  <ftui-button fill="none" (value)="PinPad" states="on">
  <ftui-icon name="th"></ftui-icon>
  </ftui-button>


Und dann noch der PinPad Beispielcode im FTUI3:

<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

Edit:
longpress event hinzugefügt.
bei langen drücken des clear Button wird alles gelöscht, bei kurzen drücken zuletzt eingegebene Zahl...

Ist jetzt hier zu finden https://github.com/mr-petz/ftui/tree/addons

update pinpad.component.js https://raw.githubusercontent.com/mr-petz/ftui/addons/controls_ftui_addons.txt
update pinpad.component.css https://raw.githubusercontent.com/mr-petz/ftui/addons/controls_ftui_addons.txt


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

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

Phiolin

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

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

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

#12
hier bitte:

     <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

#13
Hi, dir fehlt das Banana ;)
so sollte es gehen:


<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