InKey Software

Dynamic Layout Charts

If a keyboard makes extensive use of user-configurable keystroke options, a layout chart provided as a PDF will not reflect this configuration. Fortunately, there is a mechanism to automatically generate a layout chart that includes the keystrokes specified in the user settings file.

For example, the Hindi Winscript Keying Chart contains a vowels section like this:

ऄ ‡	अ a	इ i	उ u	ऋ R	ऍ ]	ए Y	ऑ }	ओ V
	आ A / aa	ई I / ii	ऊ U / uu	ऌ \|	ऎ ‡	ऐ E	ऒ ‡	औ O

The particular keys that appear in the chart depend on the keystroke options in the user's keyboard configuration file. If the user hovers the mouse over a key label, the name of the entry in the configuration file will pop up.

The procedure to create a dynamic layout chart are as follows:

Create an HTML file in the keyboard folder. Ensure that the name ends with ".tinker.html". e.g. "deva-Winscript.tinker.html"
In the keyboard settings file (e.g. HindiWinscript.kbd.ini), in the [Keyboard] section, specify this filename as the LayoutHelp entry. e.g. LayoutHelp=deva-Winscript.tinker.html
In the HTML file, define keystroke and nokeystroke styles that will be applied to keystrokes. (The nokeystroke style is applied to keys for which the user configuration settings do no specify a value.) For example:

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>〔LayoutName〕 Keying Chart</title>
 <style>
   keystroke {border: 1pt solid #555555; border-radius: 4px; padding: 0pt; 
              font-family: Courier New; font-weight: bold; background-color: #555555; color: white}
   nokeystroke {border: 1pt solid #aaaaaa; border-radius: 4px; padding: 0pt; 
              font-family: Courier New; font-weight: bold; background-color: #aaaaaa; color: #444444}
   td {text-align: center;}
   charlabel {font-family: Arial Unicode MS; font-size: 16pt}
   body { font-family:Arial Unicode MS}
 </style>
</head>

Use your keystroke names (as defined in the .tinker file, and used in the .kbd.ini file) in hex brackets, just as you do in the .tinker file, to have the value substituted. For example, the HTML for the above table was:

<table border="2" cellpadding="4" cellspacing="2">
   <tbody>
      <tr>
         <td><charlabel>ऄ</charlabel><br>〔SHORT_A〕</td>
         <td><charlabel>अ</charlabel><br>〔A〕</td>
         <td><charlabel>इ</charlabel><br>〔I〕</td>
         <td><charlabel>उ</charlabel><br>〔U〕</td>
         <td><charlabel>ऋ</charlabel><br>〔VOC_R〕</td>
         <td><charlabel>ऍ</charlabel><br>〔CANDRA_E〕</td>
         <td><charlabel>ए</charlabel><br>〔E〕</td>
         <td><charlabel>ऑ</charlabel><br>〔CANDRA_O〕</td>
         <td><charlabel>ओ</charlabel><br>〔O〕</td>
      </tr>
      <tr>
      <td>
      </td>
         <td><charlabel>आ</charlabel><br>〔AA〕 / 〔A〕〔A〕</td>
         <td><charlabel>ई</charlabel><br>〔II〕 / 〔I〕〔I〕</td>
         <td><charlabel>ऊ</charlabel><br>〔UU〕 / 〔U〕〔U〕</td>
         <td><charlabel>ऌ</charlabel><br>〔VOC_L〕</td>
         <td><charlabel>ऎ</charlabel><br>〔SHORT_E〕</td>
         <td><charlabel>ऐ</charlabel><br>〔AI〕</td>
         <td><charlabel>ऒ</charlabel><br>〔SHORT_O〕</td>
         <td><charlabel>औ</charlabel><br>〔AU〕</td>
      </tr>
   </tbody>
</table>

To refer to the name of the layout, as specified in the configuration file, use 〔LayoutName〕.
To refer to the name of the configuration file itself, use 〔IniFileName〕.