1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2024-12-24 15:15:22 +00:00

Unified VNC/SPICE console interfaces with bootstrap

This commit is contained in:
Benjamin Renard 2016-04-18 00:25:46 +02:00
parent 2f63d35804
commit 69b955261f
3 changed files with 374 additions and 388 deletions

View file

@ -0,0 +1,127 @@
{% load i18n %}
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css">
<link href="{{ STATIC_URL }}css/webvirtcloud.css" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
background-color: #313131;
}
.navbar {
margin-bottom: 2px;
}
#main_container {
padding: 0;
width: 100%;
max-width: none;
height: 100%;
background-color:#494949;
border-bottom-right-radius: 800px 600px;
}
#main_container canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
margin: auto;
}
#status {
z-index: 10000;
width: 80%;
position: absolute;
top: 5px;
left: 10%;
text-align: center;
}
</style>
{% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">{{ instance.name }}</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Send key(s) <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li onclick='sendCtrlAltDel();'><a href='#'>Ctrl+Alt+Del</a></li>
<li class="divider"></li>
<li onclick='sendCtrlAltFN(0);'><a href='#'>Ctrl+Alt+F1</a></li>
<li onclick='sendCtrlAltFN(1);'><a href='#'>Ctrl+Alt+F2</a></li>
<li onclick='sendCtrlAltFN(2);'><a href='#'>Ctrl+Alt+F3</a></li>
<li onclick='sendCtrlAltFN(3);'><a href='#'>Ctrl+Alt+F4</a></li>
<li onclick='sendCtrlAltFN(4);'><a href='#'>Ctrl+Alt+F5</a></li>
<li onclick='sendCtrlAltFN(5);'><a href='#'>Ctrl+Alt+F6</a></li>
<li onclick='sendCtrlAltFN(6);'><a href='#'>Ctrl+Alt+F7</a></li>
<li onclick='sendCtrlAltFN(7);'><a href='#'>Ctrl+Alt+F8</a></li>
<li onclick='sendCtrlAltFN(8);'><a href='#'>Ctrl+Alt+F9</a></li>
<li onclick='sendCtrlAltFN(9);'><a href='#'>Ctrl+Alt+F10</a></li>
<li onclick='sendCtrlAltFN(10);'><a href='#'>Ctrl+Alt+F11</a></li>
<li onclick='sendCtrlAltFN(11);'><a href='#'>Ctrl+Alt+F12</a></li>
</ul>
</li>
<li onclick='fullscreen()'><a href='#'>{% trans "Fullscreen" %}</a></li>
{% block navbarmenu %}{% endblock %}
</ul>
</div>
</div>
</nav>
<div id='main_container' class="container">
{% block content %}{% endblock %}
</div>
<script src="{{ STATIC_URL }}js/jquery.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script>
function log_message(msg,type) {
var exist=$('#status').is('div');
status_div=$('<div id="status" class="alert alert-'+type+' role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+msg+'</div>');
if (exist) {
$('#status').remove();
$('body').prepend(status_div);
}
else {
status_div.hide();
$('body').prepend(status_div);
status_div.fadeIn(200);
}
if (type!='danger') {
status_div.delay(3000).fadeOut(200);
}
}
function log_error(msg) {
log_message(msg,'danger');
}
function log_info(msg) {
log_message(msg,'info');
}
</script>
{% block foot %}{% endblock %}
</body>
</html>

View file

@ -1,157 +1,43 @@
{% extends "console-base.html" %}
{% load i18n %}
<html>
<head>
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico">
<script src="{{ STATIC_URL }}js/spice-html5/spicearraybuffer.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/enums.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/atKeynames.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/utils.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/png.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/lz.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/quic.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/bitmap.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/spicedataview.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/spicetype.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/spicemsg.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/wire.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/spiceconn.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/display.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/main.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/inputs.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/webm.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/playback.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/simulatecursor.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/cursor.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/thirdparty/jsbn.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/thirdparty/rsa.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/thirdparty/prng4.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/thirdparty/rng.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/thirdparty/sha1.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/ticket.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/resize.js"></script>
<script src="{{ STATIC_URL }}js/spice-html5/filexfer.js"></script>
{% load staticfiles %}
{% block head %}
<script src="{% static "js/spice-html5/spicearraybuffer.js" %}"></script>
<script src="{% static "js/spice-html5/enums.js" %}"></script>
<script src="{% static "js/spice-html5/atKeynames.js" %}"></script>
<script src="{% static "js/spice-html5/utils.js" %}"></script>
<script src="{% static "js/spice-html5/png.js" %}"></script>
<script src="{% static "js/spice-html5/lz.js" %}"></script>
<script src="{% static "js/spice-html5/quic.js" %}"></script>
<script src="{% static "js/spice-html5/bitmap.js" %}"></script>
<script src="{% static "js/spice-html5/spicedataview.js" %}"></script>
<script src="{% static "js/spice-html5/spicetype.js" %}"></script>
<script src="{% static "js/spice-html5/spicemsg.js" %}"></script>
<script src="{% static "js/spice-html5/wire.js" %}"></script>
<script src="{% static "js/spice-html5/spiceconn.js" %}"></script>
<script src="{% static "js/spice-html5/display.js" %}"></script>
<script src="{% static "js/spice-html5/main.js" %}"></script>
<script src="{% static "js/spice-html5/inputs.js" %}"></script>
<script src="{% static "js/spice-html5/webm.js" %}"></script>
<script src="{% static "js/spice-html5/playback.js" %}"></script>
<script src="{% static "js/spice-html5/simulatecursor.js" %}"></script>
<script src="{% static "js/spice-html5/cursor.js" %}"></script>
<script src="{% static "js/spice-html5/thirdparty/jsbn.js" %}"></script>
<script src="{% static "js/spice-html5/thirdparty/rsa.js" %}"></script>
<script src="{% static "js/spice-html5/thirdparty/prng4.js" %}"></script>
<script src="{% static "js/spice-html5/thirdparty/rng.js" %}"></script>
<script src="{% static "js/spice-html5/thirdparty/sha1.js" %}"></script>
<script src="{% static "js/spice-html5/ticket.js" %}"></script>
<script src="{% static "js/spice-html5/resize.js" %}"></script>
<script src="{% static "js/spice-html5/filexfer.js" %}"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: Helvetica;
background-color:#494949;
}
{% endblock %}
#status {
text-align: center;
width: 100%;
margin: 0;
font-size: 1em;
height: 1.6em;
padding-top: 0.3em;
background-color: #222;
}
#spice-area {
border-bottom-right-radius: 800px 600px;
background-color: #313131;
height: 100%;
}
#spice-screen canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
#spice-menu {
list-style-type: none;
margin: 0px;
padding: 0px;
border: 0px none;
position: absolute;
top: 0px;
z-index: 100;
}
#spice-menu li {
width: auto;
float: left;
margin: 2px;
padding: 0px;
border: 0px none;
position: relative;
height: 18px;
cursor: pointer;
padding: 0.2em;
background: #eee;
border-radius: 3px;
}
#spice-menu .spice-submenu {
display: none;
opacity: 0;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
position: absolute;
}
#spice-menu .spice-submenu li {
float: none;
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid white;
border-right: 1px solid white;
font: normal 14px sans-serif;
z-index: 100;
white-space: nowrap;
min-width: 100px;
padding: 0.2em;
border-radius: 0;
}
#spice-menu li:hover > .spice-submenu {
opacity: 1;
display: block;
margin: 2px 0 0 -2px;
}
#spice-menu li:hover > .spice-submenu li {
height: auto;
}
</style>
</head>
<body>
<div id="header">
<ul id='spice-menu'>
<li>Send key(s)
<ul class='spice-submenu'>
<li onclick='sendCtrlAltDel();'>Ctrl+Alt+Del</li>
<li onclick='sendCtrlAltFN(0);'>Ctrl+Alt+F1</li>
<li onclick='sendCtrlAltFN(1);'>Ctrl+Alt+F2</li>
<li onclick='sendCtrlAltFN(2);'>Ctrl+Alt+F3</li>
<li onclick='sendCtrlAltFN(3);'>Ctrl+Alt+F4</li>
<li onclick='sendCtrlAltFN(4);'>Ctrl+Alt+F5</li>
<li onclick='sendCtrlAltFN(5);'>Ctrl+Alt+F6</li>
<li onclick='sendCtrlAltFN(6);'>Ctrl+Alt+F7</li>
<li onclick='sendCtrlAltFN(7);'>Ctrl+Alt+F8</li>
<li onclick='sendCtrlAltFN(8);'>Ctrl+Alt+F9</li>
<li onclick='sendCtrlAltFN(9);'>Ctrl+Alt+F10</li>
<li onclick='sendCtrlAltFN(10);'>Ctrl+Alt+F11</li>
<li onclick='sendCtrlAltFN(11);'>Ctrl+Alt+F12</li>
</ul>
</li>
<li onclick='fullscreen()'>Fullscreen</li>
</ul>
<div id="status"></div>
</div>
<div id="spice-area">
<div id="spice-screen" class="spice-screen"></div>
</div>
{% block content %}
<div id='spice_container'></div>
{% endblock %}
{% block foot %}
<script>
var sc;
@ -171,28 +57,6 @@
: defvalue;
}
var status_div=false;
function log_message(msg,color,bgcolor) {
if (!status_div) {
status_div=document.getElementById('status');
}
status_div.innerHTML=msg;
if (color) {
status_div.style.color=color;
}
if (bgcolor) {
status_div.style.backgroundColor=bgcolor;
}
}
function log_error(msg) {
log_message(msg,'#000','#f44');
}
function log_info(msg) {
log_message(msg,'#000','#eee');
}
function spice_error(e)
{
console.log(e);
@ -224,7 +88,7 @@
try
{
sc = new SpiceMainConn({uri: uri, password: password, screen_id: "spice-screen",
sc = new SpiceMainConn({uri: uri, password: password, screen_id: "spice_container",
onsuccess: spice_success, onerror: spice_error, onagent: agent_connected });
}
catch (e)
@ -259,7 +123,6 @@
}
function agent_connected(sc) {
console.log('Connected');
window.addEventListener('resize', handle_resize);
window.spice_connection = this;
@ -278,7 +141,6 @@
console.log("File API is not supported");
log_info('Drag and drop transfer not supported.');
}
log_info('Connected');
}
function sendCtrlAltFN(f) {
@ -306,7 +168,7 @@
}
function fullscreen() {
var screen=document.getElementById('spice-screen');
var screen=document.getElementById('spice_container');
if(screen.requestFullscreen) {
screen.requestFullscreen();
} else if(screen.mozRequestFullScreen) {
@ -329,5 +191,4 @@
log_info('Connecting ...');
connect(uri,password);
</script>
</body>
</html>
{% endblock %}

View file

@ -1,26 +1,23 @@
{% extends "console-base.html" %}
{% load i18n %}
<html>
<head>
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico">
<link rel="stylesheet" href="{{ STATIC_URL }}js/novnc/base.css" title="plain">
<!--
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
-->
<script src="{{ STATIC_URL }}js/novnc/util.js"></script>
</head>
<body style="margin: 0px;">
<div id="noVNC_screen">
<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
<table border=0 width="100%">
<tr>
<td>
<div id="noVNC_status">{% trans "Loading..." %}</div>
</td>
<td width="32%" style="text-align:right;">
<div id="noVNC_buttons">
{% load staticfiles %}
{% block head %}
<script src="{% static "js/novnc/util.js" %}"></script>
{% endblock %}
{% block navbarmenu %}
<!-- dirty fix for keyboard on iOS devices -->
<input type="button" id="showKeyboard" value="Keyboard" title="Show Keyboard"/>
<li id="showKeyboard"><a href='#'>{% trans "Show Keyboad" %}</a></li>
{% endblock %}
{% block content %}
<div id='noVNC_area'>
<canvas id="noVNC_canvas" width="640px" height="20px">
{% trans "Canvas not supported." %}
</canvas>
</div>
<!-- Note that Google Chrome on Android doesn't respect any of these,
html attributes which attempt to disable text suggestions on the
on-screen keyboard. Let's hope Chrome implements the ime-mode
@ -29,20 +26,12 @@
<textarea id="keyboardinput" autocapitalize="off"
autocorrect="off" autocomplete="off" spellcheck="false"
mozactionhint="Enter" onsubmit="return false;"
style="ime-mode: disabled;">
style="display: none;">
</textarea>
<input type=button value="Ctrl+Alt+Del" id="sendCtrlAltDelButton">
<input type=button value="Fullscreen" id="askFullscreen">
</div>
</td>
</tr>
</table>
</div>
<canvas id="noVNC_canvas" width="640px" height="20px">
{% trans "Canvas not supported." %}
</canvas>
</div>
{% endblock %}
{% block foot %}
<script>
/*jslint white: false */
/*global window, $, Util, RFB, */
@ -60,18 +49,32 @@
var rfb;
function passwordRequired(rfb) {
var msg;
msg = '<form onsubmit="return setPassword();"';
msg += 'role="form"';
msg += ' style="margin-bottom: 0px">';
msg += 'Password Required: ';
msg += '<input type=password size=10 id="password_input" class="noVNC_status">';
msg += '<\/form>';
$D('noVNC_status_bar').setAttribute("class", "noVNC_status_warn");
$D('noVNC_status').innerHTML = msg;
var modal;
modal = '<div class="modal fade">';
modal += ' <div class="modal-dialog">';
modal += ' <div class="modal-content">';
modal += ' <div class="modal-header">';
modal += ' <h4 class="modal-title">{% trans "Password required" %}</h4>';
modal += ' </div>';
modal += ' <div class="modal-body">';
modal += ' <form id="password_form" onsubmit="return setPassword();">';
modal += ' <div class="form-group">';
modal += ' <label for="password_input">Password</label>';
modal += ' <input type="password" class="form-control" id="password_input" placeholder="Password"/>';
modal += ' </div>';
modal += ' </form>';
modal += ' </div>';
modal += ' <div class="modal-footer">';
modal += ' <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="return setPassword();">{% trans "OK" %}</button>';
modal += ' </div>';
modal += ' </div>';
modal += ' </div>';
modal += '</div>';
$('body').append(modal);
$('div.modal').modal();
}
function setPassword() {
rfb.sendPassword($D('password_input').value);
rfb.sendPassword($('#password_input').val());
return false;
}
function sendCtrlAltDel() {
@ -79,6 +82,19 @@
return false;
}
function sendCtrlAltFN(f) {
var keys_code=[0xFFBE,0xFFBF,0xFFC0,0xFFC1,0xFFC2,0xFFC3,0xFFC4,0xFFC5,0xFFC6,0xFFC7,0xFFC8,0xFFC9];
if (keys_code[f]==undefined) {
return;
}
rfb.sendKey(0xFFE3, 'down');
rfb.sendKey(0xFFE9, 'down');
rfb.sendKey(keys_code[f], 'down');
rfb.sendKey(keys_code[f], 'up');
rfb.sendKey(0xFFE9, 'up');
rfb.sendKey(0xFFE3, 'up');
};
// dirty fix for keyboard on iOS devices
function showKeyboard() {
var kbi, skb, l;
@ -103,48 +119,36 @@
function updateState(rfb, state, oldstate, msg) {
var s, sb, cad, af, level;
s = $D('noVNC_status');
sb = $D('noVNC_status_bar');
cad = $D('sendCtrlAltDelButton');
af = $D('askFullscreen');
switch (state) {
case 'failed':
level = "error";
level = "danger";
break;
case 'fatal':
level = "error";
level = "danger";
break;
case 'normal':
level = "normal";
level = "info";
break;
case 'disconnected':
level = "normal";
level = "info";
break;
case 'loaded':
level = "normal";
level = "info";
break;
default:
level = "warn";
level = "warning";
break;
}
if (state === "normal") {
cad.disabled = false;
af.disabled = false;
}
else {
cad.disabled = true;
af.disabled = true;
}
if (typeof(msg) !== 'undefined') {
sb.setAttribute("class", "noVNC_status_" + level);
s.innerHTML = msg;
log_message(msg,level);
}
}
function fullscreen() {
var screen=document.getElementById('noVNC_canvas');
var screen=document.getElementById('main_container');
if(screen.requestFullscreen) {
screen.requestFullscreen();
} else if(screen.mozRequestFullScreen) {
@ -159,11 +163,6 @@
window.onscriptsload = function () {
var host, port, password, path, token;
$D('sendCtrlAltDelButton').style.display = "inline";
$D('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
$D('askFullscreen').style.display = "inline";
$D('askFullscreen').onclick = fullscreen;
// dirty fix for keyboard on iOS devices
if (isTouchDevice) {
$D('showKeyboard').onclick = showKeyboard;
@ -188,7 +187,7 @@
return;
}
rfb = new RFB({'target': $D('noVNC_canvas'),
rfb = new RFB({'target': document.getElementById('noVNC_canvas'),
'encrypt': WebUtil.getQueryVar('encrypt',
(window.location.protocol === "https:")),
'repeaterID': WebUtil.getQueryVar('repeaterID', ''),
@ -201,5 +200,4 @@
rfb.connect(host, port, password, path);
};
</script>
</body>
</html>
{% endblock %}