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