Keypad: "Bitte geben Sie Ihre Geheimzahl ein"

[RalfP]

Wie die Überschrift schon sagt, hier ist ein Keypad mit 12 Tasten, so wie am Geldautomaten, und ein Keypad mit nur 9 Tasten. Beide sind dafür gedacht einen Zahlencode einzugeben. Vielleicht kann man die Keypads mal bei einem RaspberryPi mit Touchscreen einsetzen. Das habe ich aber noch nicht ausprobiert.

Keypad mit 12 Tasten (10 Ziffern + OK + Korrektur):

Code: Alles auswählen

; Keypad mit 12 Tasten
; Eine Anzahl Ziffern müssen in der richtigen Reihenfolge angeklickt und dann mit OK bestätigt werden.
; Esc = Ende

EnableExplicit

#Stretch = 60     ; Fenstergröße = #Stretch * 3
#Code = "5193"    ; beliebige Codelänge (mögliche Zeichen: 0...9)
#DrkGrn = $0DAB06 ; dunkelgrün


Global keyboard, canvas, xst, yst, nbr, code$
LoadFont(1, "Arial", #Stretch / 3, #PB_Font_Bold)


Procedure ShowKeypad(x = 0, y = 0, width = 3 * #Stretch, height = 4 * #Stretch)
  Protected aa, ss = #Stretch/20, cnt, mc
  keyboard = OpenWindow(#PB_Any, x, y, width, height, "", #PB_Window_BorderLess | #PB_Window_ScreenCentered)
  canvas = CanvasGadget(#PB_Any, 0,0, width, height)
  AddKeyboardShortcut(keyboard, #PB_Shortcut_Escape, 111)  ; Fenster kann mit Escape geschlossen werden
  StartDrawing(CanvasOutput(canvas))
  Box(0, 0, 3 * #Stretch, 4 * #Stretch, #White)    ; Grundfarbe
  For aa = 0 To ss
    Line(#Stretch       - (ss / 2) + aa, 0, 1, 4 * #Stretch, #Black)  ; vertikal
    Line((#Stretch * 2) - (ss / 2) + aa, 0, 1, 4 * #Stretch, #Black)  ; vertikal
    Line(0, #Stretch       - (ss / 2) + aa, 3 * #Stretch, 1, #Black)  ; horizontal 1
    Line(0, (#Stretch * 2) - (ss / 2) + aa, 3 * #Stretch, 1, #Black)  ; horizontal 2
    Line(0, (#Stretch * 3) - (ss / 2) + aa, 3 * #Stretch, 1, #Black)  ; horizontal 3
  Next
  DrawingFont(FontID(1))
  For cnt = 0 To 8
    mc = cnt % 3 ; Modulo will nicht mit Fließkommazahlen zusammenarbeiten
    DrawText((0.4 + mc) * #Stretch, (0.3 + Int(cnt / 3)) * #Stretch, Str(cnt + 1), #Black, #White)
  Next
    DrawText(0.4 * #Stretch, (0.3 + 3) * #Stretch, "C", #Red, #White)
    DrawText(1.4 * #Stretch, (0.3 + 3) * #Stretch, "0", #Black, #White)
    DrawText(2.2 * #Stretch, (0.3 + 3) * #Stretch, "OK", #DrkGrn, #White)
  StopDrawing()
EndProcedure


Procedure resetNumber()
  ; löscht die grünen Punkte 200ms nach dem Klick
  StartDrawing(CanvasOutput(canvas))
  Circle(xst, yst, #Stretch / 3, #White)
  DrawingFont(FontID(1))
  Select nbr
    Case 0 To 9
      DrawText(xst - #Stretch / 10, yst - #Stretch / 5, Str(nbr), #Black, #White)
    Case 10
      DrawText(0.4 * #Stretch, (0.3 + 3) * #Stretch, "C", #Red, #White)
    Case 12
      DrawText(2.2 * #Stretch, (0.3 + 3) * #Stretch, "OK", #DrkGrn, #White)
  EndSelect
  StopDrawing()
  RemoveWindowTimer(keyboard, 333)
EndProcedure


Procedure onLeftklick()
  ; Die Nummer von dem Feld, auf das geklickt wurde, in nbr speichern.
  ; Die Position von dem Feld, auf das geklickt wurde, in xst und yst speichern.
  ; Grüne Punkte bei jedem Klick auf ein Feld setzen.
  ; Timer setzen um jeden Punkt nach 0,2s wieder zu entfernen.
  ; Die Nummern sammeln und bei Klick auf "CR" auswerten.
  Protected xx, yy
  xx = WindowMouseX(keyboard) / #Stretch
  yy = WindowMouseY(keyboard) / #Stretch
  Select yy
    Case 0 : nbr = xx + 1
    Case 1 : nbr = xx + 4
    Case 2 : nbr = xx + 7
    Case 3 : nbr = xx + 10
  EndSelect
  xst = (0.5 + xx) * #Stretch 
  yst = (0.5 + yy) * #Stretch 
  ; grüne Punkte in den Feldern anzeigen, auf die geklickt wurde
  StartDrawing(CanvasOutput(canvas))
  Circle(xst, yst, #Stretch / 3, #DrkGrn)
  StopDrawing()
  AddWindowTimer(keyboard, 333, 200) ; grüne Punkte nach 200ms wieder löschen
  Select nbr
    Case 1 To 9
      code$ = code$ + Str(nbr)
    Case 10
      code$ = Left(code$, Len(code$) - 1) ; Backspace 
      ; code$ = ""     ; alternativ 
    Case 11
      nbr = 0
      code$ = code$ + "0"  ; Null
    Case 12
      If code$ = #Code
        Debug "Ok"
      Else
        Debug "Fehler"
      EndIf  
      code$ = ""
  EndSelect
EndProcedure


CompilerIf #PB_Compiler_IsMainFile
  
  Define event
  ShowKeypad()
  Repeat
    event = WaitWindowEvent()
    Select event
      Case #PB_Event_Gadget
        If EventType() = #PB_EventType_LeftClick
          onLeftklick()
        EndIf
      Case #PB_Event_Timer
        If EventTimer() = 333 
            resetNumber() ; die grünen Punkte wieder löschen
        EndIf
      Case #PB_Event_Menu
        If EventMenu() = 111
            Break   ; Escape-Taste zum beenden
        EndIf
    EndSelect
  ForEver
  
CompilerEndIf

Keypad mit 9 Tasten (Ziffern 1...9):

Code: Alles auswählen

; Keypad mit 9 Tasten
; In einer vorgegebenen Zeit muss eine Anzahl Ziffern in der richtigen Reihenfolge angeklickt werden.
; Esc = Ende

EnableExplicit

#Stretch = 60     ; Fenstergröße = #Stretch * 3
#Code = "5193"    ; beliebige Codelänge (mögliche Zeichen: 1...9)
#ReplyNow = 1     ; 1 = Antwortet sofort, 0 = wartet bis #TimeOut abgelaufen ist und wertet dann erst die geklickten Felder aus
#Color = $0DAB06  ; grün
#TimeOut = 2000   ; ms zwischen den Klicks

Global keyboard, canvas, xst, yst, nbr, code$
LoadFont(1, "Arial", #Stretch/3, #PB_Font_Bold)


Procedure ShowKeypad(x = 0, y = 0, width = 3*#Stretch, height = 3*#Stretch)
  Protected aa, ss = #Stretch/20, cnt, mc
  keyboard = OpenWindow(#PB_Any, x, y, width, height, "", #PB_Window_BorderLess | #PB_Window_ScreenCentered)
  canvas = CanvasGadget(#PB_Any, 0,0, width, height)
  AddKeyboardShortcut(keyboard, #PB_Shortcut_Escape, 111)  ; Fenster kann mit Escape geschlossen werden
  StartDrawing(CanvasOutput(canvas))
  Box(0, 0, 3 * #Stretch, 3 * #Stretch, #White)    ; Grundfarbe
  For aa = 0 To ss
    Line(#Stretch - (ss / 2) + aa, 0, 1, 3 * #Stretch, #Color)
    Line((#Stretch * 2) - (ss / 2) + aa, 0, 1, 3 * #Stretch, #Color)
    Line(0, #Stretch - (ss / 2) + aa, 3 * #Stretch, 1, #Color)
    Line(0, (#Stretch * 2) - (ss / 2) + aa, 3 * #Stretch, 1, #Color)
  Next
  DrawingFont(FontID(1))
  For cnt = 0 To 8
    mc = cnt % 3 ; Modulo will nicht mit Fließkommazahlen zusammenarbeiten
    DrawText((0.4 + mc) * #Stretch, (0.3 + Int(cnt / 3)) * #Stretch, Str(cnt + 1), #Color, #White)
  Next
  StopDrawing()
EndProcedure


Procedure resetNumber()
  ; löscht die grünen Punkte
  StartDrawing(CanvasOutput(canvas))
  Circle(xst, yst, #Stretch/4, #White)
  DrawingFont(FontID(1))
  DrawText(xst - #Stretch/10, yst - #Stretch / 5, Str(nbr), #Color, #White)
  StopDrawing()
  RemoveWindowTimer(keyboard, 333)
EndProcedure


Procedure onLeftklick()
  ; die Nummer von dem Feld ermitteln, auf das geklickt wurde
  Protected xx, yy
  RemoveWindowTimer(keyboard, 222)
  xx = WindowMouseX(keyboard) / #Stretch
  yy = WindowMouseY(keyboard) / #Stretch
  Select yy
    Case 0 : nbr = xx + 1
    Case 1 : nbr = xx + 4
    Case 2 : nbr = xx + 7
  EndSelect
  xst = (#Stretch / 2) + (#Stretch * xx) 
  yst = (#Stretch / 2) + (#Stretch * yy)
  ; grüne Punkte in den Feldern anzeigen, auf die geklickt wurde
  StartDrawing(CanvasOutput(canvas))
  Circle(xst, yst, #Stretch / 4, #Color)
  StopDrawing()
  AddWindowTimer(keyboard, 333, 200) ; grüne Punkte nach 200ms wieder löschen
  code$ = code$ + Str(nbr)
  AddWindowTimer(keyboard, 222, #TimeOut)
  If #ReplyNow = 1 
    If Len(code$) = Len(#Code)  ; wenn alle nötigen Klicks erfolgt sind
      If code$ = #Code
        Debug "Ok"
      Else
        Debug "Codefehler"
      EndIf  
      RemoveWindowTimer(keyboard, 222)
      code$ = ""
    EndIf
  EndIf  
EndProcedure


Procedure onTimeout()
  RemoveWindowTimer(keyboard, 222)
  If #ReplyNow = 1
    Debug "Zeitfehler"
  Else
    If code$ = #Code
      Debug "Ok"
    Else
      Debug "Fehler"
    EndIf  
  EndIf  
  code$ = ""
EndProcedure


CompilerIf #PB_Compiler_IsMainFile
  
  Define event
  ShowKeypad()
  Repeat
    event = WaitWindowEvent()
    Select event
      Case #PB_Event_Gadget
        If EventType() = #PB_EventType_LeftClick
          onLeftklick()
        EndIf
      Case #PB_Event_Timer
        Select EventTimer()
          Case 222
            onTimeout()
          Case 333  ; die grünen Punkte wieder löschen
            resetNumber()
        EndSelect
      Case #PB_Event_Menu
        Select EventMenu()
          Case 111  ; Escape-Taste
            Break
        EndSelect
    EndSelect
  ForEver
  
CompilerEndIf

[Kiffi]

Ohne Deine Arbeit schmälern zu wollen, möchte ich Deine Aufmerksamkeit auf die Dialog Library lenken, die sich für diesen Zweck hervorragend eignet:

Code: Alles auswählen

EnableExplicit

Define XML$
Define Event

#Dialog = 0
#Xml = 0

XML$ = "<window id='#PB_Any' name='test' text='Keypad' minwidth='500' minheight='500' flags='#PB_Window_ScreenCentered | #PB_Window_SystemMenu | #PB_Window_SizeGadget'>" +
       " <gridbox columns='3' colexpand='equal' rowexpand='equal'>" +
       "  <button text='1'/>" +
       "  <button text='2'/>" +
       "  <button text='3'/>" +
       "  <button text='4'/>" +
       "  <button text='5'/>" +
       "  <button text='6'/>" +
       "  <button text='7'/>" +
       "  <button text='8'/>" +
       "  <button text='9'/>" +
       "  <button text='C'/>" +
       "  <button text='0'/>" +
       "  <button text='OK'/>" +
       " </gridbox>" +
       "</window>"

If ParseXML(#Xml, XML$) And XMLStatus(#Xml) = #PB_XML_Success
  
  LoadFont(1, "Arial", 36)
  
  SetGadgetFont(#PB_Default, FontID(1))
  
  If CreateDialog(#Dialog) And OpenXMLDialog(#Dialog, #Xml, "test")
    Repeat
      Event = WaitWindowEvent()
      Select Event
        Case #PB_Event_Gadget
          Debug GetGadgetText(EventGadget())
      EndSelect
    Until Event = #PB_Event_CloseWindow 
  Else  
    Debug "Dialog error: " + DialogError(#Dialog)
  EndIf

Else
  Debug "XML error: " + XMLError(#Xml) + " (Line: " + XMLErrorLine(#Xml) + ")"
EndIf

P.S.: Dein Code funktioniert nicht auf meinem Mac Mini. Ich sehe hier nur ein graues rahmenloses Fenster ohne Buttons.

[Axolotl]

Ich habe den Code nur kurz überflogen und nicht ausprobiert.
Wenn du über WindowOutput() direkt ins Fenster schreibst, muss du auch für das neuzeichnen sorgen.
A.m.S. besser wären deshalb ImageOutput() oder CanvasOutput(), je nachdem welche Events du abfragen möchtest.

[RalfP]

Tja, viele Wege führen nach Rom. Wer wirklich nur die Funktion eines Fensters mit 12 Button haben will, ist mit deinem Code besser bedient. Danke, dass Du mich darauf aufmerksam gemacht hast, denn ich hatte die Dialog-Bibliothek dafür gar nicht im Blick.

Warum der Code auf deinem Mac Mini nicht läuft, weiß ich nicht. Ich habe leider auch keine Möglichkeit das zu testen. Ich habe den Code auf einem PC mit PB 6.21 Beta 7 (x64) geschrieben und nur die Standardbefehle verwendet. Deshalb ging ich davon aus, er würde auf allen Systemen laufen.

Wenn Du nur ein graues Fenster siehst, kann es meiner Einschätzung nach nur daran liegen, dass die 2DDrawing-Bibliothek sich auf einem Mac Mini anders als auf einem PC verhält.

Mit folgendem Code sehe ich auf meinem PC ein weißes Fenster. Ich würde mich freuen, wenn Du das mal mit deinem Mac Mini testen würdest.

Code: Alles auswählen

keyboard = OpenWindow(#PB_Any, x, y, 180, 240, "", #PB_Window_BorderLess | #PB_Window_ScreenCentered)
AddKeyboardShortcut(keyboard, #PB_Shortcut_Escape, 111)  ; Fenster kann mit Escape geschlossen werden
StartDrawing(WindowOutput(keyboard))
Box(0, 0, 180, 240, #White)
StopDrawing()
  
Repeat
  If WaitWindowEvent() = #PB_Event_Menu
    If EventMenu() = 111
      Break   ; Escape-Taste zum beenden
    EndIf
  EndIf
ForEver

[NicTheQuick]

Ich sehe auch nur ein dunkles Fenster auf Ubuntu 24.04 mit Xorg. Wenn ich darauf herumklicke, dann poppen Zahlen auf.

Und das Problem ist offensichtlich und wurde bereits von Axolotl erklärt. Du musst bei der Nutzung von `WindowOutput()` selbst dafür sorgen, dass es regelmäßig neugezeichnet wird. Das heißt jedes Mal, wenn die Maus darüber fährt oder ein Fenster darüber geschoben wird oder es minimiert oder maximiert wird. Einfach immer.
Um das zu vermeiden, nutze am besten ein `CanvasGadget()`. Ich bin sicher, dass es dann auch mit OSX und Linux funktioniert.

[Kiffi]

Mit folgendem Code sehe ich auf meinem PC ein weißes Fenster. Ich würde mich freuen, wenn Du das mal mit deinem Mac Mini testen würdest.

ich sehe kein weißes Fenster; nur ein graues. Aber wie Axolotl und NicTheQuick schon erwähnt haben: Zeichne auf ein CanvasGadget. Dann sieht man auch, was Du zeichnest.

Nachfolgend habe das mal notdürftig ergänzt. Jetzt sieht man zumindest etwas.



Allerdings werden die grünen Kreise nicht richtig gezeichnet (bzw. wieder gelöscht).

Code: Alles auswählen

; Keypad mit 12 Tasten
; Eine Anzahl Ziffern müssen in der richtigen Reihenfolge angeklickt und dann mit OK bestätigt werden.
; Esc = Ende

EnableExplicit

#Stretch = 60     ; Fenstergröße = #Stretch * 3
#Code = "5193"    ; beliebige Codelänge (mögliche Zeichen: 0...9)
#DrkGrn = $0DAB06 ; dunkelgrün


Global keyboard, canvas, xst, yst, nbr, code$
LoadFont(1, "Arial", #Stretch / 3, #PB_Font_Bold)


Procedure ShowKeypad(x = 0, y = 0, width = 3 * #Stretch, height = 4 * #Stretch)
  Protected aa, ss = #Stretch/20, cnt, mc
  keyboard = OpenWindow(#PB_Any, x, y, width, height, "", #PB_Window_BorderLess | #PB_Window_ScreenCentered)
  canvas = CanvasGadget(#PB_Any, 0,0, width, height)
  AddKeyboardShortcut(keyboard, #PB_Shortcut_Escape, 111)  ; Fenster kann mit Escape geschlossen werden
  StartDrawing(CanvasOutput(canvas))
  Box(0, 0, 3 * #Stretch, 4 * #Stretch, #White)    ; Grundfarbe
  For aa = 0 To ss
    Line(#Stretch       - (ss / 2) + aa, 0, 1, 4 * #Stretch, #Black)  ; vertikal
    Line((#Stretch * 2) - (ss / 2) + aa, 0, 1, 4 * #Stretch, #Black)  ; vertikal
    Line(0, #Stretch       - (ss / 2) + aa, 3 * #Stretch, 1, #Black)  ; horizontal 1
    Line(0, (#Stretch * 2) - (ss / 2) + aa, 3 * #Stretch, 1, #Black)  ; horizontal 2
    Line(0, (#Stretch * 3) - (ss / 2) + aa, 3 * #Stretch, 1, #Black)  ; horizontal 3
  Next
  DrawingFont(FontID(1))
  For cnt = 0 To 8
    mc = cnt % 3 ; Modulo will nicht mit Fließkommazahlen zusammenarbeiten
    DrawText((0.4 + mc) * #Stretch, (0.3 + Int(cnt / 3)) * #Stretch, Str(cnt + 1), #Black, #White)
  Next
    DrawText(0.4 * #Stretch, (0.3 + 3) * #Stretch, "C", #Red, #White)
    DrawText(1.4 * #Stretch, (0.3 + 3) * #Stretch, "0", #Black, #White)
    DrawText(2.2 * #Stretch, (0.3 + 3) * #Stretch, "OK", #DrkGrn, #White)
  StopDrawing()
EndProcedure


Procedure resetNumber()
  ; löscht die grünen Punkte 200ms nach dem Klick
  StartDrawing(CanvasOutput(canvas))
  Circle(xst, yst, #Stretch / 3, #White)
  DrawingFont(FontID(1))
  Select nbr
    Case 0 To 9
      DrawText(xst - #Stretch / 10, yst - #Stretch / 5, Str(nbr), #Black, #White)
    Case 10
      DrawText(0.4 * #Stretch, (0.3 + 3) * #Stretch, "C", #Red, #White)
    Case 12
      DrawText(2.2 * #Stretch, (0.3 + 3) * #Stretch, "OK", #DrkGrn, #White)
  EndSelect
  StopDrawing()
  RemoveWindowTimer(keyboard, 333)
EndProcedure

Procedure onLeftklick()
  ; Die Nummer von dem Feld, auf das geklickt wurde, in nbr speichern.
  ; Die Position von dem Feld, auf das geklickt wurde, in xst und yst speichern.
  ; Grüne Punkte bei jedem Klick auf ein Feld setzen.
  ; Timer setzen um jeden Punkt nach 0,2s wieder zu entfernen.
  ; Die Nummern sammeln und bei Klick auf "CR" auswerten.
  Protected xx, yy
  xx = WindowMouseX(keyboard) / #Stretch
  yy = WindowMouseY(keyboard) / #Stretch
  Select yy
    Case 0 : nbr = xx + 1
    Case 1 : nbr = xx + 4
    Case 2 : nbr = xx + 7
    Case 3 : nbr = xx + 10
  EndSelect
  xst = (0.5 + xx) * #Stretch 
  yst = (0.5 + yy) * #Stretch 
  ; grüne Punkte in den Feldern anzeigen, auf die geklickt wurde
  StartDrawing(CanvasOutput(canvas))
  Circle(xst, yst, #Stretch / 3, #DrkGrn)
  StopDrawing()
  AddWindowTimer(keyboard, 333, 200) ; grüne Punkte nach 200ms wieder löschen
  Select nbr
    Case 1 To 9
      code$ = code$ + Str(nbr)
    Case 10
      code$ = Left(code$, Len(code$) - 1) ; Backspace 
      ; code$ = ""     ; alternativ 
    Case 11
      nbr = 0
      code$ = code$ + "0"  ; Null
    Case 12
      If code$ = #Code
        Debug "Ok"
      Else
        Debug "Fehler"
      EndIf  
      code$ = ""
  EndSelect
EndProcedure


CompilerIf #PB_Compiler_IsMainFile
  
  Define event
  ShowKeypad()
  Repeat
    event = WaitWindowEvent()
    
    Select event
      Case #PB_Event_Gadget
        onLeftklick()
      Case #PB_Event_Timer
        If EventTimer() = 333 
            resetNumber() ; die grünen Punkte wieder löschen
        EndIf
      Case #PB_Event_Menu
        If EventMenu() = 111
            Break   ; Escape-Taste zum beenden
        EndIf
    EndSelect
  ForEver
  
CompilerEndIf

[RalfP]

@Axolotl
Das ist richtig. So steht es auch in der Hilfe. Aber das Fenster erscheint in der Bildschirmmitte und ich kenne keine Möglichkeit das Fenster zu verschieben oder zu minimieren. Wenn das Fenster von einem anderen Fenster überdeckt wurde, muss es danach nicht neu gezeichnet werden. Das habe ich ausprobiert (allerdings nur auf meinem PC).

@NicTheQuick
Ok, wenn's auch bei Linux nicht geht will ich's ändern.

@Kiffi
Das Testen ist nun nicht mehr nötig.

@Alle drei
Danke für's Testen. Ich habe daraus gelernt: Was hier auf meinem PC funktioniert muss nicht unbedingt auch auf anderen Systemen funktionieren, auch wenn nur die Standardbefehle benutzt wurden. Und das es es hier bei mir wunderbar funktioniert, ist wohl eher ein Zufall und die Ausnahme.
Ich werde den Code im ersten Beitrag entsprechend andern.

[RalfP]

Jetzt war Kiffi wieder schneller.

[NicTheQuick]

Aber das Fenster erscheint in der Bildschirmmitte und ich kenne keine Möglichkeit das Fenster zu verschieben oder zu minimieren.

Apropos Bildschirmmitte. Ich habe hier zwei Bildschirme und das Fenster poppt dann genau in der Mitte zwischen beiden auf. Das heißt die linke Hälfte des Fenster erscheint auf dem linken Bildschirm und die rechte Hälfte eben auf dem rechten.
Das ist wahrscheinlich auch nicht ganz Sinn des ganzen, aber das wäre jetzt eher ein Problem, was Purebasic lösen sollte und nicht du.

Persönlich bin ich auch kein großer Fan davon Fenster nicht verschieben zu können. Zum Glück kann man das unter Linux nicht unterbinden, sondern man hält einfach die Super-Taste gedrückt und kann dann jedes Fenster dahin schieben, wo man will.

[RalfP]

Ich habe den Code im ersten Beitrag verbessert, auch beim Keypad mit 9 Tasten.

Dank an Kiffi für die "notdürftige Ergänzung". Eine völlige Untertreibung ist das, denn es war ja fast alles fertig.

Aber ich finde, wenn sich bei MacOS und Linux nach StartDrawing(WindowOutput() im Fenster gar nichts tut, sollte das in der Hilfe stehen.