Store the keyboard layout in its own HTML file.

git-svn-id: https://shellinabox.googlecode.com/svn/trunk@225 0da03de8-d603-11dd-86c2-0f8696b7b6f9

Makefile.am

@@ -32,6 +32,7 @@ EXTRA_DIST           = INSTALL.Debian                                         \
                        demo/demo.jspp                                         \
                        demo/demo.xml                                          \
                        demo/enabled.gif                                       \
+                       demo/keyboard.html                                     \
                        demo/keyboard.png                                      \
                        demo/styles.css                                        \
                        demo/print-styles.css                                  \
@@ -153,6 +154,7 @@ ${top_srcdir}/demo/demo.js: ${top_srcdir}/demo/beep.wav                       \
                             ${top_srcdir}/demo/demo.jspp                      \
                             ${top_srcdir}/demo/enabled.gif                    \
                             ${top_srcdir}/demo/favicon.ico                    \
+                            ${top_srcdir}/demo/keyboard.html                  \
                             ${top_srcdir}/demo/keyboard.png                   \
                             ${top_srcdir}/demo/styles.css                     \
                             ${top_srcdir}/demo/print-styles.css               \
@@ -174,6 +176,10 @@ ${top_srcdir}/demo/favicon.ico: ${top_srcdir}/shellinabox/favicon.ico
 	@rm -f "$@"
 	ln "$?" "$@"
 
+${top_srcdir}/demo/keyboard.html: ${top_srcdir}/shellinabox/keyboard-layout.html
+	@rm -f "$@"
+	ln "$?" "$@"
+
 ${top_srcdir}/demo/keyboard.png: ${top_srcdir}/shellinabox/keyboard.png
 	@rm -f "$@"
 	ln "$?" "$@"
@@ -292,20 +298,15 @@ clean-local:
 shellinabox/shell_in_a_box.o: ${top_srcdir}/shellinabox/shell_in_a_box.js     \
 		${top_srcdir}/config.h
 
-${top_srcdir}/shellinabox/vt100.js: ${top_srcdir}/shellinabox/vt100.jspp      \
-		${top_srcdir}/shellinabox/keyboard-layout.html
+${top_srcdir}/shellinabox/vt100.js: ${top_srcdir}/shellinabox/vt100.jspp
 
 .jspp.js:
 	@echo preprocess "$<" "$@"
-	@kbd=`while read i; do                                                \
-	        printf '%s' "\`echo "$$i" | sed 's/&/\\\\\\&/g'\`";           \
-	      done <${top_srcdir}/shellinabox/keyboard-layout.html`;          \
 	sed -e "`sed -e 's/^#define *\([^ ]*\) *\(.*\)/\/^[^#]\/s\/\1\/\2 \\\\\/* \1 *\\\\\/\/g/' \
 	             -e t                                                     \
 	             -e d "$<"`"                                              \
 	     -e "s/^#/\/\/ #/"                                                \
 	     -e "s/VERSION/\"@VERSION@ (revision @VCS_REVISION@)\"/g"         \
-	     -e "s%KEYBOARD%'$${kbd}'%"                                       \
 	     "$<" >"$@"
 
 .js.o:

Makefile.in

@@ -290,6 +290,7 @@ EXTRA_DIST = INSTALL.Debian                                         \
                        demo/demo.jspp                                         \
                        demo/demo.xml                                          \
                        demo/enabled.gif                                       \
+                       demo/keyboard.html                                     \
                        demo/keyboard.png                                      \
                        demo/styles.css                                        \
                        demo/print-styles.css                                  \
@@ -1175,6 +1176,7 @@ ${top_srcdir}/demo/demo.js: ${top_srcdir}/demo/beep.wav                       \
                             ${top_srcdir}/demo/demo.jspp                      \
                             ${top_srcdir}/demo/enabled.gif                    \
                             ${top_srcdir}/demo/favicon.ico                    \
+                            ${top_srcdir}/demo/keyboard.html                  \
                             ${top_srcdir}/demo/keyboard.png                   \
                             ${top_srcdir}/demo/styles.css                     \
                             ${top_srcdir}/demo/print-styles.css               \
@@ -1196,6 +1198,10 @@ ${top_srcdir}/demo/favicon.ico: ${top_srcdir}/shellinabox/favicon.ico
 	@rm -f "$@"
 	ln "$?" "$@"
 
+${top_srcdir}/demo/keyboard.html: ${top_srcdir}/shellinabox/keyboard-layout.html
+	@rm -f "$@"
+	ln "$?" "$@"
+
 ${top_srcdir}/demo/keyboard.png: ${top_srcdir}/shellinabox/keyboard.png
 	@rm -f "$@"
 	ln "$?" "$@"
@@ -1312,20 +1318,15 @@ clean-local:
 shellinabox/shell_in_a_box.o: ${top_srcdir}/shellinabox/shell_in_a_box.js     \
 		${top_srcdir}/config.h
 
-${top_srcdir}/shellinabox/vt100.js: ${top_srcdir}/shellinabox/vt100.jspp      \
-		${top_srcdir}/shellinabox/keyboard-layout.html
+${top_srcdir}/shellinabox/vt100.js: ${top_srcdir}/shellinabox/vt100.jspp
 
 .jspp.js:
 	@echo preprocess "$<" "$@"
-	@kbd=`while read i; do                                                \
-	        printf '%s' "\`echo "$$i" | sed 's/&/\\\\\\&/g'\`";           \
-	      done <${top_srcdir}/shellinabox/keyboard-layout.html`;          \
 	sed -e "`sed -e 's/^#define *\([^ ]*\) *\(.*\)/\/^[^#]\/s\/\1\/\2 \\\\\/* \1 *\\\\\/\/g/' \
 	             -e t                                                     \
 	             -e d "$<"`"                                              \
 	     -e "s/^#/\/\/ #/"                                                \
 	     -e "s/VERSION/\"@VERSION@ (revision @VCS_REVISION@)\"/g"         \
-	     -e "s%KEYBOARD%'$${kbd}'%"                                       \
 	     "$<" >"$@"
 
 .js.o:

config.h

@@ -153,7 +153,7 @@
 #define STDC_HEADERS 1
 
 /* Most recent revision number in the version control system */
-#define VCS_REVISION "223"
+#define VCS_REVISION "225"
 
 /* Version number of package */
 #define VERSION "2.10"

configure

@@ -2328,7 +2328,7 @@ ac_link='$CC -o conftest$ac_exeext $CFLAGS $CPPFLAGS $LDFLAGS conftest.$ac_ext $
 ac_compiler_gnu=$ac_cv_c_compiler_gnu
 
 
-VCS_REVISION=223
+VCS_REVISION=225
 
 
 cat >>confdefs.h <<_ACEOF

configure.ac

@@ -2,7 +2,7 @@ AC_PREREQ(2.57)
 
 dnl This is the one location where the authoritative version number is stored
 AC_INIT(shellinabox, 2.10, markus@shellinabox.com)
-VCS_REVISION=223
+VCS_REVISION=225
 AC_SUBST(VCS_REVISION)
 AC_DEFINE_UNQUOTED(VCS_REVISION, "${VCS_REVISION}",
                    [Most recent revision number in the version control system])

demo/keyboard.html

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">
+<head>
+</head>
+<body><pre class="box"><div
+  ><i id="27">Esc</i><i id="112">F1</i><i id="113">F2</i><i id="114">F3</i
+  ><i id="115">F4</i><i id="116">F5</i><i id="117">F6</i><i id="118">F7</i
+  ><i id="119">F8</i><i id="120">F9</i><i id="121">F10</i><i id="122">F11</i
+  ><i id="123">F12</i><br
+  /><b><span class="unshifted">`</span><span class="shifted">~</span></b
+    ><b><span class="unshifted">1</span><span class="shifted">!</span></b
+    ><b><span class="unshifted">2</span><span class="shifted">@</span></b
+    ><b><span class="unshifted">3</span><span class="shifted">#</span></b
+    ><b><span class="unshifted">4</span><span class="shifted">&#36;</span></b
+    ><b><span class="unshifted">5</span><span class="shifted">&#37;</span></b
+    ><b><span class="unshifted">6</span><span class="shifted">^</span></b
+    ><b><span class="unshifted">7</span><span class="shifted">&amp;</span></b
+    ><b><span class="unshifted">8</span><span class="shifted">*</span></b
+    ><b><span class="unshifted">9</span><span class="shifted">(</span></b
+    ><b><span class="unshifted">0</span><span class="shifted">)</span></b
+    ><b><span class="unshifted">-</span><span class="shifted">_</span></b
+    ><b><span class="unshifted">=</span><span class="shifted">+</span></b
+    ><i id="8">&nbsp;&larr;&nbsp;</i
+    ><br
+  /><i id="9">Tab</i
+    ><b>Q</b><b>W</b><b>E</b><b>R</b><b>T</b><b>Y</b><b>U</b><b>I</b><b>O</b
+    ><b>P</b
+    ><b><span class="unshifted">[</span><span class="shifted">{</span></b
+    ><b><span class="unshifted">]</span><span class="shifted">}</span></b
+    ><b><span class="unshifted">&#92;</span><span class="shifted">|</span></b
+    ><br
+  /><u>Tab&nbsp;&nbsp;</u
+    ><b>A</b><b>S</b><b>D</b><b>F</b><b>G</b><b>H</b><b>J</b><b>K</b><b>L</b
+    ><b><span class="unshifted">;</span><span class="shifted">:</span></b
+    ><b><span class="unshifted">&#39;</span><span class="shifted">"</span></b
+    ><i id="13">Enter</i
+    ><br
+  /><u>&nbsp;&nbsp;</u
+    ><i id="16">Shift</i
+    ><b>Z</b><b>X</b><b>C</b><b>V</b><b>B</b><b>N</b><b>M</b
+    ><b><span class="unshifted">,</span><span class="shifted">&lt;</span></b
+    ><b><span class="unshifted">.</span><span class="shifted">&gt;</span></b
+    ><b><span class="unshifted">/</span><span class="shifted">?</span></b
+    ><i id="16">Shift</i
+    ><br
+  /><u>XXX</u
+    ><i id="17">Ctrl</i
+    ><i id="18">Alt</i
+    ><i style="width: 25ex">&nbsp</i
+  ></div
+  >&nbsp;&nbsp;&nbsp;<div
+    ><i id="45">Ins</i><i id="46">Del</i><i id="36">Home</i><i id="35">End</i
+    ><br
+    /><u>&nbsp;</u><br
+    /><u>&nbsp;</u><br
+    /><u>Ins</u><s>&nbsp;</s><b id="38">&uarr;</b><s>&nbsp;</s><u>&nbsp;</u
+      ><b id="33">&uArr;</b><br
+    /><u>Ins</u><b id="37">&larr;</b><b id="40">&darr;</b
+      ><b id="39">&rarr;</b><u>&nbsp;</u><b id="34">&dArr;</b
+  ></div
+></pre></body></html>

demo/vt100.js

@@ -716,15 +716,20 @@ VT100.prototype.initializeKeyBindings = function(elem) {
         }
       } else {
         var child = elem.firstChild;
-        if (child.nodeName == "#text") {
-          // If the key only has a text node as a child, then it is a letter.
-          // Automatically compute the lower and upper case version of the key.
-          this.addKeyBinding(elem, this.getTextContent(child).toLowerCase());
-        } else {
-          // If the key has two children, they are the lower and upper case
-          // character code, respectively.
-          this.addKeyBinding(elem, this.getTextContent(child), undefined,
-                             this.getTextContent(child.nextSibling));
+        if (child) {
+          if (child.nodeName == "#text") {
+            // If the key only has a text node as a child, then it is a letter.
+            // Automatically compute the lower and upper case version of the
+            // key.
+            var text = this.getTextContent(child) ||
+                       this.getTextContent(elem);
+            this.addKeyBinding(elem, text.toLowerCase());
+          } else if (child.nextSibling) {
+            // If the key has two children, they are the lower and upper case
+            // character code, respectively.
+            this.addKeyBinding(elem, this.getTextContent(child), undefined,
+                               this.getTextContent(child.nextSibling));
+          }
         }
       }
     }
@@ -735,14 +740,13 @@ VT100.prototype.initializeKeyBindings = function(elem) {
   }
 };
 
-VT100.prototype.initializeKeyboard = function() {
+VT100.prototype.initializeKeyboardButton = function() {
   // Configure mouse event handlers for button that displays/hides keyboard
-  var box                               = this.keyboard.firstChild;
-  this.hideSoftKeyboard();
   this.addListener(this.keyboardImage, 'click',
     function(vt100) { return function(e) {
       if (vt100.keyboard.style.display != '') {
         if (vt100.reconnectBtn.style.visibility != '') {
+          vt100.initializeKeyboard();
           vt100.showSoftKeyboard();
         }
       } else {
@@ -755,6 +759,18 @@ VT100.prototype.initializeKeyboard = function() {
   if (this.softKeyboard) {
     this.keyboardImage.style.visibility = 'visible';
   }
+};
+
+VT100.prototype.initializeKeyboard = function() {
+  // Only need to initialize the keyboard the very first time. When doing so,
+  // copy the keyboard layout from the iframe.
+  if (this.keyboard.firstChild) {
+    return;
+  }
+  this.keyboard.innerHTML               =
+                                    this.layout.contentDocument.body.innerHTML;
+  var box                               = this.keyboard.firstChild;
+  this.hideSoftKeyboard();
 
   // Configure mouse event handlers for on-screen keyboard
   this.addListener(this.keyboard, 'click',
@@ -808,6 +824,7 @@ VT100.prototype.initializeElements = function(container) {
       !this.getChildById(this.container, 'keyboard')    ||
       !this.getChildById(this.container, 'kbd_button')  ||
       !this.getChildById(this.container, 'kbd_img')     ||
+      !this.getChildById(this.container, 'layout')      ||
       !this.getChildById(this.container, 'scrollable')  ||
       !this.getChildById(this.container, 'console')     ||
       !this.getChildById(this.container, 'alt_console') ||
@@ -851,7 +868,6 @@ VT100.prototype.initializeElements = function(container) {
                        '</div>' +
                        '<div id="menu"></div>' +
                        '<div id="keyboard" unselectable="on">' +
-                         '<pre class="box"><div><i id="27">Esc</i><i id="112">F1</i><i id="113">F2</i><i id="114">F3</i><i id="115">F4</i><i id="116">F5</i><i id="117">F6</i><i id="118">F7</i><i id="119">F8</i><i id="120">F9</i><i id="121">F10</i><i id="122">F11</i><i id="123">F12</i><br /><b><span class="unshifted">`</span><span class="shifted">~</span></b><b><span class="unshifted">1</span><span class="shifted">!</span></b><b><span class="unshifted">2</span><span class="shifted">@</span></b><b><span class="unshifted">3</span><span class="shifted">#</span></b><b><span class="unshifted">4</span><span class="shifted">&#36;</span></b><b><span class="unshifted">5</span><span class="shifted">&#37;</span></b><b><span class="unshifted">6</span><span class="shifted">^</span></b><b><span class="unshifted">7</span><span class="shifted">&amp;</span></b><b><span class="unshifted">8</span><span class="shifted">*</span></b><b><span class="unshifted">9</span><span class="shifted">(</span></b><b><span class="unshifted">0</span><span class="shifted">)</span></b><b><span class="unshifted">-</span><span class="shifted">_</span></b><b><span class="unshifted">=</span><span class="shifted">+</span></b><i id="8">&nbsp;&larr;&nbsp;</i><br /><i id="9">Tab</i><b>Q</b><b>W</b><b>E</b><b>R</b><b>T</b><b>Y</b><b>U</b><b>I</b><b>O</b><b>P</b><b><span class="unshifted">[</span><span class="shifted">{</span></b><b><span class="unshifted">]</span><span class="shifted">}</span></b><b><span class="unshifted">&#92;</span><span class="shifted">|</span></b><br /><u>Tab&nbsp;&nbsp;</u><b>A</b><b>S</b><b>D</b><b>F</b><b>G</b><b>H</b><b>J</b><b>K</b><b>L</b><b><span class="unshifted">;</span><span class="shifted">:</span></b><b><span class="unshifted">&#39;</span><span class="shifted">"</span></b><i id="13">Enter</i><br /><u>&nbsp;&nbsp;</u><i id="16">Shift</i><b>Z</b><b>X</b><b>C</b><b>V</b><b>B</b><b>N</b><b>M</b><b><span class="unshifted">,</span><span class="shifted">&lt;</span></b><b><span class="unshifted">.</span><span class="shifted">&gt;</span></b><b><span class="unshifted">/</span><span class="shifted">?</span></b><i id="16">Shift</i><br /><u>XXX</u><i id="17">Ctrl</i><i id="18">Alt</i><i style="width: 25ex">&nbsp</i></div>&nbsp;&nbsp;&nbsp;<div><i id="45">Ins</i><i id="46">Del</i><i id="36">Home</i><i id="35">End</i><br /><u>&nbsp;</u><br /><u>&nbsp;</u><br /><u>Ins</u><s>&nbsp;</s><b id="38">&uarr;</b><s>&nbsp;</s><u>&nbsp;</u><b id="33">&uArr;</b><br /><u>Ins</u><b id="37">&larr;</b><b id="40">&darr;</b><b id="39">&rarr;</b><u>&nbsp;</u><b id="34">&dArr;</b></div></pre>' +
                        '</div>' +
                        '<div id="scrollable">' +
                          '<table id="kbd_button">' +
@@ -876,6 +892,7 @@ VT100.prototype.initializeElements = function(container) {
                          (typeof suppressAllAudio != 'undefined' &&
                           suppressAllAudio ? "" :
                          embed + '<bgsound id="beep_bgsound" loop=1 />') +
+                          '<iframe id="layout" src="keyboard.html" />' +
                         '</div>';
   }
 
@@ -901,6 +918,7 @@ VT100.prototype.initializeElements = function(container) {
   this.menu                    = this.getChildById(this.container, 'menu');
   this.keyboard                = this.getChildById(this.container, 'keyboard');
   this.keyboardImage           = this.getChildById(this.container, 'kbd_img');
+  this.layout                  = this.getChildById(this.container, 'layout');
   this.scrollable              = this.getChildById(this.container,
                                                                  'scrollable');
   this.lineheight              = this.getChildById(this.container,
@@ -978,12 +996,12 @@ VT100.prototype.initializeElements = function(container) {
     try { document.body.oncontextmenu = function() {return false;};} catch(e){}
   }
 
+  // Set up onscreen soft keyboard
+  this.initializeKeyboardButton();
+
   // Hide context menu
   this.hideContextMenu();
 
-  // Set up onscreen soft keyboard
-  this.initializeKeyboard();
-
   // Add listener to reconnect button
   this.addListener(this.reconnectBtn.firstChild, 'click',
                    function(vt100) {
@@ -2384,7 +2402,7 @@ VT100.prototype.toggleCursorBlinking = function() {
 };
 
 VT100.prototype.about = function() {
-  alert("VT100 Terminal Emulator " + "2.10 (revision 223)" +
+  alert("VT100 Terminal Emulator " + "2.10 (revision 225)" +
         "\nCopyright 2008-2010 by Markus Gutschke\n" +
         "For more information check http://shellinabox.com");
 };

shellinabox/keyboard-layout.html

@@ -1,59 +1,62 @@
-<pre class="box">
-  <div>
-    <i id="27">Esc</i><i id="112">F1</i><i id="113">F2</i><i id="114">F3</i>
-     <i id="115">F4</i><i id="116">F5</i><i id="117">F6</i><i id="118">F7</i>
-     <i id="119">F8</i><i id="120">F9</i><i id="121">F10</i><i id="122">F11</i>
-     <i id="123">F12</i><br />
-    <b><span class="unshifted">`</span><span class="shifted">~</span></b>
-      <b><span class="unshifted">1</span><span class="shifted">!</span></b>
-      <b><span class="unshifted">2</span><span class="shifted">@</span></b>
-      <b><span class="unshifted">3</span><span class="shifted">#</span></b>
-      <b><span class="unshifted">4</span><span class="shifted">&#36;</span></b>
-      <b><span class="unshifted">5</span><span class="shifted">&#37;</span></b>
-      <b><span class="unshifted">6</span><span class="shifted">^</span></b>
-      <b><span class="unshifted">7</span><span class="shifted">&amp;</span></b>
-      <b><span class="unshifted">8</span><span class="shifted">*</span></b>
-      <b><span class="unshifted">9</span><span class="shifted">(</span></b>
-      <b><span class="unshifted">0</span><span class="shifted">)</span></b>
-      <b><span class="unshifted">-</span><span class="shifted">_</span></b>
-      <b><span class="unshifted">=</span><span class="shifted">+</span></b>
-      <i id="8">&nbsp;&larr;&nbsp;</i>
-      <br />
-    <i id="9">Tab</i>
-      <b>Q</b><b>W</b><b>E</b><b>R</b><b>T</b><b>Y</b><b>U</b><b>I</b><b>O</b>
-      <b>P</b>
-      <b><span class="unshifted">[</span><span class="shifted">{</span></b>
-      <b><span class="unshifted">]</span><span class="shifted">}</span></b>
-      <b><span class="unshifted">&#92;</span><span class="shifted">|</span></b>
-      <br />
-    <u>Tab&nbsp;&nbsp;</u>
-      <b>A</b><b>S</b><b>D</b><b>F</b><b>G</b><b>H</b><b>J</b><b>K</b><b>L</b>
-      <b><span class="unshifted">;</span><span class="shifted">:</span></b>
-      <b><span class="unshifted">&#39;</span><span class="shifted">"</span></b>
-      <i id="13">Enter</i>
-      <br />
-    <u>&nbsp;&nbsp;</u>
-      <i id="16">Shift</i>
-      <b>Z</b><b>X</b><b>C</b><b>V</b><b>B</b><b>N</b><b>M</b>
-      <b><span class="unshifted">,</span><span class="shifted">&lt;</span></b>
-      <b><span class="unshifted">.</span><span class="shifted">&gt;</span></b>
-      <b><span class="unshifted">/</span><span class="shifted">?</span></b>
-      <i id="16">Shift</i>
-      <br />
-    <u>XXX</u>
-      <i id="17">Ctrl</i>
-      <i id="18">Alt</i>
-      <i style="width: 25ex">&nbsp</i>
-  </div>
-  &nbsp;&nbsp;&nbsp;
-  <div>
-    <i id="45">Ins</i><i id="46">Del</i><i id="36">Home</i><i id="35">End</i>
-    <br />
-    <u>&nbsp;</u><br />
-    <u>&nbsp;</u><br />
-    <u>Ins</u><s>&nbsp;</s><b id="38">&uarr;</b><s>&nbsp;</s><u>&nbsp;</u>
-      <b id="33">&uArr;</b><br />
-    <u>Ins</u><b id="37">&larr;</b><b id="40">&darr;</b>
-      <b id="39">&rarr;</b><u>&nbsp;</u><b id="34">&dArr;</b>
-  </div>
-</pre>
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">
+<head>
+</head>
+<body><pre class="box"><div
+  ><i id="27">Esc</i><i id="112">F1</i><i id="113">F2</i><i id="114">F3</i
+  ><i id="115">F4</i><i id="116">F5</i><i id="117">F6</i><i id="118">F7</i
+  ><i id="119">F8</i><i id="120">F9</i><i id="121">F10</i><i id="122">F11</i
+  ><i id="123">F12</i><br
+  /><b><span class="unshifted">`</span><span class="shifted">~</span></b
+    ><b><span class="unshifted">1</span><span class="shifted">!</span></b
+    ><b><span class="unshifted">2</span><span class="shifted">@</span></b
+    ><b><span class="unshifted">3</span><span class="shifted">#</span></b
+    ><b><span class="unshifted">4</span><span class="shifted">&#36;</span></b
+    ><b><span class="unshifted">5</span><span class="shifted">&#37;</span></b
+    ><b><span class="unshifted">6</span><span class="shifted">^</span></b
+    ><b><span class="unshifted">7</span><span class="shifted">&amp;</span></b
+    ><b><span class="unshifted">8</span><span class="shifted">*</span></b
+    ><b><span class="unshifted">9</span><span class="shifted">(</span></b
+    ><b><span class="unshifted">0</span><span class="shifted">)</span></b
+    ><b><span class="unshifted">-</span><span class="shifted">_</span></b
+    ><b><span class="unshifted">=</span><span class="shifted">+</span></b
+    ><i id="8">&nbsp;&larr;&nbsp;</i
+    ><br
+  /><i id="9">Tab</i
+    ><b>Q</b><b>W</b><b>E</b><b>R</b><b>T</b><b>Y</b><b>U</b><b>I</b><b>O</b
+    ><b>P</b
+    ><b><span class="unshifted">[</span><span class="shifted">{</span></b
+    ><b><span class="unshifted">]</span><span class="shifted">}</span></b
+    ><b><span class="unshifted">&#92;</span><span class="shifted">|</span></b
+    ><br
+  /><u>Tab&nbsp;&nbsp;</u
+    ><b>A</b><b>S</b><b>D</b><b>F</b><b>G</b><b>H</b><b>J</b><b>K</b><b>L</b
+    ><b><span class="unshifted">;</span><span class="shifted">:</span></b
+    ><b><span class="unshifted">&#39;</span><span class="shifted">"</span></b
+    ><i id="13">Enter</i
+    ><br
+  /><u>&nbsp;&nbsp;</u
+    ><i id="16">Shift</i
+    ><b>Z</b><b>X</b><b>C</b><b>V</b><b>B</b><b>N</b><b>M</b
+    ><b><span class="unshifted">,</span><span class="shifted">&lt;</span></b
+    ><b><span class="unshifted">.</span><span class="shifted">&gt;</span></b
+    ><b><span class="unshifted">/</span><span class="shifted">?</span></b
+    ><i id="16">Shift</i
+    ><br
+  /><u>XXX</u
+    ><i id="17">Ctrl</i
+    ><i id="18">Alt</i
+    ><i style="width: 25ex">&nbsp</i
+  ></div
+  >&nbsp;&nbsp;&nbsp;<div
+    ><i id="45">Ins</i><i id="46">Del</i><i id="36">Home</i><i id="35">End</i
+    ><br
+    /><u>&nbsp;</u><br
+    /><u>&nbsp;</u><br
+    /><u>Ins</u><s>&nbsp;</s><b id="38">&uarr;</b><s>&nbsp;</s><u>&nbsp;</u
+      ><b id="33">&uArr;</b><br
+    /><u>Ins</u><b id="37">&larr;</b><b id="40">&darr;</b
+      ><b id="39">&rarr;</b><u>&nbsp;</u><b id="34">&dArr;</b
+  ></div
+></pre></body></html>

shellinabox/shell_in_a_box.js

@@ -358,7 +358,7 @@ ShellInABox.prototype.extendContextMenu = function(entries, actions) {
 };
 
 ShellInABox.prototype.about = function() {
-  alert("Shell In A Box version " + "2.10 (revision 223)" +
+  alert("Shell In A Box version " + "2.10 (revision 225)" +
         "\nCopyright 2008-2010 by Markus Gutschke\n" +
         "For more information check http://shellinabox.com" +
         (typeof serverSupportsSSL != 'undefined' && serverSupportsSSL ?

shellinabox/shellinaboxd.c

@@ -646,7 +646,12 @@ static int shellInABoxHttpHandler(HttpConnection *http, void *arg,
     extern char faviconStart[];
     extern char faviconEnd[];
     serveStaticFile(http, "image/x-icon", faviconStart, faviconEnd);
-  } else if (pathInfoLength == 12 && !memcmp(pathInfo, "keyboard.png", 11)) {
+  } else if (pathInfoLength == 13 && !memcmp(pathInfo, "keyboard.html", 13)) {
+    // Serve the keyboard layout
+    extern char keyboardLayoutStart[];
+    extern char keyboardLayoutEnd[];
+    serveStaticFile(http, "text/html", keyboardLayoutStart, keyboardLayoutEnd);
+  } else if (pathInfoLength == 12 && !memcmp(pathInfo, "keyboard.png", 12)) {
     // Serve the keyboard icon
     extern char keyboardStart[];
     extern char keyboardEnd[];

shellinabox/vt100.js

@@ -716,15 +716,20 @@ VT100.prototype.initializeKeyBindings = function(elem) {
         }
       } else {
         var child = elem.firstChild;
-        if (child.nodeName == "#text") {
-          // If the key only has a text node as a child, then it is a letter.
-          // Automatically compute the lower and upper case version of the key.
-          this.addKeyBinding(elem, this.getTextContent(child).toLowerCase());
-        } else {
-          // If the key has two children, they are the lower and upper case
-          // character code, respectively.
-          this.addKeyBinding(elem, this.getTextContent(child), undefined,
-                             this.getTextContent(child.nextSibling));
+        if (child) {
+          if (child.nodeName == "#text") {
+            // If the key only has a text node as a child, then it is a letter.
+            // Automatically compute the lower and upper case version of the
+            // key.
+            var text = this.getTextContent(child) ||
+                       this.getTextContent(elem);
+            this.addKeyBinding(elem, text.toLowerCase());
+          } else if (child.nextSibling) {
+            // If the key has two children, they are the lower and upper case
+            // character code, respectively.
+            this.addKeyBinding(elem, this.getTextContent(child), undefined,
+                               this.getTextContent(child.nextSibling));
+          }
         }
       }
     }
@@ -735,14 +740,13 @@ VT100.prototype.initializeKeyBindings = function(elem) {
   }
 };
 
-VT100.prototype.initializeKeyboard = function() {
+VT100.prototype.initializeKeyboardButton = function() {
   // Configure mouse event handlers for button that displays/hides keyboard
-  var box                               = this.keyboard.firstChild;
-  this.hideSoftKeyboard();
   this.addListener(this.keyboardImage, 'click',
     function(vt100) { return function(e) {
       if (vt100.keyboard.style.display != '') {
         if (vt100.reconnectBtn.style.visibility != '') {
+          vt100.initializeKeyboard();
           vt100.showSoftKeyboard();
         }
       } else {
@@ -755,6 +759,18 @@ VT100.prototype.initializeKeyboard = function() {
   if (this.softKeyboard) {
     this.keyboardImage.style.visibility = 'visible';
   }
+};
+
+VT100.prototype.initializeKeyboard = function() {
+  // Only need to initialize the keyboard the very first time. When doing so,
+  // copy the keyboard layout from the iframe.
+  if (this.keyboard.firstChild) {
+    return;
+  }
+  this.keyboard.innerHTML               =
+                                    this.layout.contentDocument.body.innerHTML;
+  var box                               = this.keyboard.firstChild;
+  this.hideSoftKeyboard();
 
   // Configure mouse event handlers for on-screen keyboard
   this.addListener(this.keyboard, 'click',
@@ -808,6 +824,7 @@ VT100.prototype.initializeElements = function(container) {
       !this.getChildById(this.container, 'keyboard')    ||
       !this.getChildById(this.container, 'kbd_button')  ||
       !this.getChildById(this.container, 'kbd_img')     ||
+      !this.getChildById(this.container, 'layout')      ||
       !this.getChildById(this.container, 'scrollable')  ||
       !this.getChildById(this.container, 'console')     ||
       !this.getChildById(this.container, 'alt_console') ||
@@ -851,7 +868,6 @@ VT100.prototype.initializeElements = function(container) {
                        '</div>' +
                        '<div id="menu"></div>' +
                        '<div id="keyboard" unselectable="on">' +
-                         '<pre class="box"><div><i id="27">Esc</i><i id="112">F1</i><i id="113">F2</i><i id="114">F3</i><i id="115">F4</i><i id="116">F5</i><i id="117">F6</i><i id="118">F7</i><i id="119">F8</i><i id="120">F9</i><i id="121">F10</i><i id="122">F11</i><i id="123">F12</i><br /><b><span class="unshifted">`</span><span class="shifted">~</span></b><b><span class="unshifted">1</span><span class="shifted">!</span></b><b><span class="unshifted">2</span><span class="shifted">@</span></b><b><span class="unshifted">3</span><span class="shifted">#</span></b><b><span class="unshifted">4</span><span class="shifted">&#36;</span></b><b><span class="unshifted">5</span><span class="shifted">&#37;</span></b><b><span class="unshifted">6</span><span class="shifted">^</span></b><b><span class="unshifted">7</span><span class="shifted">&amp;</span></b><b><span class="unshifted">8</span><span class="shifted">*</span></b><b><span class="unshifted">9</span><span class="shifted">(</span></b><b><span class="unshifted">0</span><span class="shifted">)</span></b><b><span class="unshifted">-</span><span class="shifted">_</span></b><b><span class="unshifted">=</span><span class="shifted">+</span></b><i id="8">&nbsp;&larr;&nbsp;</i><br /><i id="9">Tab</i><b>Q</b><b>W</b><b>E</b><b>R</b><b>T</b><b>Y</b><b>U</b><b>I</b><b>O</b><b>P</b><b><span class="unshifted">[</span><span class="shifted">{</span></b><b><span class="unshifted">]</span><span class="shifted">}</span></b><b><span class="unshifted">&#92;</span><span class="shifted">|</span></b><br /><u>Tab&nbsp;&nbsp;</u><b>A</b><b>S</b><b>D</b><b>F</b><b>G</b><b>H</b><b>J</b><b>K</b><b>L</b><b><span class="unshifted">;</span><span class="shifted">:</span></b><b><span class="unshifted">&#39;</span><span class="shifted">"</span></b><i id="13">Enter</i><br /><u>&nbsp;&nbsp;</u><i id="16">Shift</i><b>Z</b><b>X</b><b>C</b><b>V</b><b>B</b><b>N</b><b>M</b><b><span class="unshifted">,</span><span class="shifted">&lt;</span></b><b><span class="unshifted">.</span><span class="shifted">&gt;</span></b><b><span class="unshifted">/</span><span class="shifted">?</span></b><i id="16">Shift</i><br /><u>XXX</u><i id="17">Ctrl</i><i id="18">Alt</i><i style="width: 25ex">&nbsp</i></div>&nbsp;&nbsp;&nbsp;<div><i id="45">Ins</i><i id="46">Del</i><i id="36">Home</i><i id="35">End</i><br /><u>&nbsp;</u><br /><u>&nbsp;</u><br /><u>Ins</u><s>&nbsp;</s><b id="38">&uarr;</b><s>&nbsp;</s><u>&nbsp;</u><b id="33">&uArr;</b><br /><u>Ins</u><b id="37">&larr;</b><b id="40">&darr;</b><b id="39">&rarr;</b><u>&nbsp;</u><b id="34">&dArr;</b></div></pre>' +
                        '</div>' +
                        '<div id="scrollable">' +
                          '<table id="kbd_button">' +
@@ -876,6 +892,7 @@ VT100.prototype.initializeElements = function(container) {
                          (typeof suppressAllAudio != 'undefined' &&
                           suppressAllAudio ? "" :
                          embed + '<bgsound id="beep_bgsound" loop=1 />') +
+                          '<iframe id="layout" src="keyboard.html" />' +
                         '</div>';
   }
 
@@ -901,6 +918,7 @@ VT100.prototype.initializeElements = function(container) {
   this.menu                    = this.getChildById(this.container, 'menu');
   this.keyboard                = this.getChildById(this.container, 'keyboard');
   this.keyboardImage           = this.getChildById(this.container, 'kbd_img');
+  this.layout                  = this.getChildById(this.container, 'layout');
   this.scrollable              = this.getChildById(this.container,
                                                                  'scrollable');
   this.lineheight              = this.getChildById(this.container,
@@ -978,12 +996,12 @@ VT100.prototype.initializeElements = function(container) {
     try { document.body.oncontextmenu = function() {return false;};} catch(e){}
   }
 
+  // Set up onscreen soft keyboard
+  this.initializeKeyboardButton();
+
   // Hide context menu
   this.hideContextMenu();
 
-  // Set up onscreen soft keyboard
-  this.initializeKeyboard();
-
   // Add listener to reconnect button
   this.addListener(this.reconnectBtn.firstChild, 'click',
                    function(vt100) {
@@ -2384,7 +2402,7 @@ VT100.prototype.toggleCursorBlinking = function() {
 };
 
 VT100.prototype.about = function() {
-  alert("VT100 Terminal Emulator " + "2.10 (revision 223)" +
+  alert("VT100 Terminal Emulator " + "2.10 (revision 225)" +
         "\nCopyright 2008-2010 by Markus Gutschke\n" +
         "For more information check http://shellinabox.com");
 };

shellinabox/vt100.jspp

@@ -716,15 +716,20 @@ VT100.prototype.initializeKeyBindings = function(elem) {
         }
       } else {
         var child = elem.firstChild;
-        if (child.nodeName == "#text") {
-          // If the key only has a text node as a child, then it is a letter.
-          // Automatically compute the lower and upper case version of the key.
-          this.addKeyBinding(elem, this.getTextContent(child).toLowerCase());
-        } else {
-          // If the key has two children, they are the lower and upper case
-          // character code, respectively.
-          this.addKeyBinding(elem, this.getTextContent(child), undefined,
-                             this.getTextContent(child.nextSibling));
+        if (child) {
+          if (child.nodeName == "#text") {
+            // If the key only has a text node as a child, then it is a letter.
+            // Automatically compute the lower and upper case version of the
+            // key.
+            var text = this.getTextContent(child) ||
+                       this.getTextContent(elem);
+            this.addKeyBinding(elem, text.toLowerCase());
+          } else if (child.nextSibling) {
+            // If the key has two children, they are the lower and upper case
+            // character code, respectively.
+            this.addKeyBinding(elem, this.getTextContent(child), undefined,
+                               this.getTextContent(child.nextSibling));
+          }
         }
       }
     }
@@ -735,14 +740,13 @@ VT100.prototype.initializeKeyBindings = function(elem) {
   }
 };
 
-VT100.prototype.initializeKeyboard = function() {
+VT100.prototype.initializeKeyboardButton = function() {
   // Configure mouse event handlers for button that displays/hides keyboard
-  var box                               = this.keyboard.firstChild;
-  this.hideSoftKeyboard();
   this.addListener(this.keyboardImage, 'click',
     function(vt100) { return function(e) {
       if (vt100.keyboard.style.display != '') {
         if (vt100.reconnectBtn.style.visibility != '') {
+          vt100.initializeKeyboard();
           vt100.showSoftKeyboard();
         }
       } else {
@@ -755,6 +759,18 @@ VT100.prototype.initializeKeyboard = function() {
   if (this.softKeyboard) {
     this.keyboardImage.style.visibility = 'visible';
   }
+};
+
+VT100.prototype.initializeKeyboard = function() {
+  // Only need to initialize the keyboard the very first time. When doing so,
+  // copy the keyboard layout from the iframe.
+  if (this.keyboard.firstChild) {
+    return;
+  }
+  this.keyboard.innerHTML               =
+                                    this.layout.contentDocument.body.innerHTML;
+  var box                               = this.keyboard.firstChild;
+  this.hideSoftKeyboard();
 
   // Configure mouse event handlers for on-screen keyboard
   this.addListener(this.keyboard, 'click',
@@ -808,6 +824,7 @@ VT100.prototype.initializeElements = function(container) {
       !this.getChildById(this.container, 'keyboard')    ||
       !this.getChildById(this.container, 'kbd_button')  ||
       !this.getChildById(this.container, 'kbd_img')     ||
+      !this.getChildById(this.container, 'layout')      ||
       !this.getChildById(this.container, 'scrollable')  ||
       !this.getChildById(this.container, 'console')     ||
       !this.getChildById(this.container, 'alt_console') ||
@@ -851,7 +868,6 @@ VT100.prototype.initializeElements = function(container) {
                        '</div>' +
                        '<div id="menu"></div>' +
                        '<div id="keyboard" unselectable="on">' +
-                         KEYBOARD +
                        '</div>' +
                        '<div id="scrollable">' +
                          '<table id="kbd_button">' +
@@ -876,6 +892,7 @@ VT100.prototype.initializeElements = function(container) {
                          (typeof suppressAllAudio != 'undefined' &&
                           suppressAllAudio ? "" :
                          embed + '<bgsound id="beep_bgsound" loop=1 />') +
+                          '<iframe id="layout" src="keyboard.html" />' +
                         '</div>';
   }
 
@@ -901,6 +918,7 @@ VT100.prototype.initializeElements = function(container) {
   this.menu                    = this.getChildById(this.container, 'menu');
   this.keyboard                = this.getChildById(this.container, 'keyboard');
   this.keyboardImage           = this.getChildById(this.container, 'kbd_img');
+  this.layout                  = this.getChildById(this.container, 'layout');
   this.scrollable              = this.getChildById(this.container,
                                                                  'scrollable');
   this.lineheight              = this.getChildById(this.container,
@@ -978,12 +996,12 @@ VT100.prototype.initializeElements = function(container) {
     try { document.body.oncontextmenu = function() {return false;};} catch(e){}
   }
 
+  // Set up onscreen soft keyboard
+  this.initializeKeyboardButton();
+
   // Hide context menu
   this.hideContextMenu();
 
-  // Set up onscreen soft keyboard
-  this.initializeKeyboard();
-
   // Add listener to reconnect button
   this.addListener(this.reconnectBtn.firstChild, 'click',
                    function(vt100) {