Add CtrlAltDel send button to status bar.

Some default_controls.js jslinting.

Needs to be some modularity between controls you probably always want
(like sending CtrlAltDel) and how the interface is presented and
controlled.

include/black.css

@@ -45,11 +45,29 @@ body {
     width: 100px;
 }
 
-#VNC_status {
-  padding: 1em;
-  font-weight: bold;
-  text-align: center;
+#VNC_status_bar td {
+    padding: 0px;
+    margin: 0px;
 }
+#VNC_status_bar div {
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    margin: 0px;
+    padding: 1em;
+}
+#VNC_status_bar input {
+    font-size: 10px;
+    margin: 0px;
+    padding: 0px;
+}
+#VNC_status {
+    text-align: center;
+}
+#VNC_buttons {
+    text-align: right;
+}
+
 .VNC_status_normal {
   color: #fff;
 }

include/default_controls.js

@@ -6,20 +6,20 @@
  * See README.md for usage and integration instructions.
  */
 "use strict";
+/*global console, $, RFB, Canvas, VNC_uri_prefix, Element, Fx */
 
 // Load mootools
 (function () {
-    var prefix = (typeof VNC_uri_prefix !== "undefined") ?
+    var pre = (typeof VNC_uri_prefix !== "undefined") ?
                            VNC_uri_prefix : "include/";
-    document.write("<script src='" + prefix +
-                   "mootools.js'><\/script>");
+    document.write("<script src='" + pre + "mootools.js'><\/script>");
 }());
 
 
-DefaultControls = {
+var DefaultControls = {
 
 load: function(target) {
-    var url;
+    var url, html;
 
     /* Handle state updates */
     RFB.setUpdateState(DefaultControls.updateState);
@@ -44,7 +44,14 @@ load: function(target) {
     html += '  </ul>';
     html += '</div>';
     html += '<div id="VNC_screen">';
-    html += '  <div id="VNC_status">Loading</div>';
+    html += '  <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">';
+    html += '    <table border=0 width=100%><tr>';
+    html += '      <td><div id="VNC_status">Loading</div></td>';
+    html += '      <td width=10%><div id="VNC_buttons">';
+    html += '        <input type=button value="Send CtrlAltDel"';
+    html += '          onclick="DefaultControls.sendCtrlAltDel();"></div></td>';
+    html += '    </tr></table>';
+    html += '  </div>';
     html += '  <canvas id="VNC_canvas" width="640px" height="20px">';
     html += '      Canvas not supported.';
     html += '  </canvas>';
@@ -82,9 +89,14 @@ load: function(target) {
         };
 },
 
+sendCtrlAltDel: function() {
+    RFB.sendCtrlAltDel();
+},
+
 updateState: function(state, msg) {
     var s, c, klass;
     s = $('VNC_status');
+    sb = $('VNC_status_bar');
     c = $('VNC_connect_button');
     switch (state) {
         case 'failed':
@@ -112,6 +124,7 @@ updateState: function(state, msg) {
 
     if (typeof(msg) !== 'undefined') {
         s.setAttribute("class", klass);
+        sb.setAttribute("class", klass);
         s.innerHTML = msg;
     }
 
@@ -125,8 +138,7 @@ connect: function() {
     encrypt = $('VNC_encrypt').checked;
     true_color = $('VNC_true_color').checked;
     if ((!host) || (!port)) {
-        alert("Must set host and port");
-        return;
+        throw("Must set host and port");
     }
 
     RFB.connect(host, port, password, encrypt, true_color);
@@ -162,4 +174,4 @@ clipSend: function() {
     console.log("<< DefaultControls.clipSend");
 }
 
-}
+};

include/plain.css

@@ -26,11 +26,28 @@
     width: 100px;
 }
 
-#VNC_status {
+#VNC_status_bar td {
     margin-top: 15px;
-    text-align: center;
-    /*background: #eee;*/
+    padding: 0px;
+    margin: 0px;
 }
+#VNC_status_bar div {
+    font-size: 12px;
+    margin: 0px;
+    padding: 0px;
+}
+#VNC_status_bar input {
+    font-size: 10px;
+    margin: 0px;
+    padding: 0px;
+}
+#VNC_status {
+    text-align: center;
+}
+#VNC_buttons {
+    text-align: right;
+}
+
 .VNC_status_normal {
     background: #eee;
 }

include/vnc.js

@@ -94,12 +94,38 @@ setCanvasID: function(canvasID) {
     RFB.canvasID = canvasID;
 },
 
-setPassword: function(passwd) {
+sendPassword: function(passwd) {
     RFB.password = passwd;
     RFB.state = "Authentication";
     setTimeout(RFB.init_msg, 1);
 },
 
+sendCtrlAltDel: function() {
+    if (RFB.state !== "normal") { return false; }
+    console.log("Sending Ctrl-Alt-Del");
+    var arr = [];
+    arr = arr.concat(RFB.keyEvent(0xFFE3, 1)); // Control
+    arr = arr.concat(RFB.keyEvent(0xFFE9, 1)); // Alt
+    arr = arr.concat(RFB.keyEvent(0xFFFF, 1)); // Delete
+    arr = arr.concat(RFB.keyEvent(0xFFFF, 0)); // Delete
+    arr = arr.concat(RFB.keyEvent(0xFFE9, 0)); // Alt
+    arr = arr.concat(RFB.keyEvent(0xFFE3, 0)); // Control
+    arr = arr.concat(RFB.fbUpdateRequest(1));
+    RFB.send_array(arr);
+},
+
+sendCtrlC: function() {
+    if (RFB.state !== "normal") { return false; }
+    console.log("Sending Ctrl-C");
+   var arr = [];
+    arr = arr.concat(RFB.keyEvent(0xFFE3, 1)); // Control
+    arr = arr.concat(RFB.keyEvent(67, 1));     // C
+    arr = arr.concat(RFB.keyEvent(67, 0));     // C
+    arr = arr.concat(RFB.keyEvent(0xFFE3, 0)); // Control
+    arr = arr.concat(RFB.fbUpdateRequest(1));
+    RFB.send_array(arr);
+},
+
 load: function () {
     var i;
     //console.log(">> load");

vnc_auto.html

@@ -10,9 +10,16 @@ Connect parameters are provided in query string:
         <link rel="stylesheet" href="include/plain.css">
     </head>
 
-    <body>
+    <body style="margin: 0px;">
         <div id="VNC_screen">
-            <div id="VNC_status" style="margin-top: 0px;">Loading</div>
+            <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">
+                <table border=0 width=100%><tr>
+                    <td><div id="VNC_status">Loading</div></td>
+                    <td width=10%><div id="VNC_buttons">
+                        <input type=button value="Send CtrlAltDel"
+                            onclick="sendCtrlAltDel();"></div></td>
+                </tr></table>
+            </div>
             <canvas id="VNC_canvas" width="640px" height="20px">
                 Canvas not supported.
             </canvas>
@@ -22,12 +29,16 @@ Connect parameters are provided in query string:
     <script src="include/vnc.js"></script>
     <script>
         function setPassword() {
-            RFB.setPassword($('password_input').value);
+            RFB.sendPassword($('password_input').value);
             return false;
         }
+        function sendCtrlAltDel() {
+            RFB.sendCtrlAltDel();
+        }
         function updateState(state, msg) {
-            var s, klass, html;
+            var s, sb, klass, html;
             s = $('VNC_status');
+            sb = $('VNC_status_bar');
             switch (state) {
                 case 'failed':       klass = "VNC_status_error"; break;
                 case 'normal':       klass = "VNC_status_normal"; break;
@@ -36,14 +47,14 @@ Connect parameters are provided in query string:
             }
 
             if (typeof(msg) !== 'undefined') {
-                s.setAttribute("class", klass);
+                sb.setAttribute("class", klass);
                 s.innerHTML = msg;
             }
             if (state === 'password') {
                 html  = '<form onsubmit="return setPassword();"';
                 html += '  style="margin-bottom: 0px">';
                 html += 'Password Required: ';
-                html += '<input type=password size=10 id="password_input">';
+                html += '<input type=password size=10 id="password_input" class="VNC_status">';
                 html += '</form>';
                 s.innerHTML = html;
             }