Phystical Keyboard input for Arabic layout

[tehChromic]

Hi,
I am having an issue which is that I would like to be able to type on my physical keyboard and have the keys trigger click events on the virtual keyboard - this is for typing on an american keyboard and having the input field be in Arabic.

I've found the physicalKeyboardHighlight and actually it doesn't seem to highlight any of my letter keys (using Chrome on Linux). I've also found the physicalKeyboardInterface method, and used the initKeyboardListener, however this does not appear to do anything. I don't know if that's because there is an issue as described with highlights issue, or if I am using it wrong.

Thanks!!

[hodgef]

Hello @tehChromic,

It's hard to debug your specific issue without a reproducible example. If you could visit the demos page, edit one of the demos as to show the issue and share the link, then I'd definitely take a look.

Also, one way to check if physicalKeyboardHighlight is globally broken for your OS/Browser is to try out the following demo:

https://franciscohodge.com/projects/simple-keyboard/demo-showcase/full-keyboard/

If the keys are not highlighting for you in that page, then it's definitely is a bug to be investigated.

I'll close the ticket for now and reopen it once you provide the repro as described above.

Regards,
Francisco Hodge

[tehChromic]

Thanks for prompt reply and direction Francisco!

I've dug in and discovered that my physical keyboard words as expected in the demo. However I've found that using 'arabic' layout causes the issue - the physical keyboard produces no response in the simplekeyboard and the input produces english letters.

Here is a Codepen: https://codesandbox.io/s/simplekeyboardjsdemos-trd8b

Here are the only pieces of code I've changed from the demo:

    let KeyboardLayouts = window.SimpleKeyboardLayouts.default;

    /**
    * Available layouts
    * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
    */
    let layout = new KeyboardLayouts().get("arabic");
    // ...

    let keyboard = new Keyboard(".simple-keyboard-main", 
        Object.assign({}, commonKeyboardOptions, { layout: layout })
    )

[hodgef]

Hello @tehChromic,

Thanks for the follow up, although I'm a bit unsure of what you're trying to achieve.

If you have a QWERTY physical keyboard and simple-keyboard set up with an Arabic layout, then physicalKeyboardHighlight won't highlight any Arabic keys in simple-keyboard.

For instance, when you hit the "q" key in your physical keyboard, no key will be highlighted in simple-keyboard as the key "q" won't exist in the Arabic simple-keyboard layout.

Regards,
Francisco Hodge

[tehChromic]

Francisco,

I see. What you are saying is that physical keyboard maps to the virtual key value, where I am looking for keys to map to virtual key position or index. The use case is a language learning application, and the idea is that the user can get used to typing their querty keyboard and have the virtual keyboard act as a kind of visual superimposition, so that the student can get physical sensation of typing the the Arabic word.

So I suspected I would have to do some mapping of physical keys to virtual keyboard and it sounds like that is what you are saying too. My question is, given that I've built event handlers into my script for physical keyboard interaction, what method can I use to highlight and/or trigger click events on virtual keys so I can set-up my mapping? I read through the docs but I don't see a way to do it outlined there.

Thanks and beautiful keyboard!!!

[hodgef]

@tehChromic,

Thank you for the clarification, I understand now :)

I think this would have to be done through custom highlighting. I'll try something out and report back shortly.

[hodgef]

Hello @tehChromic,

Here's a very rough attempt:

https://codesandbox.io/s/github/simple-keyboard/simple-keyboard-layouts-select-button-by-index-mapping/tree/master/

It basically grabs the position of the pressed button (within a qwerty layout) then goes and highlights the button at that position in simple-keyboard.

If you take this as a base, just know that it's a rough/incomplete idea and you'd have to improve it to fit your needs. Hope it helps though!

Regards,
Francisco Hodge

[tehChromic]

Francisco, Thanks so much for the incredible and prompt solution! The solution you provided is working perfectly on my machine, and agreed it seems a bit complex, but that's to be expected given that it's a quick hack to get behavior that was not intended originally. However I hope you can appreciate that the use case is valuable. Here's a Pen of my rewrite of your code to better meet my needs: https://codesandbox.io/embed/simplekeyboardlayoutsdemonpm-rct6g Basically I am working with a single page application that may need to load different language keyboards per session, and to make new instance of the keyboard when the component loads, so I've created a constructor to handle making the keyboard and functionality you added, and I've put keyboard layouts into a module. Of course I am wondering if it is possible to generate the layouts programmatically from your default layouts instead of needing to define them explicitly in that module, and I'm sure it must be - given enough time I am sure I can figure it out. Actually my Pen isn't working yet and i'm not sure why because I think it should be, but wanted to share anyway so you got a sense of how I'm setting it up. Thank-you for all the support and attention! Cheers, Christian

…

On Wed, May 29, 2019 at 3:21 PM Francisco Hodge ***@***.***> wrote: Hello @tehChromic <https://github.com/tehChromic>, Here's a very rough attempt: https://codesandbox.io/s/simplekeyboardlayoutsdemonpm-vu38i It basically grabs the position of the pressed button (within a qwerty layout) then goes and highlights the button at that position in simple-keyboard. I did this as fast as possible, so the code is not very good (especially the throw in getLayoutKeyIndex). However I hope it helps. Regards, Francisco Hodge — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90?email_source=notifications&email_token=AAJ4PICDLT2MYOQCDKFP35DPX36VNA5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWQZTZY#issuecomment-497129959>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ4PIABF7DI2EAHCSHQDSLPX36VNANCNFSM4HQIPCWQ> .

[hodgef]

Hello @tehChromic,

Here's an improved version of my example, using the layouts from simple-keyboard-layouts and set up as a simple-keyboard module.

https://codesandbox.io/s/github/simple-keyboard/simple-keyboard-layouts-key-mapping-module-sample/tree/master/

Edit (>2.24.1 version):
https://codesandbox.io/s/simple-keyboard-layouts-demo-npm-4s4uv

Hope that helps!

Regards,
Francisco Hodge

[tehChromic]

Francisco, This works like an absolute charm and you are amazing. One small detail, using your example, shift key toggles shift mode, but the mapping does not exist in shift mode. Is this intentional, or an option of the module or something like that? Cheers, Christian

…

On Sat, Jun 1, 2019 at 4:30 PM Francisco Hodge ***@***.***> wrote: Hello @tehChromic <https://github.com/tehChromic>, Here's an improved version of my example, using the layouts from simple-keyboard-layouts <https://github.com/hodgef/simple-keyboard-layouts> and set up as a simple-keyboard module <https://franciscohodge.com/projects/simple-keyboard/modules/>. https://codesandbox.io/s/github/simple-keyboard/simple-keyboard-layouts-key-mapping-module-sample/tree/master/ Hope that helps! Regards, Francisco Hodge — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90?email_source=notifications&email_token=AAJ4PIAEILUWA7BXRLT45CLPYMA73A5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWXKPIY#issuecomment-497985443>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ4PIDRULD55YSNCBUZAHTPYMA73ANCNFSM4HQIPCWQ> .

[hodgef]

Hello @tehChromic,

Thanks! Mappings in shift seem to be working. You basically have to hold down shift then press the desired button. The example is a bit barebones and quickly put together though, so it won't cover all bases (e.g.: There will be bugs). I hope however that you can take that and turn it into how you want it to work.

Regards,
Francisco Hodge

[tehChromic]

Ah OK, I skipped a step in that case: for some reason when I hit shift in either your demo or my client code, the shift acts a bit like a caps lock: the keys are shifted permanently until I hit shift again. In the shifted state there is no key mapping going on after the shift key is released, however if I hit a second key after the shift is pressed, it does indeed map highlight. However once released the shift keys don't revert to default keys. Thanks again, Christian

…

On Sat, Jun 1, 2019, 9:38 PM Francisco Hodge ***@***.***> wrote: Hello @tehChromic <https://github.com/tehChromic>, Thanks! Mappings in shift seem to be working. You basically have to hold down shift then press the desired button. The example is a bit barebones and quickly put together though, so it won't cover all bases (e.g.: There will be bugs). I hope however that you can take that and turn it into how you want it to work. Regards, Francisco Hodge — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90?email_source=notifications&email_token=AAJ4PIG5JCTVBEMMDGZWKW3PYNFEPA5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWXNWHY#issuecomment-497998623>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ4PIFLBJ6D4WKWXLVSJFLPYNFEPANCNFSM4HQIPCWQ> .

[hodgef]

Indeed this releasing shift behavior would need to be made custom. This and some other custom approaches are explored in this test sandbox.

Regards,
Francisco Hodge

[tehChromic]

Gotcha, OK. I have one more question which I don't see in the docs or console logging the keyboard instance: suppose I want to destroy the instance, because I am using components with routing and only need one instance of the keyboard at a time, but may need another route to display no keyboard or may need to re-instantiate, maybe with a different target or source language. Is the way to do this to keep one instance and then simply change options, ie layout? Or is there a way to destroy the instance and all listeners and etc so I can start again. The issue I am running into is that when a component loads more than once that uses the keyboard, then I get multiple listeners and etc. I can solve this by instantiating once, but then when a component changes the keyboard is no longer rendered of course. Thanks! Christian

…

On Sat, Jun 1, 2019 at 11:10 PM Francisco Hodge ***@***.***> wrote: Indeed this releasing shift behavior would need to be made custom. This and some other custom approaches are explored in this test sandbox <https://codesandbox.io/s/n5mllkkmyl>. Regards, Francisco Hodge — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90?email_source=notifications&email_token=AAJ4PIBQD4IUCWGIVUW7VK3PYNP5ZA5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWXOVDQ#issuecomment-498002574>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ4PICDCYXWEOSOVR2FWBLPYNP5ZANCNFSM4HQIPCWQ> .

[hodgef]

That is something that totally flew under my radar, thanks for bringing it up! I'll ship this asap and update this ticket.

Thanks,
Francisco Hodge

[hodgef]

Hey @tehChromic,

The method destroy is now available as of version 2.22.0:
https://github.com/hodgef/simple-keyboard/releases/tag/2.22.0

Regards,
Francisco Hodge

[tehChromic]

Wow, do you sleep?! Awesome.

…

On Sun, Jun 2, 2019, 12:27 AM Francisco Hodge ***@***.***> wrote: Closed #90 <#90>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#90?email_source=notifications&email_token=AAJ4PIBNEI2ULIKWM7ORIODPYNY5VA5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGORYFIUSI#event-2383055433>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ4PIGPEHWFJYLWBD52I23PYNY5VANCNFSM4HQIPCWQ> .

[tehChromic]

Ug, sorry to be a pain, I've got 2.22.0 in npm and cdn and neither has a destroy method on the instance ... I'm using exactly like in the docs .. what am I doing wrong? Thanks! Christian On Sun, Jun 2, 2019 at 12:43 PM Christian Coulon <christianco@gmail.com> wrote:

…

Wow, do you sleep?! Awesome. On Sun, Jun 2, 2019, 12:27 AM Francisco Hodge ***@***.***> wrote: > Closed #90 <#90>. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#90?email_source=notifications&email_token=AAJ4PIBNEI2ULIKWM7ORIODPYNY5VA5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGORYFIUSI#event-2383055433>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAJ4PIGPEHWFJYLWBD52I23PYNY5VANCNFSM4HQIPCWQ> > . >

[tehChromic]

NM, weird cache build issue, all good! On Sun, Jun 2, 2019 at 12:52 PM Christian Coulon <christianco@gmail.com> wrote:

…

Ug, sorry to be a pain, I've got 2.22.0 in npm and cdn and neither has a destroy method on the instance ... I'm using exactly like in the docs .. what am I doing wrong? Thanks! Christian On Sun, Jun 2, 2019 at 12:43 PM Christian Coulon ***@***.***> wrote: > Wow, do you sleep?! Awesome. > > > > On Sun, Jun 2, 2019, 12:27 AM Francisco Hodge ***@***.***> > wrote: > >> Closed #90 <#90>. >> >> — >> You are receiving this because you were mentioned. >> Reply to this email directly, view it on GitHub >> <#90?email_source=notifications&email_token=AAJ4PIBNEI2ULIKWM7ORIODPYNY5VA5CNFSM4HQIPCW2YY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGORYFIUSI#event-2383055433>, >> or mute the thread >> <https://github.com/notifications/unsubscribe-auth/AAJ4PIGPEHWFJYLWBD52I23PYNY5VANCNFSM4HQIPCWQ> >> . >> >