Html5 doesn't support numeric keypad?

Author

Message

Prime

1

Years of Service

User Offline

Joined: 15th Jun 2022

Location:

Posted: 23rd Jul 2022 22:18

Link

I'm having trouble using the numeric keypad on my keyboard to input numbers in the html5 version of my app. The numbers on the top row work fine, and both sets of numeric keys work when I launch the app in windows.

Is this a known issue, is it just me, or is there a workaround?

Back to top

Profile PM Website

Virtual Nomad

Moderator

18

Years of Service

User Offline

Joined: 14th Dec 2005

Location: SF Bay Area, USA

Posted: 23rd Jul 2022 22:43 Edited at: 23rd Jul 2022 22:48

Link

i just discovered this myself ~ a month ago.

my post on discord: "interesting... it seems NumPad is the same as the ArrowKeys in HTML ScanCode-wise...".

i received no response to that but it appears they're the same as the arrowkeys (ie, 37-40) which corresponds to numpad 4,8,6 & 2 but don't recall what the others may have returned. (should be Home, End, Page Up/Down, insert, delete, etc.)

further testing should utilize GetRawLastKey() to see what the others might correspond to. if i get a chance, i'll put something together and report.

then, i believe it was raven who suggested using GetCharBuffer() for something related (distinguishing Upper/Lower keypresses) so i'll take a look at that, too, unless you/someone else beats me to it.

AGK Resource Directory
Made with AppGameKit on Itch.io
TGC @ GitHub
Some Snippets

Back to top

Profile PM Website

Virtual Nomad

Moderator

18

Years of Service

User Offline

Joined: 14th Dec 2005

Location: SF Bay Area, USA

Posted: 23rd Jul 2022 23:50 Edited at: 24th Jul 2022 00:18

Link

ok, taking a further look

Quote: "it appears they're the same as the arrowkeys"

...seems to apply when Shift is held down ON DESKTOP.

otherwise, see the HTML player source and this HTML Scancode tool for AGK (my manual testing results match the source).

don't ask my why it is this way but it's not good for the numeric entry you're looking for

you could map the keys to corresponding numbers, tho, and since there are so few, it wouldn't be much of a chore BUT there would be no way (that i know of) to determine whether or not the user pressed NumPad 4 OR LeftKey, for example, so those corresponding keys outside of the NumPad would be pretty useless.

AGK Resource Directory
Made with AppGameKit on Itch.io
TGC @ GitHub
Some Snippets

Back to top

Profile PM Website

Prime

1

Years of Service

User Offline

Joined: 15th Jun 2022

Location:

Posted: 24th Jul 2022 00:59

Link

Quote: "you could map the keys to corresponding numbers, tho, and since there are so few, it wouldn't be much of a chore BUT there would be no way (that i know of) to determine whether or not the user pressed NumPad 4 OR LeftKey, for example, so those corresponding keys outside of the NumPad would be pretty useless."

I've been working on a module that handles editboxes, so maybe I could add an option to convert the raw scan codes into the expected numbers (only when an edit box is active).

Back to top

Profile PM Website

Prime

1

Years of Service

User Offline

Joined: 15th Jun 2022

Location:

Posted: 24th Jul 2022 06:09 Edited at: 15th Aug 2022 05:12

Link

In Windows, GetCharBuffer() returns 0 1 2 3 4 5 6 7 8 9 when the keypad keys are pressed, in Html5 nothing is returned
In Windows, GetRawLastKey() returns 96 97 98 99 100 101 102 103 104 105
In Html5, GetRawLastKey() returns 45 187 40 34 37 12 39 36 38 33 if numlock is active. If numlock is not active then the same keycodes are returned except 5 doesn't register

test program

// Project: testscancodes 
// Created: 22-07-23

// show all errors

SetErrorMode(2)

// set window properties
SetWindowTitle( "testscancodes" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 )

gcbuff$ as string = ""

do

s$ = GetCharBuffer()
  if len(s$) then gcbuff$ = s$

Print( ScreenFPS() )
  Print( "GetCharBuffer() " + gcbuff$ )
  // windows 0 1 2 3 4 5 6 7 8 9
  Print( "GetRawLastKey() " + str(GetRawLastKey()))
  // windows 96 97 98 99 100 101 102 103 104 105
  // html5 45 187 40 34 37 12 39 36 38 33

// KEY_NUMLOCK      144
// html5 numlock    282
  Print( "Numlock: " + str(GetRawKeyState( 144 )))

Sync()
loop

+ Code Snippet


// Project: testscancodes 
// Created: 22-07-23

// show all errors

SetErrorMode(2)

// set window properties
SetWindowTitle( "testscancodes" )
SetWindowSize( 1024, 768, 0 )
SetWindowAllowResize( 1 ) // allow the user to resize the window

// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetOrientationAllowed( 1, 1, 1, 1 ) // allow both portrait and landscape on mobile devices
SetSyncRate( 30, 0 ) // 30fps instead of 60 to save battery
SetScissor( 0,0,0,0 ) // use the maximum available screen space, no black borders
UseNewDefaultFonts( 1 )


gcbuff$ as string = ""


do

  s$ = GetCharBuffer()
  if len(s$) then gcbuff$ = s$


  Print( ScreenFPS() )
  Print( "GetCharBuffer() " + gcbuff$ )
  // windows 0 1 2 3 4 5 6 7 8 9
  Print( "GetRawLastKey() " + str(GetRawLastKey()))
  // windows 96 97 98 99 100 101 102 103 104 105
  // html5 45 187 40 34 37 12 39 36 38 33

// KEY_NUMLOCK      144
// html5 numlock    282
  Print( "Numlock: " + str(GetRawKeyState( 144 )))

  Sync()
loop

Back to top

Profile PM Website

Prime

1

Years of Service

User Offline

Joined: 15th Jun 2022

Location:

Posted: 24th Jul 2022 06:11

Link

My solution is https://github.com/charlesgriffiths/agk-modules/tree/main/other/editboxes

If the appropriate variable is set, the numeric keypad keys (.0123456789) will work properly in an editbox, but the left and right arrow keys can't be used to move the cursor position because the keycodes overlap.

Back to top

Profile PM Website

Prime

1

Years of Service

User Offline

Joined: 15th Jun 2022

Location:

Posted: 24th Jul 2022 06:13

Link

Relevant code from module

// arrow keys can't be used because the scan codes overlap with numeric keypad in html5
function EditBoxes_ConvertHtml5Keypad( ebs ref as tEditBoxes )
s$ as string = ""
index as integer = -1

boxid = GetCurrentEditBox()
  if not boxid then exitfunction   // 0 means no edit box has focus

for i = 0 to ebs.boxes.length
    if boxid = ebs.boxes[i].id
      index = i
      exit
    endif
  next i
  
  if -1 = index then exitfunction  // this editbox does not belong to this editboxes instance

if GetRawKeyReleased( 110 )
    s$ = GetCharBuffer()
    if len( s$ )
      if CompareString( ".", right( s$, 1 )) then exitfunction
    endif
    s$ = "."
  elseif GetRawKeyReleased( 45 )
    s$ = "0"
  elseif GetRawKeyReleased( 187 )
    s$ = "1"
  elseif GetRawKeyReleased( 40 )
    s$ = "2"
  elseif GetRawKeyReleased( 34 )
    s$ = "3"
  elseif GetRawKeyReleased( 37 )
    s$ = "4"
  elseif GetRawKeyReleased( 12 )
    s$ = "5"
  elseif GetRawKeyReleased( 39 )
    s$ = "6"
  elseif GetRawKeyReleased( 36 )
    s$ = "7"
  elseif GetRawKeyReleased( 38 )
    s$ = "8"
  elseif GetRawKeyReleased( 33 )
    s$ = "9"
  endif

if not len(s$) then exitfunction

pos as integer
text$ as string

pos = GetEditBoxCursorPosition( boxid )
  text$ = GetEditBoxText( boxid )
  
  text$ = left( text$, pos ) + s$ + right( text$, len(text$)-pos )

SetEditBoxText( boxid, text$ )
  SetEditBoxCursorPosition( boxid, pos+1 )

endfunction

+ Code Snippet

// arrow keys can't be used because the scan codes overlap with numeric keypad in html5
function EditBoxes_ConvertHtml5Keypad( ebs ref as tEditBoxes )
s$ as string = ""
index as integer = -1

  boxid = GetCurrentEditBox()
  if not boxid then exitfunction   // 0 means no edit box has focus

  for i = 0 to ebs.boxes.length
    if boxid = ebs.boxes[i].id
      index = i
      exit
    endif
  next i
  
  if -1 = index then exitfunction  // this editbox does not belong to this editboxes instance

  if GetRawKeyReleased( 110 )
    s$ = GetCharBuffer()
    if len( s$ )
      if CompareString( ".", right( s$, 1 )) then exitfunction
    endif
    s$ = "."
  elseif GetRawKeyReleased( 45 )
    s$ = "0"
  elseif GetRawKeyReleased( 187 )
    s$ = "1"
  elseif GetRawKeyReleased( 40 )
    s$ = "2"
  elseif GetRawKeyReleased( 34 )
    s$ = "3"
  elseif GetRawKeyReleased( 37 )
    s$ = "4"
  elseif GetRawKeyReleased( 12 )
    s$ = "5"
  elseif GetRawKeyReleased( 39 )
    s$ = "6"
  elseif GetRawKeyReleased( 36 )
    s$ = "7"
  elseif GetRawKeyReleased( 38 )
    s$ = "8"
  elseif GetRawKeyReleased( 33 )
    s$ = "9"
  endif

  if not len(s$) then exitfunction

pos as integer
text$ as string

  pos = GetEditBoxCursorPosition( boxid )
  text$ = GetEditBoxText( boxid )
  
  text$ = left( text$, pos ) + s$ + right( text$, len(text$)-pos )

  SetEditBoxText( boxid, text$ )
  SetEditBoxCursorPosition( boxid, pos+1 )

endfunction

Back to top

Profile PM Website

Prime

1

Years of Service

User Offline

Joined: 15th Jun 2022

Location:

Posted: 24th Jul 2022 16:19

Link

I posted in haste last night, and after more testing this morning I have updated the module. The html5 keypad behavior is the same on both classic and studio.

relevant code

// arrow keys/home/end can't be used because the scan codes overlap with numeric keypad in html5
function EditBoxes_ConvertHtml5Keypad( ebs ref as tEditBoxes )
s$ as string = ""
index as integer = -1
boxid as integer
pos as integer
text$ as string

boxid = GetCurrentEditBox()
  if not boxid then exitfunction   // 0 means no edit box has focus

for i = 0 to ebs.boxes.length
    if boxid = ebs.boxes[i].id
      index = i
      exit
    endif
  next i

if -1 = index then exitfunction  // this editbox does not belong to this editboxes instance

if GetRawKeyPressed( 36 ) or GetRawKeyPressed( 37 ) or GetRawKeyPressed( 38 ) or GetRawKeyPressed( 39 ) or GetRawKeyPressed( 40 )
    ebs.savepos = GetEditBoxCursorPosition( boxid )
  endif

if GetRawKeyReleased( 36 ) or GetRawKeyReleased( 37 ) or GetRawKeyReleased( 38 ) or GetRawKeyReleased( 39 ) or GetRawKeyReleased( 40 )
    SetEditBoxCursorPosition( boxid, ebs.savepos )
  endif

if GetRawKeyReleased( 110 )
    s$ = GetCharBuffer()
    if len( s$ )
      if CompareString( ".", right( s$, 1 )) then exitfunction
    endif
    s$ = "."
  elseif GetRawKeyReleased( 45 )
    s$ = "0"
  elseif GetRawKeyReleased( 187 ) 
    s$ = "1"
    pos = GetEditBoxCursorPosition( boxid )
    text$ = GetEditBoxText( boxid )

if pos > 0
      if CompareString( "=", mid( text$, pos, 1 ))
        text$ = left( text$, pos-1 ) + right( text$, len(text$)-pos )  // remove =
        SetEditBoxText( boxid, text$ )
        SetEditBoxCursorPosition( boxid, pos-1 )
      endif
    endif
  elseif 187 = GetRawLastKey()
    pos = GetEditBoxCursorPosition( boxid )
    text$ = GetEditBoxText( boxid )

if pos > 0
      if CompareString( "=", mid( text$, pos, 1 ))
        text$ = left( text$, pos-1 ) + right( text$, len(text$)-pos )  // remove = when key held down
        SetEditBoxText( boxid, text$ )
        SetEditBoxCursorPosition( boxid, pos-1 )
      endif
    endif
  elseif GetRawKeyReleased( 40 )
    s$ = "2"
    SetEditBoxCursorPosition( boxid, ebs.savepos )
  elseif GetRawKeyReleased( 34 )
    s$ = "3"
  elseif GetRawKeyReleased( 37 )
    s$ = "4"
  elseif GetRawKeyReleased( 12 )
    s$ = "5"
  elseif GetRawKeyReleased( 39 )
    s$ = "6"
  elseif GetRawKeyReleased( 36 )
    s$ = "7"
  elseif GetRawKeyReleased( 38 )
    s$ = "8"
  elseif GetRawKeyReleased( 33 )
    s$ = "9"
  endif

if not len(s$) then exitfunction

pos = GetEditBoxCursorPosition( boxid )
  text$ = GetEditBoxText( boxid )

text$ = left( text$, pos ) + s$ + right( text$, len(text$)-pos )

SetEditBoxText( boxid, text$ )
  SetEditBoxCursorPosition( boxid, pos+1 )
  ebs.savepos = pos+1

endfunction

+ Code Snippet

// arrow keys/home/end can't be used because the scan codes overlap with numeric keypad in html5
function EditBoxes_ConvertHtml5Keypad( ebs ref as tEditBoxes )
s$ as string = ""
index as integer = -1
boxid as integer
pos as integer
text$ as string

  boxid = GetCurrentEditBox()
  if not boxid then exitfunction   // 0 means no edit box has focus

  for i = 0 to ebs.boxes.length
    if boxid = ebs.boxes[i].id
      index = i
      exit
    endif
  next i

  if -1 = index then exitfunction  // this editbox does not belong to this editboxes instance

  if GetRawKeyPressed( 36 ) or GetRawKeyPressed( 37 ) or GetRawKeyPressed( 38 ) or GetRawKeyPressed( 39 ) or GetRawKeyPressed( 40 )
    ebs.savepos = GetEditBoxCursorPosition( boxid )
  endif

  if GetRawKeyReleased( 36 ) or GetRawKeyReleased( 37 ) or GetRawKeyReleased( 38 ) or GetRawKeyReleased( 39 ) or GetRawKeyReleased( 40 )
    SetEditBoxCursorPosition( boxid, ebs.savepos )
  endif

  if GetRawKeyReleased( 110 )
    s$ = GetCharBuffer()
    if len( s$ )
      if CompareString( ".", right( s$, 1 )) then exitfunction
    endif
    s$ = "."
  elseif GetRawKeyReleased( 45 )
    s$ = "0"
  elseif GetRawKeyReleased( 187 ) 
    s$ = "1"
    pos = GetEditBoxCursorPosition( boxid )
    text$ = GetEditBoxText( boxid )

    if pos > 0
      if CompareString( "=", mid( text$, pos, 1 ))
        text$ = left( text$, pos-1 ) + right( text$, len(text$)-pos )  // remove =
        SetEditBoxText( boxid, text$ )
        SetEditBoxCursorPosition( boxid, pos-1 )
      endif
    endif
  elseif 187 = GetRawLastKey()
    pos = GetEditBoxCursorPosition( boxid )
    text$ = GetEditBoxText( boxid )

    if pos > 0
      if CompareString( "=", mid( text$, pos, 1 ))
        text$ = left( text$, pos-1 ) + right( text$, len(text$)-pos )  // remove = when key held down
        SetEditBoxText( boxid, text$ )
        SetEditBoxCursorPosition( boxid, pos-1 )
      endif
    endif
  elseif GetRawKeyReleased( 40 )
    s$ = "2"
    SetEditBoxCursorPosition( boxid, ebs.savepos )
  elseif GetRawKeyReleased( 34 )
    s$ = "3"
  elseif GetRawKeyReleased( 37 )
    s$ = "4"
  elseif GetRawKeyReleased( 12 )
    s$ = "5"
  elseif GetRawKeyReleased( 39 )
    s$ = "6"
  elseif GetRawKeyReleased( 36 )
    s$ = "7"
  elseif GetRawKeyReleased( 38 )
    s$ = "8"
  elseif GetRawKeyReleased( 33 )
    s$ = "9"
  endif

  if not len(s$) then exitfunction

  pos = GetEditBoxCursorPosition( boxid )
  text$ = GetEditBoxText( boxid )

  text$ = left( text$, pos ) + s$ + right( text$, len(text$)-pos )

  SetEditBoxText( boxid, text$ )
  SetEditBoxCursorPosition( boxid, pos+1 )
  ebs.savepos = pos+1

endfunction

Definitely not a perfect solution. You can use the mouse to position the editbox cursor but if you type numbers too fast, sometimes the cursor gets out of position. I found the cursor stays in place better when translating the keycode on GetRawKeyReleased() than on GetRawKeyPressed()

Back to top

Profile PM Website

Sorry your browser is not supported!

AppGameKit Studio Chat / Html5 doesn't support numeric keypad?