Samuel Sloniker
8ea09771e8
* First step of server redesign Only thing left is to re-add disconnect handling * Convert client to use img Removing the tiling feature allowed me to switch the client to use img instead of canvas. * Rename "canvas" to "img" "canvas" isn't a good variable name for an <img> element * Handle disconnects (again) I had removed disconnect handling when I started the partial rewrite. This commit re-adds it. * Remove obsolete code * Change dependency to websocket-server in requirements.txt * Fix Chrome click bug This should fix the Chrome click bug.
121 lines
2.9 KiB
JavaScript
121 lines
2.9 KiB
JavaScript
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)
|
|
}
|
|
img.style.width = displayWidth + 'px'
|
|
img.style.height = displayHeight + 'px'
|
|
errorbox.style.width = displayWidth + 'px'
|
|
errorbox.style.height = displayHeight + 'px'
|
|
}
|
|
|
|
|
|
function setup() {
|
|
ws = new WebSocket(localStorage.getItem('url'))
|
|
ws.onmessage = function(e) {
|
|
window.m = e
|
|
let type, data, code, msg
|
|
type = e.data.split('%')[0]
|
|
if (type == 'ver') {
|
|
ws.send('pass ' + localStorage.getItem('password'))
|
|
setInterval(function(){ws.send('ack')}, 3000)
|
|
} else if ( type == 'pic' ) {
|
|
data = e.data.split('%')[2]
|
|
img.src = data
|
|
errorbox.style.display = 'none'
|
|
img.style.display = 'block'
|
|
} else if ( type == 'err' ) {
|
|
code = e.data.split('%')[1]
|
|
msg = e.data.split('%')[2]
|
|
errorbox.textContent = msg
|
|
errorbox.style.display = 'block'
|
|
img.style.display = 'none'
|
|
console.error('Server reported error: ' + code + ': ' + msg)
|
|
if (code[0] == '*') {
|
|
errorbox.innerHTML = msg + '<br>Please refresh page'
|
|
ws.onclose = function(e){}
|
|
ws.onerror = function(e){}
|
|
}
|
|
} else if (type == 'ack') {
|
|
ws.send('ack')
|
|
}
|
|
}
|
|
ws.onerror = function(e){
|
|
errorbox.innerHTML = 'Connection lost<br>Please refresh page'
|
|
errorbox.style.display = 'block'
|
|
img.style.display = 'none'
|
|
}
|
|
ws.onclose = function(e){
|
|
errorbox.innerHTML = 'Connection lost<br>Please refresh page'
|
|
errorbox.style.display = 'block'
|
|
img.style.display = 'none'
|
|
}
|
|
ws.onopen = function(e) {
|
|
ws.send('maxver 1')
|
|
}
|
|
}
|
|
|
|
|
|
function touch(e) {
|
|
click_timeout = setTimeout(function() {
|
|
is_short = false
|
|
}, 1000)
|
|
is_short = true
|
|
}
|
|
|
|
|
|
function release(e) {
|
|
x = e.offsetX || e.layerX
|
|
y = e.offsetY || e.layerY
|
|
w = displayWidth
|
|
length = is_short?false:true
|
|
ws.send('touch ' + x + ' ' + y + ' ' + w + ' ' + length)
|
|
clearTimeout(click_timeout)
|
|
is_short = true
|
|
}
|
|
|
|
|
|
function connect(e) {
|
|
e.preventDefault()
|
|
holder.style.display = 'block'
|
|
login.style.display = 'none'
|
|
localStorage.setItem('url', url_el.value)
|
|
localStorage.setItem('password', password_el.value)
|
|
setup()
|
|
}
|
|
|
|
|
|
let img = document.querySelector('#img')
|
|
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 is_short = true
|
|
let click_timeout
|
|
|
|
let displayWidth, displayHeight
|
|
|
|
let ws
|
|
|
|
|
|
resize()
|
|
window.onresize = resize
|
|
|
|
img.onmousedown = touch
|
|
img.onmouseup = release
|
|
|
|
start.onclick = connect
|