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

Split into client and conn-list UIs, split CSS, stub for login handling and auth.

Browse Source
This commit is contained in:
Michael Jumper
2011-08-10 17:59:14 -07:00
parent b4973d8744
commit e5e34a0367
4 changed files with 479 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
guacamole/src/main/webapp/index.xhtml
View File

@@ -23,9 +23,8 @@
<head>
<link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
<link rel="stylesheet" type="text/css" href="styles/guacamole.css"/>
<link rel="stylesheet" type="text/css" href="styles/keyboard.css"/>
<title>Guacamole</title>
<link rel="stylesheet" type="text/css" href="styles/login.css"/>
<title>Guacamole ${project.version}</title>
</head>
<body>
@@ -69,59 +68,11 @@
</div>
<!-- Main UI - hidden until login succeeds -->
<div id="main-guacamole-ui" style="display: none">
<!-- Menu -->
<div id="menu">
<!-- Clipboard -->
<button id="showClipboard">Show Clipboard</button>
<div id="clipboardDiv">
<h2>Clipboard</h2>
<p>
Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and will be pastable within the remote desktop. Use the textbox below as an interface between the client and server clipboards.
</p>
<textarea rows="10" cols="40" id="clipboard"></textarea>
</div>
<button id="showKeyboard">Show Keyboard</button>
<button id="ctrlAltDelete">Ctrl-Alt-Delete</button>
<!-- Logo and status -->
<img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
<span id="state"></span>
<a href="agpl-3.0-standalone.html"><img id="license" src="images/agpl-logo.png" alt="AGPLv3"/></a>
</div>
<!-- Display -->
<div id="display" class="guac-display guac-loading">
<!-- On-screen keyboard -->
<div id="keyboardContainer"></div>
</div>
<!-- Error Dialog-->
<div id="errorDialog" class="errorDialogOuter">
<div class="errorDialogMiddle">
<div class="errorDialog">
<p id="errorText"></p>
<div class="buttons"><button id="reconnect">Reconnect</button></div>
</div>
</div>
</div>
<div id="connection-list-ui" style="display: none">
<!-- STUB -->
</div>
<!-- Scripts -->
<script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
<script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
<script type="text/javascript" src="guacamole-common-js/layer.js"></script>
<script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
<script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
<script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>
<!-- Init -->
<script type="text/javascript"> /* <![CDATA[ */
@@ -129,6 +80,9 @@
var loginUI = document.getElementById("login-ui");
var display = document.getElementById("display");
// TODO: Get connection list
// On no-auth fail, show login UI
loginForm.onsubmit = function() {
var username = document.getElementById("username");
@@ -138,17 +92,8 @@
"username=" + encodeURIComponent(username.value)
+ "&password=" + encodeURIComponent(password.value)
// Instantiate client
var guac = new Guacamole.Client(
display,
new Guacamole.HTTPTunnel("tunnel")
);
try {
// Connect client
guac.connect(data);
// STUB
}
catch (e) {
@@ -163,244 +108,11 @@
}
// On success, display UI
startGuacamole(guac);
// On success, hide loginUI, get and show connection list.
return false;
}
// Shows guacamole interface and initiates connection to guacamole
function startGuacamole(guac) {
loginUI.style.display = "none";
document.getElementById("main-guacamole-ui").style.display = "block";
var menu = document.getElementById("menu");
var logo = document.getElementById("status-logo");
var errorDialog = document.getElementById("errorDialog");
var errorDialogText = document.getElementById("errorText");
// Position display correctly
window.onresize = function() {
display.style.top = menu.offsetHeight + "px";
};
window.onresize();
var state = document.getElementById("state");
guac.onstatechange = function(clientState) {
switch (clientState) {
case 0:
state.textContent = "Idle."
break;
case 1:
state.textContent = "Connecting...";
break;
case 2:
state.textContent = "Connected, waiting for first update...";
break;
case 3:
display.className = display.className.replace(/guac-loading/, '');
menu.className = "connected";
state.textContent = "Connected.";
break;
case 4:
state.textContent = "Disconnecting...";
break;
case 5:
state.textContent = "Disconnected.";
break;
default:
state.textContent = "Unknown";
}
};
// Cache error image (might not be available when error occurs)
var guacErrorImage = new Image();
guacErrorImage.src = "images/noguacamole-logo-24.png";
guac.onname = function(name) {
document.title = name;
};
guac.onerror = function(error) {
guac.disconnect();
menu.className = "error";
display.className += " guac-error";
logo.src = guacErrorImage.src;
errorDialogText.textContent = error;
errorDialog.style.visibility = "visible";
// Show error by desaturating display
var layers = guac.getLayers();
for (var i=0; i<layers.length; i++) {
layers[i].filter(desaturateFilter);
}
// Filter for desaturation
function desaturateFilter(data, width, height) {
for (var i=0; i<data.length; i+=4) {
// Get RGB values
var r = data[i];
var g = data[i+1];
var b = data[i+2];
// Desaturate
var v = Math.max(r, g, b) / 2;
data[i] = v;
data[i+1] = v;
data[i+2] = v;
}
}
};
// Mouse
var mouse = new Guacamole.Mouse(display);
mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
function(mouseState) {
guac.sendMouseState(mouseState);
};
// Keyboard
var keyboard = new Guacamole.Keyboard(document);
function disableKeyboard() {
keyboard.onkeydown = null;
keyboard.onkeyup = null;
}
function enableKeyboard() {
keyboard.onkeydown =
function (keysym) {
guac.sendKeyEvent(1, keysym);
};
keyboard.onkeyup =
function (keysym) {
guac.sendKeyEvent(0, keysym);
};
}
// Enable keyboard by default
enableKeyboard();
// Reconnect button
var reconnect = document.getElementById("reconnect");
reconnect.onclick = function() {
window.location.reload();
};
// Disconnect on close
window.onunload = function() {
guac.disconnect();
}
// Handle clipboard events
var clipboardElement = document.getElementById("clipboard");
clipboardElement.onchange = function() {
var text = clipboardElement.value;
guac.setClipboard(text);
};
// Ignore keypresses when clipboard is focused
clipboardElement.onfocus = function() {
disableKeyboard();
};
// Capture keypresses when clipboard is not focused
clipboardElement.onblur = function() {
enableKeyboard();
};
// Server copy handler
guac.onclipboard = function(data) {
clipboardElement.value = data;
};
// Show/Hide clipboard
var clipboardDiv = document.getElementById("clipboardDiv");
var showClipboard = document.getElementById("showClipboard");
showClipboard.onclick = function() {
var displayed = clipboardDiv.style.display;
if (displayed != "block") {
clipboardDiv.style.display = "block";
showClipboard.innerHTML = "Hide Clipboard";
}
else {
clipboardDiv.style.display = "none";
showClipboard.innerHTML = "Show Clipboard";
clipboardElement.onchange();
}
};
// Show/Hide keyboard
var keyboardContainer = document.getElementById("keyboardContainer");
var showKeyboard = document.getElementById("showKeyboard");
showKeyboard.onclick = function() {
var displayed = keyboardContainer.style.display;
if (displayed != "block") {
keyboardContainer.style.display = "block";
showKeyboard.textContent = "Hide Keyboard";
}
else {
keyboardContainer.style.display = "none";
showKeyboard.textContent = "Show Keyboard";
}
};
// On-screen keyboard
var osKeyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
keyboardContainer.appendChild(osKeyboard);
osKeyboard.setKeyPressedHandler(
function(keysym) {
guac.sendKeyEvent(1, keysym);
}
);
osKeyboard.setKeyReleasedHandler(
function(keysym) {
guac.sendKeyEvent(0, keysym);
}
);
// Send Ctrl-Alt-Delete
var ctrlAltDelete = document.getElementById("ctrlAltDelete");
ctrlAltDelete.onclick = function() {
var KEYSYM_CTRL = 0xFF03;
var KEYSYM_ALT = 0xFFE9;
var KEYSYM_DELETE = 0xFFFF;
guac.sendKeyEvent(1, KEYSYM_CTRL);
guac.sendKeyEvent(1, KEYSYM_ALT);
guac.sendKeyEvent(1, KEYSYM_DELETE);
guac.sendKeyEvent(0, KEYSYM_DELETE);
guac.sendKeyEvent(0, KEYSYM_ALT);
guac.sendKeyEvent(0, KEYSYM_CTRL);
}
}
/* ]]> */ </script>
</body>