-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (78 loc) · 2.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PixyVision Debug Viewer</title>
</head>
<body>
<canvas id="canvas", width="320", height="200"></canvas>
<p id="distance">Distance Offset: null</p>
<p id="XY">Center XY: (null,null)</p>
<p id="height">Box Height: null</p>
<p id="width">Box Width: null</p>
<p id="Xoffset">Center X offset: null</p>
<p id="Yoffset">Center Y offset: null</p>
<p id="XDegOffset">X Degree offset: null</p>
</body>
<script>
const {ipcRenderer} = require("electron");
let fov = 75
let degPerPixel = 75/320
let coordX = 160
let coordY = 100
let width = 50
let height = 50
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 320, 200);
function redraw() {
ctx.fillStyle = '#000000'
ctx.fillRect(0,0,320,200)
ctx.beginPath()
ctx.moveTo(160, 0)
ctx.lineTo(160, 200)
ctx.moveTo(0,100)
ctx.lineTo(320, 100)
ctx.strokeStyle = '#00ff00'
ctx.stroke()
}
function dot() {
redraw()
ctx.fillStyle = "#FF0000"
ctx.fillRect(coordX-2, coordY-2, 4,4)
ctx.strokeStyle = '#0000ff'
ctx.strokeRect(coordX-(width/2), coordY-(height/2), width, height)
ctx.beginPath()
ctx.moveTo(160, 100)
ctx.lineTo(coordX,coordY)
ctx.strokeStyle = "#FFFF00"
ctx.stroke()
let distance = document.getElementById("distance");
let centerXY = document.getElementById("XY");
let h = document.getElementById("height");
let w = document.getElementById("width");
let xoffset = document.getElementById("Xoffset");
let yoffset = document.getElementById("Yoffset");
let XDegOffset = document.getElementById("XDegOffset")
distance.innerHTML = `Distance Offset: ${Math.sqrt(Math.pow((coordX-160),2)+Math.pow((coordY-100),2))}`
centerXY.innerHTML = `Center XY: (${coordX},${coordY})`
h.innerHTML = `Box Height: ${height}`
w.innerHTML = `Box Width: ${width}`
xoffset.innerHTML = `Center X offset: ${Math.abs(coordX-160)}`
yoffset.innerHTML = `Center Y offset: ${Math.abs(coordY-100)}`
XDegOffset.innerHTML = `X Degree offset: ${degPerPixel*Math.abs(coordX-160)}°`
}
dot()
ipcRenderer.on('newData', (event, X, Y, W, H) => {
coordX = X
coordY = Y
width = W
height = H
dot()
})
ipcRenderer.on("loaded", (event) => {
ipcRenderer.send("confirmed-load")
})
</script>
</html>