Added the page.html as a resource to the project

This commit is contained in:
moosecrab 2020-06-16 01:42:20 -07:00
parent 2a1f6a2a57
commit ff98ede0b2
2 changed files with 167 additions and 0 deletions

164
webcrab/res/page.html Executable file
View 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>

View File

@ -124,6 +124,9 @@
<LastGenOutput>Settings.Designer.vb</LastGenOutput> <LastGenOutput>Settings.Designer.vb</LastGenOutput>
</None> </None>
</ItemGroup> </ItemGroup>
<ItemGroup>
<Content Include="page.html" />
</ItemGroup>
<Import Project="$(MSBuildToolsPath)\Microsoft.VisualBasic.targets" /> <Import Project="$(MSBuildToolsPath)\Microsoft.VisualBasic.targets" />
<!-- To modify your build process, add your task inside one of the targets below and uncomment it. <!-- 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. Other similar extension points exist, see Microsoft.Common.targets.