Tutorial: Add quick keyboard shortcut buttons

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Tutorial: Add quick keyboard shortcut buttons

Al Gore
This post has NOT been accepted by the mailing list yet.
This post was updated on .
Hello,

I'll start by thanking the developers who provide this fantastic product to the public for free! Thanks!

I just wanted to add a quick tutorial on how to add common keyboard shortcuts to your menu. Opening the on screen keyboard every time I want to send a ctrl-alt-del or similar does not seem efficient. It is really simple to add this functionality to the source.

Disclaimer: I am an Angular amateur. I'm sure there's a better way of doing this. Please let me know if there is!

First, I recommend this guide to download the source and get the Maven packager on your machine (skip the parts involving MySQL if you don't use it of course):
http://www.cb-net.co.uk/linux/guacamole-0-9-10-automated-install-with-mysql-on-debian-8-6/

Once you have the source code and Maven, simply open up incubator-guacamole-client/src/main/webapp/app/index/controllers/indexController.js and add the following items:

1. At the top (line 26) under the comment "Required Services" add this variable:


var $rootScope   = $injector.get('$rootScope');

It should look like this now:

var $document = $injector.get('$document');
var $window = $injector.get('$window');
var clipboardService = $injector.get('clipboardService');
var guacNotification = $injector.get('guacNotification');
var $rootScope = $injector.get('$rootScope');


2. Somewhere in all of the function definitions (I chose line 130 between the $window.onblur and checkClipboard functions), add a function like this:


/**
* ctrl alt del function 
*/
$scope.ctrlAltDel = function ctrlAltDel() {
	
	// Broadcast ctrl alt del
	$rootScope.$broadcast('guacSyntheticKeydown', 0xFFE3);
	$rootScope.$broadcast('guacSyntheticKeydown', 0xFFE9);
	$rootScope.$broadcast('guacSyntheticKeydown', 0xFFFF);
	
	$rootScope.$broadcast('guacSyntheticKeyup', 0xFFE3);
	$rootScope.$broadcast('guacSyntheticKeyup', 0xFFE9);
	$rootScope.$broadcast('guacSyntheticKeyup', 0xFFFF);
}

Add functions for all of the shortcuts you wish to use. This uses the same functionality as the OSK to send keystrokes to the client. Each hex value such as 0xFFFF represents a specific character in the form of a keysym. Here is a list of keysym character codes you can use:
http://wiki.linuxquestions.org/wiki/List_of_Keysyms_Recognised_by_Xmodmap


3. (OPTIONAL) open up "incubator-guacamole-client/src/main/webapp/index.html" and add bootstrap for nice buttons


Append the bootstrap style sheet in the head tag by adding the following line somewhere between line 21 and line 30:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Append the bootstrap javascript to the bottom of the file right above the closing "</body>" tag:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

You can find the latest links at:
http://getbootstrap.com/getting-started/

4. Add the links to the menu by adding the following to "incubator-guacamole-client/src/main/webapp/app/client/templates/client.html":


Find the comment  (around line 75 I think, mine is modified). The div with the id of "clipboard-settings" contains the clipboard. I commented this out as I do not use it. You can add the following code above or below the clipboard div to add some quick command buttons:

<div class="menu-section" >
	<h3>Quick Commands</h3>
	<div class="content">
		<p class="description">Send quick keyboard shortcuts to the client machine</p>
		<div class="btn-group" role="group" aria-label="Commands">
		  <button ng-click="ctrlAltDel()" type="button" class="btn btn-default">Ctrl+Alt+Delete</button>
		  <button type="button" class="btn btn-default">Coming soon</button>
		  <button type="button" class="btn btn-default">Coming soon</button>
		</div>
	</div>
</div>

Notice the ng-click="ctrlAltDel()" attribute in the button tag. This will run the angular function you defined in the index controller earlier when clicked. Simply duplicate this on the other buttons with your other function names to send the key events when clicked.

NOTE: the classes on the buttons (btn, btn-default, etc) are from bootstrap, so if you did not add bootstrap, they will be ugly.

5. Finally, package guacamole with Maven and copy the resulting WAR file to $GUACAMOLE_HOME (where ever that is for you, mine is /etc/guacamole/guacamole.war):


cd ~/incubator-guacamole-client
mvn package
cp guacamole/target/guacamole-0.9.10-incubating.war /etc/guacamole/guacamole.war
service tomcat8 restart

Remember to hold down the CTRL key when refreshing your site in the browser to avoid using cached versions of the webpage!

Result: