Implement XVP UI in HTML

include/base.css

@@ -49,12 +49,19 @@ html {
   float:right;
 }
 
+#noVNC_buttons {
+  white-space: nowrap;
+}
+
 #noVNC_view_drag_button {
   display: none;
 }
 #sendCtrlAltDelButton {
   display: none;
 }
+#noVNC_xvp_buttons {
+  display: none;
+}
 #noVNC_mobile_buttons {
   display: none;
 }
@@ -196,6 +203,16 @@ html {
   border-radius:10px;
 }
 
+#noVNC_xvp {
+  display:none;
+  margin-top:73px;
+  right:30px;
+  position:fixed;
+}
+#noVNC_xvp.top:after {
+  right:125px;
+}
+
 #noVNC_clipboard {
   display:none;
   margin-top:73px;

include/ui.js

@@ -91,6 +91,7 @@ start: function(callback) {
 
     UI.rfb = RFB({'target': $D('noVNC_canvas'),
                   'onUpdateState': UI.updateState,
+                  'onXvpInit': UI.updateXvpVisualState,
                   'onClipboard': UI.clipReceive,
                   'onDesktopName': UI.updateDocumentTitle});
 
@@ -184,8 +185,12 @@ addMouseHandlers: function() {
     $D("sendEscButton").onclick = UI.sendEsc;
 
     $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
+    $D("xvpShutdownButton").onclick = UI.xvpShutdown;
+    $D("xvpRebootButton").onclick = UI.xvpReboot;
+    $D("xvpResetButton").onclick = UI.xvpReset;
     $D("noVNC_status").onclick = UI.togglePopupStatusPanel;
     $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
+    $D("xvpButton").onclick = UI.toggleXvpPanel;
     $D("clipboardButton").onclick = UI.toggleClipboardPanel;
     $D("settingsButton").onclick = UI.toggleSettingsPanel;
     $D("connectButton").onclick = UI.toggleConnectPanel;
@@ -302,6 +307,39 @@ togglePopupStatusPanel: function() {
     }
 },
 
+// Show the XVP panel
+toggleXvpPanel: function() {
+    // Close the description panel
+    $D('noVNC_description').style.display = "none";
+    // Close settings if open
+    if (UI.settingsOpen === true) {
+        UI.settingsApply();
+        UI.closeSettingsMenu();
+    }
+    // Close connection settings if open
+    if (UI.connSettingsOpen === true) {
+        UI.toggleConnectPanel();
+    }
+    // Close popup status panel if open
+    if (UI.popupStatusOpen === true) {
+        UI.togglePopupStatusPanel();
+    }
+    // Close clipboard panel if open
+    if (UI.clipboardOpen === true) {
+        UI.toggleClipboardPanel();
+    }
+    // Toggle XVP panel
+    if (UI.xvpOpen === true) {
+        $D('noVNC_xvp').style.display = "none";
+        $D('xvpButton').className = "noVNC_status_button";
+        UI.xvpOpen = false;
+    } else {
+        $D('noVNC_xvp').style.display = "block";
+        $D('xvpButton').className = "noVNC_status_button_selected";
+        UI.xvpOpen = true;
+    }
+},
+
 // Show the clipboard panel
 toggleClipboardPanel: function() {
     // Close the description panel
@@ -319,6 +357,10 @@ toggleClipboardPanel: function() {
     if (UI.popupStatusOpen === true) {
         UI.togglePopupStatusPanel();
     }
+    // Close XVP panel if open
+    if (UI.xvpOpen === true) {
+        UI.toggleXvpPanel();
+    }
     // Toggle Clipboard Panel
     if (UI.clipboardOpen === true) {
         $D('noVNC_clipboard').style.display = "none";
@@ -349,6 +391,10 @@ toggleConnectPanel: function() {
     if (UI.popupStatusOpen === true) {
         UI.togglePopupStatusPanel();
     }
+    // Close XVP panel if open
+    if (UI.xvpOpen === true) {
+        UI.toggleXvpPanel();
+    }
 
     // Toggle Connection Panel
     if (UI.connSettingsOpen === true) {
@@ -412,6 +458,10 @@ openSettingsMenu: function() {
     if (UI.popupStatusOpen === true) {
         UI.togglePopupStatusPanel();
     }
+    // Close XVP panel if open
+    if (UI.xvpOpen === true) {
+        UI.toggleXvpPanel();
+    }
     $D('noVNC_settings').style.display = "block";
     $D('settingsButton').className = "noVNC_status_button_selected";
     UI.settingsOpen = true;
@@ -464,6 +514,18 @@ sendCtrlAltDel: function() {
     UI.rfb.sendCtrlAltDel();
 },
 
+xvpShutdown: function() {
+    UI.rfb.xvpShutdown();
+},
+
+xvpReboot: function() {
+    UI.rfb.xvpReboot();
+},
+
+xvpReset: function() {
+    UI.rfb.xvpReset();
+},
+
 setMouseButton: function(num) {
     var b, blist = [0, 1,2,4], button;
 
@@ -562,6 +624,7 @@ updateVisualState: function() {
         $D('showKeyboard').style.display = "none";
         $D('noVNC_extra_keys').style.display = "none";
         $D('sendCtrlAltDelButton').style.display = "none";
+        UI.updateXvpVisualState(0);
     }
     
     // State change disables viewport dragging.
@@ -585,6 +648,19 @@ updateVisualState: function() {
     //Util.Debug("<< updateVisualState");
 },
 
+// Disable/enable XVP button
+updateXvpVisualState: function(ver) {
+    if (ver >= 1) {
+        $D('xvpButton').style.display = 'inline';
+    } else {
+        $D('xvpButton').style.display = 'none';
+        // Close XVP panel if open
+        if (UI.xvpOpen === true) {
+            UI.toggleXvpPanel();
+        }
+    }
+},
+
 
 // Display the desktop name in the document title
 updateDocumentTitle: function(rfb, name) {

vnc.html

@@ -95,6 +95,9 @@
             <input type="image" src="images/ctrlaltdel.png"
                  id="sendCtrlAltDelButton" class="noVNC_status_button"
                 title="Send Ctrl-Alt-Del" />
+            <input type="image" src="images/power.png"
+                id="xvpButton" class="noVNC_status_button"
+                title="Shutdown/Reboot..." />
             <input type="image" src="images/clipboard.png"
                 id="clipboardButton" class="noVNC_status_button"
                 title="Clipboard" />
@@ -138,6 +141,15 @@
                 value="Clear">
         </div>
 
+        <!-- XVP Shutdown/Reboot Panel -->
+        <div id="noVNC_xvp" class="triangle-right top">
+            <span id="noVNC_xvp_menu">
+                <input type="button" id="xvpShutdownButton" value="Shutdown" />
+                <input type="button" id="xvpRebootButton" value="Reboot" />
+                <input type="button" id="xvpResetButton" value="Reset" />
+            </span>
+        </div>
+
         <!-- Settings Panel -->
         <div id="noVNC_settings" class="triangle-right top">
             <span id="noVNC_settings_menu">

vnc_auto.html

@@ -53,6 +53,14 @@
                     <td width="1%"><div id="noVNC_buttons">
                         <input type=button value="Send CtrlAltDel"
                             id="sendCtrlAltDelButton">
+                        <span id="noVNC_xvp_buttons">
+                        <input type=button value="Shutdown"
+                            id="xvpShutdownButton">
+                        <input type=button value="Reboot"
+                            id="xvpRebootButton">
+                        <input type=button value="Reset"
+                            id="xvpResetButton">
+                        </span>
                             </div></td>
                 </tr></table>
             </div>
@@ -91,6 +99,18 @@
             rfb.sendCtrlAltDel();
             return false;
         }
+        function xvpShutdown() {
+            rfb.xvpShutdown();
+            return false;
+        }
+        function xvpReboot() {
+            rfb.xvpReboot();
+            return false;
+        }
+        function xvpReset() {
+            rfb.xvpReset();
+            return false;
+        }
         function updateState(rfb, state, oldstate, msg) {
             var s, sb, cad, level;
             s = $D('noVNC_status');
@@ -105,8 +125,12 @@
                 default:             level = "warn";   break;
             }
 
-            if (state === "normal") { cad.disabled = false; }
-            else                    { cad.disabled = true; }
+            if (state === "normal") {
+                cad.disabled = false;
+            } else {
+                cad.disabled = true;
+                xvpInit(0);
+            }
 
             if (typeof(msg) !== 'undefined') {
                 sb.setAttribute("class", "noVNC_status_" + level);
@@ -114,11 +138,24 @@
             }
         }
 
+        function xvpInit(ver) {
+            var xvpbuttons;
+            xvpbuttons = $D('noVNC_xvp_buttons');
+            if (ver >= 1) {
+                xvpbuttons.style.display = 'inline';
+            } else {
+                xvpbuttons.style.display = 'none';
+            }
+        }
+
         window.onscriptsload = function () {
             var host, port, password, path, token;
 
             $D('sendCtrlAltDelButton').style.display = "inline";
             $D('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
+            $D('xvpShutdownButton').onclick = xvpShutdown;
+            $D('xvpRebootButton').onclick = xvpReboot;
+            $D('xvpResetButton').onclick = xvpReset;
 
             WebUtil.init_logging(WebUtil.getQueryVar('logging', 'warn'));
             document.title = unescape(WebUtil.getQueryVar('title', 'noVNC'));
@@ -162,6 +199,7 @@
                            'shared':       WebUtil.getQueryVar('shared', true),
                            'view_only':    WebUtil.getQueryVar('view_only', false),
                            'updateState':  updateState,
+                           'onXvpInit':    xvpInit,
                            'onPasswordRequired':  passwordRequired});
             rfb.connect(host, port, password, path);
         };