Added the page.html as a resource to the project
This commit is contained in:
		
							parent
							
								
									2a1f6a2a57
								
							
						
					
					
						commit
						ff98ede0b2
					
				
							
								
								
									
										164
									
								
								webcrab/res/page.html
									
									
									
									
									
										Executable file
									
								
							
							
						
						
									
										164
									
								
								webcrab/res/page.html
									
									
									
									
									
										Executable file
									
								
							@ -0,0 +1,164 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html>
 | 
			
		||||
	<head>
 | 
			
		||||
		<meta charset="utf-8">
 | 
			
		||||
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
			
		||||
		<title>webmouse client</title>
 | 
			
		||||
		<style>
 | 
			
		||||
body {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	bottom: 0;
 | 
			
		||||
	top: 0;
 | 
			
		||||
	padding: 0;
 | 
			
		||||
	margin: 0;
 | 
			
		||||
	background-color: black;
 | 
			
		||||
	color: gray;
 | 
			
		||||
}
 | 
			
		||||
button{
 | 
			
		||||
	text-align: center;
 | 
			
		||||
	outline: none;
 | 
			
		||||
	background-color: black;
 | 
			
		||||
	border: 1px solid gray;
 | 
			
		||||
	border-radius: 0;
 | 
			
		||||
	color: gray;
 | 
			
		||||
	font-size: medium;
 | 
			
		||||
}
 | 
			
		||||
button:active {
 | 
			
		||||
	background-color: silver;
 | 
			
		||||
}
 | 
			
		||||
button:focus, button:hover, button:focus-visible {
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.touchpad {
 | 
			
		||||
	height: 60%;
 | 
			
		||||
	display: flex;
 | 
			
		||||
}
 | 
			
		||||
#canvas {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	background-color: #111;
 | 
			
		||||
	outline: gray solid 1px;
 | 
			
		||||
}
 | 
			
		||||
.buttonrow {
 | 
			
		||||
	height: 10%;
 | 
			
		||||
	display: flex;
 | 
			
		||||
	align-items: stretch;
 | 
			
		||||
}
 | 
			
		||||
.buttonrow input{
 | 
			
		||||
	background-color: #111;
 | 
			
		||||
	color: gray;
 | 
			
		||||
	outline: gray solid 1px;
 | 
			
		||||
	border: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		</style>
 | 
			
		||||
	</head>
 | 
			
		||||
	<body>
 | 
			
		||||
	<div class="buttonrow">
 | 
			
		||||
		<button style="flex:1">menu</button>
 | 
			
		||||
		<button onclick="sendmessage('key', 'k=del')"  style="flex:1">del</button>
 | 
			
		||||
		<button onclick="sendmessage('key', 'k=bksp')"  style="flex:1">bksp</button>
 | 
			
		||||
		<button onclick="sendmessage('key', 'k=enter')"  style="flex:1">enter</button>
 | 
			
		||||
		<input id="typebox" placeholder="type here" size=8 style="flex:2">
 | 
			
		||||
	</div>
 | 
			
		||||
	<div class="touchpad">
 | 
			
		||||
		<span id="canvas"></span>
 | 
			
		||||
	</div>
 | 
			
		||||
	<div class="buttonrow">
 | 
			
		||||
		<button onclick="sendmessage('left', '')" style="flex:2">left (toggle)</button>
 | 
			
		||||
		<button onclick="sendmessage('wheel', 'd=1')" style="flex:1">up</button>
 | 
			
		||||
		<button onclick="sendmessage('middle', '')" style="flex:1">mid</button>
 | 
			
		||||
		<button onclick="sendmessage('wheel', 'd=-1')" style="flex:1">dn</button>
 | 
			
		||||
		<button onclick="sendmessage('right', '')" style="flex:2">right</button>
 | 
			
		||||
	</div>
 | 
			
		||||
	<div class="buttonrow">
 | 
			
		||||
		<button onclick="sendmessage('volume', 'd=-1')" style="flex:2">vol -</button>
 | 
			
		||||
		<button onclick="sendmessage('volume', 'd=0')" style="flex:1">mute</button>
 | 
			
		||||
		<button onclick="sendmessage('volume', 'd=1')"  style="flex:2">vol +</button>
 | 
			
		||||
		<!--<button onclick="sendmessage('volume', 1, 0)"  style="flex:2">vol +</button>-->
 | 
			
		||||
	</div>
 | 
			
		||||
	<div class="buttonrow">
 | 
			
		||||
		<button onclick="sendmessage('media', 'act=stop')" style="flex:1">stop</button>
 | 
			
		||||
		<button onclick="sendmessage('media', 'act=prev')" style="flex:1">prev</button>
 | 
			
		||||
		<button onclick="sendmessage('media', 'act=play')"  style="flex:1">play/pause</button>
 | 
			
		||||
		<button onclick="sendmessage('media', 'act=next')"  style="flex:1">next</button>
 | 
			
		||||
	</div>
 | 
			
		||||
	<script>
 | 
			
		||||
function startup() {
 | 
			
		||||
	var el = document.getElementById("canvas");
 | 
			
		||||
	el.addEventListener("touchstart", handleStart, false);
 | 
			
		||||
	el.addEventListener("touchend", handleEnd, false);
 | 
			
		||||
	el.addEventListener("touchcancel", handleCancel, false);
 | 
			
		||||
	el.addEventListener("touchmove", handleMove, false);
 | 
			
		||||
	
 | 
			
		||||
	document.getElementById("typebox").addEventListener("change", handlekeypress, false);
 | 
			
		||||
	
 | 
			
		||||
	//setInterval(updatepos, 50);
 | 
			
		||||
	
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
document.addEventListener("DOMContentLoaded", startup);
 | 
			
		||||
var currenttouch = null;
 | 
			
		||||
 | 
			
		||||
var packetnum = 0;
 | 
			
		||||
 | 
			
		||||
function handleStart(evt) {
 | 
			
		||||
	if (currenttouch == null) {
 | 
			
		||||
		currenttouch = evt.changedTouches[0];
 | 
			
		||||
		sendmessage("start", "x=" + currenttouch.pageX + "&y=" + currenttouch.pageY)
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function handleMove(evt) {
 | 
			
		||||
  var touches = evt.changedTouches;
 | 
			
		||||
  if (currenttouch == null) { 
 | 
			
		||||
	return 0;
 | 
			
		||||
  }
 | 
			
		||||
  for (var i = 0; i < touches.length; i++) {
 | 
			
		||||
	if (touches[i].identifier == currenttouch.identifier) {
 | 
			
		||||
		currenttouch = evt.changedTouches[0];
 | 
			
		||||
		sendmessage("move", "x=" + currenttouch.pageX + "&y=" + currenttouch.pageY)
 | 
			
		||||
	}
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function handleEnd(evt) {
 | 
			
		||||
  var touches = evt.changedTouches;
 | 
			
		||||
  for (var i = 0; i < touches.length; i++) {
 | 
			
		||||
    if (touches[i].identifier == currenttouch.identifier) {
 | 
			
		||||
		currenttouch = evt.changedTouches[0];
 | 
			
		||||
		sendmessage("end", "x=" + currenttouch.pageX + "&y=" + currenttouch.pageY)
 | 
			
		||||
		currenttouch = null;
 | 
			
		||||
	}
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function handleCancel(evt) {
 | 
			
		||||
  var touches = evt.changedTouches;
 | 
			
		||||
  for (var i = 0; i < touches.length; i++) {
 | 
			
		||||
    if (touches[i].identifier == currenttouch.identifier) {
 | 
			
		||||
		currenttouch = evt.changedTouches[0];
 | 
			
		||||
		sendmessage("end", "x=" + currenttouch.pageX + "&y=" + currenttouch.pageY)
 | 
			
		||||
		currenttouch = null;
 | 
			
		||||
	}
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function handlekeypress(evt) {
 | 
			
		||||
	evt.preventDefault();
 | 
			
		||||
	sendmessage("text", evt.target.value, 0)
 | 
			
		||||
	evt.target.value = "";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function sendmessage(opt, q) {
 | 
			
		||||
	fetch("/" + opt + "/?" + q + "&seq=" + packetnum);
 | 
			
		||||
	packetnum++;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		</script>
 | 
			
		||||
	</body>
 | 
			
		||||
</html>
 | 
			
		||||
@ -124,6 +124,9 @@
 | 
			
		||||
      <LastGenOutput>Settings.Designer.vb</LastGenOutput>
 | 
			
		||||
    </None>
 | 
			
		||||
  </ItemGroup>
 | 
			
		||||
  <ItemGroup>
 | 
			
		||||
    <Content Include="page.html" />
 | 
			
		||||
  </ItemGroup>
 | 
			
		||||
  <Import Project="$(MSBuildToolsPath)\Microsoft.VisualBasic.targets" />
 | 
			
		||||
  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
 | 
			
		||||
       Other similar extension points exist, see Microsoft.Common.targets.
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user