[FTUI3] new PinPad für FTUI3

mr_petz · 05 April 2021, 11:12:24

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

Code Auswählen

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:

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

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

Code Auswählen


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 · 08 April 2021, 11:47:00

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 · 08 April 2021, 12:24:27

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

vaulie · 08 April 2021, 14:09:05

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 · 08 April 2021, 16:11:27

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

Phiolin · 20 September 2021, 13:57:52

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 · 20 September 2021, 15:20:27

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 · 10 Oktober 2021, 17:41:31

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 · 11 Oktober 2021, 10:33:19

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 · 15 Oktober 2021, 13:52:47

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 · 21 Oktober 2021, 21:18:32

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 · 21 Oktober 2021, 21:49:43

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 · 21 Oktober 2021, 22:49:19

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 · 22 Oktober 2021, 08:41:22

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 · 22 Oktober 2021, 17:56:24

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

LG mr_petz

StephanFHEM · 23 Oktober 2021, 17:46:30

noshake funktioniert
banana funktioniert tatsächlich auch.. war mir 100% sicher, dass ich das schon als eine der ersten Sachen probiert hatte.. vielleicht war der cache da auch nicht richtig gelöscht...

auf jeden Fall: Danke!

Timothee · 29 Dezember 2022, 19:43:23

Hallo,
kann mir jemand sagen bzw. erklären, wie ich es schaffe, dass das PinPad immer angezeigt wird? Ich hab schon hidden=false sowie open=true probiert. Bei hidden=false wird es gar nicht angezeigt und bei open=true wird es zwar angezeigt, jedoch nur bis man das erste mal den korrekten Pin eingegeben hat. Anschließend muss ich immer die Seite neuladen, damit das PinPad wieder angezeigt wird.

Viele Grüße
Tim

mr_petz · 29 Dezember 2022, 20:09:24

Hi Tim,
kannst du mir bitte erklären in welchen Zusammenhang das Pinpad offen bleiben soll und warum?
Es ist ja so konzipiert wenn der richtige Pin, dann schließt es sich.
LG

Timothee · 29 Dezember 2022, 21:08:29

Grundsätzlich geht es darum, dass ich über die TabletUI Oberfläche meinen Server per Wake on Lan starten möchte. Hierzu möchte ich gern, dass beim Klick auf mein Server-Icon das PinPad erscheint. Im Hauptthread zu TabletUI V3 wurde mir ja vorgeschlagen, dass PinPad in ein Popup zu packen, damit ich es auf einfachen Wege schließen kann. Ohne das Popup war das PinPad nur über Umwege zu schließen. Das funktioniert nun wunderbar. Wenn man dann den Pin korrekt eingibt, schließt sich das PinPad und der Server startet (hier kämpfe ich noch mit dem Popup, da sich dieses nach erfolgreicher Pineingabe nicht schließt, aber anderes Thema). Wenn man nun jedoch ein weiteres Mal den Server wecken möchte (weil Server nicht gestartet ist bspw.), erscheint beim Klick auf das Server-Icon nur noch das Popup ohne das PinPad. An dieser Stelle hilft dann nur ein Neuladen der TabletUI Oberfläche. Ich hab versucht, das PinPad mit dem Attribut hidden=false zu öffnen. Hierbei erscheint das PinPad bei mir nie. Dann habe ich es mit dem Attribut open=true versucht, wobei ich nun das beschriebene verhalten habe. Ich hoffe, ich konnte mein Anliegen nun besser beschreiben.

Tim

mr_petz · 29 Dezember 2022, 21:25:20

Ich könnte dir wenn du magst bei click auf den overlay (ringsum das Pad) das Pinpad schließen lassen.
Damit musst du nicht den umweg über das Popup gehen...
Dazu nur extra-close mit angeben.
Ich hänge mal an.

LG

Edit:
Du brauchst bei hidden und open einen Trigger wie in der example zu sehen...
https://github.com/mr-petz/ftui/blob/pinpad/www/ftui/examples/pinpad.html

Oh.. gerade bemerkt, geht so direkt im overlay nicht... ich mach noch was...

Edit: Aber jetzt...
Jetzt wird bei der Pineingabe nicht mehr geschlossen. Auf allen anderen Elementen schon...

Timothee · 29 Dezember 2022, 21:43:38

Vielen Dank für die schnelle Hilfe. Leider schließt das PinPad bei jeder Eingabe einer Ziffer. Aber ich denke, den Fehler hast du bereits bemerkt. In dem Beispiel konnte ich jetzt nirgends ein Trigger finden (auch nicht per Suche). Außerdem ist mir die Funktionsweise auch nicht wirklich klar. Kannst du mir vielleicht ein Beispiel oder ein Link geben, wo das mal thematisiert wurde? Ich fange wie gesagt erst an mich mit TabletUI auseinandersetzen.

Edit:
Mit der aktuellen Version funktioniert es nun. Vielen Dank nochmal für die schnelle Anpassung

LG Tim

mr_petz · 29 Dezember 2022, 21:56:34

Sehr gut, jetzt brauchst du einen Trigger damit es immer offen bleibt. Bsp.:

Code Auswählen


[hidden]="dummy | map('.*:false')"

Das kann auch das (device) selbst sein...

LG mr_petz

Edit:
das extra set nur für extra Anwendungen/Devices die nicht on und off sind verwenden...
Also bei (device) wird off bei richtigen Pin gesendet...

Timothee · 29 Dezember 2022, 22:08:44

Kann man in TabletUI eigentlich auch die Bedingungen verketten? Also bei dem Attribut hidden bspw. sowas wie [hidden]="device | map('.*:false') AND device2 | map(''on:true, off:false')" ? Meine Wunschlösung sehe nämlich so aus, dass sich das PinPad nur öffnet, wenn der Status meines Servers offline ist. Wenn ich nun jedoch bei hidden mein presence-device dafür hinterlege, erscheint ja das PinPad sofort nach dem Laden der Oberfläche. Und mit der Verkettung könnte ich das relativ simpel lösen.

mr_petz · 29 Dezember 2022, 22:38:18

~~Da kannst du nur mit [hidden] und [open] arbeiten für 2 Devices....~~

LG

Edit:
Gerade wieder eingefallen. Auch mit Semikolontrennung... Damit kannst du mehrere Device abonnieren/binden... Bsp.:

Code Auswählen


[hidden]="device | map('off:false'); device2 | map('off:true, on:false')"

Das müsste mal ins wiki....!