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
$(function(){
//init();
});
function init(){
var t = $("<table>").html("\
<tr>\
<td id='controls' valign='top'></td>\
<td id='pic1'></td>\
<td id='pic2'></td>\
</tr><tr>\
<td></td>\
<td id='pic3'></td>\
<td id='pic4'></td>\
</tr>");
$("body").append(t);
var port = 2323;
for(i=0;i<4;i++){
var url = "http://"+window.location.hostname+":"+(port+i)+"/img";
var ref = "http://"+window.location.hostname+":"+(port+i)+"/mimg";
a = $("<a>",{href:ref});
img = $("<img>",{id:"chn"+i}).css({
width: "500px"
});
img.attr("src",url);
img.attr("src_init",url);
$("#pic"+(i+1)).append($("<div>").append(a.append(img)));
img.load(function(){
d = new Date();
n = d.getTime();
this.src = $(this).attr("src_init")+"&"+n;
});
}
ct = $("<table>");
tmpstr = "<tr><td>Chn</td><td>Exposure,ms</td><td>WB</td><td>Quality,%</td></tr>";
for(i=0;i<4;i++){
tmpstr += "<tr>\
<td>"+(i+1)+"</td>\
<td><input type='text' id='exp"+i+"' class='exp' value='1' /></td>\
<td>\
<input type='text' id='r"+i+"' class='gain r' value='13' />\
<input type='text' id='gr"+i+"' class='gain g' value='10' />\
<input type='text' id='b"+i+"' class='gain b' value='12' />\
<input type='text' id='gb"+i+"' class='gain g' value='10' />\
</td>\
<td><input type='text' id='q"+i+"' class='exp' value='80'/></td>\
</tr>";
}
ct.html(tmpstr);
$("#controls").append(ct);
for(i=0;i<4;i++){
$("#exp"+i).attr("index",i);
$("#exp"+i).change(function(){
var exp = Math.round(parseInt($(this).val())*1000/33.5);
$.ajax({
url: "imgsrv.py?expos="+exp+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
complete: function(){console.log("exposure set");}
});
});
$("#q"+i).attr("index",i);
$("#q"+i).change(function(){
$.ajax({
url: "imgsrv.py?y_quality="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
complete: function(){console.log("quality set");}
});
});
$("#r"+i).attr("index",i);
$("#r"+i).change(function(){
$.ajax({
url: "imgsrv.py?gain_r="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
complete: function(){console.log("gain_r set");}
});
});
$("#gr"+i).attr("index",i);
$("#gr"+i).change(function(){
$.ajax({
url: "imgsrv.py?gain_gr="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
complete: function(){console.log("gain_gr set");}
});
});
$("#b"+i).attr("index",i);
$("#b"+i).change(function(){
$.ajax({
url: "imgsrv.py?gain_b="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
complete: function(){console.log("gain_b set");}
});
});
$("#gb"+i).attr("index",i);
$("#gb"+i).change(function(){
$.ajax({
url: "imgsrv.py?gain_gb="+$(this).val()+"&flip_x=0&flip_y=0&channel="+$(this).attr("index"),
complete: function(){console.log("gain_gb set");}
});
});
}
}