mirror of
https://github.com/ultimatepp/ultimatepp.git
synced 2026-05-29 14:22:25 -06:00
294 lines
6.1 KiB
HTML
294 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<canvas id="myCanvas" width="1000" height="1000" style="border:0px" tabindex="1" oncontextmenu="return false;">
|
|
Your browser does not support the HTML5 canvas tag.
|
|
</canvas>
|
|
|
|
<script>
|
|
function Log(msg)
|
|
{
|
|
if (window.console && console.log)
|
|
console.log(msg); //for firebug
|
|
}
|
|
|
|
function Char(p, ch)
|
|
{
|
|
if(p.pos < p.data.length && (255 & p.data[p.pos]) == ch) {
|
|
p.pos++;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function Get8(p)
|
|
{
|
|
return p.pos < p.data.length ? (255 & p.data[p.pos++]) : 0;
|
|
}
|
|
|
|
function Get16(p)
|
|
{
|
|
var l = Get8(p);
|
|
var h = Get8(p);
|
|
return (h << 8) | l;
|
|
}
|
|
|
|
function Get32(p)
|
|
{
|
|
var l = Get16(p);
|
|
var h = Get16(p);
|
|
return (h << 16) | l;
|
|
}
|
|
|
|
function GetString(p)
|
|
{
|
|
var n = Get32(p);
|
|
var s = "";
|
|
for(var i = 0; i < n; i++)
|
|
s += String.fromCharCode(Get8(p));
|
|
return s;
|
|
}
|
|
|
|
function ProcessDraw(s)
|
|
{
|
|
var x, y, cx, cy, r, g, b, imgData, i, n, px, py;
|
|
var p = new Object;
|
|
p.data = s;
|
|
p.pos = 0;
|
|
|
|
var canvas = document.getElementById("myCanvas");
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
while(p.pos < p.data.length) {
|
|
// Log(p.pos + ": " + p.data[p.pos]);
|
|
if(Char(p, 0)) {
|
|
x = Get16(p);
|
|
y = Get16(p);
|
|
cx = Get16(p);
|
|
cy = Get16(p);
|
|
r = Get8(p);
|
|
g = Get8(p);
|
|
b = Get8(p);
|
|
// Log("rect: " + x + ", " + y + ", " + cx + ", " + cy);
|
|
var c = "rgb(" + r + "," + g + "," + b + ")";
|
|
ctx.fillStyle = c;
|
|
// Log("color: " + c);
|
|
ctx.fillRect(x, y, cx, cy);
|
|
}
|
|
else
|
|
if(Char(p, 3)) {
|
|
x = Get16(p);
|
|
y = Get16(p);
|
|
cx = Get16(p);
|
|
cy = Get16(p);
|
|
// Log("irect: " + x + ", " + y + ", " + cx + ", " + cy);
|
|
var imageData = ctx.getImageData(x, y, cx, cy);
|
|
var data = imageData.data;
|
|
for(var i = 0; i < data.length; i += 4) {
|
|
data[i] = 255 - data[i];
|
|
data[i + 1] = 255 - data[i + 1];
|
|
data[i + 2] = 255 - data[i + 2];
|
|
}
|
|
ctx.putImageData(imageData, x, y);
|
|
}
|
|
else
|
|
if(Char(p, 2)) {
|
|
r = Get16(p);
|
|
cx = Get16(p);
|
|
cy = Get16(p);
|
|
n = cx * cy * 4;
|
|
imgData = ctx.createImageData(cx, cy);
|
|
for(i = 0; i < n; i++)
|
|
imgData.data[i] = Get8(p);
|
|
var img = document.createElement('canvas');
|
|
img.width = cx;
|
|
img.height = cy;
|
|
img.getContext("2d").putImageData(imgData, 0, 0);
|
|
window.img_cache[r] = img;
|
|
// Log("Set image: " + r);
|
|
}
|
|
else
|
|
if(Char(p, 1)) {
|
|
n = Get16(p);
|
|
|
|
px = Get16(p);
|
|
py = Get16(p);
|
|
x = Get16(p);
|
|
y = Get16(p);
|
|
cx = Get16(p);
|
|
cy = Get16(p);
|
|
|
|
// Log("Draw image: " + n);
|
|
ctx.drawImage(window.img_cache[n], x, y, cx, cy, px, py, cx, cy);
|
|
}
|
|
else
|
|
if(Char(p, 4)) {
|
|
canvas.style.cursor = [
|
|
"default", // should not happen
|
|
"default", // Arrow
|
|
"wait", // Wait
|
|
"text", // IBeam
|
|
"not-allowed", // No
|
|
"move", // SizeAll
|
|
"ew-resize", // SizeHorz
|
|
"ns-resize", // SizeVert
|
|
"nw-resize", // SizeTopLeft
|
|
"n-resize", // SizeTop
|
|
"ne-resize", // SizeTopRight
|
|
"w-resize", // SizeLeft
|
|
"e-resize", // SizeRight
|
|
"sw-resize", // SizeBottomLeft
|
|
"s-resize", // SizeBottom
|
|
"se-resize", // SizeBottomRight
|
|
"pointer" // Hand
|
|
][Get8(p)];
|
|
}
|
|
else
|
|
if(Char(p, 5)) {
|
|
i = Get16(p);
|
|
cursor_cache[i] = GetString(p);
|
|
}
|
|
else
|
|
if(Char(p, 6)) {
|
|
i = Get16(p);
|
|
canvas.style.cursor = cursor_cache[i];
|
|
// Log(cursor_cache[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
window.img_cache = {};
|
|
window.event_queue = "I\n";
|
|
window.cursor_cache = {};
|
|
|
|
var canvas = document.getElementById("myCanvas");
|
|
|
|
function key_flags(event)
|
|
{
|
|
return " " + 1*event.shiftKey + 1*event.ctrlKey + 1*event.altKey + "\n";
|
|
}
|
|
|
|
function mouse_event(event)
|
|
{
|
|
return " " + event.clientX + " " + event.clientY + " " + (new Date).getTime() + key_flags(event);
|
|
}
|
|
|
|
canvas.onmousemove = function(event)
|
|
{
|
|
event_queue += "M" + mouse_event(event);
|
|
Ping();
|
|
event.preventDefault();
|
|
}
|
|
|
|
canvas.onmousedown = function(event)
|
|
{
|
|
event_queue += "D " + event.button + mouse_event(event);
|
|
Ping();
|
|
event.preventDefault();
|
|
}
|
|
|
|
canvas.onmouseout = function(event)
|
|
{
|
|
event_queue += "O\n";
|
|
Ping();
|
|
event.preventDefault();
|
|
}
|
|
|
|
canvas.onmouseup = function(event)
|
|
{
|
|
event_queue += "U " + event.button + mouse_event(event);
|
|
Ping();
|
|
event.preventDefault();
|
|
}
|
|
|
|
canvas.onwheel = function(event)
|
|
{
|
|
event_queue += "W " + event.deltaY + mouse_event(event);
|
|
}
|
|
|
|
document.onkeydown = function(event)
|
|
{
|
|
event_queue += "K " + event.keyCode + " " + event.which + key_flags(event);
|
|
Ping();
|
|
}
|
|
|
|
document.onkeypress = function(event)
|
|
{
|
|
event_queue += "C " + event.keyCode + " " + event.which + key_flags(event);
|
|
event.preventDefault();
|
|
Ping();
|
|
}
|
|
|
|
document.onkeyup = function(event)
|
|
{
|
|
event_queue += "k " + event.keyCode + " " + event.which + key_flags(event);
|
|
event.preventDefault();
|
|
Ping();
|
|
}
|
|
|
|
function ResizeCanvas()
|
|
{
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
event_queue += "R " + canvas.width + ' ' + canvas.height + "\n";
|
|
Ping();
|
|
}
|
|
|
|
window.onresize = ResizeCanvas;
|
|
|
|
var Processing = false;
|
|
var timerID;
|
|
|
|
var ws = new WebSocket("ws://localhost:8088");
|
|
ws.binaryType = "arraybuffer";
|
|
|
|
function Ping()
|
|
{
|
|
Log("Ping " + Processing);
|
|
if(!Processing) {
|
|
Processing = true;
|
|
Log("Sending " + event_queue);
|
|
ws.send(event_queue);
|
|
event_queue = "";
|
|
}
|
|
if(timerID != undefined)
|
|
clearTimeout(timerID);
|
|
timerID = setTimeout(Ping, 20);
|
|
}
|
|
|
|
ws.onopen = function()
|
|
{
|
|
ResizeCanvas();
|
|
};
|
|
|
|
ws.onmessage = function(event)
|
|
{
|
|
Log("onmessage");
|
|
if(event.data instanceof ArrayBuffer)
|
|
ProcessDraw(new Uint8Array(event.data));
|
|
Processing = false;
|
|
if(event_queue.length > 0)
|
|
Ping();
|
|
};
|
|
|
|
ws.onclose = function(ev)
|
|
{
|
|
alert("Connection closed");
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|