add keyboard type selection to console viewer UI

console-proxy/css/ajaxviewer.css

@@ -67,6 +67,41 @@ body {
 	background:url(/resource/images/right.png) no-repeat right center; 
 }
 
+
+#toolbar ul li ul {
+    position: absolute;
+    top:32;
+    display: block none;
+    border-top: 1px solid black;
+    background-image:url(/resource/images/back.gif); 
+    background-repeat:repeat-x repeat-y; 
+}
+
+#toolbar ul li ul li {
+    display: list-item;
+    float:none;
+    padding-left: 20;
+}
+
+#toolbar ul li ul li.current {
+    background: url(/resource/images/cad.gif) no-repeat left center; 
+}
+
+#toolbar ul li ul li a {
+    display:block;
+    padding:0 3px 0 3px; 
+    text-decoration:none;
+    line-height:32px;
+}
+
+#toolbar ul li ul li a:hover {
+    background: url(/resource/images/left.png) no-repeat left center; 
+}
+
+#toolbar ul li ul li a:hover span {
+    background: url(/resource/images/right.png) no-repeat right center; 
+}
+
 span.dark {
 	margin-right:20px;
 	float:right;

console-proxy/js/ajaxviewer.js

@@ -70,7 +70,10 @@ function AjaxViewer(panelId, imageUrl, updateUrl, tileMap, width, height, tileWi
 	this.width = width;
 	this.height = height;
 	this.tileWidth = tileWidth;
-	this.tileHeight = tileHeight;
+	this.tileHeight = tileHeight;
+	this.maxTileZIndex = 1;
+	
+	this.currentKeyboard = 0;
 	
 	this.timer = 0;
 	this.eventQueue = [];
@@ -83,7 +86,8 @@ function AjaxViewer(panelId, imageUrl, updateUrl, tileMap, width, height, tileWi
 	
 	this.panel = this.generateCanvas(panelId, width, height, tileWidth, tileHeight);
 	
-	this.setupKeyCodeTranslationTable();
+	this.setupKeyCodeTranslationTable();
+	this.setupUIController();
 }
 
 AjaxViewer.prototype = {
@@ -250,6 +254,47 @@ AjaxViewer.prototype = {
 		this.keyCodeMap['?'.charCodeAt()] = { code : 191, shift : true };
 	},
 	
+	setupUIController : function() {
+		var ajaxViewer = this;
+		var pullDownElement = $("#toolbar").find(".pulldown");
+		pullDownElement.hover(
+			function(e) {
+				var subMenu = pullDownElement.find("ul");
+			
+				$("li.current").removeClass("current");
+				$("li:eq(" + ajaxViewer.currentKeyboard + ")", subMenu).addClass("current");
+				subMenu.css("z-index", "" + ajaxViewer.maxTileZIndex + 1).show();
+				return false;
+			},
+			
+			function(e) {
+				pullDownElement.find("ul").hide();
+				return false;
+			}
+		);
+
+		$("#toolbar").find("a").each(function(i, val) {
+			$(val).click(function(e) {
+				var cmdLink = $(e.target).closest("a");
+				
+				if(cmdLink.attr("cmd")) {
+					var cmd = cmdLink.attr("cmd");
+					ajaxViewer.onCommand(cmd);
+				}
+			});
+		});
+	},
+	
+	onCommand : function(cmd) {
+		if(cmd == "keyboard_jp") {
+			$("#toolbar").find(".pulldown").find("ul").hide();
+			this.currentKeyboard = 1;
+		} else if(cmd == "keyboard_en") {
+			$("#toolbar").find(".pulldown").find("ul").hide();
+			this.currentKeyboard = 0;
+		}
+	},
+	
 	// Firefox on Mac OS X does not generate key-code for following keys 
 	translateZeroKeycode: function() {
 		var len = this.eventQueue.length;
@@ -614,8 +659,10 @@ AjaxViewer.prototype = {
 			divPrev = this.getTile(cell, "tile2");
 			div = this.getTile(cell, "tile");
 		}
-		
+		
-		div.css("z-index", parseInt(divPrev.css("z-index")) + 1);
+		var zIndex = parseInt(divPrev.css("z-index")) + 1;
+		this.maxTileZIndex = Math.max(this.maxTileZIndex, zIndex);
+		div.css("z-index", zIndex);
 		div.css("background", bg);
 	},
 	

console-proxy/src/com/cloud/consoleproxy/ConsoleProxyViewer.java

@@ -18,27 +18,26 @@
 package com.cloud.consoleproxy;
 
 
-import java.awt.Container;
+import java.awt.Container;
-import java.awt.Dimension;
+import java.awt.Dimension;
-import java.awt.Frame;
+import java.awt.Frame;
-import java.awt.Graphics2D;
+import java.awt.Graphics2D;
-import java.awt.Rectangle;
+import java.awt.Rectangle;
-import java.awt.Toolkit;
+import java.awt.Toolkit;
-import java.awt.event.InputEvent;
+import java.awt.event.InputEvent;
-import java.awt.event.KeyEvent;
+import java.awt.event.KeyEvent;
-import java.awt.event.MouseEvent;
+import java.awt.event.MouseEvent;
-import java.awt.image.BufferedImage;
+import java.awt.image.BufferedImage;
-import java.io.ByteArrayOutputStream;
+import java.io.ByteArrayOutputStream;
-import java.io.IOException;
+import java.io.IOException;
-import java.io.OutputStream;
+import java.io.OutputStream;
-import java.net.InetSocketAddress;
+import java.net.InetSocketAddress;
-import java.net.Socket;
+import java.net.Socket;
-import java.util.ArrayList;
+import java.util.List;
-import java.util.List;
+import java.util.zip.GZIPOutputStream;
-import java.util.zip.GZIPOutputStream;
+
-
+import org.apache.log4j.Logger;
-import org.apache.log4j.Logger;
+
-
 import com.cloud.console.AuthenticationException;
 import com.cloud.console.ConsoleCanvas;
 import com.cloud.console.ConsoleCanvas2;
@@ -1032,7 +1031,17 @@ public class ConsoleProxyViewer implements java.lang.Runnable, RfbViewer, RfbPro
 					"<a href=\"#\" onclick=\"javascript:sendCtrlEsc();\">", 
 						"<span><img align=\"left\" src=\"/resource/images/winlog.png\" alt=\"Ctrl-Esc\" style=\"width:16px;height:16px\"/>Ctrl-Esc</span>",
 					"</a>", 
-				"</li>",
+				"</li>",
+				
+				"<li class=\"pulldown\">", 
+					"<a href=\"#\">", 
+						"<span><img align=\"left\" src=\"/resource/images/winlog.png\" alt=\"Keyboard\" style=\"width:16px;height:16px\"/>Keyboard</span>",
+					"</a>", 
+					"<ul>",
+		    			"<li class=\"current\"><a href=\"#\" cmd=\"keyboard_en\"><span>English (US)</span></a></li>",
+			    		"<li><a href=\"#\" cmd=\"keyboard_jp\"><span>Japanese&nbsp;&nbsp;&nbsp;</span></a></li>",
+					"</ul>",
+				"</li>",
 			"</ul>",
 			"<span id=\"light\" class=\"dark\"></span>", 
 			"</div>",