mirror of
https://github.com/retspen/webvirtcloud
synced 2024-12-25 23:55:24 +00:00
209 lines
7.8 KiB
HTML
209 lines
7.8 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;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="status"></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');
|
||
|
|
}
|
||
|
|
|
||
|
|
var uri = 'ws://{{ ws_host }}:{{ ws_port }}';
|
||
|
|
var password = '{{ console_passwd }}';
|
||
|
|
log_info('Connecting ...');
|
||
|
|
connect(uri,password);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|