{% 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>