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 14.0 is now available!

Keyman 14.0 is now available! We have just released Keyman 14.0! As we said in our last blog post, we have been working hard over the last year to improve the quality of Keyman. We’ve Read more…


Keyman 14.0 Beta

Welcome to Keyman 14.0 Beta We are pleased to announce that Keyman 14.0 is now in beta! We have been working hard over the last year to improve the quality of Keyman. We’ve fixed hundreds Read more…


Welcome to blog.keyman.com

As part of the transition to SIL, we’ve moved all the content from blog.tavultesoft.com to this new site, hosted on WordPress.