Implement XVP UI in HTML
This commit is contained in:
parent
438980d233
commit
f88be9bb04
BIN
images/power.png
Normal file
BIN
images/power.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 390 B |
@ -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;
|
||||
|
@ -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) {
|
||||
|
12
vnc.html
12
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">
|
||||
|
@ -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);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user