MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note How to create a custom virtual keyboard This technical note describes how to create a custom virtual keyboard and how to add it to the MultiQ Media monitor/player. The reader is presumed to have prior knowledge of software development and it is desired to also have knowledge of Linux and Linux systems in general. This guide applies to products with firmware version 2.10.X.

Important!

MultiQ Products AB provides no guarantee that any of the examples shown in this document will work for any particular application or that the descriptions will be valid for future firmware or product versions. MultiQ Products AB cannot and will not be held liable for any damage inflicted to any product as a result of the examples or instructions mentioned in this document. MultiQ Products AB reserves the right to make changes to this document and to product specifications without prior notice.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 2

Table of Contents

1 Revision history .................................................................................................................. 3

2 Creating custom keyboards ............................................................................................ 4

3 To add a keyboard browser plug-in to a media player ............................................. 7

4 To make a customized keyboard ................................................................................ 11

4.1 To edit the image files ...................................................................................................................... 12

4.2 How to easily adapt to a hue of colour used by a specific brand .......................................... 13

4.3 How to find the correct value of hue? .......................................................................................... 14

4.4 Starting all over with the images used as keys .......................................................................... 16

4.4.1 Compressing the files before use .................................................................................. 17

4.5 How to make an xpi-file? ................................................................................................................. 17

4.6 Making a keyboard entirely of your own ....................................................................................... 25

4.6.1 Changing the layout and size of the keys .................................................................... 25

4.6.2 Introducing more functionality ......................................................................................... 27

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 3

1 Revision history This version of the User Requirements Specification becomes effective on the date of final approval. If changes are made that affect the document’s content or approach, a revised, complete document must be issued for re-approval by the roles of the approvers of the original document or their designated representatives. A description of those changes with revision number will be noted in the revision log below:

Version Date Comments

1.00 2009-10-28 Initial version

1.10 2010-08-05 Updated for release of firmware version 2.10 for media monitors and media players.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 4

2 Creating custom keyboards There are two pre-made virtual keyboards available one grey and one in black. These keyboard sets are contained in the files StdGrey.xpi and StdBlack.xpi. The virtual keyboards are browser plug-ins. Each set of keyboards includes six languages, UK English, French, German, Norwegian, Danish and Swedish.

Figure 1. There are two sets of keyboards available, a grey standard keyboard and a black standard keyboard. To upload the keyboards to the system and to assign them to the media players The keyboards are defined in an xpi-file. The xpi-file contains keyboards for all language having a specific design. You will find the xpi-files for the standard keyboards in the “Virtual Keyboard Technote” folder (to be downloaded from the MultiQ website).

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 5

Figure 2. In the Browser Library, click Add on Browser Extensions. Then browse to the desired browser plug-in file, here StdGrey.xpi.

Figure 3. Select the desired plug-in file and click “Open”.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 6

Figure 4. Finally, click “Upload” to upload the xpi-file to the content management server (CMS).

Figure 5. The browser plug-in file is now shown in the Browser Library.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 7

3 To add a keyboard browser plug-in to a media player Select the “Units and Group Playlists” menu. Then click on the media player to which you want to add to browser plug-in.

Figure 6. In the “Units and Group Playlists” menu, click the media player where you want to install the keyboard browser plug-in.

Figure 7. Click the “Settings” tab of the media player selected to get into the settings menu.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 8

Figure 8. In the “Settings” tab, select language and click “Add” to add the browser extensions to the media player.

Figure 9. Tick the box for the desired browser plug-in. After “Save” has been clicked, the media player will reboot with the browser plug-in installed. Now the keyboard should appear as soon as a text box on a web page is touched.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 9

Figure 10. The keyboard should appear as soon as a text box is touched. The default keyboard is UK_English. If another keyboard than UK_English is desired, the language settings for the media player should be changed. This is also done in the “Settings” tab for the media player.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 10

Figure 11. Language settings are made in the “Settings” menu of the media player.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 11

4 To make a customized keyboard There are several ways to customize the virtual keyboards. Each key is a separate image. These images may be easily replaced. However it is necessary to keep the file names and to use the PNG-file format if the code used in the keyboard is to be unchanged.

Figure 12. The naming rules and file format to be able to use the standard code when editing or replacing the image files describing the keys. Each key is at least 64x64 pixels in order to make the touch area large enough for easy operation. It is not advisable to use smaller keys than this. Also the size is adapted to get the keyboard to fit within 1024 pixels when using an SXGA (1280x1024 pixel) monitor. The standard keyboard layout is arranged to be as close to real world keyboard as possible. The layout is adapted to the common standards for keyboards in each county (language area) as possible to assure that users feel at home when handling the keyboard. An extra, easy to access, @-key has been added for easy entry of e-mail addresses.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 12

Figure 13. Keyboard overview with number of key images used.

4.1 To edit the image files

The easiest way to make customized keyboards is to redesign the images kept in the “Images” folder for each language respectively. In the “Virtual Keyboard Tech Note” folder you will also find folders containing the keys that are used in the standard grey as well as in the standard black keyboards.

Figure 14. In the “Virtual Keyboard Tech Note” folder you will find uncompressed as well as compressed versions of the keys. For each of the standard keyboards there are two folders, one containing the uncompressed image files and the other containing compressed files. If you wish to edit existing standard images, make a copy of one of the folders containing uncompressed files. The PNG-files may be edited quite easily in Adobe Fireworks since the uncompressed files contain layers that keep all image elements apart for individual editing. Using the editing features in Adobe Fireworks it is easy to change colours to the various image elements. It is also possible to change fonts and font size. If you wish to delete some of the special characters this can be done but remember that the functionality of the key remains if the code for the keyboard remains unchanged.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 13

Figure 15. The uncompressed files are easy to edit in Adobe Fireworks since they are separated in layers. At is advisable to try to use the batch handling features of Adobe Fireworks when editing the image files due to the large number of files.

4.2 How to easily adapt to a hue of colour used by a specific brand

In the “Batch Process” menu (Found in the File menu) of Adobe Fireworks there is a “Convert to Grayscale” command that may be useful to adapt the hue in various image elements to the hue used in branding for a particular product. By editing the “Convert to Grayscale.jsf” -file according to figure 16, interesting effects may be achieved in a simple manner. However remember resetting the “hue” parameter before using the “Convert to Grayscale” script for its original purpose. The script file is to be found following the path (or similar depending on your installation and program version): Program Files/Adobe/Adobe Fireworks CS4/Configuration/Commands/Creative/Convert to Grayscale.jsf You can use any text editor to edit the file.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 14

Figure 16. How to edit the “hue” parameter or the “Convert to Grayscale” java script to fit the hue of a specific brand.

4.3 How to find the correct value of hue?

There is an easy way to find the hue of a colour. Cut and paste a portion of a picture containing the hue of the brand into Adobe Photoshop. Then use the “Eyedropper” tool to decide the hue as shown in figure 17.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 15

Figure 17. To find the hue in a colour used for a brand you can use the “Eyedropper tool” in Adobe Photoshop.

Figure 18a. Parts of the standard gray keyset after being batch converted using hue=4.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 16

Of course you are free to experiment with the other batch filters or combinations of filters that are available in Adobe Fireworks. For further documentation on the batch process feature please use the Adobe Fireworks help menu.

Figure 18b. Customized keyboard with hue=4 created in minutes from the standard grey keyboard using the Adobe Fireworks “Batch Process” feature.

4.4 Starting all over with the images used as keys

If the design of the keyboard is to be changed more dramatically, it is possible to make completely new images describing the keys. However to avoid any change of code you should stick to the same size of images (height 64 pixels) and width according to figure 19. Also the layout, (placement of keys), have to be the same. The names of the keys have to be exactly the same just as the file format (PNG) to have the existing code to work.

Figure 19. The physical layout of the standard keyboards on a pixel level.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 17

4.4.1 Compressing the files before use

The uncompressed image files are quite large and due to their number they need to be compressed before being used in the keyboards (added to the xpi-file). The original files are about 65 kB while the compressed files are recommended to be about 4 kB. The compressed files also need to be in the PNG format. A batch compression program such as the Linux “Convert” is recommended for compressing the files. Always keep a copy of the uncompressed files for future use. Remember that the image files need to be compressed one-by-one. It is not possible to compress the entire folder containing them.

4.5 How to make an xpi-file?

The “Virtual keyboard make standard” folder contains the files and folders needed to make the xpi-file that defines a set of keyboards. To be able to make your own keyboards you can follow these steps that show how the xpi-file used for the black keyboard was made. Start by making a copy of the entire “Virtual keyboard make” folder, you may need the original folder for future projects. The image files describing the keys are stored in the “chrome/locale” folder according to figure 20.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 18

Figure 20. Learn how to navigate the “Virtual keyboard make” folder (there are about 220 files in each of the “Images” folders. Before making the xpi-file we need to select the right background colour for the keyboard. The background panel is visible when using the keyboard on a screen that is wider than 1024 pixels.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 19

Figure 21. The background colour of the keyboard is visible when it is presented on a screen that is wider than 1024 pixels. The background colour is changed by editing the chrome/content/gtoolbar.css file.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 20

Figure 22. The background colour is changed by editing the first occurring “background-color” parameter in the chrome/content/gtoolbar.css file. When the images are edited, compressed and put into the Image folders of the “locale” folder inside the “chrome” folder for each language respectively, you can perform the following procedure: Right click inside the “Virtual keyboard make” folder to get into the right click menu. Here you will find the “Make new compressed” folder. Create a compressed folder named “chrome.zip”.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 21

Figure 23. Start by creating a compressed folder inside the copy of the “Virtual keyboard make standard” folder.

Right click inside the copy of the “Virtual keyboard make” folder to “create new compressed (zipped) folder” command.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 22

Figure 24. In the “copy of the “Virtual keyboard make standard” folder, start by making a new zipped folder named “chrome.zip”.

Figure 25. Next, drag the “chrome” folder into the “chrome.zip” folder.

Figure 26. Then change the file extension of the zipped “chrome” folder from “zip” to “jar”.

Drag the ”chrome” folder into the ”chrome.zip” folder

Name the folder “chrome.zip”

Change the file extension of the zipped file from “zip” to “jar”

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 23

Figure 27. Move the “chrome.jar” file inside the “jar-install” folder.

Figure 28. Double click to get inside the “jar-install” folder.

Move the “chrome.jar” file into the “jar-install” folder

Double click to get inside the “jar-install” folder

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 24

Figure 29. Drag the “chrome.jar, “chrome.manifest” and the “install.rdf” files into the “StdGrey.zip” folder.

Figure 30. The “StdGrey.xpi” file is finalized by changing the file extension from “zip” to “xpi”. The StdGrey.xpi file can now be uploaded to the content management server (CMS) and assigned to a media player as shown on pages 3-7. Of course you can create as many designs and xpi-files as you wish and have them all stored in the CMS. However you can’t assign more than one xpi-file to a media player simultaneously.

1. Inside the “jar-install” folder, create another zip folder named “StdGrey”.zip (or any other suitable name)

2. Drag the “chrome.jar”, “chrome.manifest” and the “install.rdf” files into the “StdGrey.zip” folder

Finally change the file extension from “zip” to “xpi”. You now have the “StdGrey.xpi”file for the grey keyboard

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 25

4.6 Making a keyboard entirely of your own

In the previous sections you have learned how to edit your own keyboard based on the keyboard layout and keyboard features that are available in the MultiQ standard keyboards. You can alter the keys in almost any way you want. However you must use the size of keys and the layout of keys defined by the standard keyboards. On the other hand you do not have to mind about the code. It’s already there and the language adaptations are already made. However for those interested in moving even further in adapting the virtual keyboards to their special needs, here is a brief description of the code used in the files defining the keyboards. There are two different levels at which you can choose to work.

4.6.1 Changing the layout and size of the keys

In the “/chrome/skin/VKeyboard.css” file the size and behaviour regarding “MouseOver” etc are described. A change in this file will have global impact on the keyboard.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 26

Figure 31. In the chrome/skin/VKeyboard.css file the sizes and behaviour of buttons are to be found. In the “/chrome/content/VKeyboardOverlay.xul” file the locations for the images describing the keys are defined along with the functionality of each key. A change in this file will have global effect on the keyboard.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 27

Figure 32. In the “/chrome/content/VKeyBoardOverlay.xul” file the location and functionality of each key is defined. By editing the files described above it is possible to change the size, behaviour and location of the keys. 4.6.2 Introducing more functionality

To introduce more functionalities you need to edit the “/chrome/locale/<language>/keyboard.dtd” file. This file is used by the xul-file described in figure 32.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 28

Figure 33. The “/chrome/locale/<language>/vkeyboard.dtd” defines the entities that use the java scripts defined by the “/chrome/locale/<language>/VKeyboard.js” file.

MultiQ Products AB provides NO support for application development of any kind. The information here is provided "as is", and there is no guarantee that any of the examples shown will work in your particular application.

Technical Note – How to create a custom virtual keyboard 29

Figure 34. Example of java script code in the /chrome/locale/<language>/VKeyboard.js file.