Keyman Developer Tutorial

On Screen

Session 5

This session we will create an on-screen image for the desktop keyboard for the Dagbani language of Ghana.  This image will be displayed when we activate the On-screen keyboard in Keyman and click on the keyboard icon. We will export the image for packaging.

The On-Screen pane allows us to edit the visual representation of our keyboard layout. The content on this tab is stored in the KVKS file associated with our keyboard. The visual representation is used only in desktop and desktop web. However, if no touch layout is defined, this layout will be synthesized into a touch layout automatically.

An On-Screen keyboard is optional but in most keyboards is recommended. The On-Screen keyboard may not always match the actual layout identically, because we may choose to hide some of the details of encoding from the interface presented to the user. The user can also choose to print the layout.

This keyboard layout can also be printed or included in HTML or other documentation. The editor allows us to export the file to HTML, PNG or BMP formats.

​​​​​​​1. Start Keyman Developer.

2. In the Project menu, point to Recent Projects, click DagbaniTutorial.kpj.

3. In the Project - Keyboard dialog box, click dagbanitutorial.kmn.   The Details page appears.

4. Click On-Screen. The On-Screen page appears.

5. First, we will automatically generate an On-Screen Keyboard that matches the layout. This can be used to effectively pre-populate the On-Screen Keyboard and reduces the complexity of designing it from scratch.  So, click on Fill from layout.

We get a message about overwriting existing keys.  Click OK.

​​​​​​​6. In our situation, we will need to make changes to the on-screen keyboard, so that all the qwerty keys are displayed for both the default and shift layer.

We can change a key to display text by entering the desired text in the Text box.

We can change a key to display an image by clicking Browse associated with Bitmap button.

We can display the shift layer by clicking the Shift key.

 

​​​​​​​7. Now we can save the on-screen layout as an image by clicking Export. We should be at the Projects > dagbanitutorial folder.  Navigate to the source folder.  Set the Save as type to PNG.  In the File name box, enter DagbaniTutorial.  Then Click Save.

 

​​​​​​​8. The Output Bitmap Parameters dialog box appears. Set One file per shift state.  This will create a screen image file for each layer that we created.  This is the preferred choice.  Then click OK.  We will use the exported file in the package that we will be generating later.

 

​​​​​​​9. Now save our work by clicking the Save icon.