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 *

Related Posts

Uncategorized

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.

Uncategorized

Should I upgrade to Keyman Desktop 9.0?

If you currently use Keyman Desktop 6, 7.1 or 8.0, you may have questions about whether you should upgrade to version 9.0 or not. This post outlines the various upgrade paths and provides information on Read more…

Uncategorized

Enable custom fonts in Opera Mini

Configure Opera Mini to make Amharic and other custom text visible.  1) In Opera Mini, visit opera:config by typing it into the URL bar: 2) Find "Use bitmap fonts for complex scripts", set it to Read more…