webvirtcloud/console/templates/console-spice.html

{% extends "console-base.html" %}
{% load i18n %}
{% 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>

    <link rel="stylesheet" type="text/css" href="{% static "js/spice-html5/spice.css" %}" />
    <script src="{% static "js/spice-html5/port.js" %}"></script>

{% endblock %}

{% block content %}
<div id='spice_container'></div>
{% endblock %}

{% block foot %}
<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;
    }

    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_container",
                        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) {
        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.');
        }
    }

    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_container');
        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>
{% endblock %}