diff --git a/guacamole/src/main/webapp/images/guac-mono-192.png b/guacamole/src/main/webapp/images/guac-mono-192.png
new file mode 100644
index 000000000..428396041
Binary files /dev/null and b/guacamole/src/main/webapp/images/guac-mono-192.png differ
diff --git a/guacamole/src/main/webapp/index.xhtml b/guacamole/src/main/webapp/index.xhtml
index 5474cd775..c1890d68a 100644
--- a/guacamole/src/main/webapp/index.xhtml
+++ b/guacamole/src/main/webapp/index.xhtml
@@ -52,7 +52,7 @@
- 
+ 
diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js
index bea35fb30..45b2a5f00 100644
--- a/guacamole/src/main/webapp/scripts/interface.js
+++ b/guacamole/src/main/webapp/scripts/interface.js
@@ -734,6 +734,46 @@ GuacamoleUI.attach = function(guac) {
}
+ function updateThumbnail() {
+
+ // Get screenshot
+ var canvas = guac.flatten();
+
+ // Calculate scale of thumbnail (max 320x240, max zoom 100%)
+ var scale = Math.min(
+ 320 / canvas.width,
+ 240 / canvas.height,
+ 1
+ );
+
+ // Create thumbnail canvas
+ var thumbnail = document.createElement("canvas");
+ thumbnail.width = canvas.width*scale;
+ thumbnail.height = canvas.height*scale;
+
+ // Scale screenshot to thumbnail
+ var context = thumbnail.getContext("2d");
+ context.drawImage(canvas,
+ 0, 0, canvas.width, canvas.height,
+ 0, 0, thumbnail.width, thumbnail.height
+ );
+
+ // Get thumbnail set from local storage
+ var thumbnails = {};
+ try {
+ var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
+ if (thumbnail_json)
+ thumbnails = JSON.parse(thumbnail_json);
+ }
+ catch (e) {}
+
+ // Save thumbnail to local storage
+ var id = decodeURIComponent(window.location.search.substring(4));
+ thumbnails[id] = thumbnail.toDataURL();
+ localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
+
+ }
+
// Enable keyboard by default
enableKeyboard();
@@ -781,47 +821,10 @@ GuacamoleUI.attach = function(guac) {
GuacamoleUI.hideStatus();
title_prefix = null;
- if (localStorage) {
- window.setTimeout(function() {
+ // Regularly update screenshot if storage available
+ if (localStorage)
+ window.setInterval(updateThumbnail, 5000);
- // Get screenshot
- var canvas = guac.flatten();
-
- // Calculate scale of thumbnail (max 320x240, max zoom 100%)
- var scale = Math.min(
- 320 / canvas.width,
- 240 / canvas.height,
- 1
- );
-
- // Create thumbnail canvas
- var thumbnail = document.createElement("canvas");
- thumbnail.width = canvas.width*scale;
- thumbnail.height = canvas.height*scale;
-
- // Scale screenshot to thumbnail
- var context = thumbnail.getContext("2d");
- context.drawImage(canvas,
- 0, 0, canvas.width, canvas.height,
- 0, 0, thumbnail.width, thumbnail.height
- );
-
- // Get thumbnail set from local storage
- var thumbnails = {};
- try {
- var thumbnail_json = localStorage.getItem("GUAC_THUMBNAILS");
- if (thumbnail_json)
- thumbnails = JSON.parse(thumbnail_json);
- }
- catch (e) {}
-
- // Save thumbnail to local storage
- var id = decodeURIComponent(window.location.search.substring(4));
- thumbnails[id] = thumbnail.toDataURL();
- localStorage.setItem("GUAC_THUMBNAILS", JSON.stringify(thumbnails));
-
- }, 5000);
- }
break;
// Disconnecting
@@ -862,9 +865,14 @@ GuacamoleUI.attach = function(guac) {
};
- // Disconnect on close
+ // Disconnect and update thumbnail on close
window.onunload = function() {
+
+ if (localStorage)
+ updateThumbnail();
+
guac.disconnect();
+
};
// Send size events on resize
diff --git a/guacamole/src/main/webapp/styles/login.css b/guacamole/src/main/webapp/styles/login.css
index 029522ed0..49e0ae2c9 100644
--- a/guacamole/src/main/webapp/styles/login.css
+++ b/guacamole/src/main/webapp/styles/login.css
@@ -25,7 +25,6 @@ body {
}
div#login-ui {
- background: #BCA;
height: 100%;
width: 100%;
position: fixed;
@@ -76,45 +75,72 @@ div#login-dialog #buttons {
div#login-dialog #buttons input,
div#logout-panel button {
- background: #9A8;
- border: 1px solid #676;
- color: black;
- padding: 0.25em;
+
+ background: #8A6;
+ border: 1px solid rgba(0, 0, 0, 0.4);
+ border-radius: 0.6em;
+
+ color: rgba(255, 255, 255, 0.95);
+ text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
+ font-weight: bold;
+ font-size: 1.125em;
+
+ box-shadow: inset -1px -1px 0.25em rgba(0, 0, 0, 0.25),
+ inset 1px 1px 0.25em rgba(255, 255, 255, 0.25),
+ -1px -1px 0.25em rgba(0, 0, 0, 0.25),
+ 1px 1px 0.25em rgba(255, 255, 255, 0.25);
+
+ padding: 0.35em;
padding-right: 1em;
padding-left: 1em;
+ min-width: 5em;
+
}
div#login-dialog #buttons input:hover,
div#logout-panel button:hover {
- background: #CDB;
- border: 1px solid #9A8;
+ background: #9C7;
}
div#login-dialog #buttons input:active,
div#logout-panel button:active {
- padding-top: 0.35em;
- padding-left: 1.1em;
- padding-bottom: 0.15em;
+ padding-left: 1.1em;
padding-right: 0.9em;
+ padding-top: 0.45em;
+ padding-bottom: 0.25em;
+
+ box-shadow:
+ inset 1px 1px 0.25em rgba(0, 0, 0, 0.25),
+ 1px 1px 0.25em rgba(0, 0, 0, 0.25);
}
div#login-dialog #login-fields {
- background: #CDB;
vertical-align: middle;
padding: 1em;
- border: 1px solid #676;
+ background: #DDD;
+ border: 1px solid #999;
+ border-radius: 0.25em;
}
+div#login-dialog th {
+ text-shadow: 1px 1px white;
+}
+
div#login-dialog #login-fields input {
- border: 1px solid #676;
+ border: 1px solid #777;
+ border-radius: 0.2em;
}
div#login-dialog #login-fields img.logo {
- float: left;
+ position: fixed;
+ margin: 10px;
+ left: 0;
+ bottom: 0;
+ opacity: 0.1;
}
div#version-dialog {