Keyboard loads after a delay

[mdevraj]

Hi

I have a keyboard with 2 layouts -
1 layout with many keysets. So there are more than 240 keys in that layout.
1 layout with just numbers. So there are about 13 keys.

I have some overridden styles for some keys too.

The challenge is that when the keyboard loads, it takes more than 1 second to show the keyboard.

After digging into the code, I see that the bindKeys() method takes the major chunk of the time and I see that you call this function when the keyboard is about to be visible.

Am I missing some configuration which will ensure that I can load the keyboard faster?

Note: The demo app does not have an issue when I load a large number of keysets. Difference is that I am using the angular 2 directive and not the jquery plugin directly.

Please help!

[Mottie]

Hi @mdevraj!

You can prebuild the keyboard while the page is idle, and before the keyboard opens, by calling the startup function (demo).

$("#keyboard").getkeyboard().startup();

Eventually, I'll completely remove binding to all keys and use a delegated binding to the keyboard wrapper. I'm not sure why I added a binding to each key in the first place.

[mdevraj]

Hi @Mottie,

Thank you for getting back.

I did further analysis and see that the startup() gets called every time the input field is in focus. And this is because the reveal() does not have any entry in the base.$keyboard and hence the condition fails and the startup() gets called. The keyboard is in the
'$.keyboard.builtKeyboards' list.

Any further pointers that you can help me with?

Thanks.

[Mottie]

Once startup() is called, it builds the keyboard layout and saves it, so the keyboard shouldn't need to be rebuild everytime the input is focused.

You can look at $.keyboard.builtLayouts (not builtKeyboards) to see which keyboards have been processed.

[mdevraj]

Hi @Mottie,
My bad. Had a typo in the last comment. I meant $.keyboard.builtLayouts.
I do see the entries in the $.keyboard.builtLayouts but the reveal() passes the condition stating the base.$keyboard [] is empty and the startup function gets called.

I infact checked a jsfiddle demo of yours and debugged that. It seems to be calling startup() everytime the keyboard gets visible.

Any further pointers that you can help me with?

Thanks.

[Mottie]

The startup function is called every time within the reveal funciton, but the keyboard should already be built, so there shouldn't be an initial delay if you called it prior to the user focusing on the input. If you're still seeing a huge delay, would you mind modifying a jsFiddle so I can figure out what's causing the problem?

[mdevraj]

You are right. The keyboard is already built and it should not take time to load. But like my first comment, the bindKeys() gets called everytime the startup() is called. Binding 240+ keys takes close to 500ms. I am not sure why the bindKeys() is called everytime.

In the meantime, I will try creating a jsFiddle and demonstrate the delay.

[Mottie]

I'll work on changing the bindKeys to use a delegated binding, but I may not be able to get to it for a few days.

[mdevraj]

Thanks @Mottie

I have created a jsFiddle: http://jsfiddle.net/mdevraj/uhqodz25/

What I am noticing is that with chrome developer tools active, the performance is slow as compared to the normal mode.

[Mottie]

Please try the newly released v1.28.0. It now uses delegated event binding, so hopefully you'll see some performance improvements.

[originals]

Hi

I have a keyboard with 2 layouts -
1 layout with many keysets. So there are more than 240 keys in that layout.
1 layout with just numbers. So there are about 13 keys.

I have some overridden styles for some keys too.

The challenge is that when the keyboard loads, it takes more than 1 second to show the keyboard.

After digging into the code, I see that the bindKeys() method takes the major chunk of the time and I see that you call this function when the keyboard is about to be visible.

Am I missing some configuration which will ensure that I can load the keyboard faster?

Note: The demo app does not have an issue when I load a large number of keysets. Difference is that I am using the angular 2 directive and not the jquery plugin directly.

Please help!

Where did u find the angular 2 directive? is it public?