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