/[opencvs]/eyes/image_placer.html
ViewVC logotype

Contents of /eyes/image_placer.html

Parent Directory Parent Directory | Revision Log Revision Log


Revision 1.1 - (show annotations)
Thu Jan 22 00:58:47 2015 UTC (3 years, 5 months ago) by hib
Branch: MAIN
CVS Tags: HEAD
File MIME type: text/html
Adding als specific things. working on cassidi
1
2
3
4 <html>
5 <head>
6 <script type="application/javascript">
7
8
9
10
11
12 /* global variables */
13
14 var line="000|003|0|3360|0|4480|656|3891|905|4669|205|204|198|0|0|0|1120|656|531|905|1309|0|3360|905|1309|267686x198428043538693x7205032xn.png|-177.339844|-39.414551|6.762141";
15 //line = "015|011|22655|12552|21916|13631|24016|12320|24016|13440|75|67|59|739|232|0|1311|2100|0|2100|1120|21916|12320|2100|1311|1507847x4076043754756x1921031039xn.png|-25.128906|-4.582520|4.68344";
16 line = "009|008|10420|6615|11550|8825|12362|6950|12900|9065|133|124|106|0|0|1130|2210|1942|335|2480|2450|10420|6615|2480|2450|379744x3887408839001x1070045408xn.png|-6.650879|-36.358887|6.835069";
17 //line = "007|006|7998|5320|7340|6246|9360|4710|8919|5495|236|244|246|658|610|0|1536|2020|0|1579|785|7340|4710|2020|1536|1460036x463371677105766x2002466107xn.png|-25.128906|-4.582520|4.683441";
18
19 var newline;
20
21 /* line has a line from the final_frames.txt file, which we are going to modify.
22 This line has several parameters separated by a vertical bar.
23 Not to go through each parameter - here arte the ones we care about
24 position what description
25 0 x column or x position for our montage. 0 to 15
26 1 y row or y position for our montage. 0 to 15
27 10 r The average color of the quad red amount. 0 to 255
28 11 g The average color of the quad green amount. 0 to 255
29 12 b The average color of the quad blue amount. 0 to 255
30 25 name The name of the image file. This name is expected to be scaled to 512x512 in ri folder, and the gost image showing the important parts is in rk folder.
31 26 xoffset The x offset that we add to the pixel position to determine the final pixel position
32 27 yoffset The y offset that we add to the pixel position to determine the final pixel position
33 28 scale The scale to multiply the 512x512 image by to make it fit properly for this quad.
34 */
35
36 var array;
37 /* This array is a parse of the line, where each array position corresponds to a field in the original line */
38
39 var reader;
40
41 var column; /* column stored as 000-015 */
42 var row; /* row stored as 000-015 */
43 var r; /* average quad red color 0-255 */
44 var g; /* average quad green color 0-255 */
45 var b; /* average quad blue color 0-255 */
46 var image_name; /* name of the image file */
47 var xoffset; /* x offset to position the image file in order to have it fit */
48 var yoffset; /* y offset to position the image file in order to have it fit */
49 var scale; /* scale to position the image file in order to have it fit */
50 var screen_scale = 0.33333333333333;
51
52 var in_doc = false; /* set to true when in the document */
53 var mouse_important = false; /* used to ignore mouse clicks not in the document */
54
55 /* vvv These three variables are the ones to change vvv */
56 var new_xoffset; /* the new adjusted x offset to position the image file in order to have it fit */
57 var new_yoffset; /* the new adjusted y offset to position the image file in order to have it fit */
58 var new_scale; /* The new adjusted scale for the image. */
59 /* ^^^ These three variables are the ones to change ^^^ */
60
61
62 var canvas; /* A canvas is a graphics manipulation system (a.k.a a window). This canvas is on screen, so we see the affect to it */
63 var context; /* a context is a part of the canvas that allows us to do graphic manipulation. Really the context and canvas should be the same thing. Fucking objective programmers! */
64 var offscreen; /* offscreen is also a canvas. But this is not shown on the screen. We use this to finesse the images before hand */
65 var offscreenContext; /* The context part for the offscreen */
66
67 /* images - Images can show the picture, and thats about it. to make changes, we move them into imagedata objects via code. */
68 var base; /* base image 512x512 from ri */
69 var mask1; /* ghost mask 512x512 from rk */
70 var mask2; /* full sizepiece of the puzzle that we translate the other masks onto */
71 var baseImageData;
72 var mask1ImageData;
73 var mask2Imagedata;
74
75
76
77 /* mouse movement variables This gets the down x and down y position when the mouse is down, and is used to change the location */
78 var mouse_down_x;
79 var mouse_down_y;
80
81
82
83
84
85 /* check to see what type of browser this is, because
86 some esoteric things take special logic for each browser */
87 var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
88 // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
89 var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
90 var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
91 // At least Safari 3+: "[object HTMLElementConstructor]"
92 var isChrome = !!window.chrome && !isOpera; // Chrome 1+
93 var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
94
95
96
97
98
99
100
101 function init() {
102 canvas = document.getElementById("canvas");
103 offscreen = document.createElement('canvas');
104 if (!(canvas.getContext))
105 {
106 alert("Canvas could not be created. Fail.");
107 return;
108 }
109 context = canvas.getContext("2d");
110 offscreenContext = offscreen.getContext("2d");
111 }
112
113
114
115 /* setup_line */
116 function setup_line() {
117 /* this initializes everything, loads the image, which in turn draws the image */
118
119 line = document.getElementsByName("inline")[0].value;
120 if (line === "") return;
121
122 load_images(line);
123
124 /* set up event handling */
125 {
126 mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
127 if (!mie) {
128 document.captureEvents(Event.MOUSEUP);
129 document.captureEvents(Event.MOUSEDOWN);
130 }
131
132 // on page onload
133 if(!(canvas.attachEvent)) {
134 window.addEventListener('mousewheel', handleWheel, false);
135 canvas.addEventListener('mousewheel', handleWheel, false);
136
137 /* got this info from http://stackoverflow.com/questions/11392318/how-to-disable-the-mouse-wheel-click-button*/
138 if (isIE) {
139 document.attachEvent('onmousewheel', function(e){
140 if (!e) var e = window.event;
141 e.returnValue = false;
142 e.cancelBubble = true;
143 mouse_wheel(e);
144 return false;
145 }, false);
146 } // ie
147 else if (isSafari) {
148 document.addEventListener('mousewheel', function(e){
149 e.stopPropagation();
150 e.preventDefault();
151 e.cancelBubble = false;
152 mouse_wheel(e);
153 return false;
154 }, false);
155 }
156 else if (isOpera) {
157 document.attachEvent('mousewheel', function(e){
158 if (!e) var e = window.event;
159 e.returnValue = false;
160 e.cancelBubble = true;
161 mouse_wheel(e);
162 return false;
163 }, false);
164 }
165 else if (isFirefox||isChrome) {
166 document.addEventListener('DOMMouseScroll', function(e){
167 e.stopPropagation();
168 e.preventDefault();
169 e.cancelBubble = false;
170 mouse_wheel(e);
171 return false;
172 }, false);
173 }
174 }
175
176 canvas.onmouseup = function (e) {mouse_up(e);};
177 canvas.onmousedown = function (e) {mouse_down(e);};
178 canvas.onkeydown = function(e) {key_down(e);}
179 canvas.onmouseover = function() { in_doc = true; }
180 canvas.onmouseout = function() { in_doc = false;}
181 }
182
183 }
184
185
186
187 /*
188
189 013|003|19501|3762|20233|5092|20896|3311|21494|4888|181|208|240|0|451|732|1781|1395|0|1993|1577|19501|3311|1993|1781|600450x493655484026754x912032595xn.png|-70.01648262446996|-85.5779700356194|10.958542
190
191 */
192
193
194 /* load_images */
195 function load_images(line) {
196 /* convert the line into an array */
197 array = line.split("|");
198 column=array[0]
199 row=array[1];
200 r = array[10];
201 g = array[11];
202 b = array[12];
203 image_name = array[25];
204 xoffset=array[26];
205 yoffset=array[27];
206 scale = array[28];
207 new_xoffset = xoffset;
208 new_yoffset = yoffset;
209 new_scale = scale;
210
211 var count = 0;
212 // Create a new image object
213 mask2 = new Image();
214 base = new Image();
215 mask1 = new Image();
216
217 //Provide the source directory of the image you are about to upload.
218 mask2.src = "r/" + column + "_" + row + "_a.png";
219 base.src = "ri/" + image_name;
220 mask1.src = "rk/" + image_name;
221
222 mask2.onload = function() {
223 /* mask2 is loaded once - as it does not change with scale and position. here we move the information from the "Image" to "ImageData" */
224 canvas.width = mask2.width * screen_scale;
225 canvas.height = mask2.height * screen_scale;
226 offscreen.width = mask2.width * screen_scale;
227 offscreen.height = mask2.height * screen_scale;
228 offscreenContext.drawImage(mask2,0,0,offscreen.width,offscreen.height);
229 mask2ImageData= offscreenContext.getImageData(0,0,offscreen.width,offscreen.height);
230
231 /* This ++count will make sure that we call draw_image regardless of the order of which function gets loaded first, second, or third */
232 if (++count==3) {
233 draw_image();
234 }
235 }
236
237 /* This ++count will make sure that we call draw_image regardless of the order of which function gets loaded first, second, or third */
238 base.onload = function() {
239 if (++count==3) {
240 draw_image();
241 }
242 }
243
244 /* This ++count will make sure that we call draw_image regardless of the order of which function gets loaded first, second, or third */
245 mask1.onload = function() {
246 if (++count==3) {
247 draw_image();
248 }
249 }
250 }
251
252
253
254 function mouse_down(e) {
255 mouse_down_x = e.pageX;
256 mouse_down_y = e.pageY;
257 mouse_important = in_doc;
258 }
259
260 function mouse_up(e) {
261 var mouse_up_x;
262 var mouse_up_y;
263 mouse_up_x = e.pageX;
264 mouse_up_y = e.pageY;
265 if (line === "") return;
266 if (!((mouse_important)&&(in_doc))) { return;}
267
268 /* convert this movement to deltax,delta y in pixels*/
269 var deltax;
270 var deltay;
271 deltax = mouse_up_x - mouse_down_x;
272 deltay = mouse_up_y - mouse_down_y;
273
274 deltax = deltax / screen_scale;
275 deltay = deltay / screen_scale;
276 deltax = deltax / new_scale;
277 deltay = deltay / new_scale;
278
279 /* convert this to new_offset */
280 new_xoffset = parseFloat(new_xoffset) + parseFloat(deltax);
281 new_yoffset = parseFloat(new_yoffset) + parseFloat(deltay);
282
283 /* redraw the image in the new position */
284 draw_image();
285
286 }
287
288
289 function mouse_wheel(e) {
290 /* derived some from http://www.javascriptkit.com/javatutors/onmousewheel.shtml */
291 var evt=window.event || e //equalize event object
292 var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
293 var delta_scale = 1.0;
294 if (line === "") return;
295
296 var count = 0;
297 while ((delta!= 0)&&(count < 5)) {
298 if (delta<0) {
299 delta_scale = delta_scale * 0.9900990099009900990099009900;
300 delta += 120;
301 }
302 else {
303 delta_scale = delta_scale * 1.01;
304 delta -= 120;
305 }
306 count = count + 1;
307 }
308 //new_xoffset = new_xoffset / delta_scale;
309 //new_yoffset = new_yoffset / delta_scale;
310 new_scale = new_scale * delta_scale;
311 draw_image();
312 }
313
314
315 function key_down(e) {
316 /*
317 27 esc - revert back to the original
318 13 enter - save as the original
319 u = 38 d=40 l = 37 r=39 arrow keys - traverse along the image
320 */
321 if (line === "") return;
322 if (e.keyCode==27) { //escape
323 new_xoffset = xoffset;
324 new_yoffset = yoffset;
325 new_scale = scale;
326 draw_image();
327 }
328 }
329
330
331
332
333
334
335
336 function handleWheel(event) {
337 var app = document.getElementById('flashSite');
338 var delta = 0;
339 if (!event) event = window.event;
340 if (event.wheelDelta) {
341 delta = -(event.wheelDelta/60);
342 } else if (event.detail) {
343 delta = event.detail;
344 }
345 var o = {
346 x: event.screenX,
347 y: event.screenY,
348 delta: delta,
349 ctrlKey: event.ctrlKey,
350 altKey: event.altKey,
351 shiftKey: event.shiftKey
352 };
353 if (app && typeof(app.handleWheel) == 'function')
354 app.handleWheel(o);
355 }
356
357
358 function redo_text() {
359 var l;
360 array[26] = new_xoffset;
361 array[27] = new_yoffset;
362 array[28] = new_scale;
363 l = array.join("|");
364 line = l;
365 document.getElementsByName("inline")[0].value = l;
366 }
367
368
369
370
371 function draw_image() {
372 redo_text();
373
374 /* load up the base image, scaled and positioned into the offscreen context into the ImageData so that we can see the pixels */
375 offscreenContext.drawImage(base, new_xoffset*new_scale*screen_scale, new_yoffset*new_scale*screen_scale
376 , base.width*new_scale*screen_scale, base.height*new_scale*screen_scale);
377 baseImageData = offscreenContext.getImageData(0,0,offscreen.width,offscreen.height);
378
379 /* Now do the same with the mask1 */
380 offscreenContext.drawImage(mask1, new_xoffset*new_scale*screen_scale, new_yoffset*new_scale*screen_scale,
381 mask1.width*new_scale*screen_scale,mask1.height*new_scale*screen_scale);
382 mask1ImageData = offscreenContext.getImageData(0,0,offscreen.width,offscreen.height);
383
384 /* Go through each pixel and combine the three images:
385 mask2 is used to decide how much of the average quad color should be mixed. And this is inverse (black makes more like average quad, white less )
386 We add to that the color from base - with the alpha from mask1, in order to mix the 3 images together.
387 */
388 for (i=0;i<offscreen.width*offscreen.height;i++) {
389 /* data is a one dimansional array - with 2 dimsnaional data, actually 3 dimenstions
390 first there is +0,+1,+2,+3 or an array of 4 that denotes the r,g,b and alpha. Numbers are from 0 to 255
391 Then this array of 4 is arrayed again by the width of the screen
392 And this array is arrayed again by the length of the screen
393 For this case, we don't care about denoting the width and length, because we are doing the same math
394 on all pixels regardless of the x,y position
395 I hope this explains the *4 and *4+1, *4 + 2. *4 + 3
396 */
397 /* red */
398 baseImageData.data[i*4+0] = (baseImageData.data[i*4+0] * mask1ImageData.data[i*4] + r*(1+ (255-mask2ImageData.data[i*4]))) /
399 ( mask1ImageData.data[i*4] + (255-mask2ImageData.data[i*4])+1);
400 /* green */
401 baseImageData.data[i*4+1] = (baseImageData.data[i*4+1] * mask1ImageData.data[i*4] + g*(1+ (255-mask2ImageData.data[i*4]))) /
402 ( mask1ImageData.data[i*4] + (255-mask2ImageData.data[i*4])+1);
403 /* blue */
404 baseImageData.data[i*4+2] = (baseImageData.data[i*4+2] * mask1ImageData.data[i*4] + b*(1+ (255-mask2ImageData.data[i*4]))) /
405 ( mask1ImageData.data[i*4] + (255-mask2ImageData.data[i*4])+1);
406 baseImageData.data[i*4+3] = 255; /* alpha */
407 }
408
409 /* put this on the screen */
410 context.putImageData(baseImageData,0,0);
411 }
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439 </script>
440
441 <title>Scale an image on a canvas</title>
442 </head>
443 <body onload="init();">
444 <form>
445 <textarea name=inline onblur=setup_line() rows=7 cols=40></textarea>
446
447 <br>
448 <canvas id="canvas" width=1000 height=1000></canvas><br>
449 </form>
450 </body>
451 </html>

  ViewVC Help
Powered by ViewVC 1.1.5