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
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 Technical Note How to create a custom virtual keyboard 2
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. Technical Note How to create a custom virtual keyboard 3
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). Technical Note How to create a custom virtual keyboard 4
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. Technical Note How to create a custom virtual keyboard 5
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. Technical Note How to create a custom virtual keyboard 6
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. Technical Note How to create a custom virtual keyboard 7
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. Technical Note How to create a custom virtual keyboard 8
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. Technical Note How to create a custom virtual keyboard 9
Figure 11. Language settings are made in the Settings menu of the media player. Technical Note How to create a custom virtual keyboard 10
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. Technical Note How to create a custom virtual keyboard 11
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. Technical Note How to create a custom virtual keyboard 12
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 Grayscale.jsf Fireworks CS4/Configuration/Commands/Creative/Convert to You can use any text editor to edit the file. Technical Note How to create a custom virtual keyboard 13
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. Technical Note How to create a custom virtual keyboard 14
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. Technical Note How to create a custom virtual keyboard 15
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. Technical Note How to create a custom virtual keyboard 16
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 xpifile 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. Technical Note How to create a custom virtual keyboard 17
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. Technical Note How to create a custom virtual keyboard 18
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. Technical Note How to create a custom virtual keyboard 19
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. Technical Note How to create a custom virtual keyboard 20
Right click inside the copy of the Virtual keyboard make folder to create new compressed (zipped) folder command. Figure 23. Start by creating a compressed folder inside the copy of the Virtual keyboard make standard folder. Technical Note How to create a custom virtual keyboard 21
Name the folder chrome.zip Figure 24. In the copy of the Virtual keyboard make standard folder, start by making a new zipped folder named chrome.zip. Drag the chrome folder into the chrome.zip folder Figure 25. Next, drag the chrome folder into the chrome.zip folder. Change the file extension of the zipped file from zip to jar Figure 26. Then change the file extension of the zipped chrome folder from zip to jar. Technical Note How to create a custom virtual keyboard 22
Move the chrome.jar file into the jar-install folder Figure 27. Move the chrome.jar file inside the jar-install folder. Double click to get inside the jar-install folder Figure 28. Double click to get inside the jar-install folder. Technical Note How to create a custom virtual keyboard 23
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 Figure 29. 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 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. Technical Note How to create a custom virtual keyboard 24
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. Technical Note How to create a custom virtual keyboard 25
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. Technical Note How to create a custom virtual keyboard 26
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. Technical Note How to create a custom virtual keyboard 27
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. Technical Note How to create a custom virtual keyboard 28
Figure 34. Example of java script code in the /chrome/locale/<language>/vkeyboard.js file. Technical Note How to create a custom virtual keyboard 29