Skip to content

Commit 01fbae7

Browse files
committed
Updated CameraTest.html
1 parent 7f8d350 commit 01fbae7

File tree

2 files changed

+262
-0
lines changed

2 files changed

+262
-0
lines changed
Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
<html>
2+
<head>
3+
<script type="text/JavaScript">
4+
var url = "http://" + location.hostname+(location.port ? ':'+location.port: '') + "/telemachus/cameras/RPMCamera-ExtCam"; //url to load image from
5+
var refreshInterval = 330; //in ms
6+
var drawDate = true; //draw date string
7+
var img1;
8+
var img2;
9+
var img3;
10+
var img4;
11+
var img5;
12+
var img6;
13+
var img7;
14+
var img8;
15+
16+
17+
function init1() {
18+
var canvas = document.getElementById("canvas1");
19+
var context = canvas.getContext("2d");
20+
img1 = new Image();
21+
img1.onload = function() {
22+
canvas.setAttribute("width", img1.width)
23+
canvas.setAttribute("height", img1.height)
24+
context.drawImage(this, 0, 0);
25+
if(drawDate) {
26+
var now = new Date();
27+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
28+
var maxWidth = 100;
29+
var x = img1.width-10-maxWidth;
30+
var y = img1.height-10;
31+
context.strokeStyle = 'black';
32+
context.lineWidth = 2;
33+
context.strokeText(text, x, y, maxWidth);
34+
context.fillStyle = 'white';
35+
context.fillText(text, x, y, maxWidth);
36+
}
37+
};
38+
}
39+
function init2() {
40+
var canvas = document.getElementById("canvas2");
41+
var context = canvas.getContext("2d");
42+
img2 = new Image();
43+
img2.onload = function() {
44+
canvas.setAttribute("width", img2.width)
45+
canvas.setAttribute("height", img2.height)
46+
context.drawImage(this, 0, 0);
47+
if(drawDate) {
48+
var now = new Date();
49+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
50+
var maxWidth = 100;
51+
var x = img2.width-10-maxWidth;
52+
var y = img2.height-10;
53+
context.strokeStyle = 'black';
54+
context.lineWidth = 2;
55+
context.strokeText(text, x, y, maxWidth);
56+
context.fillStyle = 'white';
57+
context.fillText(text, x, y, maxWidth);
58+
}
59+
};
60+
}
61+
function init3() {
62+
var canvas = document.getElementById("canvas3");
63+
var context = canvas.getContext("2d");
64+
img3 = new Image();
65+
img3.onload = function() {
66+
canvas.setAttribute("width", img3.width)
67+
canvas.setAttribute("height", img3.height)
68+
context.drawImage(this, 0, 0);
69+
if(drawDate) {
70+
var now = new Date();
71+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
72+
var maxWidth = 100;
73+
var x = img3.width-10-maxWidth;
74+
var y = img3.height-10;
75+
context.strokeStyle = 'black';
76+
context.lineWidth = 2;
77+
context.strokeText(text, x, y, maxWidth);
78+
context.fillStyle = 'white';
79+
context.fillText(text, x, y, maxWidth);
80+
}
81+
};
82+
}
83+
function init4() {
84+
var canvas = document.getElementById("canvas4");
85+
var context = canvas.getContext("2d");
86+
img4 = new Image();
87+
img4.onload = function() {
88+
canvas.setAttribute("width", img4.width)
89+
canvas.setAttribute("height", img4.height)
90+
context.drawImage(this, 0, 0);
91+
if(drawDate) {
92+
var now = new Date();
93+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
94+
var maxWidth = 100;
95+
var x = img4.width-10-maxWidth;
96+
var y = img4.height-10;
97+
context.strokeStyle = 'black';
98+
context.lineWidth = 2;
99+
context.strokeText(text, x, y, maxWidth);
100+
context.fillStyle = 'white';
101+
context.fillText(text, x, y, maxWidth);
102+
}
103+
};
104+
}
105+
function init5() {
106+
var canvas = document.getElementById("canvas5");
107+
var context = canvas.getContext("2d");
108+
img5 = new Image();
109+
img5.onload = function() {
110+
canvas.setAttribute("width", img5.width)
111+
canvas.setAttribute("height", img5.height)
112+
context.drawImage(this, 0, 0);
113+
if(drawDate) {
114+
var now = new Date();
115+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
116+
var maxWidth = 100;
117+
var x = img5.width-10-maxWidth;
118+
var y = img5.height-10;
119+
context.strokeStyle = 'black';
120+
context.lineWidth = 2;
121+
context.strokeText(text, x, y, maxWidth);
122+
context.fillStyle = 'white';
123+
context.fillText(text, x, y, maxWidth);
124+
}
125+
};
126+
}
127+
function init6() {
128+
var canvas = document.getElementById("canvas6");
129+
var context = canvas.getContext("2d");
130+
img6 = new Image();
131+
img6.onload = function() {
132+
canvas.setAttribute("width", img6.width)
133+
canvas.setAttribute("height", img6.height)
134+
context.drawImage(this, 0, 0);
135+
if(drawDate) {
136+
var now = new Date();
137+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
138+
var maxWidth = 100;
139+
var x = img6.width-10-maxWidth;
140+
var y = img6.height-10;
141+
context.strokeStyle = 'black';
142+
context.lineWidth = 2;
143+
context.strokeText(text, x, y, maxWidth);
144+
context.fillStyle = 'white';
145+
context.fillText(text, x, y, maxWidth);
146+
}
147+
};
148+
}
149+
function init7() {
150+
var canvas = document.getElementById("canvas7");
151+
var context = canvas.getContext("2d");
152+
img7 = new Image();
153+
img7.onload = function() {
154+
canvas.setAttribute("width", img7.width)
155+
canvas.setAttribute("height", img7.height)
156+
context.drawImage(this, 0, 0);
157+
if(drawDate) {
158+
var now = new Date();
159+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
160+
var maxWidth = 100;
161+
var x = img7.width-10-maxWidth;
162+
var y = img7.height-10;
163+
context.strokeStyle = 'black';
164+
context.lineWidth = 2;
165+
context.strokeText(text, x, y, maxWidth);
166+
context.fillStyle = 'white';
167+
context.fillText(text, x, y, maxWidth);
168+
}
169+
};
170+
}
171+
function init8() {
172+
var canvas = document.getElementById("canvas8");
173+
var context = canvas.getContext("2d");
174+
img8 = new Image();
175+
img8.onload = function() {
176+
canvas.setAttribute("width", img8.width)
177+
canvas.setAttribute("height", img8.height)
178+
context.drawImage(this, 0, 0);
179+
if(drawDate) {
180+
var now = new Date();
181+
var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
182+
var maxWidth = 100;
183+
var x = img8.width-10-maxWidth;
184+
var y = img8.height-10;
185+
context.strokeStyle = 'black';
186+
context.lineWidth = 2;
187+
context.strokeText(text, x, y, maxWidth);
188+
context.fillStyle = 'white';
189+
context.fillText(text, x, y, maxWidth);
190+
}
191+
};
192+
}
193+
194+
195+
function refresh()
196+
{
197+
for (var i = 1; i < 9; i++) {
198+
if (i == 1)
199+
{
200+
img1.src = url + i + "?t=" + new Date().getTime();
201+
}
202+
if (i == 2)
203+
{
204+
img2.src = url + i + "?t=" + new Date().getTime();
205+
}
206+
if (i == 3)
207+
{
208+
img3.src = url + i + "?t=" + new Date().getTime();
209+
}
210+
if (i == 4)
211+
{
212+
img4.src = url + i + "?t=" + new Date().getTime();
213+
}
214+
if (i == 5)
215+
{
216+
img5.src = url + i + "?t=" + new Date().getTime();
217+
}
218+
if (i == 6)
219+
{
220+
img6.src = url + i + "?t=" + new Date().getTime();
221+
}
222+
if (i == 7)
223+
{
224+
img7.src = url + i + "?t=" + new Date().getTime();
225+
}
226+
if (i == 8)
227+
{
228+
img8.src = url + i + "?t=" + new Date().getTime();
229+
}
230+
console.log(i);
231+
}
232+
setTimeout("refresh()",refreshInterval);
233+
}
234+
235+
function start()
236+
{
237+
init1();
238+
init2();
239+
init3();
240+
init4();
241+
init5();
242+
init6();
243+
init7();
244+
init8();
245+
refresh();
246+
}
247+
248+
</script>
249+
<title>JavaScript Refresh Example</title>
250+
</head>
251+
252+
<body onload="JavaScript:start();">
253+
<canvas id="canvas1"></canvas>
254+
<canvas id="canvas2"></canvas>
255+
<canvas id="canvas3"></canvas>
256+
<canvas id="canvas4"></canvas>
257+
<canvas id="canvas5"></canvas>
258+
<canvas id="canvas6"></canvas>
259+
<canvas id="canvas7"></canvas>
260+
<canvas id="canvas8"></canvas>
261+
</body>
262+
</html>
512 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)