Mouse event abstraction is provided by the Guacamole.Mouse object. Given an arbitrary DOM element, Guacamole.Mouse triggers onmousedown, onmousemove, and onmouseup events which are consistent across browsers. This object only response. to true mouse events. Mouse events which are actually the result of touch events are ignored.

var element = document.getElementById("some-arbitrary-id");
var mouse = new Guacamole.Mouse(element);

mouse.onmousedown =
mouse.onmousemove =
mouse.onmouseup   = function(state) {

    // Do something with the mouse state received ...

};

The handles of each event are given an instance of Guacamole.Mouse.State which represents the current state of the mouse, containing the state of each button (including the scroll wheel) as well as the X and Y coordinates of the pointer in pixels.

Touch event abstraction is provided by either Guacamole.Touchpad (emulates a touchpad to generate artificial mouse events) or Guacamole.Touchscreen (emulates a touchscreen, again generating artificial mouse events). Guacamole uses the touchpad emulation, as this provides the most flexibility and mouse-like features, including scrollwheel and clicking with different buttons, but your preferences may differ.

var element = document.getElementById("some-arbitrary-id");
var touch = new Guacamole.Touchpad(element); // or Guacamole.Touchscreen

touch.onmousedown =
touch.onmousemove =
touch.onmouseup   = function(state) {

    // Do something with the mouse state received ...

};

Note that even though these objects are touch-specific, they still provide mouse events. The state object given to the event handlers of each event is still an instance of Guacamole.Mouse.State.

Ultimately, you could assign the same event handler to all the events of both an instance of Guacamole.Mouse as well as Guacamole.Touchscreen or Guacamole.Touchpad, and you would magically gain mouse and touch support. This support, being driven by the needs of remote desktop, is naturally geared around the mouse and providing a reasonable means of interacting with it. For an actual mouse, events are translated simply and literally, while touch events go through additional emulation and heuristics. From the perspective of the user and the code, this is all transparent.

Keyboard events in Guacamole are abstracted with the Guacamole.Keyboard object as only keyup and keydown events; there is no keypress like there is in JavaScript. Further, all the craziness of keycodes vs. scancodes vs. key identifiers normally present across browsers is abstracted away. All your event handlers will see is an X11 keysym, which represent every key unambiguously. Conveniently, X11 keysyms are also what the Guacamole protocol requires, so if you want to use Guacamole.Keyboard to drive key events sent over the Guacamole protocol, everything can be connected directly.

Just like the other input abstraction objects, Guacamole.Keyboard requires a DOM element as an event target. Only key events directed at this element will be handled.

var keyboard = new Guacamole.Keyboard(document);

keyboard.onkeydown = function(keysym) {
    // Do something ...
};

keyboard.onkeyup = function(keysym) {
    // Do something ...
};

In this case, we are using document as the event target, thus receiving all key events while the browser window (or tab) has focus.

The keyboard layout XML included in the Guacamole web application would be a good place to start regarding how these layout files are written, but in general, the keyboard is simply a set of rows or columns, denoted with <row> and <column> tags respectively, where each can be nested within the other as desired.

Each key is represented with a <key> tag, but this is not what the user sees, nor what generates the key event. Each key contains any number of <cap> tags, which represent the visible part of the key. The cap describes which X11 keysym will be sent when the key is pressed. Each cap can be associated with any combination of arbitrary modifier flags which dictate when that cap is active.

For example:

<keyboard lang="en_US" layout="example" size="5">
    <row>
        <key size="4">
            <cap modifier="shift" keysym="0xFFE1">Shift</cap>
        </key>
        <key>
            <cap>a</cap>
            <cap if="shift">A</cap>
        </key>
    </row>
</keyboard>

Here we have a very simple keyboard which defines only two keys: "shift" (a modifier) and the letter "a". When "shift" is pressed, it sets the "shift" modifier, affecting other keys in the keyboard. The "a" key has two caps: one lowercase (the default) and one uppercase (which requires the shift modifier to be active).

Notice that the shift key needed the keysym explicitly specified, while the "a" key did not. This is because the on-screen keyboard will automatically derive the correct keysym from the text of the key cap if the text contains only a single character.

Once you have a keyboard layout available, adding an on-screen keyboard to your application is simple:

// Add keyboard to body
var keyboard = new Guacamole.OnScreenKeyboard("path/to/layout.xml");
document.body.appendChild(keyboard.getElement());

// Set size of keyboard to 100 pixels
keyboard.resize(100);

Here, we have explicitly specified the width of the keyboard as 100 pixels. Normally, you would determine this by inspecting the width of the containing component, or by deciding on a reasonable width beforehand. Once the width is given, the height of the keyboard is determined based on the arrangement of each row.

While the Guacamole.OnScreenKeyboard object will handle most of the layout, you will still need to style everything yourself with CSS to get the elements to render properly and the keys to change state when clicked or activated. It defines several CSS classes, which you will need to manually style to get things looking as desired:

Key events generated by the on-screen keyboard are identical to those of Guacamole.Keyboard in that they consist only of a single X11 keysym. Only keyup and keydown events exist, as before; there is no keypress event.

// Assuming we have an instance of Guacamole.OnScreenKeyboard already
// called "keyboard"

keyboard.onkeydown = function(keysym) {
    // Do something ...
};

keyboard.onkeyup = function(keysym) {
    // Do something ...
};