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 >
0 commit comments