Context Navigation

Back to Ticket #8654

Ticket #8654: page_source.txt

File page_source.txt, 51.5 KB (added by atarkowska, 7 years ago)

Line
1	<?xml version="1.0" encoding="iso-8859-1"?>
2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4	<html xmlns="http://www.w3.org/1999/xhtml">
5
6
7
8	<head>
9
10
11
12
13	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/ome.viewport.css" media="all" />
14	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/ome.gs_slider.css" media="all" />
15	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/base.css" media="all" />
16	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/ome.snippet_header_logo.css" media="all" />
17	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/ome.postit.css" />
18	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/ome.rangewidget.css" />
19	<link rel="stylesheet" type="text/css" href="/static/3rdparty/farbtastic/farbtastic.css" media="all" />
20	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/ome.colorbtn.css" />
21	<link rel="stylesheet" type="text/css" href="/static/3rdparty/JQuerySpinBtn.css" />
22	<link rel="stylesheet" type="text/css" href="/static/3rdparty/jquery-ui-1.8.19/jquery-ui-1.8.19.custom.css" media="all" />
23	<link rel="stylesheet" type="text/css" href="/static/webgateway/css/omero_image.css" media="all" />
24	<link rel="stylesheet" type="text/css" href="/static/3rdparty/panojs/panojs.css" media="all" />
25
26
27
28
29	<!-- extend here to add page title -->
30	<title>
31
32	P-TRE_12_R3D_D3D.dv
33
34	</title>
35
36
37
38
39
40	<script type="text/javascript" src="/static/3rdparty/jquery-1.7.2.js"></script>
41	<script type="text/javascript" src="/static/3rdparty/aop.js"></script>
42
43	<script type="text/javascript" src="/static/webgateway/js/ome.gs_utils.js"></script>
44	<script type="text/javascript" src="/static/webgateway/js/ome.viewportImage.js"></script>
45	<script type="text/javascript" src="/static/webgateway/js/ome.gs_slider.js"></script>
46	<script type="text/javascript" src="/static/webgateway/js/ome.viewport.js"></script>
47
48	<script type="text/javascript" src="/static/3rdparty/jquery-ui-1.8.19/jquery-ui-1.8.19.custom.min.js"></script>
49	<script type="text/javascript" src="/static/webgateway/js/ome.smartdialog.js"></script>
50	<script type="text/javascript" src="/static/3rdparty/JQuerySpinBtn.js"></script>
51	<script type="text/javascript" src="/static/webgateway/js/ome.colorbtn.js"></script>
52	<script type="text/javascript" src="/static/webgateway/js/ome.postit.js"></script>
53	<script type="text/javascript" src="/static/3rdparty/jqDnR.js"></script>
54	<script type="text/javascript" src="/static/3rdparty/jquery.selectboxes.js"></script>
55	<script type="text/javascript" src="/static/webgateway/js/ome.rangewidget.js"></script>
56	<script type="text/javascript" src="/static/3rdparty/farbtastic/farbtastic.js"></script>
57	<script type="text/javascript" src="/static/webgateway/js/ome.gs_utils.js"></script>
58	<!-- for display of ROIs over the image -->
59	<script type="text/javascript" src="/static/webgateway/js/ome.roidisplay.js"></script>
60	<script type="text/javascript" src="/static/3rdparty/raphael/raphael-min.js"></script>
61	<script type="text/javascript" src="/static/3rdparty/raphael/scale.raphael.js"></script>
62
63	<!-- big images -->
64
65	<script type="text/javascript" src="/static/3rdparty/panojs/utils.js"></script>
66	<script type="text/javascript" src="/static/3rdparty/panojs/PanoJS.js"></script>
67	<script type="text/javascript" src="/static/3rdparty/panojs/controls.js"></script>
68	<script type="text/javascript" src="/static/3rdparty/panojs/pyramid_Bisque.js"></script>
69	<script type="text/javascript" src="/static/3rdparty/panojs/pyramid_imgcnv.js"></script>
70	<script type="text/javascript" src="/static/3rdparty/panojs/pyramid_Zoomify.js"></script>
71	<script type="text/javascript" src="/static/webgateway/js/ome.panojs.control_thumbnail.js"></script>
72	<script type="text/javascript" src="/static/3rdparty/panojs/control_info.js"></script>
73	<script type="text/javascript" src="/static/3rdparty/panojs/control_svg.js"></script>
74	<script type="text/javascript" src="/static/3rdparty/panojs/control_roi.js"></script>
75	<script type="text/javascript" src="/static/3rdparty/jquery.mousewheel.js"></script>
76
77
78
79
80
81	<div id="header"></div>
82
83
84
85
86
87	</head>
88	<body>
89
90
91
92
93	<script type="text/javascript">
94	/* <![CDATA[ */
95
96	/**
97	* The viewport object holds the image browsing viewport that has all the logic for connecting to
98	* the supporting ajax server.
99	*/
100	var viewport;
101	var on_batchCopyRDefs = false;
102
103	/**
104	* Zoom input box change event handler.
105	*/
106	function zoomCheck (i) {
107	var percent = parseFloat($(i).attr('value').replace(/%/, ''));
108	if (isNaN(percent)) {
109	percent = 100;
110	}
111	/* Zoom window */
112	viewport.setZoom(percent);
113	}
114
115	function hidePicker () {
116	$(".picker").get(0) && $(".picker").get(0).hide_picker && $(".picker").get(0).hide_picker();
117	/$('.picker-selected').html(' ');/
118	}
119
120	/**
121	* Bound to the window resize, calculates the viewport size and top tool box positions.
122	*/
123	var calcResize = function () {
124	var dim = { height: $(window).height(),
125	width: $(window).width()};
126
127	var ts_visible = $('.figure-box').length && $('.figure-box').css('display') != "none";
128	var zl = $('#z-axis-legend');
129	var tl = $('#t-axis-legend');
130	/* Resize the viewport */
131	$.extend(dim, viewport.self.offset());
132
133	var h = dim.height - dim.top - 33 - (ts_visible?$('.figure-box').height():0);
134	var w = dim.width - dim.left - zl.width() - 0;
135
136	/* The following is needed as a hack for IE */
137	//TEMP CHANGE, causing extra step of tiling
138	//viewport.viewport.height(10);
139
140	viewport.self
141	.height(h - tl.height())
142	.width(w);
143	viewport.refresh(true);
144
145
146	//ts_visible &&
147	$('.figure-box')
148	.width(dim.width - dim.left - 20 + zl.width())
149	.css('top',viewport.self.height()+15+tl.height());
150
151	zl.css('top', h/2 - (zl.height()/2));
152	tl.css({top: h-tl.height()+15, left: (w/2)+dim.left - (tl.width()/2)});
153	};
154
155	var getMetadata = function () {
156	return viewport.getMetadata();
157	}
158
159	var showChannelWindowHelp = function () {
160	if (!gs_loadBlockUI (showChannelWindowHelp)) {
161	return false;
162	}
163	$.blockUI({
164	timeout: 0,
165	message: $('#channel-window-help'),
166
167	css: {width: '60%', left: '20%', top: '20%'}
168
169	});
170	$('.blockMsg').attr('title','Click to close').click($.unblockUI);
171	$('.blockOverlay').attr('title','Click to close').click($.unblockUI);
172	return false;
173	}
174
175	var rdChanSelHelper = function (e) {
176	if (!$('#rd-wblitz-rmodel').get(0).checked) {
177	// Grey model selected, select a single channel active
178	var t = $('[id^=rd-wblitz-ch]').filter(':checked');
179	if (t.size() > 1) {
180	if (e.checked) {
181	t.filter('[id!='+e.id+']:checked').attr('checked', false);
182	} else {
183	t.filter(':checked').not(':first').attr('checked', false);
184	}
185	} else if (t.size() == 0) {
186	$('[id^=rd-wblitz-ch]:first').attr('checked', true)
187	}
188	}
189	return false;
190	}
191
192	/**
193	* Gets called when an image is initially loaded.
194	* This is the place to sync everything; rendering model, quality, channel buttons, etc.
195	*/
196	var _refresh_cb = function (ev, viewport) {
197	/* Sync inputs with initial values */
198
199	$('#wblitz-rmodel').attr('checked', !viewport.isGreyModel());
200	$('#wblitz-invaxis').attr('checked', viewport.loadedImg.rdefs.invertAxis);
201	//$('#rd-wblitz-rmodel').attr('checked', !viewport.isGreyModel());
202
203	var q = viewport.getQuality();
204	if (q) {
205	var qr = $('#wblitz-quality > [value='+q.toFixed(1)+']');
206	if (qr.length) {
207	qr.attr('selected','selected');
208	}
209	}
210
211	/* Prepare the channels box and the rendering definition for the channels */
212	var box = $('#wblitz-channels-box');
213	var channels = viewport.getChannels();
214	box.empty();
215	for (i in channels) {
216	box.append('<button id="wblitz-ch'+i+'"\
217	class="squared' + (channels[i].active?' pressed':'') + '"\
218	style="background-color: #'+channels[i].color+'"\
219	title="'+channels[i].label+'"\
220	onclick="viewport.toggleChannel('+i+')">'+channels[i].label+'</button>');
221
222	}
223
224	/* Image details */
225	var tmp = getMetadata();
226	$('#wblitz-image-name').html(tmp.imageName);
227	$('#wblitz-image-description-content').html(tmp.imageDescription.replace(/\n/g, '<br />'));
228	$('#wblitz-image-author').html(tmp.imageAuthor);
229	$('#wblitz-image-pub').html(tmp.projectName);
230	$('#wblitz-image-pubid').html(tmp.projectId);
231	$('#wblitz-image-timestamp').html(tmp.imageTimestamp);
232
233
234	/$('#wblitz-shortname').attr('title', tmp.imageName).html(gs_text_trim(tmp.imageName, 15, true));/
235
236	tmp = viewport.getSizes();
237	$('#wblitz-image-width').html(tmp.width);
238	$('#wblitz-image-height').html(tmp.height);
239	$('#wblitz-image-z-count').html(tmp.z);
240	$('#wblitz-image-t-count').html(tmp.t);
241	tmp = viewport.getPixelSizes();
242	$('#wblitz-image-pixel-size-x').html(tmp.x==0?'-':(tmp.x.toFixed(4) + 'µm'));
243	$('#wblitz-image-pixel-size-y').html(tmp.y==0?'-':(tmp.y.toFixed(4) + 'µm'));
244	$('#wblitz-image-pixel-size-z').html(tmp.z==0?'-':(tmp.z.toFixed(4) + 'µm'));
245
246	/* Fill in the Rendering Details box */
247
248	$(".picker").unbind('prepared').unbind('showing').unbind('hiding');
249	$('#rdef-postit ul').not('ul:last-child').remove();
250
251	var template = '<tr class="$cls">'
252	+ '<td><input id="rd-wblitz-ch$idx0" type="checkbox" onchange="rdChanSelHelper(this)" $act></td>'
253	+ '<td>$cwl</td>'
254	+ '<td><button id="wblitz-ch$idx0-color" class="picker squarred"> </button></td>'
255	+ '<td class="picker-selected"> </td></tr>'
256	+ '<tr class="$cls rdef-window">'
257	+ '<td colspan="5"><div id="wblitz-ch$idx0-cw" class="rangewidget"></div></td>'
258	+'</tr>'
259	+ '<tr class="$cls rdef-window">'
260	+ '<td colspan="5"><div class="rangeslider" id="wblitz-ch$idx0-cwslider"></div></td>'
261	+ '</tr>';
262
263	tmp = $('#rdef-postit table tr:first');
264	tmp.siblings().remove();
265	for (i=channels.length-1; i>=0; i--) {
266	tmp.after(template
267	.replace(/\$act/g, channels[i].active?'checked':'')
268	.replace(/\$idx0/g, i) // Channel Index, 0 based
269	.replace(/\$idx1/g, i+1) // Channel Index, 1 based
270	.replace(/\$cwl/g, channels[i].label) // Wavelength
271	.replace(/\$cls/g, i/2!=parseInt(i/2)?'even':'odd') // class
272	);
273	$('#wblitz-ch'+(i)+'-cw').rangewidget({
274	min: channels[i].window.min,
275	max: channels[i].window.max,
276	template: '<span class="min">min: $min</span> $start - $end <span class="max">max: $max</span>',
277	lblStart: '',
278	lblEnd: ''});
279	$('#wblitz-ch'+i+'-cwslider').slider({
280	range: true,
281	min: channels[i].window.min,
282	max: channels[i].window.max,
283	values: [ channels[i].window.start+1, channels[i].window.end-1 ],
284	slide: function(event, ui) {
285	$('#wblitz-ch'+$(event.target).data('channel-idx')+'-cw-start').val(ui.values[0]).change();
286	$('#wblitz-ch'+$(event.target).data('channel-idx')+'-cw-end').val(ui.values[1]).change();
287	}
288	}).data('channel-idx', i);
289	cb = function (i) {
290	return function (e) {
291	$('#wblitz-ch'+i+'-cwslider').slider('values', 0, Math.min(Math.max(parseInt(e.target.value), channels[i].window.min), $('#wblitz-ch'+i+'-cwslider').slider('values')[1]));
292	show_change($('#wblitz-ch'+i+'-cw-start').get(0), channels[i].window.start, 'changed');
293	};
294	}
295	$('#wblitz-ch'+i+'-cw-start').val(channels[i].window.start).unbind('change').bind('change', cb(i));
296	cb = function (i) {
297	return function (e) {
298	$('#wblitz-ch'+i+'-cwslider').slider('values', 1, Math.max(Math.min(parseInt(e.target.value), channels[i].window.max), $('#wblitz-ch'+i+'-cwslider').slider('values')[0]));
299	show_change($('#wblitz-ch'+i+'-cw-end').get(0), channels[i].window.end, 'changed');
300	};
301	}
302	$('#wblitz-ch'+i+'-cw-end').val(channels[i].window.end).unbind('change').bind('change', cb(i));
303	}
304
305
306	/* Prepare color picker buttons */
307	$(".picker")
308	.colorbtn()
309	.bind('showing', function () {
310	var t = $(this).parents('.postit');
311	var offset = t.offset();
312	offset.left += t.width();
313	$('#cbpicker-box').css(offset);
314	$('.picker-selected').html(' ');
315	$(this).parent().siblings('.picker-selected').html('>');
316	})
317	.bind('hiding', function () {$(this).parent().siblings('.picker-selected').html(' ')})
318	.bind('prepared', function () {
319	zindex_automator('.postit', 210, $('#cbpicker-box'));
320	})
321	.bind('changed', function () {
322	$("#rd-wblitz-rmodel").attr('checked', true); // if we're updating color - show color (not greyscale)
323	$(this).parents('tr:first').next().find('.ui-slider-range').css('background-color', $(this).css('background-color'));
324	});
325
326	projectionChange(null,null, true);
327
328	modelChange();
329	syncRDCW();
330
331	$('#wblitz-workarea > .box > div.row').show();
332	};
333
334	/**
335	* Set the projection based on the clicked element name.
336	*/
337	var setProjection = function (obj) {
338	viewport.setProjection($(obj).attr('value'));
339	};
340
341	/**
342	* Checks the currently selected rendering projection and applies interface customizations as needed.
343	* Bound to the viewport projectionChange event.
344	*/
345	var projectionChange = function (ev, obj, nosync) {
346	var p = viewport.getProjection();
347	if (p) {
348	$('[name="wblitz-proj"]').parent().removeClass('selected');
349	$('[name="wblitz-proj"][value='+p+']').click().parent().addClass('selected');
350	// if (p) {
351	// var pr = $('#wblitz-proj > [value='+p+']');
352	// if (pr.length) {
353	// pr.attr('selected','selected');
354	// }
355	if (p != 'normal') {
356	editLinePlot(false);
357	}
358	$('#wblitz-lp-enable').attr('disabled', p != 'normal');
359	//$('#wblitz-channels-box button').attr('disabled', p == 'split');
360	$('[name="wblitz-proj"][value=intmax]').attr('disabled', viewport.loadedImg.rdefs.invertAxis);
361	}
362
363	//nosync \|\| syncRDCW();
364	};
365
366	/**
367	* Checks the currently selected rendering model and applies interface customizations as needed.
368	* Bound to the viewport modelChange event.
369	*/
370	var modelChange = function (ev, obj) {
371	var btns = $('button[id^=wblitz-ch]').not('[id$=color]');
372	if (viewport.isGreyModel()) {
373	btns.addClass('forcegrey');
374	} else {
375	btns.removeClass('forcegrey');
376	}
377	$('#wblitz-rmodel').attr('checked', !viewport.isGreyModel());
378	//$('#rd-wblitz-rmodel').attr('checked', !viewport.isGreyModel());
379	//syncRDCW();
380	};
381
382	/**
383	*
384	*/
385	var channelChange = function (ev, obj, idx, ch) {
386	if (ch.active) {
387	$('#wblitz-ch'+idx).addClass('pressed');
388	} else {
389	$('#wblitz-ch'+idx).removeClass('pressed');
390	}
391	//var t = $('#rd-wblitz-ch'+idx).get(0);
392	//if (t != undefined) t.checked=ch.active;
393	$('#wblitz-ch'+idx).css('background-color', ch.color).attr('title', ch.label);
394	};
395
396	/**
397	*
398	*/
399	var linePlotChange = function (ev, show) {
400	if (show) {
401	if (!viewport.hasLinePlot()) {
402	viewport.startPickPos();
403	}
404	var lp = viewport.getLinePlot();
405	$('#wblitz-lp-axis').html(lp.isHorizontal() ? 'Y': 'X');
406	$('#wblitz-lp-enable').attr('checked', 'checked');
407	$('#wblitz-lp-editpos').val(lp.position).show();
408	$('#wblitz-lp-wrap').show();
409	$('#wblitz-lp-btn').html('apply');
410	$('#wblitz-lp-axis-select').selectOptions(lp.isHorizontal() ? 'h': 'v');
411	} else {
412	viewport.stopPickPos();
413	$('#wblitz-lp-enable').attr('checked', null);
414	$('#wblitz-lp-wrap').hide();
415	$('#wblitz-lp-cur').html('');
416	}
417	}
418
419	var editLinePlot = function (show) {
420	if (show) {
421	viewport.prepareLinePlot($('#wblitz-lp-axis-select option[selected]').val() \|\| 'h');
422	} else {
423	viewport.hidePlot();
424	}
425	linePlotChange(null, show);
426	}
427
428	var prepLinePlot = function (val) {
429	viewport.prepareLinePlot(val);
430	$('#wblitz-lp-axis').html(viewport.getLinePlot().isHorizontal() ? 'Y': 'X');
431	}
432
433	var showLinePlot = function () {
434	viewport.loadPlot(parseInt($('#wblitz-lp-editpos').val()));
435	$('#wblitz-lp-cur').html('showing: ' + (viewport.getLinePlot().isHorizontal() ? 'Y': 'X') + ' = ' + parseInt($('#wblitz-lp-editpos').val()));
436	}
437
438	/**
439	*
440	*/
441	var imageChange = function (ev, obj) {
442	$('#wblitz-t-curr').html(viewport.getTPos());
443	$('#wblitz-z-curr').html(viewport.getZPos());
444	$('#wblitz-t-count').html(viewport.getTCount());
445	$('#wblitz-z-count').html(viewport.getZCount());
446
447	if(viewport.loadedImg.rdefs.invertAxis) {
448	$('#z-axis-legend').attr('src', '/static/webgateway/img/t_axis_revert.gif');
449	$('#t-axis-legend').attr('src', '/static/webgateway/img/z_axis_revert.gif');
450	} else {
451	$('#z-axis-legend').attr('src', '/static/webgateway/img/z_axis.gif');
452	$('#t-axis-legend').attr('src', '/static/webgateway/img/t_axis.gif');
453	};
454
455	if (viewport.hasLinePlot() \|\| $('#wblitz-lp-enable').attr('checked')) {
456	viewport.refreshPlot();
457	}
458	};
459
460	/**
461	* ROI load & table methods
462	*/
463
464	var refresh_rois = function () {
465	// re-plots the ROIs (if currently shown) for new Z and T position
466	if (viewport.viewportimg.get(0).refresh_rois) {
467	var theT = viewport.getTPos();
468	var theZ = viewport.getZPos();
469	viewport.viewportimg.get(0).refresh_rois(theZ, theT);
470	}
471	}
472	var show_rois = function () {
473	var theT = viewport.getTPos();
474	var theZ = viewport.getZPos();
475
476	// if the ROI plugin has not been initialised (method not available...) init and load ROIs...
477	if (!viewport.viewportimg.get(0).show_rois) {
478	var options = {'width':512,
479	'height':512,
480	'json_url':'/webgateway/get_rois_json/1757'};
481	if (viewport.loadedImg.tiles) {
482	options['tiles'] = true;
483	options['canvas_name'] = 'roi_canvas_big';
484	}
485	viewport.viewportimg.roi_display(options);
486	viewport.viewportimg.get(0).setRoiZoom(viewport.getZoom());
487	}
488
489	// Show postit. Table will be built on callback from loading
490	$("#roi_table_postit").show();
491
492	// loads ROIs (if needed) and shows.
493	viewport.viewportimg.get(0).show_rois(theZ, theT);
494	}
495
496
497	var hide_rois = function() {
498	// hides the display of ROIs.
499	if (viewport.viewportimg.get(0).hide_rois) {
500	viewport.viewportimg.get(0).hide_rois();
501	}
502	$("#roi_table_postit").hide();
503	}
504
505	// builds an html table of ROI data. All collapsed.
506	var build_roi_table = function() {
507	var $roi_table = $("#roi_small_table");
508	var json = viewport.viewportimg.get(0).get_roi_json();
509
510	$roi_table.find('tbody').remove();
511
512	// give users a small selection of colours for lines on roi_thumbnails
513	var colours = {'red':'#f00', 'white':'#fff', 'black':'#000', 'blue':'#00f', 'green':'#0f0', 'yellow':'#ff0'}
514	var color_picker = "";
515	for (var c in colours) {
516	color_picker += "<div class='color_picker_option' color='" + colours[c] + "' style='background: " + colours[c] + "'> </div>";
517	}
518	var toggle_roi_thumbs = "<input type='checkbox' id='toggle_roi_thumbs' title='Show ROI Previews' />";
519	var toggle_shape_text = "<input type='checkbox' id='toggle_shape_text' checked='true' title='Show/Hide ROI text labels' />";
520
521	// thead for whole table:
522	var roi_html = "<thead id='roi_table_head'><tr>";
523	roi_html += "<th></th>";
524	roi_html += "<th></th>"; // first shape (count)
525	roi_html += "<th>ID</th>";
526	roi_html += "<th>Z</th>"; // no Z for ROI
527	roi_html += "<th>T</th>"; // no T for ROI
528	roi_html += "<th>" + toggle_shape_text + " Text</th>";
529	roi_html += "<th title='Pick colour of ROI outlines'><div style='white-space:nowrap;'>" + toggle_roi_thumbs + "Preview</div>"+ color_picker + "</th>";
530	roi_html += "</tr></thead>";
531	$roi_table.append($(roi_html));
532
533	get_shape_icon_src = function(type) {
534	var shape_icons = {'Line':'line16.png', 'Ellipse':'ellipse16.png', 'Polygon':'polygon16.png', 'Rectangle':'rectangle16.png',
535	'Point':'point16.png', 'Label':'text16.png', 'PolyLine':'line16.png'}
536	if (type in shape_icons) {
537	return '/static/webgateway/img/' + shape_icons[type];
538	}
539	return "";
540	}
541	var truncate_length = 30;
542	truncate_text = function(text_string) {
543	if (text_string.length < truncate_length)
544	return text_string
545	return text_string.substring(0,truncate_length) + "...";
546	}
547	// populate table. Cols are: ID, Z, T, Shape, text
548	for (var r=0; r<json.length; r++) {
549	var roi = json[r];
550	var shapes = roi['shapes'];
551
552	// thumbnail of roi - display small & popup full-size
553	var line_color = 'f00'; // store current line color, used when we 'show' thumbs to get url.
554	var roiThumbHtml = "<img src='' id='"+ roi['id'] +"_roi_thumb' color='"+ line_color +"' width=50 height=33 class='roi_thumb'>";
555
556	// process the shapes first - note first shape & text
557	var firstShape = null;
558	var firstText = null;
559	var minT = maxT = minZ = maxZ = null;
560	var shapesHtml = '<tbody>';
561	var shape = null;
562	var text;
563	for (var s=0; s<shapes.length; s++) {
564	shape = shapes[s];
565	if (minT === null \|\| minT > shape['theT']) minT = shape['theT'];
566	if (maxT === null \|\| maxT < shape['theT']) maxT = shape['theT'];
567	if (minZ === null \|\| minZ > shape['theZ']) minZ = shape['theZ'];
568	if (maxZ === null \|\| maxZ < shape['theZ']) maxZ = shape['theZ'];
569	if (shape['textValue'] != null) {
570	text = shape['textValue']
571	if (firstText == null) firstText = text;
572	} else text = "";
573	var indent = " &nbsp&nbsp&nbsp&nbsp"; // hack to add "indent", but not if shape is only-child
574	if (shapes.length == 1) {
575	indent = " &nbsp";
576	}
577	var shapeThumbHtml = "<img src='' id='"+ shape['id'] +"_shape_thumb' color='"+ line_color +"' width=50 height=33 class='roi_thumb shape_thumb'>";
578
579	shapesHtml += "<tr id='"+shape['id']+"_shape' class='shape_row'>";
580	// clicking on any cell of a shape 'shape_cell' selects it
581	shapesHtml += "<td></td>";
582	shapesHtml += "<td class='shape_cell icon'>" + indent + "<img class='shape_icon' src='"+ get_shape_icon_src(shape['type']) + "' /></td>";
583	shapesHtml += "<td class='shape_cell'>" + shape['id'] + "</td>"
584	shapesHtml += "<td class='shape_cell'>" + (shape['theZ']+1) + "</td>";
585	shapesHtml += "<td class='shape_cell'>" + (shape['theT']+1) + "</td>";
586	shapesHtml += "<td class='shape_cell shape_text' title=\""+ text +"\"><p>"+ truncate_text(text) + "</p></td>";
587	shapesHtml += "<td class='shape_cell'>" + shapeThumbHtml + "</td>";
588	shapesHtml += "</tr>";
589	if (firstShape == null) firstShape = shape['type'];
590	}
591	if (firstText == null) firstText = "";
592	shapesHtml += '</tbody>';
593
594	// new tbody for each ROI
595	var roi_html = "<thead><tr class='roi_row'>";
596	roi_html += "<th><img class='expand_arrow' src='/static/webgateway/img/arrowRight_grey.png' /></th>";
597	roi_html += "<th align='left'> &nbsp<img class='roi_icon' src='"+ get_shape_icon_src(firstShape) + "' /> (" + shapes.length + ")</th>"; // first shape (count)
598	roi_html += "<th>" + roi['id'] + "</th>";
599	roi_html += "<th style='white-space: nowrap'> "+ (minZ+1) + ((maxZ != minZ) && ("-"+(maxZ+1)) \|\| ("")) +" </th>"; // no Z for ROI
600	roi_html += "<th style='white-space: nowrap'> "+ (minT+1) + ((maxT != minT) && ("-"+(maxT+1)) \|\| ("")) +" </th>"; // no T for ROI
601	roi_html += "<th class='shape_text' title=\""+ firstText +"\"><p>"+ truncate_text(firstText) +"</p></th>";
602	roi_html += "<th>"+ roiThumbHtml +"</th>";
603	roi_html += "</tr></thead>";
604
605	var tbody = $(shapesHtml);
606	if (shapes.length > 1) {
607	$roi_table.append($(roi_html)); // add the roi thead
608	} else {
609	tbody.addClass('only_child');
610	}
611	$roi_table.append(tbody); // add the tbody
612
613	// now bind mouseover
614	var $roi_thumb_popup = $('#roi_thumb_popup');
615	$('.roi_thumb').hover(function(e) {
616	$roi_thumb_popup.attr('src', $(this).attr('src')).show();
617	}, function(e){
618	$roi_thumb_popup.hide();
619	})
620	.hide(); // don't show thumbs initially
621	$('.roi_thumb').mousemove(function(e) {
622	$roi_thumb_popup.css({ 'left': e.pageX+5, 'top': e.pageY+5 })
623	});
624	}
625	}
626
627	// bound to call-back on roi plugin when ROIs loaded
628	var handle_rois_loaded = function(e) {
629	$("#rois_loading_message").hide();
630	build_roi_table();
631	var $roi_table = $("#roi_small_table");
632	$roi_table.find('tbody').hide(); // hides the shapes
633	$roi_table.find('tbody.only_child').show();
634
635	}
636
637	// bound to clicks on shapes in the viewer
638	var handle_shape_selection = function(e, shape_id) {
639	var $roi_table = $("#roi_small_table");
640	// show the rows
641	var $row = $("#"+shape_id+"_shape");
642	$roi_table.find('tbody').children().children().css('background-color', '');// all rows white...
643	$row.children().css('background-color', '#d0d0ff'); // ...show this row blue
644	$row.parent().show(); // show this 'tbody' set of shapes
645	var arrow_src = '/static/webgateway/img/arrowDown_grey.png';
646	$row.parent().prev('thead').find('img.expand_arrow').attr('src', arrow_src);
647	}
648
649	// update src of roi_thumbnails, based on colour. If 'null', set no src and hide thumbs
650	var update_roi_thumbs = function(line_color) {
651	// we set visibility based on 'toggle_roi_thumbs' checkbox
652	var vis = ($("#toggle_roi_thumbs").attr('checked') == true);
653	var update_thumbs = function() {
654	var $thmb = $(this);
655	if (vis) {
656	if ((typeof line_color == 'undefined') \|\| (line_color == null)) {
657	// update src based on color attribute
658	line_color = $thmb.attr('color');
659	} else {
660	$thmb.attr('color', line_color);
661	}
662	var thmb_id = parseInt($thmb.attr('id'));
663	var thmb_src = "/webgateway/render_roi_thumbnail/"+ thmb_id +"/?color=" + line_color;
664	if ($thmb.hasClass('shape_thumb')) {
665	thmb_src = "/webgateway/render_shape_thumbnail/"+ thmb_id +"/?color=" + line_color;
666	}
667	$thmb.attr('src', thmb_src);
668	$thmb.show();
669	} else {
670	// hide thumb and remove src (don't load thumbs)
671	$thmb.attr('src', '');
672	$thmb.hide();
673	}2
674	}
675	$('.roi_thumb').each(update_thumbs);
676	//$('.shape_thumb').each(update_thumbs);
677	}
678
679	var linePlotPos = function (ev, obj) {
680	$('#wblitz-lp-editpos').val(obj);
681	showLinePlot();
682	};
683
684	function resetRDCW() {
685	viewport.reset_channels();
686	syncRDCW();
687	}
688
689	function syncRDCW() {
690	var cb;
691	var channels = viewport.getChannels();
692	for (i in channels) {
693	$('#rd-wblitz-ch'+i).get(0).checked = channels[i].active;
694	$('#wblitz-ch'+i+'-cwslider .ui-slider-range').css('background-color', toRGB(channels[i].color));
695	$('#wblitz-ch'+i+'-color').css('background-color', toRGB(channels[i].color));//$('#wblitz-ch'+i).css('background-color'));
696	$('#wblitz-ch'+i+'-cw-start').val(channels[i].window.start).change();
697	$('#wblitz-ch'+i+'-cw-end').val(channels[i].window.end).change();
698	}
699	hidePicker();
700	$('#rdef-undo-btn').attr('disabled',viewport.has_channels_undo()?'':'true');
701	$('#rdef-redo-btn').attr('disabled',viewport.has_channels_redo()?'':'true');
702	//$('#rdef-default-btn').attr('disabled',viewport.has_channels_undo()?'':'true');
703	$('#rd-wblitz-rmodel').attr('checked', !viewport.isGreyModel());
704	}
705
706	function undoRDCW () {
707	viewport.undo_channels();
708	syncRDCW();
709	}
710
711	function redoRDCW () {
712	if (on_batchCopyRDefs) {
713	return batchCopyRDefs_action('cancel');
714	}
715	viewport.redo_channels();
716	syncRDCW();
717	}
718
719	function applyRDCW(final) {
720	if (on_batchCopyRDefs) {
721	return batchCopyRDefs_action('ok');
722	}
723	viewport.setModel($('#rd-wblitz-rmodel').get(0).checked?'c':'g');
724	for (var i=0; i<viewport.getCCount(); i++) {
725	viewport.setChannelActive(i, $('#rd-wblitz-ch'+i).get(0).checked, true);
726	viewport.setChannelColor(i, $('#wblitz-ch'+i+'-color').css('background-color'), true);
727	viewport.setChannelWindow(i, $('#wblitz-ch'+i+'-cw-start').get(0).value, $('#wblitz-ch'+i+'-cw-end').get(0).value);
728	}
729
730	if (final) {
731	viewport.forget_bookmark_channels();
732	$('#rdef-postit').hide();
733	}
734	viewport.save_channels();
735	syncRDCW();
736	}
737
738	function show_tooltip(self, ttid) {
739	var pos = $(self).parents('div').offset();
740	pos.top += $(self).parents('div').height();
741	pos.left += 10;
742	var tooltip = $('#' + ttid);
743	$('.popped').not(tooltip).removeClass('popped');
744	tooltip.css(pos)
745	.toggleClass('popped');
746	if (tooltip.is('.popped')) {
747	var ww = $(window).width() -5;
748	if ((pos.left + tooltip.width()) > ww) {
749	pos.left -= (pos.left + tooltip.width()) - ww;
750	tooltip.css(pos);
751	}
752	if (tooltip.offset().top + tooltip.height() >= $('#footer').offset().top) {
753	pos.top -= tooltip.height() + 20;
754	tooltip.css(pos);
755	}
756	var auto = $('#' + ttid).find('.autoselect').get(0);
757	if (auto) {
758	auto.focus();
759	auto.select();
760	}
761	}
762	}
763
764	function show_change(obj, val, klass) {
765	if (obj.value != val) {
766	$(obj).addClass(klass);
767	} else {
768	$(obj).removeClass(klass);
769	}
770	}
771
772	function zindex_automator (klass, basez, wspace) {
773	if (!wspace) {
774	wspace = $(klass);
775	}
776	var sorter = function (a,b) {
777	return parseInt(a.css('z-index'))-parseInt(b.css('z-index'));
778	};
779	var tofront = function (e) {
780	var self = this;
781	var z = basez;
782	var objs = new Array();
783	$(klass).each(function () {
784	this != self && objs.push($(this));
785	});
786	$.each(objs.sort(sorter), function () {
787	this.css('z-index', z);
788	z++;
789	});
790	$(self).css('z-index', z);
791	};
792	$.each(wspace, function () {
793	$(this).bind('opening', tofront);
794	$(this).bind('mousedown', tofront);
795	});
796	}
797
798	function setImageDefaults (obj, callback, skip_apply) {
799	if (!skip_apply) applyRDCW();
800	var old = $(obj).html();
801	gs_modalJson('/webgateway/saveImgRDef/'+viewport.loadedImg.id+'/?'+viewport.getQuery(true),
802	{},
803	function(success, rv) {
804	$(obj).html(old).attr('disabled', false);
805
806	if (!(success && rv)) {
807	alert('Setting image defaults failed.');
808	}
809	});
810	return false;
811	}
812
813
814	function resetImageDefaults (obj) {
815	var msg = '<h2>Resetting rendering settings</h2><ul><li>This will reset the image rendering settings to their original state at time of import.</li></ul>';
816	var url = '/webgateway/resetImgRDef/'+viewport.loadedImg.id+'/';
817	gs_choiceModalJson(msg, [
818	{label: 'ok', url: url, data: {full: true}},
819	{label: 'cancel'}
820	],
821	function(success, rv) {
822	if (!rv) {
823	alert('Reset image defaults failed.');
824	} else {
825	viewport.load(viewport.loadedImg.id, viewport.loadedImg.current.dataset_id);
826	}
827	},
828	{css: {width: '50%', left: '25%'}}
829	);
830	return false;
831	}
832
833
834
835
836	/* ]]> */
837	</script>
838	<div id="channel-window-help" style="display: none;">
839
840	<h2>Changing the Image Display Settings:</h2>
841	<p>You can use the "Rendering Details" dialog box to change the settings for viewing this image.</p>
842	<p>To change the color displayed for a channel, click on the color box at the right, which opens the "Choose Color" dialog box. You can choose the color using the interactive features at the top. Hex color codes can be input in the text box. Preset colors can be selected at the bottom. Changes take effect when you click "Apply".</p>
843	<p>To change the color intensity, drag the slider buttons for the individual channels to the left or right. This changes the values that are used for the minimum and maximum displays settings. Changes take effect when you click "Apply".</p>
844	</div>
845
846	<!-- Floating boxes come on top -->
847	<div id="curr-link" class="tooltipbox">
848	<table cellspacing="0">
849	<tr>
850	<td>
851	Link to this page:
852	</td>
853	<td class="left">
854	<img class="popclose" src="/static/webgateway/img/close.gif" alt="close" />
855	</td>
856	</tr>
857	<tr>
858	<td><input class="autoselect" type="text" size="40" value="" /></td>
859	</tr>
860	</table>
861	</div>
862
863	<img id="roi_thumb_popup" style="border: solid #bbb 1px"/>
864	<div id="roi_table_postit" class="postit">
865	<h1>ROIs</h1>
866	<div id='rois_loading_message'>Loading ROI data...</div>
867	<div id='roi_table_div'>
868	<table id='roi_small_table' cellpadding='0' cellspacing='0'></table>
869	</div>
870	</div>
871
872	<div id="metadata-postit" class="postit">
873	<h1>Image Information</h1>
874	<h3 class="can-collapse">Basic Information</h3>
875	<div>
876	<table cellspacing="0">
877	<tr class="odd"><td class="title">Image name: </td><td id="wblitz-image-name"></td></tr>
878	<tr class="even"><td class="title">Owner: </td><td id="wblitz-image-author"></td></tr>
879	<!--
880	<tr class="odd"><td class="title">Publication: </td><td id="wblitz-image-pub"></td></tr>
881	<tr class="even"><td class="title">Publication ID: </td><td id="wblitz-image-pubid"></td></tr>
882	<tr class="odd"><td class="title">Created on: </td><td id="wblitz-image-timestamp"></td></tr>
883	-->
884	</table>
885	</div>
886	<h3 class="can-collapse"> Dimensions </h3>
887	<div class="dimensions">
888	<table cellspacing="0">
889	<tr>
890	<th colspan="2" width="50%">Image Size</th>
891	<th colspan="2">Pixel Size</th>
892	</tr>
893	<tr class="odd">
894	<td class="title">X: </td><td><span id="wblitz-image-width"></span>px</td>
895	<td class="title">X: </td><td><span id="wblitz-image-pixel-size-x"></span></td>
896	</tr>
897	<tr class="even">
898	<td class="title">Y: </td><td><span id="wblitz-image-height"></span>px</td>
899	<td class="title">Y: </td><td><span id="wblitz-image-pixel-size-y"></span></td>
900	</tr>
901	<tr class="odd">
902	<td class="title">Z: </td><td><span id="wblitz-image-z-count"></span></td>
903	<td class="title">Z: </td><td><span id="wblitz-image-pixel-size-z"></span></td>
904	</tr>
905	<tr class="even">
906	<td class="title">T: </td><td><span id="wblitz-image-t-count"></span></td>
907	<td colspan="2"></td>
908	</tr>
909	</table>
910	</div>
911	<!--<h3 class="can-collapse defclose"> Legend </h3>
912	<div id="wblitz-image-description"><span id="wblitz-image-description-content"></span></div>-->
913	</div>
914
915	<div id="rdef-postit" class="postit" style="width: 480px">
916	<h1> Rendering Details </h1>
917	<div id="rdef-active-area">
918	<a id="rdef-postit-help" href="#" onclick="return showChannelWindowHelp();"><img src="/static/webgateway/img/question.png" alt="Show help on channel window ranges" /></a>
919	<label for="rd-wblitz-rmodel">Render as Color</label>
920	<input id="rd-wblitz-rmodel" type="checkbox" onchange="return rdChanSelHelper(this);" />
921	<table cellspacing="0">
922	<tr>
923	<th>Visible</th>
924	<th>Wavelength</th>
925	<th>Color</th>
926	<th></th>
927	</tr>
928	</table>
929	</div>
930	<ul>
931	<li class="buttonbar">
932
933
934	<button id="rdef-reset-btn" class="editor" onclick="return resetImageDefaults(this)" title="Returns the image settings to their original state at time of import.">reset</button>
935	<button id="rdef-setdef-btn" class="editor" onclick="return setImageDefaults(this)" title="Applies and saves the current settings as default.">save</button>
936
937
938
939	<button id="rdef-default-btn" onclick="return resetRDCW();" title="Returns to the saved settings.">default</button><button id="rdef-undo-btn" onclick="return undoRDCW();" title="Returns to the settings as they were before clicking apply.">undo</button><button id="rdef-redo-btn" onclick="return redoRDCW();" title="Returns to the settings as they were before clicking undo.">redo</button><button id="rdef-apply-btn" onclick="return applyRDCW();" title="Applies the current settings to the open image.">apply</button>
940	</li>
941
942
943
944	</ul>
945
946	</div>
947
948	<!-- End floating boxes -->
949	<div id="wblitz">
950	<div id="wblitz-workarea">
951	<!-- Top Toolbox -->
952	<!-- Zoom -->
953	<div class="box">
954	<h1>Viewing Options</h1>
955	<div class="even row">
956	<!-- multiselect hidden for big images in jquery-plugin-viewportImage.js -->
957	<div class="multiselect selected">
958	Normal
959	<input type="radio" value="normal" name="wblitz-proj" onclick="return setProjection(this);" />
960	</div>
961	<div class="multiselect">
962	Max Intensity
963	<input type="radio" value="intmax" name="wblitz-proj" onclick="return setProjection(this);" />
964	</div>
965	<div class="multiselect">
966	Split Channel
967	<input type="radio" value="split" name="wblitz-proj" onclick="return setProjection(this);" />
968	</div>
969	<!--select id="wblitz-proj" onchange="viewport.setProjection(this.item(this.selectedIndex).value);">
970	<option value="normal">Normal</option>
971	<option value="intmax">Maximum Intensity</option>
972	<option value="split">Split Channel</option>
973	</select-->
974	</div>
975	<div class="odd row">
976	<label for="wblitz-quality" class="odd">Quality</label>
977	<!-- br /><input type="radio" name="wblitz-quality" value="1.0"> High</input>
978	<br /><input type="radio" name="wblitz-quality" value="0.9" checked="checked"> Normal</input>
979	<br /><input type="radio" name="wblitz-quality" value="0.5"> Low</input -->
980	<select id="wblitz-quality" onchange="viewport.setQuality(this.item(this.selectedIndex).value);">
981	<option value="1.0">High</option>
982	<option value="0.9" selected="selected">Normal</option>
983	<option value="0.5">Low</option>
984	</select>
985	</div>
986	<div class="even row">
987	<label for="wblitz-zoom">Zoom</label><br />
988	<input type="text" class="spin-button" id="wblitz-zoom" value="100" onchange="zoomCheck(this)" size="5" />
989	<button id="full-size"
990	title="1:1"
991	onclick="viewport.setZoom(100)" ></button>
992	<button id="full-screen"
993	title="full screen"
994	onclick="viewport.setZoomToFit()"></button>
995	</div>
996	<div class="odd row">
997	<label for="wblitz-lp-enable">Line Plot</label> <input id="wblitz-lp-enable" type="checkbox" onclick="editLinePlot(this.checked)" />
998	<div id="wblitz-lp-wrap" style="display: none">
999	<div>Axis:
1000	<select id="wblitz-lp-axis-select" onchange="prepLinePlot(this.options[this.options.selectedIndex].value)">
1001	<option value="h" selected="selected">Horizontal</option>
1002	<option value="v">Vertical</option>
1003	</select>
1004	</div>
1005	<span id="wblitz-lp-axis"></span> =
1006	<input type="text" id="wblitz-lp-editpos" size="4" />
1007	<button id="wblitz-lp-btn" onclick="showLinePlot()"></button>
1008	<div id="wblitz-lp-cur"></div>
1009	</div>
1010	</div>
1011	<h1>Rendering Details</h1>
1012	<div class="odd row">
1013	<label for="wblitz-channels-box">Channels</label> - <a href="#" onclick="$('#rdef-postit').toggle(); return false;">Edit</a><br />
1014	<span id="wblitz-channels-box"></span>
1015	</div>
1016	<div class="even row">
1017	<label for="wblitz-rmodel">Color</label>
1018	<input id="wblitz-rmodel" type="checkbox" onclick="viewport.setModel(this.checked?'c':'g');" />
1019
1020	<br />
1021	<label for="wblitz-invaxis">Invert Z/T Axis</label>
1022	<input id="wblitz-invaxis" type="checkbox" onchange="viewport.setInvertedAxis(this.checked);" />
1023
1024	<br />
1025	</div>
1026	<h1>Current Image</h1>
1027	<div class="even row">
1028	<span style="font-size: 0.9em">
1029	<!--<span id="wblitz-shortname" style="white-space: nowrap;"></span><br />-->
1030	Z: <span id="wblitz-z-curr">?</span>/<span id="wblitz-z-count">?</span> \|
1031	T: <span id="wblitz-t-curr">1</span>/<span id="wblitz-t-count">1</span>
1032	</span>
1033	</div>
1034	<div class="odd row">
1035	<a href="#" onclick="$('#metadata-postit').toggle(); return false;">Image Information</a><br />
1036	</div>
1037	<div class="even row">
1038	<a href="#" onmouseover="this.href=viewport.getUrl('img_detail')"
1039	onclick="$('#curr-link input').attr('value', location.href.substring(0,location.href.length - location.search.length).replace(/(.*?\/)\d+(?:\/\d+)?(?:\/)?$/,'$1') + viewport.getCurrentImgUrlPath() +'?'+ viewport.getQuery(true));
1040	show_tooltip(this, 'curr-link'); return false;">
1041	Image Link
1042	</a><br />
1043	</div>
1044
1045	<div id="roi_controls">
1046	ROIs:
1047	<a href="#" onclick="show_rois()">Show</a> \|
1048	<a href="#" onclick="hide_rois()">Hide</a>
1049	</div>
1050
1051
1052	</div>
1053
1054	<!-- Image Viewport -->
1055	<div id="weblitz-viewport"></div>
1056	<img id="z-axis-legend" src="/static/webgateway/img/z_axis.gif" />
1057	<img id="t-axis-legend" src="/static/webgateway/img/t_axis.gif" />
1058	<div class="figure-box-holder">
1059	</div>
1060	</div>
1061	</div>
1062	<div id="footer">
1063
1064	© 2007-2011 Glencoe Software Inc. All rights reserved.
1065
1066	</div>
1067
1068
1069	<script type="text/javascript">
1070	/* <![CDATA[ */
1071	$(document).ready(function () {
1072	$.ajaxSettings.cache = false;
1073	});
1074
1075
1076	var gs_static_location_prefix='/static/';
1077
1078	$(document).ready(function () {
1079	/* Prepare the viewport */
1080
1081
1082	viewport = $.WeblitzViewport($('#weblitz-viewport'), '/webgateway',{'mediaroot': '/static/' });
1083	viewport.bind('imageLoad', _refresh_cb);
1084
1085	/* Prepare the Zoom spin button */
1086	$("INPUT.spin-button").SpinButton({min:0});
1087
1088	/* Bind zoom changes to the zoom button */
1089	viewport.bind('zoom', function(e, percent) {
1090	$("#wblitz-zoom").attr('value', ''+percent /+'%'/);
1091	$(".popped").removeClass('popped');
1092	});
1093
1094	/* Bind projection changes */
1095	viewport.bind('projectionChange', projectionChange);
1096	/* Bind model changes */
1097	viewport.bind('modelChange', modelChange);
1098	/* Bind channel changes */
1099	viewport.bind('channelChange', channelChange);
1100	/* Bind image changes */
1101	viewport.bind('imageChange', imageChange);
1102	/* Bind line plot changes */
1103	viewport.bind('linePlotChange', linePlotChange);
1104	/* Bind line plot position pick */
1105	viewport.bind('linePlotPos', linePlotPos);
1106
1107	/* Prepare pop tools */
1108	$(".popover > h1")
1109	.prepend('<div class="drop-img drop-left"></div><div class="drop-img drop-right"></div>')
1110	.click(function () {
1111	var this_popped = $(this).parent().is('.popped');
1112	$(".popped").removeClass('popped');
1113	if (this_popped) {
1114	$(this).parent().removeClass('popped');
1115	} else {
1116	$(this).parent().addClass('popped');
1117	}
1118	return false;
1119	});
1120
1121	$(".popclose").click(function () {
1122	$(".popped").removeClass('popped');
1123	});
1124
1125	$("#weblitz-viewport").click(function () {
1126	$(".popped").removeClass('popped');
1127	return false;
1128	})
1129	.bind("imageChange", function () {
1130	$(".popped").removeClass('popped');
1131	});
1132
1133	// var pprep = function (t) {
1134	// return function () {
1135	/* Prepare the post-its */
1136	var layout_pos = $("#header").offset(); //$("#weblitz-viewport").offset();
1137	$(".postit").each(function () {
1138	if (this.id == 'metadata-postit') {
1139	$(this).postit({noResize: false, resizeTarget: '#wblitz-image-description'});//.css($("#weblitz-viewport-vp").offset());
1140	} else if (this.id == 'roi_table_postit') {
1141	$(this).postit({noResize: true})
1142	.css(layout_pos);
1143	} else {
1144	layout_pos.left += 20;
1145	layout_pos.top += 20;
1146	$(this).postit({noResize: true})
1147	.css(layout_pos);
1148	}
1149	});
1150	var legend_open = function () {
1151	var d = $(this);
1152	d.unbind('opening', legend_open);
1153	/* Calculate the size for legend post-it */
1154	var h = $('#weblitz-viewport-vp').height();
1155	var w = ($('#weblitz-viewport-vp').width() - h) /2;
1156	d.css('width', Math.max(w, 250));
1157	if (d.height() > h) {
1158	d.css('height', h);
1159	}
1160	d.trigger('jqResize');
1161	};
1162	$("#legend-postit").bind('opening', legend_open);
1163
1164	zindex_automator('.postit', 210);
1165
1166	/* Make (kind of) sure that closing the rendering defs window closes an eventually opened color picker */
1167	$("#rdef-postit").bind('closed',
1168	function () {
1169	hidePicker();
1170	/* viewport.back_to_bookmarked_channels();*/
1171	//syncRDCW();
1172	})
1173	.bind('opening', function () { syncRDCW(); viewport.bookmark_channels()});
1174
1175	$('.can-collapse').click(function () {
1176	$(this).toggleClass('closed').next().slideToggle();
1177	});
1178
1179	$('.can-collapse.defclose').each(function () {
1180	$(this).removeClass('defclose').toggleClass('closed').next().hide();
1181	});
1182	// };
1183	// setTimeout ( pprep(this), 1000);
1184
1185	/* Load the selected image into the viewport */
1186	var did = '';
1187	viewport.setQuality('0.9');
1188	viewport.load(1757, did.length ? parseInt(did) : null, location.search);
1189
1190	/* Bind actions needed on window resize */
1191	$(window).resize(calcResize);
1192
1193	$('input[name=wblitz-quality]').click(function () {
1194	viewport.setQuality(this.value);
1195	});
1196
1197	viewport.bind('imageChange', refresh_rois);
1198	viewport.bind('instant_zoom', function(e, percent) {
1199	if (viewport.viewportimg.get(0).setRoiZoom) {
1200	viewport.viewportimg.get(0).setRoiZoom(percent);
1201	}
1202	});
1203
1204	var toggle_th = function($roiThead) {
1205	$roiThead.next().toggle(0, function(){
1206	var vis = $roiThead.next().is(':visible');
1207	var arrow_src = '/static/webgateway/img/arrowRight_grey.png';
1208	if (vis) {
1209	arrow_src = '/static/webgateway/img/arrowDown_grey.png';
1210	}
1211	$roiThead.find('img.expand_arrow').attr('src', arrow_src);
1212	});
1213	}
1214
1215	var handleShapeRowClick = function($shapeRow){
1216	var shape_id = parseInt($shapeRow.attr('id')); // E.g. id='123_shape'
1217	var selected_xy = viewport.viewportimg.get(0).set_selected_shape(shape_id);
1218	var vpb = viewport.viewportimg.get(0).getBigImageContainer();
1219	if (vpb!= null && viewport.loadedImg.tiles) {
1220	var scale = vpb.currentScale();
1221	vpb.recenter({x:selected_xy['x']scale ,y:selected_xy['y']scale}, true, true);
1222	}
1223	var z = parseInt( $shapeRow.find('td:nth-child(4)').text() );
1224	var t = parseInt( $shapeRow.find('td:nth-child(5)').text() );
1225	viewport.setZPos(z);
1226	viewport.setTPos(t);
1227	}
1228
1229	$("#roi_small_table").click(function(event) {
1230	var $target = $(event.target);
1231	if ($target.attr('id') == "toggle_roi_thumbs") {
1232	update_roi_thumbs();
1233	return true;
1234	} else if ($target.attr('id') == "toggle_shape_text") {
1235	var show_labels = ($("#toggle_shape_text").attr('checked') == true);
1236	viewport.viewportimg.get(0).show_labels(show_labels);
1237	return true;
1238	} else if ($target.hasClass('shape_cell')) {
1239	// a shape td click selects the shape.
1240	var $shapeRow = $target.parent();
1241	handleShapeRowClick($shapeRow);
1242	} else if ($target.parent().hasClass('shape_cell')) {
1243	// a shape <p> click selects the shape.
1244	var $shapeRow = $target.parent().parent();
1245	handleShapeRowClick($shapeRow);
1246	} else if ($target.hasClass('shape_icon')) {
1247	// need to get to the row
1248	var $shapeRow = $target.parent().parent();
1249	handleShapeRowClick($shapeRow);
1250	} else if ($target.get(0).nodeName.toLowerCase() == 'th'){
1251	// a ROI (th) click toggles the ROI-shapes 'tbody' below
1252	if ($target.parent().hasClass('roi_row')) {
1253	var $roiThead = $target.parent().parent();
1254	toggle_th($roiThead);
1255	}
1256	} else if ($target.parent().get(0).nodeName.toLowerCase() == "th"){
1257	// a ROI (th <p>) click toggles the ROI-shapes 'tbody' below
1258	if ($target.parent().parent().hasClass('roi_row')) {
1259	var $roiThead = $target.parent().parent().parent();
1260	toggle_th($roiThead);
1261	}
1262	} else if ($target.hasClass('color_picker_option')) {
1263	// change the colour of lines drawn on roi_thumbs
1264	var line_color = $target.attr('color').substring(1); // '#f00' -> 'f00'
1265	update_roi_thumbs(line_color);
1266	} else if ($target.hasClass('expand_arrow') \|\| $target.hasClass('roi_icon')) {
1267	// clicked on the arrow - need to get the (th)
1268	var $roiThead = $target.parent().parent().parent();
1269	toggle_th($roiThead);
1270	} else if ($target.hasClass('roi_thumb')) {
1271	// roi thumbnail may be in thead/tr/td (ROI - toggle shapes) or tbody/tr/td (shape - update viewer)
1272	var $tableRow = $target.parent().parent();
1273	var nodeName = $tableRow.parent().get(0).nodeName.toLowerCase();
1274	if (nodeName == 'tbody') {
1275	handleShapeRowClick($tableRow);
1276	}
1277	else if (nodeName == 'thead') {
1278	toggle_th($tableRow.parent());
1279	}
1280	}
1281	return false;
1282	});
1283
1284
1285	// we can bind events to viewportimg for roi_display-plugin to trigger (plugin not created yet)
1286	viewport.viewportimg.bind("shape_click", handle_shape_selection);
1287	viewport.viewportimg.bind("rois_loaded", handle_rois_loaded);
1288
1289	/* And we're done! */
1290
1291
1292	/* Set Window Initial Size */
1293	//if ($(document).width() < 1024 \|\| $(document).height() < 768)
1294	// window.resizeTo(1024,768);
1295
1296	calcResize();
1297	gs_script_location_prefix="/static/webgateway/";
1298	});
1299
1300	/* ]]> */
1301	</script>
1302
1303
1304
1305
1306	</body>
1307	</html>

Download in other formats:

Original Format