Implement XVP UI in HTML

This commit is contained in:
Malcolm Scott 2013-09-28 19:25:15 +01:00 committed by Solly Ross
parent 438980d233
commit f88be9bb04
5 changed files with 145 additions and 2 deletions

BIN
images/power.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 B

View File

@ -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;

View File

@ -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) {

View File

@ -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">

View File

@ -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);
};