From a8122e5a85e8927f93b12af9d82d38436a690d86 Mon Sep 17 00:00:00 2001 From: Thijs Wenker Date: Tue, 30 Dec 2014 23:30:48 +0100 Subject: [PATCH] virtualKeyboard.js - scale 50% virtualKeyboardLocation.js - toggle visibility with Enter/Return key virtualKeyboardTextEntityExample.js - attempt to fix character glyphs --- examples/libraries/virtualKeyboard.js | 112 ++++++++++++------- examples/virtualKeyboardLocation.js | 4 +- examples/virtualKeyboardTextEntityExample.js | 24 +--- 3 files changed, 78 insertions(+), 62 deletions(-) diff --git a/examples/libraries/virtualKeyboard.js b/examples/libraries/virtualKeyboard.js index ba9a30974e..9e5fd4accb 100644 --- a/examples/libraries/virtualKeyboard.js +++ b/examples/libraries/virtualKeyboard.js @@ -37,6 +37,8 @@ KEYBOARD_HEIGHT = 434.1; CURSOR_WIDTH = 33.9; CURSOR_HEIGHT = 33.9; +KEYBOARD_SCALE_MULTIPLIER = 0.50; + // VIEW_ANGLE can be adjusted to your likings, the smaller the faster movement. // Try setting it to 60 if it goes too fast for you. const VIEW_ANGLE = 40.0; @@ -127,6 +129,11 @@ KeyboardKey = (function(keyboard, keyProperties) { }); } }; + this.updateVisibility = function() { + for (var i = 0; i < tthis.bounds.length; i++) { + Overlays.editOverlay(tthis.overlays[i], {visible: tthis.keyboard.visible}); + } + }; this.rescale = function() { for (var i = 0; i < tthis.bounds.length; i++) { Overlays.editOverlay(tthis.overlays[i], { @@ -153,26 +160,26 @@ KeyboardKey = (function(keyboard, keyProperties) { for (var i = 0; i < this.bounds.length; i++) { var newOverlay = Overlays.cloneOverlay(this.keyboard.background); if (THREE_D_MODE) { - Overlays.editOverlay(newOverlay, { - position: { - x: MyAvatar.position.x,// + this.bounds[i][BOUND_X] * 0.01,// /*+ this.keyboard.getX()*/ + this.bounds[i][BOUND_X] * keyboard.scale, - y: MyAvatar.position.y,// - this.bounds[i][BOUND_Y] * 0.01,// /*+ this.keyboard.getY()*/ + this.bounds[i][BOUND_Y] * keyboard.scale, - z: MyAvatar.position.z - }, - width: this.bounds[i][BOUND_W] * keyboard.scale, - height: this.bounds[i][BOUND_H] * keyboard.scale, - subImage: {width: this.bounds[i][BOUND_W], height: this.bounds[i][BOUND_H], x: this.bounds[i][BOUND_X], y: (KEYBOARD_HEIGHT * this.keyState) + this.bounds[i][BOUND_Y]}, - alpha: 1 - }); + Overlays.editOverlay(newOverlay, { + position: { + x: MyAvatar.position.x,// + this.bounds[i][BOUND_X] * 0.01,// /*+ this.keyboard.getX()*/ + this.bounds[i][BOUND_X] * keyboard.scale, + y: MyAvatar.position.y,// - this.bounds[i][BOUND_Y] * 0.01,// /*+ this.keyboard.getY()*/ + this.bounds[i][BOUND_Y] * keyboard.scale, + z: MyAvatar.position.z + }, + width: this.bounds[i][BOUND_W] * keyboard.scale, + height: this.bounds[i][BOUND_H] * keyboard.scale, + subImage: {width: this.bounds[i][BOUND_W], height: this.bounds[i][BOUND_H], x: this.bounds[i][BOUND_X], y: (KEYBOARD_HEIGHT * this.keyState) + this.bounds[i][BOUND_Y]}, + alpha: 1 + }); } else { - Overlays.editOverlay(newOverlay, { - x: this.keyboard.getX() + this.bounds[i][BOUND_X] * keyboard.scale, - y: this.keyboard.getY() + this.bounds[i][BOUND_Y] * keyboard.scale, - width: this.bounds[i][BOUND_W] * keyboard.scale, - height: this.bounds[i][BOUND_H] * keyboard.scale, - subImage: {width: this.bounds[i][BOUND_W], height: this.bounds[i][BOUND_H], x: this.bounds[i][BOUND_X], y: (KEYBOARD_HEIGHT * this.keyState) + this.bounds[i][BOUND_Y]}, - alpha: 1 - }); + Overlays.editOverlay(newOverlay, { + x: this.keyboard.getX() + this.bounds[i][BOUND_X] * keyboard.scale, + y: this.keyboard.getY() + this.bounds[i][BOUND_Y] * keyboard.scale, + width: this.bounds[i][BOUND_W] * keyboard.scale, + height: this.bounds[i][BOUND_H] * keyboard.scale, + subImage: {width: this.bounds[i][BOUND_W], height: this.bounds[i][BOUND_H], x: this.bounds[i][BOUND_X], y: (KEYBOARD_HEIGHT * this.keyState) + this.bounds[i][BOUND_Y]}, + alpha: 1 + }); } this.overlays.push(newOverlay); } @@ -181,8 +188,9 @@ KeyboardKey = (function(keyboard, keyProperties) { Keyboard = (function() { var tthis = this; this.focussed_key = -1; - this.scale = windowDimensions.x / KEYBOARD_WIDTH; + this.scale = (windowDimensions.x / KEYBOARD_WIDTH) * KEYBOARD_SCALE_MULTIPLIER; this.shift = false; + this.visible = true; this.width = function() { return KEYBOARD_WIDTH * tthis.scale; }; @@ -196,30 +204,30 @@ Keyboard = (function() { return windowDimensions.y - this.height(); }; if (THREE_D_MODE) { - this.background = Overlays.addOverlay("billboard", { - scale: 1, - position: MyAvatar.position, - rotation: MyAvatar.rotation, - width: this.width(), - height: this.height(), - subImage: {width: KEYBOARD_WIDTH, height: KEYBOARD_HEIGHT, y: KEYBOARD_HEIGHT * KBD_BACKGROUND}, - isFacingAvatar: false, - url: KEYBOARD_URL, - alpha: 1 - }); + this.background = Overlays.addOverlay("billboard", { + scale: 1, + position: MyAvatar.position, + rotation: MyAvatar.rotation, + width: this.width(), + height: this.height(), + subImage: {width: KEYBOARD_WIDTH, height: KEYBOARD_HEIGHT, y: KEYBOARD_HEIGHT * KBD_BACKGROUND}, + isFacingAvatar: false, + url: KEYBOARD_URL, + alpha: 1 + }); } else { - this.background = Overlays.addOverlay("image", { - x: this.getX(), - y: this.getY(), - width: this.width(), - height: this.height(), - subImage: {width: KEYBOARD_WIDTH, height: KEYBOARD_HEIGHT, y: KEYBOARD_HEIGHT * KBD_BACKGROUND}, - imageURL: KEYBOARD_URL, - alpha: 1 - }); + this.background = Overlays.addOverlay("image", { + x: this.getX(), + y: this.getY(), + width: this.width(), + height: this.height(), + subImage: {width: KEYBOARD_WIDTH, height: KEYBOARD_HEIGHT, y: KEYBOARD_HEIGHT * KBD_BACKGROUND}, + imageURL: KEYBOARD_URL, + alpha: 1 + }); } this.rescale = function() { - this.scale = windowDimensions.x / KEYBOARD_WIDTH; + this.scale = (windowDimensions.x / KEYBOARD_WIDTH) * KEYBOARD_SCALE_MULTIPLIER; Overlays.editOverlay(tthis.background, { x: this.getX(), y: this.getY(), @@ -312,6 +320,28 @@ Keyboard = (function() { } }; + this.show = function() { + tthis.visible = true; + tthis.updateVisibility(); + }; + + this.hide = function() { + tthis.visible = false; + tthis.updateVisibility(); + }; + + this.toggle = function() { + tthis.visible = !tthis.visible; + tthis.updateVisibility(); + }; + + this.updateVisibility = function() { + Overlays.editOverlay(tthis.background, { visible: tthis.visible }); + for (var i = 0; i < this.keys.length; i++) { + this.keys[i].updateVisibility(); + } + }; + this.onKeyPress = null; this.onKeyRelease = null; this.onSubmit = null; diff --git a/examples/virtualKeyboardLocation.js b/examples/virtualKeyboardLocation.js index a5688c4c34..eae6c982b2 100644 --- a/examples/virtualKeyboardLocation.js +++ b/examples/virtualKeyboardLocation.js @@ -2,7 +2,7 @@ // virtualKeyboardTextEntityExample.js // examples // -// Created by Thijs Wenker on 11/18/14. +// Created by Thijs Wenker on 12/28/14. // Copyright 2014 High Fidelity, Inc. // // Control a virtual keyboard using your favorite HMD. @@ -156,7 +156,7 @@ function keyPressEvent(event) { if (event.key === SPACEBAR_CHARCODE) { keyboard.pressFocussedKey(); } else if (event.key === ENTER_CHARCODE || event.key === RETURN_CHARCODE) { - print("Enter pressed"); + keyboard.toggle(); } } diff --git a/examples/virtualKeyboardTextEntityExample.js b/examples/virtualKeyboardTextEntityExample.js index 830c50ab1e..2d46397831 100644 --- a/examples/virtualKeyboardTextEntityExample.js +++ b/examples/virtualKeyboardTextEntityExample.js @@ -2,7 +2,7 @@ // virtualKeyboardTextEntityExample.js // examples // -// Created by Thijs Wenker on 11/18/14. +// Created by Thijs Wenker on 12/28/14. // Copyright 2014 High Fidelity, Inc. // // Control a virtual keyboard using your favorite HMD. @@ -45,29 +45,15 @@ function deleteChar() { updateTextOverlay(); } } - + function updateTextOverlay() { var textLines = textText.split("\n"); - var maxLineWidth = 0; - for (textLine in textLines) { - var lineWidth = Overlays.textSize(text, textLines[textLine]).width; - if (lineWidth > maxLineWidth) { - maxLineWidth = lineWidth; - } - } - var suggestedFontSize = (windowDimensions.x / maxLineWidth) * textFontSize * 0.90; - var maxFontSize = 190 / textLines.length; + var suggestedFontSize = (windowDimensions.x / Overlays.textSize(text, textLines).width) * textFontSize * 0.90; + var maxFontSize = 170 / textLines.length; textFontSize = (suggestedFontSize > maxFontSize) ? maxFontSize : suggestedFontSize; var topMargin = (250 - (textFontSize * textLines.length)) / 4; Overlays.editOverlay(text, {text: textText, font: {size: textFontSize}, topMargin: topMargin}); - var maxLineWidth = 0; - for (textLine in textLines) { - var lineWidth = Overlays.textSize(text, textLines[textLine]).width; - if (lineWidth > maxLineWidth) { - maxLineWidth = lineWidth; - } - } - Overlays.editOverlay(text, {leftMargin: (windowDimensions.x - maxLineWidth) / 2}); + Overlays.editOverlay(text, {leftMargin: (windowDimensions.x - Overlays.textSize(text, textLines).width) / 2}); } keyboard.onKeyPress = function(event) {