Keyboard icon indicating copy to clipboard operation
Keyboard copied to clipboard

Typing indicator when not using preview

Open Madd0g opened this issue 10 years ago • 5 comments

There's only one example that doesn't use preview and in it, the keys on the virtual keyboard do not get highlighted when I use the keyboard to type (the same does work with other examples that use preview).

Is that supported? Does it work with all languages?

I wish there were more examples that show international layouts with and without preview. I feel like a virtual keyboard is usually used to type with language layouts the user doesn't have locally, but there are almost no examples of the keyboard in other languages.

Thanks

Madd0g avatar Sep 23 '15 23:09 Madd0g

Hi @Madd0g!

Did you look at the other demo pages?... especially the layout pages that provide keyboard layouts for numerous languages - the menu bar across the top of the main demo has dropdowns.

  • http://mottie.github.io/Keyboard/docs/layouts.html
  • http://mottie.github.io/Keyboard/docs/layouts2.html
  • http://mottie.github.io/Keyboard/docs/layouts3.html

There is also a playground demo that allows you to try out the different options. To remove the preview, simply set the usePreview option to false.

Making a layout is as simple as typing in the characters for a keyboard into an array. Each group or symbol needs to be separated by a space. There is an example in the playground, just change the layout option to "custom" and the layout in the customLayout option will be utilized.

Pretty much everything has been documented in the wiki pages.

Mottie avatar Sep 23 '15 23:09 Mottie

Oh, and to get the keys to highlight, you'll need to include and initialize the typing extension.

Mottie avatar Sep 23 '15 23:09 Mottie

Hey thanks, I only saw the main demo page.

I tried to load an alternative layout in the playground (http://jsfiddle.net/egb3a1sk/788/) Maybe I'm missing something, but the layout actually appears only when I hold the alt button (found by accident).

So to try to see the typing behavior, I pushed the AltGr button in the UI and tried typing on my physical keyboard (my mac language is set to English), I fully expected the russian symbols to be highlighted as I type, but instead the virtual keyboard switched to English and highlighted that.

I activated a russian keyboard on the OS level, but typing in that mode didn't highlight the letters as well, not in the playground and not in the layout demos.

I have seen these features in other virtual keyboards:

  1. The OS language to be ignored and that typing in the text field would be converted to the virtual keyboard's layout.
  2. Highlight indicators should work regardless of selected OS language and highlight the according buttons in the virtual keyboard.

Are these features supported or in the scope of this project?

Thanks

Madd0g avatar Sep 24 '15 06:09 Madd0g

The named layouts (e.g. "russian.js") were made by me and are essentially U.S. keyboard layouts with the AltGr made to copy the specified language. The other layouts, like GreyWyvern, have the language layout set as the default (demo). So really it's all based on the layout. But as I mentioned before, it is really easy to create your own custom layout.

The way the typing extension works is that it looks at the character code of the letter typed, then finds that letter on the virtual keyboard and highlights it. If you remap the keys (demo), it will find that remapped key and highlight it - errr, or it should... it looks like that isn't working. So that is one thing I need to look at.

Anyway, I don't know if there is a way for a javascript based virtual keyboard to detect the set keyboard language and what character is actually being typed. This answer on Stackoverflow recommends using the keypress event but that won't help in this case since it won't fire until after the user releases the key, so the virtual keyboard key highlight would be delayed, or not shown at all if the user holds a key down. If you know of an alternative, I would appreciate any help on this matter.

Mottie avatar Sep 24 '15 12:09 Mottie

The virtual keyboard here does a great job of translating keypresses on an english keyboard to the selected virtual language. Maybe you can check out how they do it. It doesn't care what the OS language is and works purely based on the keys layout.

Madd0g avatar Sep 26 '15 20:09 Madd0g