mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 23:55:24 +00:00
333 lines
12 KiB
HTML
333 lines
12 KiB
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>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Helvetica;
|
|
background-color:#494949;
|
|
}
|
|
|
|
#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>
|
|
|
|
<script>
|
|
var sc;
|
|
|
|
function spice_set_cookie(name, value, days) {
|
|
var date, expires;
|
|
date = new Date();
|
|
date.setTime(date.getTime() + (days*24*60*60*1000));
|
|
expires = "; expires=" + date.toGMTString();
|
|
document.cookie = name + "=" + value + expires + "; path=/";
|
|
};
|
|
|
|
function spice_query_var(name, defvalue) {
|
|
var match = RegExp('[?&]' + name + '=([^&]*)')
|
|
.exec(window.location.search);
|
|
return match ?
|
|
decodeURIComponent(match[1].replace(/\+/g, ' '))
|
|
: 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);
|
|
disconnect();
|
|
if (e.message != undefined) {
|
|
log_error(e.message);
|
|
}
|
|
else {
|
|
log_error('Unknown error');
|
|
}
|
|
}
|
|
|
|
function spice_success(msg) {
|
|
log_info(msg);
|
|
}
|
|
|
|
function connect(uri,password)
|
|
{
|
|
// If a token variable is passed in, set the parameter in a cookie.
|
|
// This is used by nova-spiceproxy.
|
|
token = spice_query_var('token', null);
|
|
if (token) {
|
|
spice_set_cookie('token', token, 1)
|
|
}
|
|
|
|
if (sc) {
|
|
sc.stop();
|
|
}
|
|
|
|
try
|
|
{
|
|
sc = new SpiceMainConn({uri: uri, password: password, screen_id: "spice-screen",
|
|
onsuccess: spice_success, onerror: spice_error, onagent: agent_connected });
|
|
}
|
|
catch (e)
|
|
{
|
|
console.log(e);
|
|
log_error(e.toString());
|
|
disconnect();
|
|
}
|
|
|
|
}
|
|
|
|
function disconnect()
|
|
{
|
|
console.log(">> disconnect");
|
|
if (sc) {
|
|
sc.stop();
|
|
}
|
|
if (window.File && window.FileReader && window.FileList && window.Blob)
|
|
{
|
|
console.log(" -> Disable drag/drop transfer");
|
|
var spice_xfer_area = document.getElementById('spice-xfer-area');
|
|
try {
|
|
document.getElementById('spice-area').removeChild(spice_xfer_area);
|
|
document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false);
|
|
document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false);
|
|
}
|
|
catch(e) {
|
|
console.log(' -> Error disabling drag/drop transfer');
|
|
}
|
|
}
|
|
console.log("<< disconnect");
|
|
}
|
|
|
|
function agent_connected(sc) {
|
|
console.log('Connected');
|
|
window.addEventListener('resize', handle_resize);
|
|
window.spice_connection = this;
|
|
|
|
resize_helper(this);
|
|
|
|
if (window.File && window.FileReader && window.FileList && window.Blob)
|
|
{
|
|
var spice_xfer_area = document.createElement("div");
|
|
spice_xfer_area.setAttribute('id', 'spice-xfer-area');
|
|
document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false);
|
|
document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false);
|
|
log_info('Drag and drop transfer enabled.');
|
|
}
|
|
else
|
|
{
|
|
console.log("File API is not supported");
|
|
log_info('Drag and drop transfer not supported.');
|
|
}
|
|
log_info('Connected');
|
|
}
|
|
|
|
function sendCtrlAltFN(f) {
|
|
if (sc && sc.inputs && sc.inputs.state === "ready"){
|
|
var keys_code=[KEY_F1,KEY_F2,KEY_F3,KEY_F4,KEY_F5,KEY_F6,KEY_F7,KEY_F8,KEY_F9,KEY_F10,KEY_F11,KEY_F12];
|
|
|
|
if (keys_code[f]==undefined) {
|
|
return;
|
|
}
|
|
var key = new SpiceMsgcKeyDown();
|
|
var msg = new SpiceMiniData();
|
|
|
|
update_modifier(true, KEY_LCtrl, sc);
|
|
update_modifier(true, KEY_Alt, sc);
|
|
|
|
key.code = keys_code[f];
|
|
msg.build_msg(SPICE_MSGC_INPUTS_KEY_DOWN, key);
|
|
sc.inputs.send_msg(msg);
|
|
msg.build_msg(SPICE_MSGC_INPUTS_KEY_UP, key);
|
|
sc.inputs.send_msg(msg);
|
|
|
|
if(Ctrl_state == false) update_modifier(false, KEY_LCtrl, sc);
|
|
if(Alt_state == false) update_modifier(false, KEY_Alt, sc);
|
|
}
|
|
}
|
|
|
|
function fullscreen() {
|
|
var screen=document.getElementById('spice-screen');
|
|
if(screen.requestFullscreen) {
|
|
screen.requestFullscreen();
|
|
} else if(screen.mozRequestFullScreen) {
|
|
screen.mozRequestFullScreen();
|
|
} else if(screen.webkitRequestFullscreen) {
|
|
screen.webkitRequestFullscreen();
|
|
} else if(screen.msRequestFullscreen) {
|
|
screen.msRequestFullscreen();
|
|
}
|
|
}
|
|
|
|
var uri;
|
|
if (window.location.protocol === "https:") {
|
|
uri = 'wss://{{ ws_host }}:{{ ws_port }}';
|
|
} else {
|
|
uri = 'ws://{{ ws_host }}:{{ ws_port }}';
|
|
}
|
|
|
|
var password = '{{ console_passwd }}';
|
|
log_info('Connecting ...');
|
|
connect(uri,password);
|
|
</script>
|
|
</body>
|
|
</html>
|