mirror of
https://gitlab.uni-freiburg.de/opensourcevdi/spice-html5
synced 2025-12-28 15:20:40 +00:00
7f5b9f54a5
We don't want the users to rely on anything else than main.js. All the
helper functions from the other files are thus imported in main and
exported there too.
This way all the user needs to import is:
import * as SpiceHtml5 from './main.js';
Signed-off-by: Jeremy White <jwhite@codeweavers.com>
190 lines
7.1 KiB
HTML
190 lines
7.1 KiB
HTML
<!--
|
|
Copyright (C) 2012 by Jeremy P. White <jwhite@codeweavers.com>
|
|
|
|
This file is part of spice-html5.
|
|
|
|
spice-html5 is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Lesser General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
spice-html5 is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Lesser General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Lesser General Public License
|
|
along with spice-html5. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
--------------------------------------------------
|
|
Spice Javascript client template.
|
|
Refer to main.js for more detailed information
|
|
--------------------------------------------------
|
|
|
|
-->
|
|
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
|
|
<title>Spice Javascript client</title>
|
|
<link rel="stylesheet" type="text/css" href="spice.css" />
|
|
|
|
<!-- ES2015/ES6 modules polyfill -->
|
|
<script type="module">
|
|
window._spice_has_module_support = true;
|
|
</script>
|
|
<script>
|
|
window.addEventListener("load", function() {
|
|
if (window._spice_has_module_support) return;
|
|
var loader = document.createElement("script");
|
|
loader.src = "thirdparty/browser-es-module-loader/dist/" +
|
|
"browser-es-module-loader.js";
|
|
document.head.appendChild(loader);
|
|
});
|
|
</script>
|
|
|
|
<script type="module" crossorigin="anonymous">
|
|
import * as SpiceHtml5 from './main.js';
|
|
|
|
var host = null, port = null;
|
|
var sc;
|
|
|
|
function spice_error(e)
|
|
{
|
|
disconnect();
|
|
}
|
|
|
|
function connect()
|
|
{
|
|
var host, port, password, scheme = "ws://", uri;
|
|
|
|
host = document.getElementById("host").value;
|
|
port = document.getElementById("port").value;
|
|
password = document.getElementById("password").value;
|
|
|
|
|
|
if ((!host) || (!port)) {
|
|
console.log("must set host and port");
|
|
return;
|
|
}
|
|
|
|
if (sc) {
|
|
sc.stop();
|
|
}
|
|
|
|
uri = scheme + host + ":" + port;
|
|
|
|
document.getElementById('connectButton').innerHTML = "Stop";
|
|
document.getElementById('connectButton').onclick = disconnect;
|
|
|
|
try
|
|
{
|
|
sc = new SpiceHtml5.SpiceMainConn({uri: uri, screen_id: "spice-screen", dump_id: "debug-div",
|
|
message_id: "message-div", password: password, onerror: spice_error, onagent: agent_connected });
|
|
}
|
|
catch (e)
|
|
{
|
|
alert(e.toString());
|
|
disconnect();
|
|
}
|
|
|
|
}
|
|
|
|
function disconnect()
|
|
{
|
|
console.log(">> disconnect");
|
|
if (sc) {
|
|
sc.stop();
|
|
}
|
|
document.getElementById('connectButton').innerHTML = "Start";
|
|
document.getElementById('connectButton').onclick = connect;
|
|
if (window.File && window.FileReader && window.FileList && window.Blob)
|
|
{
|
|
var spice_xfer_area = document.getElementById('spice-xfer-area');
|
|
document.getElementById('spice-area').removeChild(spice_xfer_area);
|
|
document.getElementById('spice-area').removeEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
|
|
document.getElementById('spice-area').removeEventListener('drop', SpiceHtml5.handle_file_drop, false);
|
|
}
|
|
console.log("<< disconnect");
|
|
}
|
|
|
|
function agent_connected(sc)
|
|
{
|
|
window.addEventListener('resize', SpiceHtml5.handle_resize);
|
|
window.spice_connection = this;
|
|
|
|
SpiceHtml5.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').appendChild(spice_xfer_area);
|
|
document.getElementById('spice-area').addEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
|
|
document.getElementById('spice-area').addEventListener('drop', SpiceHtml5.handle_file_drop, false);
|
|
}
|
|
else
|
|
{
|
|
console.log("File API is not supported");
|
|
}
|
|
}
|
|
|
|
function toggle_console()
|
|
{
|
|
var checkbox = document.getElementById('show_console');
|
|
var m = document.getElementById('message-div');
|
|
|
|
if (checkbox.checked)
|
|
{
|
|
m.style.display = 'block';
|
|
}
|
|
else
|
|
{
|
|
m.style.display = 'none';
|
|
}
|
|
|
|
window.addEventListener('resize', handle_resize);
|
|
SpiceHtml5.resize_helper(sc);
|
|
}
|
|
/* SPICE port event listeners
|
|
window.addEventListener('spice-port-data', function(event) {
|
|
// Here we convert data to text, but really we can obtain binary data also
|
|
var msg_text = arraybuffer_to_str(new Uint8Array(event.detail.data));
|
|
DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'message text:', msg_text);
|
|
});
|
|
|
|
window.addEventListener('spice-port-event', function(event) {
|
|
DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'event data:', event.detail.spiceEvent);
|
|
});
|
|
*/
|
|
|
|
document.getElementById('connectButton').onclick = connect;
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="login">
|
|
<span class="logo">SPICE</span>
|
|
<label for="host">Host:</label> <input type='text' id='host' value='localhost'> <!-- localhost -->
|
|
<label for="port">Port:</label> <input type='text' id='port' value='5959'>
|
|
<label for="password">Password:</label> <input type='password' id='password' value=''>
|
|
<label for="show_console">Show console </label><input type="checkbox" id="show_console" value="1" onchange="toggle_console()" checked>
|
|
<button id="connectButton">Start</button>
|
|
</div>
|
|
|
|
<div id="spice-area">
|
|
<div id="spice-screen" class="spice-screen"></div>
|
|
</div>
|
|
|
|
<div id="message-div" class="spice-message"></div>
|
|
|
|
<div id="debug-div">
|
|
<!-- If DUMPXXX is turned on, dumped images will go here -->
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|