-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstatic.html
135 lines (120 loc) · 5.16 KB
/
static.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<head>
<script>
window.onload = canvas;
k=0;
async function canvas()
{
var myCanvas = document.getElementById("myCanvas");
// Create WebSocket connection.
const socket = new WebSocket(`ws://${window.location.hostname}/`);
document.getElementById("btn_capture").addEventListener("click",(event)=>{sendCommand(0,socket);});
document.getElementById("btn_focus").addEventListener("click",(event)=>{sendCommand(1,socket);});
document.getElementById("btn_preview").addEventListener("click",(event)=>{sendCommand(2,socket);});
document.getElementById("btn_abort").addEventListener("click",(event)=>{sendCommand(3,socket);});
document.getElementById("btn_expose").addEventListener("click",(event)=>{sendCommand(4,socket);});
// Change binary type from "blob" to "arraybuffer"
socket.binaryType = "arraybuffer";
if( myCanvas && myCanvas.getContext("2d") )
{
const context = myCanvas.getContext("2d");
const image = context.createImageData( myCanvas.width,myCanvas.height);
const pixel = image.data;
var init = 1;
for(var i = 0;i<context.canvas.width;i++){
for(var j = 0;j<context.canvas.height;j++){
var row=j*context.canvas.width*4;
pixel[row + i*4] = 255*(Math.sin(j*Math.PI/10)*Math.sin(i*Math.PI/10)+1);//255 - pixel[row + i]; //red
pixel[row + i*4 + 1]= 255*(Math.sin(j*Math.PI/10)*Math.sin(i*Math.PI/10)+1);//255 - pixel[row + i + 1]; //green
pixel[row + i*4 + 2] = 255*(Math.sin(j*Math.PI/10)*Math.sin(i*Math.PI/10)+1);//255 - pixel[row + i + 2]; //blue
pixel[row + i*4 + 3] = 255;
}
}
socket.addEventListener("message", (event) => {
if (event.data instanceof ArrayBuffer) {
// binary frame
const view = new DataView(event.data);
console.log(view.getInt8(0));
for(var i =0;i<view.byteLength/3;i++){
var row=i*context.canvas.width*4;
pixel[k*4+row]=view.getUInt8(i);
pixel[k*4+1+row]=view.getInt8(i+1);
pixel[k*4+2+row]=view.getInt8(i+2);
pixel[k*4+3+row]=255;
}
k++;
if(k>context.canvas.width){
k=0;
}
context.putImageData(image, 0, 0);
} else {
// text frame
console.log(event.data);
}
});
socket.addEventListener("error",(event)=>
{
console.log(event);
});
}
}
function getFocus(pixelData){
if(pixelData instanceof ArrayBuffer){
const view = new DataView(pixelData)
pixels = pixelData.byteLength
focuslevel = 0
for(i =0; i< pixels-1;i=i+6){
focuslevel = focuslevel + Math.pow((view.getUint16(i)-view.getUint16(i+6)),2)
focuslevel = focuslevel + Math.pow((view.getUint16(i+2)-view.getUint16(i+8)),2)
focuslevel = focuslevel + Math.pow((view.getUint16(i+4)-view.getUint16(i+10)),2)
}
return focuslevel;
}
else{
return false;
}
}
async function sendCommand(command,socket){
commandBuffer = new ArrayBuffer(18);
cmd_form = document.getElementById("command_form");
commandView = new DataView(commandBuffer);
commandView.setUint16(0,1337,true);
commandView.setUint8(2,command);
commandView.setUint16(3,cmd_form.exp_time.value,true);
commandView.setUint8(5,cmd_form.resolution.value);
commandView.setUint8(6,cmd_form.gain.value);
commandView.setUint32(7,cmd_form.lines.value);
commandView.setUint16(11,cmd_form.steps_line.value);
commandView.setUint16(13,cmd_form.crop_start.value);
commandView.setUint16(15,cmd_form.crop_end.value);
commandView.setUint8(17,cmd_form.preview_avg.value)
socket.send(commandView.buffer);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="400">
</canvas>
<div>
<form id="command_form">
<label for="exp_time">Exposure time[1/s]:</label>
<input name="exp_time" type="number">
<br>
<label for="resolution">Resolution:</label>
<input name="resolution" type="number">
<br>
<label for="gain">Gain:</label><input name="gain" type="number"><br>
<label for="lines">Lines:</label><input name="lines" type="number"><br>
<label for="steps_line">Steps per line:</label><input name="steps_line" type="number"><br>
<label for="crop_start">Crop start:</label><input name="crop_start" type="number"><br>
<label for="crop_end">Crop end:</label><input name="crop_end" type="number"><br>
<label for="preview_avg">Preview avarage:</label><input name="preview_avg" type="number"><br>
<input type="button" id="btn_capture" value="capture" >
<input type="button" id="btn_focus" value="focus">
<input type="button" id="btn_preview" value="preview">
<input type="button" id="btn_abort" value="abort" >
<input type="button" id="btn_expose" value="expose">
</form>
</div>
</body>
</html>