safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 21:27:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUAC-807 Got mouse emulation modes working.

Browse Source
This commit is contained in:
James Muehlner
2014-11-11 22:06:53 -08:00
parent 28398b5577
commit 598e64b757
4 changed files with 90 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
guacamole/src/main/webapp/app/client/controllers/clientController.js
View File

@@ -47,6 +47,11 @@ angular.module('home').controller('clientController', ['$scope', '$routeParams',
// Hide menu by default // Hide menu by default
$scope.menuShown = false; $scope.menuShown = false;
// Convenience method for closing the menu
$scope.closeMenu = function closeMenu() {
$scope.menuShown = false;
};
// Update the model when clipboard data received from client // Update the model when clipboard data received from client
$scope.$on('guacClientClipboard', function clipboardDataReceived(clipboardData) { $scope.$on('guacClientClipboard', function clipboardDataReceived(clipboardData) {
$scope.guacClipboard = clipboardData; $scope.guacClipboard = clipboardData;

157
guacamole/src/main/webapp/app/client/directives/guacClient.js
View File

@@ -339,14 +339,6 @@ angular.module('client').directive('guacClient', [function guacClient() {
localCursor = mouse.setCursor(canvas, x, y); localCursor = mouse.setCursor(canvas, x, y);
}; };
// Touchscreen
var touch_screen = new Guacamole.Mouse.Touchscreen(guac_display);
$scope.touch_screen = touch_screen;
// Touchpad
var touch_pad = new Guacamole.Mouse.Touchpad(guac_display);
$scope.touch_pad = touch_pad;
// Mouse // Mouse
var mouse = new Guacamole.Mouse(guac_display); var mouse = new Guacamole.Mouse(guac_display);
mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = function(mouseState) { mouse.onmousedown = mouse.onmouseup = mouse.onmousemove = function(mouseState) {
@@ -386,103 +378,96 @@ angular.module('client').directive('guacClient', [function guacClient() {
guac_display.className = "software-cursor"; guac_display.className = "software-cursor";
$display.append(guac_display); $display.append(guac_display);
}; // Mouse emulation objects
var touchScreen = new Guacamole.Mouse.Touchscreen(guac_display);
// Watch for changes to mouse emulation mode var touchPad = new Guacamole.Mouse.Touchpad(guac_display);
$scope.$watch('parameters.emulateAbsolute', function(emulateAbsolute) {
$scope.setMouseEmulationAbsolute(emulateAbsolute);
});
/**
* Sets the mouse emulation mode to absolute or relative.
*
* @param {Boolean} absolute Whether mouse emulation should use absolute
* (touchscreen) mode.
*/
$scope.setMouseEmulationAbsolute = function(absolute) {
function __handle_mouse_state(mouseState) { // Watch for changes to mouse emulation mode
$scope.$watch('clientProperties.emulateAbsoluteMouse', function(emulateAbsoluteMouse) {
// Get client - do nothing if not attached var handleMouseState = function handleMouseState(mouseState) {
var guac = $scope.attachedClient;
if (!guac) return;
// Determine mouse position within view // Ensure software cursor is shown
var guac_display = guac.getDisplay().getElement(); guac.getDisplay().showCursor(true);
var mouse_view_x = mouseState.x + guac_display.offsetLeft - $scope.main.scrollLeft;
var mouse_view_y = mouseState.y + guac_display.offsetTop - $scope.main.scrollTop;
// Determine viewport dimensioins // Determine mouse position within view
var view_width = $scope.main.offsetWidth; var guac_display = guac.getDisplay().getElement();
var view_height = $scope.main.offsetHeight; var mouse_view_x = mouseState.x + guac_display.offsetLeft - $scope.main.scrollLeft;
var mouse_view_y = mouseState.y + guac_display.offsetTop - $scope.main.scrollTop;
// Determine scroll amounts based on mouse position relative to document // Determine viewport dimensions
var view_width = $scope.main.offsetWidth;
var view_height = $scope.main.offsetHeight;
var scroll_amount_x; // Determine scroll amounts based on mouse position relative to document
if (mouse_view_x > view_width)
scroll_amount_x = mouse_view_x - view_width;
else if (mouse_view_x < 0)
scroll_amount_x = mouse_view_x;
else
scroll_amount_x = 0;
var scroll_amount_y; var scroll_amount_x;
if (mouse_view_y > view_height) if (mouse_view_x > view_width)
scroll_amount_y = mouse_view_y - view_height; scroll_amount_x = mouse_view_x - view_width;
else if (mouse_view_y < 0) else if (mouse_view_x < 0)
scroll_amount_y = mouse_view_y; scroll_amount_x = mouse_view_x;
else else
scroll_amount_y = 0; scroll_amount_x = 0;
// Scroll (if necessary) to keep mouse on screen. var scroll_amount_y;
$scope.main.scrollLeft += scroll_amount_x; if (mouse_view_y > view_height)
$scope.main.scrollTop += scroll_amount_y; scroll_amount_y = mouse_view_y - view_height;
else if (mouse_view_y < 0)
scroll_amount_y = mouse_view_y;
else
scroll_amount_y = 0;
// Scale event by current scale // Scroll (if necessary) to keep mouse on screen.
var scaledState = new Guacamole.Mouse.State( $scope.main.scrollLeft += scroll_amount_x;
mouseState.x / guac.getDisplay().getScale(), $scope.main.scrollTop += scroll_amount_y;
mouseState.y / guac.getDisplay().getScale(),
mouseState.left,
mouseState.middle,
mouseState.right,
mouseState.up,
mouseState.down);
// Send mouse event // Scale event by current scale
guac.sendMouseState(scaledState); var scaledState = new Guacamole.Mouse.State(
mouseState.x / guac.getDisplay().getScale(),
mouseState.y / guac.getDisplay().getScale(),
mouseState.left,
mouseState.middle,
mouseState.right,
mouseState.up,
mouseState.down);
}; // Send mouse event
guac.sendMouseState(scaledState);
var new_mode, old_mode; };
$scope.emulate_absolute = absolute;
// Switch to touchscreen if absolute var newMode, oldMode;
if (absolute) {
new_mode = $scope.touch_screen;
old_mode = $scope.touch;
}
// Switch to touchpad if not absolute (relative) // Switch to touchscreen if absolute
else { if (emulateAbsoluteMouse) {
new_mode = $scope.touch_pad; newMode = touchScreen;
old_mode = $scope.touch; oldMode = touchPad;
}
// Perform switch
if (new_mode) {
if (old_mode) {
old_mode.onmousedown = old_mode.onmouseup = old_mode.onmousemove = null;
new_mode.currentState.x = old_mode.currentState.x;
new_mode.currentState.y = old_mode.currentState.y;
} }
new_mode.onmousedown = new_mode.onmouseup = new_mode.onmousemove = __handle_mouse_state; // Switch to touchpad if not absolute (relative)
$scope.touch = new_mode; else {
} newMode = touchPad;
oldMode = touchScreen;
}
// Set applicable mouse emulation object, unset the old one
if (newMode) {
if (oldMode) {
oldMode.onmousedown = oldMode.onmouseup = oldMode.onmousemove = null;
newMode.currentState.x = oldMode.currentState.x;
newMode.currentState.y = oldMode.currentState.y;
}
newMode.onmousedown = newMode.onmouseup = newMode.onmousemove = handleMouseState;
}
});
}; };
/** /**
* Connects to the current Guacamole connection, attaching a new Guacamole * Connects to the current Guacamole connection, attaching a new Guacamole
* client to the user interface. If a Guacamole client is already attached, * client to the user interface. If a Guacamole client is already attached,

9
guacamole/src/main/webapp/app/client/services/clientProperties.js
View File

@@ -68,6 +68,15 @@ angular.module('client').factory('clientProperties', [function clientProperties(
* @type Boolean * @type Boolean
*/ */
this.keyboardEnabled = true; this.keyboardEnabled = true;
/**
* Whether translation of touch to mouse events should emulate an
* absolute pointer device, or a relative pointer device.
*
* @type Boolean
*/
this.emulateAbsoluteMouse = true;
}; };
}]); }]);

10
guacamole/src/main/webapp/app/client/templates/client.html
View File

@@ -55,20 +55,20 @@
<!-- No IME --> <!-- No IME -->
<div class="choice"> <div class="choice">
<label><input name="input-method" type="radio" value="ime-none" checked="checked" id="ime-none"/> {{'client.none' | translate}}</label> <label><input name="input-method" ng-change="closeMenu()" type="radio" value="ime-none" checked="checked" id="ime-none"/> {{'client.none' | translate}}</label>
<p class="caption"><label for="ime-none">{{'client.noneDesc' | translate}}</label></p> <p class="caption"><label for="ime-none">{{'client.noneDesc' | translate}}</label></p>
</div> </div>
<!-- Text input --> <!-- Text input -->
<div class="choice"> <div class="choice">
<div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div> <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
<label><input name="input-method" type="radio" value="ime-text" id="ime-text"/> {{'client.textInput' | translate}}</label> <label><input name="input-method" ng-change="closeMenu()" type="radio" value="ime-text" id="ime-text"/> {{'client.textInput' | translate}}</label>
<p class="caption"><label for="ime-text">{{'client.textInputDesc' | translate}} </label></p> <p class="caption"><label for="ime-text">{{'client.textInputDesc' | translate}} </label></p>
</div> </div>
<!-- Guac OSK --> <!-- Guac OSK -->
<div class="choice"> <div class="choice">
<label><input name="input-method" type="radio" value="ime-osk" id="ime-osk"/> {{'client.osk' | translate}}</label> <label><input name="input-method" ng-change="closeMenu()" type="radio" value="ime-osk" id="ime-osk"/> {{'client.osk' | translate}}</label>
<p class="caption"><label for="ime-osk">{{'client.oskDesc' | translate}}</label></p> <p class="caption"><label for="ime-osk">{{'client.oskDesc' | translate}}</label></p>
</div> </div>
@@ -80,7 +80,7 @@
<!-- Touchscreen --> <!-- Touchscreen -->
<div class="choice"> <div class="choice">
<input name="mouse-mode" type="radio" value="absolute" checked="checked" id="absolute"/> <input name="mouse-mode" ng-change="closeMenu()" ng-model="clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
<div class="figure"> <div class="figure">
<label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'client.touchscreen' | translate}}"/></label> <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'client.touchscreen' | translate}}"/></label>
<p class="caption"><label for="absolute">{{'client.touchscreenDesc' | translate}}</label></p> <p class="caption"><label for="absolute">{{'client.touchscreenDesc' | translate}}</label></p>
@@ -89,7 +89,7 @@
<!-- Touchpad --> <!-- Touchpad -->
<div class="choice"> <div class="choice">
<input name="mouse-mode" type="radio" value="relative" id="relative"/> <input name="mouse-mode" ng-change="closeMenu()" ng-model="clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
<div class="figure"> <div class="figure">
<label for="relative"><img src="images/settings/touchpad.png" alt="{{'client.touchpad' | translate}}"/></label> <label for="relative"><img src="images/settings/touchpad.png" alt="{{'client.touchpad' | translate}}"/></label>
<p class="caption"><label for="relative">{{'client.touchpadDesc' | translate}}</label></p> <p class="caption"><label for="relative">{{'client.touchpadDesc' | translate}}</label></p>