Learn how to create a custom on screen keyboard that does not match the standard 101-key layout.
A discussion with a customer a few days ago led into this blog post – how to create your own On Screen Keyboard for Keyman Desktop that does not need to follow the standard 101-key keyboard shape.
Your custom on-screen keyboard will be a HTML file that includes a couple of interoperability tweaks to integrate cleanly into the Keyman Desktop On Screen Keyboard UI. Once you have created your Keyman Desktop keyboard and package (see the tutorials for info on how to do this!), you will need to create a new HTML file called "usage.htm".
The basic idea is simple: clicking on an element in the HTML page will fire an event back to Keyman telling it to insert a specific character into the active document. For example, the following snippet will insert the ṡ character when clicked:<a href='keyman:insertchars?chars=U+1E61'>Insert ṡ</a>
Note the different elements of the URL:
- keyman:insertchars tells Keyman to insert characters
- chars=U+1E61 tells Keyman which Unicode characters to insert
This is really all you need to know to start creating your own customised On Screen Keyboard. Keyman will manage the focus, context and interactions with the target application.
For a complete example, we'll look at the European Latin keyboard. Feel free to use it as a starting point for your keyboard.
Note that the usage.htm is targeted at Internet Explorer, as we know that it will be used only by the embedded Internet Explorer web browser in the On Screen Keyboard. This means that cross-browser compatibility has not been added to the file, for simplicity.
The European Latin usage.htm has the following components:
- An embedded stylesheet
- Javascript to generate the grid of characters (simpler to maintain than storing it as HTML) – the "gen" function
- Javascript to handle resizing the grid of characters to the window size, automatically – the doResize function
- A small amount of Javascript to handle customised tooltips for the character grid – the mouseOverBox function
- And a couple of utility functions
The body of the document is straightforward – just call the gen() function to complete.