<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset=utf-8 />
 <title>Minimal Websocket test app</title>
</head>

<body>
<h2>libwebsockets "dumb-increment-protocol" test applet</h2>
The incrementing number is coming from the server.
Click the button to send the server a websocket message to
reset the number.<br><br>

<table>
	<tr>
		<td align=center><input type=button id=offset value="Reset counter" onclick="reset();" ></td>
		<td width=100 align=center><div id=number> </div></td>
		<td id=wsdi_statustd align=center><div id=wsdi_status>Not initialized</div></td>
	</tr>
</table>

<h2>libwebsockets "lws-mirror-protocol" test applet</h2>
Use the mouse to draw on the canvas below -- all other browser windows open
on this page see your drawing in realtime and you can see any of theirs as
well.
<p>
The lws-mirror protocol doesn't interpret what is being sent to it, it just
re-sends it to every other websocket it has a connection with using that
protocol, including the guy who sent the packet.
<br><br>

<table>
	<tr>
		<td>Drawing color:
		<select id="color" onchange="update_color();">
			<option value=#000000>Black</option>
			<option value=#0000ff>Blue</option>
			<option value=#20ff20>Green</option>
			<option value=#802020>Dark Red</option>
		</select>
		</td>
		<td id=wslm_statustd align=center><div id=wslm_status>Not initialized</div></td>
	</tr>
	<tr>
		<td colspan=2 width=500 align=center style="background-color: #e0e0e0;"><div id=wslm_drawing> </div></td>
	</tr>
</table>

<script>
	var pos = 0;

function get_appropriate_ws_url(ads)
{
	/*
	 * We open the websocket encrypted if this page came on an
	 * https:// url itself, otherwise unencrypted
	 */

	if (document.URL.substring(0, 5) == "https")
		return "wss://"+ads;
	else
		return "ws://"+ads;
}

/* dumb increment protocol */
	
	var socket_di = new WebSocket(get_appropriate_ws_url("127.0.0.1:7681"),
				   "dumb-increment-protocol");  

	try {
		socket_di.onopen = function() {
			wsdi_statustd.style.backgroundColor = "#40ff40";
			wsdi_status.textContent = " websocket connection opened ";
		} 

		socket_di.onmessage =function got_packet(msg) {
			number.textContent = msg.data + "\n";
		} 

		socket_di.onclose = function(){
			wsdi_statustd.style.backgroundColor = "#ff4040";
			wsdi_status.textContent = " websocket connection closed ";
		}
	} catch(exception) {
		alert('<p>Error' + exception);  
	}

function reset() {
	socket_di.send("reset\n");
}


/* lws-mirror protocol */

	var down = 0;
	var no_last = 1;
	var last_x, last_y;
	var ctx;
	var socket_lm = new WebSocket(get_appropriate_ws_url("127.0.0.1:7681"),
				   "lws-mirror-protocol");
	var color = "#000000";

	try {
		socket_lm.onopen = function() {
			wslm_statustd.style.backgroundColor = "#40ff40";
			wslm_status.textContent = " websocket connection opened ";
		} 

		socket_lm.onmessage =function got_packet(msg) {
			i = msg.data.split(' ');
			if (i[0] == 'd') {
				ctx.strokeStyle = i[1];
				ctx.beginPath();
				ctx.moveTo(i[2], i[3]);
				ctx.lineTo(i[4], i[5]);
				ctx.stroke();
			}
		}

		socket_lm.onclose = function(){
			wslm_statustd.style.backgroundColor = "#ff4040";
			wslm_status.textContent = " websocket connection closed ";
		}
	} catch(exception) {
		alert('<p>Error' + exception);  
	}

	var canvas = document.createElement('canvas');
	canvas.height = 300;
	canvas.width = 480;
	ctx = canvas.getContext("2d");

	document.getElementById('wslm_drawing').appendChild(canvas);

	canvas.addEventListener('mousemove', ev_mousemove, false);
	canvas.addEventListener('mousedown', ev_mousedown, false);
	canvas.addEventListener('mouseup', ev_mouseup, false);

function update_color() {
	color = document.getElementById("color").value;
}

function ev_mousedown (ev) {
	down = 1;
}

function ev_mouseup(ev) {
	down = 0;
	no_last = 1;
}

function ev_mousemove (ev) {
	var x, y;

	x = ev.offsetX;
	y = ev.offsetY;

	if (!down)
		return;
	if (no_last) {
		no_last = 0;
		last_x = x;
		last_y = y;
		return;
	}
	socket_lm.send("d " + color + " " + last_x + " " + last_y + " " + x + ' ' + y);

	last_x = x;
	last_y = y;
}


</script>

</body>
</html>