New, fancy connection UI.

guacamole/src/main/webapp/index.xhtml

@@ -71,22 +71,14 @@
             <div id="logout-panel">
                 <button id="logout">Logout</button>
             </div>
-            
+           
-            <h1>
+            <h2>Recent Connections</h2>
-                <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
+            <div id="recent-connections">
-                Available Connections
+            </div>
-            </h1>
+
-            
+            <h2>Other Connections</h2>
-            <table class="connections">
+            <div id="other-connections">
-                <thead>
+            </div>
-                    <tr>
-                        <th class="protocol"> </th>
-                        <th class="name">Name</th>
-                    </tr>
-                </thead>
-                <tbody id="connections-tbody">
-                </tbody>
-            </table>
 
         </div>
 
@@ -139,40 +131,75 @@
                 }
 
                 // Remove all rows from connections list
-                var tbody = document.getElementById("connections-tbody");
+                var recent_connections = document.getElementById("recent-connections");
-                tbody.innerHTML = "";
+                var other_connections = document.getElementById("other-connections");
                 
-                // Add one row per connection
+                // Get thumbnail set from local storage
+                var thumbnails = {};
+                try {
+                    thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS"));
+                }
+                catch (e) {
+                }
+                for (var test in thumbnails)
+                    console.log(test);
+
+                // Add connection icons
                 for (var i=0; i<configs.length; i++) {
 
-                    // Create row and cells
+                    // Create connection display elements
-                    var tr = document.createElement("tr");
+                    var connection = document.createElement("div");
-                    var protocol = document.createElement("td");
+                    connection.className = "connection";
-                    var id = document.createElement("td");
 
-                    var protocolIcon = document.createElement("div");
+                    var caption = document.createElement("div");
-                    protocolIcon.className = "protocol icon " + configs[i].protocol;
+                    caption.className = "caption";
 
-                    // Set CSS
+                    var protocol = document.createElement("div");
                     protocol.className = "protocol";
+
+                    var id = document.createElement("span");
                     id.className = "name";
 
-                    // Create link to client
+                    var protocolIcon = document.createElement("div");
-                    var clientLink = document.createElement("a");
+                    protocolIcon.className = "icon " + configs[i].protocol;
-                    clientLink.setAttribute("href", getClientURL(configs[i].id));
 
-                    // Set cell contents
+                    var thumbnail = document.createElement("div");
+                    thumbnail.className = "thumbnail";
+
+                    // Create link to client
+                    var url = getClientURL(configs[i].id)
+                    var clientLink = document.createElement("a");
+                    clientLink.setAttribute("href", url);
+
+                    connection.onclick = function() {
+                        window.location = url;
+                    };
+                    
                     protocol.appendChild(protocolIcon);
-                    //protocol.textContent   = configs[i].protocol;
+
                     clientLink.textContent = configs[i].id;
                     id.appendChild(clientLink);
 
-                    // Add cells
+                    // Assemble caption
-                    tr.appendChild(protocol);
+                    caption.appendChild(protocol);
-                    tr.appendChild(id);
+                    caption.appendChild(id);
 
-                    // Add row
+                    // Assemble connection icon
-                    tbody.appendChild(tr);
+                    connection.appendChild(thumbnail);
+                    connection.appendChild(caption);
+
+                    // Add screenshot if available
+                    var thumbnail_url = thumbnails[configs[i].id];
+                    if (thumbnail_url) {
+
+                        var img = document.createElement("img");
+                        img.src = thumbnail_url;
+                        thumbnail.appendChild(img);
+
+                        recent_connections.appendChild(connection);
+                    }
+                    else
+                        other_connections.appendChild(connection);
 
                 }
 

guacamole/src/main/webapp/scripts/interface.js

@@ -777,8 +777,49 @@ GuacamoleUI.attach = function(guac) {
 
             // Connected
             case 3:
+
                 GuacamoleUI.hideStatus();
                 title_prefix = null;
+
+                window.setTimeout(function() {
+
+                    // 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 {
+                        thumbnails = JSON.parse(localStorage.getItem("GUAC_THUMBNAILS"));
+                    }
+                    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

guacamole/src/main/webapp/styles/login.css

@@ -18,8 +18,8 @@
  */
 
 body {
-    background: gray;
+    background: #EEE;
-    font-family: sans-serif;
+    font-family: FreeSans, Helvetica, Arial, sans-serif;
     padding: 0;
     margin: 0;
 }
@@ -140,10 +140,6 @@ img#license {
     margin: 2px;
 }
 
-div#connection-list-ui {
-    background: #BCA;
-}
-
 div#connection-list-ui table {
     width: 100%;
     border-collapse: collapse;
@@ -214,22 +210,100 @@ div#logout-panel {
     float: right;
 }
 
-div#connection-list-ui a[href] {
+div#connection-list-ui h2 {
+
+    padding: 0.5em;
+    margin: 0;
+    font-size: 1.5em;
+
+    font-weight: lighter;
+    text-shadow: 1px 1px white;
+
+    border-top: 1px solid #AAA;
+    border-bottom: 1px solid #AAA;
+    background: #DDD;
+    
+}
+
+div#recent-connections {
+    margin: 1em;
+    margin-top: 0;
+    text-align: center;
+    min-height: 240px;
+}
+
+div#recent-connections div.connection {
+    border-radius: 0.5em;
+    display: inline-block;
+    padding: 1em;
+    margin: 1em;
+    text-align: center;
+}
+
+.connection {
+    cursor: pointer;
+}
+
+.connection:hover {
+    background: #CDA;
+}
+
+.connection .name a[href] {
     text-decoration: none;
-    color: blue;
+    color: black;
+    font-weight: normal;
+    padding: 0.1em;
 }
 
-div#connection-list-ui a[href]:hover {
+.connection .thumbnail {
-    text-decoration: underline;
+    margin: 0.5em;
 }
 
-.protocol.icon {
+.connection .thumbnail img {
+    border: 1px solid black;
+    box-shadow: 1px 1px 5px black;
+}
+
+div#other-connections {
+    margin: 0;
+    padding: 1em;
+}
+
+div#other-connections .connection {
+    display: block;
+    text-align: left;
+}
+
+div#other-connections .connection .thumbnail {
+    display: none;
+}
+
+div#other-connections .connection {
+    padding: 0.1em;
+}
+
+.protocol {
+    display: inline-block;
+}
+
+.protocol .icon {
     width: 24px;
     height: 24px;
     background-image: url('../images/protocol-icons/tango/video-display.png');
 }
 
-.protocol.icon.ssh {
+.protocol .icon.ssh {
     background-image: url('../images/protocol-icons/tango/terminal.png');
 }
 
+div#recent-connections .protocol {
+    display: none;
+}
+
+.caption * {
+    vertical-align: middle;
+}
+
+.caption .name {
+    margin-left: 0.25em;
+}