124 lines
3.5 KiB
HTML
124 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>HamClock</title>
|
|
<style>
|
|
body {
|
|
background-color: black;
|
|
}
|
|
#errorbox {
|
|
color: white;
|
|
font-family: sans-serif;
|
|
font-size: 200%;
|
|
text-align: center
|
|
}
|
|
#holder {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
text-align: center
|
|
}
|
|
#holder * {
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id=login>
|
|
<h1>HamClock Remote Access</h1>
|
|
<form>
|
|
<label for=url>Server URL:</label><input name=url id=url><br>
|
|
<label for=password>Password:</label><input name=password id=password>
|
|
<button id=start>Start</button>
|
|
</form>
|
|
</div>
|
|
<div id=holder style="display:none">
|
|
<div id=errorbox style="width: 800px; height: 480px">Loading...</div>
|
|
<canvas id=canvas width=800 height=480 style="width: 800px; height: 480px; display: none"></canvas>
|
|
</div>
|
|
<script>
|
|
let canvas = document.querySelector('canvas')
|
|
let errorbox = document.querySelector('#errorbox')
|
|
let login = document.querySelector('#login')
|
|
let holder = document.querySelector('#holder')
|
|
let url_el = document.querySelector('#url')
|
|
let password_el = document.querySelector('#password')
|
|
let start_button = document.querySelector('#start')
|
|
let displayWidth, displayHeight
|
|
function resize() {
|
|
let bodyWidth = window.innerWidth
|
|
let maxWidth = Math.min(bodyWidth - 60, 800)
|
|
let bodyHeight = window.innerHeight
|
|
let maxHeight = Math.min(bodyHeight - 60, 480)
|
|
let equivalentHeight = maxWidth * 0.6
|
|
if (equivalentHeight >= maxHeight) {
|
|
displayHeight = Math.round(maxHeight)
|
|
displayWidth = Math.round(maxHeight * (5/3))
|
|
} else {
|
|
displayWidth = Math.round(maxWidth)
|
|
displayHeight = Math.round(maxWidth * 0.6)
|
|
}
|
|
canvas.style.width = displayWidth + 'px'
|
|
canvas.style.height = displayHeight + 'px'
|
|
//canvas.style.marginTop = '-' + displayHeight/2 + 'px'
|
|
errorbox.style.width = displayWidth + 'px'
|
|
errorbox.style.height = displayHeight + 'px'
|
|
//errorbox.style.marginTop = '-' + displayHeight/2 + 'px'
|
|
}
|
|
resize()
|
|
window.onresize = resize
|
|
let ctx = canvas.getContext("2d")
|
|
canvas.addEventListener('click', function (e) {
|
|
x = e.layerX
|
|
y = e.layerY
|
|
w = displayWidth
|
|
ws.send(localStorage.getItem('password') + ' ' + x + ' ' + y + ' ' + w)
|
|
})
|
|
let ws
|
|
function setup() {
|
|
ws = new WebSocket(localStorage.getItem('url'))
|
|
ws.onmessage = function(e) {
|
|
let type, pos, x, y, data, img, code, msg
|
|
type = e.data.split('%')[0]
|
|
if ( type == 'pic' ) {
|
|
pos = e.data.split('%')[1]
|
|
x = Number(pos.split('x')[0])
|
|
y = Number(pos.split('x')[1])
|
|
data = e.data.split('%')[2]
|
|
img = new Image()
|
|
img.src = data
|
|
img.addEventListener("load", function(){
|
|
ctx.drawImage(img,x,y)
|
|
})
|
|
errorbox.style.display = 'none'
|
|
canvas.style.display = 'block'
|
|
} else if ( type == 'err' ) {
|
|
code = e.data.split('%')[1]
|
|
msg = e.data.split('%')[2]
|
|
errorbox.textContent = msg
|
|
errorbox.style.display = 'block'
|
|
canvas.style.display = 'none'
|
|
console.error('Server reported error: ' + code + ': ' + msg)
|
|
}
|
|
}
|
|
ws.onerror = setup
|
|
ws.onclose = setup
|
|
}
|
|
start.onclick = function(e) {
|
|
e.preventDefault()
|
|
holder.style.display = 'block'
|
|
login.style.display = 'none'
|
|
localStorage.setItem('url', url_el.value)
|
|
localStorage.setItem('password', password_el.value)
|
|
setup()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|