Implement XVP extension UI

include/base.css

@@ -191,6 +191,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

@@ -84,6 +84,7 @@ start: function(callback) {
 
     UI.rfb = RFB({'target': $D('noVNC_canvas'),
                   'onUpdateState': UI.updateState,
+                  'onXvpInit': UI.updateXvpVisualState,
                   'onClipboard': UI.clipReceive,
                   'onDesktopName': UI.updateDocumentTitle});
     UI.updateVisualState();
@@ -159,8 +160,12 @@ addMouseHandlers: function() {
     $D("keyboardinput").onblur = UI.keyInputBlur;
 
     $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;
@@ -277,6 +282,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
@@ -294,6 +332,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";
@@ -324,6 +366,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) {
@@ -388,6 +434,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;
@@ -441,6 +491,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;
 
@@ -538,6 +600,7 @@ updateVisualState: function() {
         $D('clipboardButton').style.display = "none";
         $D('showKeyboard').style.display = "none";
         $D('sendCtrlAltDelButton').style.display = "none";
+        UI.updateXvpVisualState(0);
     }
     // State change disables viewport dragging.
     // It is enabled (toggled) by direct click on the button
@@ -560,6 +623,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

@@ -72,12 +72,15 @@
         </div>
 
         <div id="noVNC_status">Loading</div>
-
+e
         <!--noVNC Buttons-->
         <div class="noVNC-buttons-right">
             <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" />
@@ -121,6 +124,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">