keyboard layout support + log level

Author: citronneur

CHANGELOG.md

@@ -0,0 +1,5 @@
+## 0.2.0 - 20150707
+* Add this changelog
+* Add support for qwerty keyboard on Unicode format (chrome)
+* Fix bitmap decompression bugs
+* Adapt log level from command line

README.md

@@ -4,11 +4,9 @@
 
 **Mstsc.js** is pure javascript Microsoft RDP (Remote Desktop Client) client using nodejs, [**node-rdpjs**](https://github.com/citronneur/node-rdpjs) and socket.io. It allows you to connect to any terminal server compatible application, through web browser (optimized for firefox, compatible with chrome and internet explorer 11).
 
-![](./img/mstsc.js.login.png)
-
-![](./img/mstsc.js.connect.png)
-
-![](./img/mstsc.js.explorer.png)
+<img src='./img/mstsc.js.login.png' width=100/>
+<img src='./img/mstsc.js.connect.png' width=100/>
+<img src='./img/mstsc.js.explorer.png' width=100/>
 
 ## Cozy-Cloud
 

client/js/canvas.js

@@ -47,23 +47,32 @@
 		var inputHeap = new Uint8Array(Module.HEAPU8.buffer, inputPtr, input.length);
 		inputHeap.set(input);
 
-		var ouputSize = bitmap.width * bitmap.height * 4;
+		var output_width = bitmap.destRight - bitmap.destLeft + 1;
+		var output_height = bitmap.destBottom - bitmap.destTop + 1;
+		var ouputSize = output_width * output_height * 4;
 		var outputPtr = Module._malloc(ouputSize);
 
 		var outputHeap = new Uint8Array(Module.HEAPU8.buffer, outputPtr, ouputSize);
 
 		var res = Module.ccall(fName,
 			'number',
-			['number', 'number', 'number', 'number', 'number', 'number'],
-			[outputHeap.byteOffset, bitmap.width, bitmap.height, inputHeap.byteOffset, input.length]
+			['number', 'number', 'number', 'number', 'number', 'number', 'number', 'number'],
+			[outputHeap.byteOffset, output_width, output_height, bitmap.width, bitmap.height, inputHeap.byteOffset, input.length]
 		);
 
 		var output = new Uint8ClampedArray(outputHeap.buffer, outputHeap.byteOffset, ouputSize);
 
 		Module._free(inputPtr);
 		Module._free(outputPtr);
 
-		return output;
+		return { width : output_width, height : output_height, data : output };
+	}
+	
+	/**
+	 * Un compress bitmap are reverse in y axis
+	 */
+	function reverse (bitmap) {
+		return { width : bitmap.width, height : bitmap.height, data : new Uint8ClampedArray(bitmap.data) };
 	}
 
 	/**
@@ -81,14 +90,17 @@
 		 * @param bitmap {object}
 		 */
 		update : function (bitmap) {
-			var output = new Uint8ClampedArray(bitmap.data);
+			var output = null;
 			if (bitmap.isCompress) {
 				output = decompress(bitmap);
 			}
+			else {
+				output = reverse(bitmap);
+			}
 
 			// use image data to use asm.js
-			var imageData = this.ctx.createImageData(bitmap.width, bitmap.height);
-			imageData.data.set(output);
+			var imageData = this.ctx.createImageData(output.width, output.height);
+			imageData.data.set(output.data);
 			this.ctx.putImageData(imageData, bitmap.destLeft, bitmap.destTop);
 		}
 	}

client/js/client.js

@@ -160,7 +160,18 @@
 			});
 
 			// emit infos event
-			this.socket.emit('infos', {ip : ip, port : 3389, screen : { width : this.canvas.width, height : this.canvas.height }, domain : domain, username : username, password : password});
+			this.socket.emit('infos', {
+				ip : ip, 
+				port : 3389, 
+				screen : { 
+					width : this.canvas.width, 
+					height : this.canvas.height 
+				}, 
+				domain : domain, 
+				username : username, 
+				password : password, 
+				locale : Mstsc.locale()
+			});
 		}
 	}
 

client/js/keyboard.js

@@ -170,7 +170,7 @@
  	 	"MediaSelect" : 0xE06D
 	};
 
-	UnicodeToCodeFirefox_FR = {
+	var UnicodeToCodeFirefox_FR = {
 		27 : "Escape",
 		112 : "F1",
 		113 : "F2",
@@ -275,7 +275,7 @@
 		17 : "ControlLeft"
 	};
 
-	UnicodeToCodeChrome_FR = {
+	var UnicodeToCodeChrome_FR = {
 		27 : "Escape",
 		112 : "F1",
 		113 : "F2",
@@ -380,13 +380,117 @@
 		17 : "ControlLeft"
 	};
 
-	UnicodeToCode = {
+	var UnicodeToCode_EN = {
+		27 : "Escape",
+		112 : "F1",
+		113 : "F2",
+		114 : "F3",
+		115 : "F4",
+		116 : "F5",
+		117 : "F6",
+		118 : "F7",
+		119 : "F8",
+		120 : "F9",
+		121 : "F10",
+		122 : "F11",
+		123 : "F12",
+		192 : "Backquote",
+		49 : "Digit1",
+		50 : "Digit2",
+		51 : "Digit3",
+		52 : "Digit4",
+		53 : "Digit5",
+		54 : "Digit6",
+		55 : "Digit7",
+		56 : "Digit8",
+		57 : "Digit9",
+		48 : "Digit0",
+		173 : "Minus",
+		61 : "Equal",
+		8 : "Backspace",
+		9 : "Tab",
+		81 : "KeyQ",
+		87 : "KeyW",
+		69 : "KeyE",
+		82 : "KeyR",
+		84 : "KeyT",
+		89 : "KeyY",
+		85 : "KeyU",
+		73 : "KeyI",
+		79 : "KeyO",
+		80 : "KeyP",
+		219 : "BracketLeft",
+		221 : "BracketRight",
+		13 : "Enter",
+		20 : "CapsLock",
+		65 : "KeyA",
+		83 : "KeyS",
+		68 : "KeyD",
+		70 : "KeyF",
+		71 : "KeyG",
+		72 : "KeyH",
+		74 : "KeyJ",
+		75 : "KeyK",
+		76 : "KeyL",
+		59 : "Semicolon",
+		222 : "Quote",
+		220 : "Backslash",
+		16 : "ShiftLeft",
+		220 : "IntlBackslash",
+		90 : "KeyZ",
+		88 : "KeyX",
+		67 : "KeyC",
+		86 : "KeyV",
+		66 : "KeyB",
+		78 : "KeyN",
+		77 : "KeyM",
+		188 : "Comma",
+		190 : "Period",
+		191 : "Slash",
+		16 : "ShiftRight",
+		17 : "ControlLeft",
+		18 : "AltLeft",
+		91 : "OSLeft",
+		32 : "Space",
+		18 : "AltRight",
+		91 : "OSRight",
+		93 : "ContextMenu",
+		17 : "ControlRight",
+		37 : "ArrowLeft",
+		38 : "ArrowUp",
+		40 : "ArrowDown",
+		39 : "ArrowRight",
+		144 : "NumLock",
+		144 : "NumLock",
+		111 : "NumpadDivide",
+		106 : "NumpadMultiply",
+		109 : "NumpadSubtract",
+		103 : "Numpad7",
+		104 : "Numpad8",
+		105 : "Numpad9",
+		107 : "NumpadAdd",
+		100 : "Numpad4",
+		101 : "Numpad5",
+		102 : "Numpad6",
+		97 : "Numpad1",
+		98 : "Numpad2",
+		99 : "Numpad3",
+		13 : "NumpadEnter",
+		96 : "Numpad0",
+		110 : "NumpadDecimal",
+		17 : "ControlLeft"	
+	};
+	
+	
+	var UnicodeToCode = {
 		'firefox' : {
-			'fr' : UnicodeToCodeFirefox_FR
+			'fr' : UnicodeToCodeFirefox_FR,
+			'en' : UnicodeToCode_EN
 		},
 
 		'chrome' : {
-			'fr' : UnicodeToCodeChrome_FR
+			'fr' : UnicodeToCodeChrome_FR,
+			'en' : UnicodeToCode_EN
 		}
 	}
 
@@ -396,7 +500,9 @@
 	 * @return {integer} scancode
 	 */
 	function scancode (e) {
-		return KeyMap[e.code || UnicodeToCode[Mstsc.browser() || 'firefox']['fr'][e.keyCode]];
+		var locale = Mstsc.locale();
+		locale = (['fr', 'en'].indexOf(locale) > 0 && locale) || 'en';
+		return KeyMap[e.code || UnicodeToCode[Mstsc.browser() || 'firefox'][locale][e.keyCode]];
 	}
 
 	Mstsc.scancode = scancode;

client/js/mstsc.js

@@ -65,6 +65,14 @@
 			}
 
 			return null;
+		},
+		
+		/**
+		 * Try to detect language
+		 * @returns
+		 */
+		locale : function () {
+			return window.navigator.userLanguage || window.navigator.language;
 		}
 	}