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.

Download Usage.

0 thoughts on “Creating a custom On Screen Keyboard for Keyman Desktop”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts


Keyman 17.0 is now available in beta

We are excited to announce that Keyman 17.0 is officially in beta. You can download Keyman 17.0 beta on Keyman downloads website. You are welcome to send us any feedback for Keyman 17.0 on Keyman Read more…


The Keyman Intern Project

Several members of the Keyman team work out of the National Polytechnic Institute of Cambodia (NPIC), វិទ្យាស្ថានជាតិពហុបច្ចេកទេសកម្ពុជា, in Phnom Penh, the capital of Cambodia. One of the things the Keyman team tries to do is Read more…


Keyman 16.0 now available!

We are pleased to announce that we have now released Keyman 16.0! You can download Keyman 16.0 on the Keyman downloads website. In version 16.0, we have a few new features, but our focus has Read more…