/components/tools/OmeroWeb/omeroweb/webtest/templates/webtest/demo_viewers/channel_overlay_viewer.html
HTML | 291 lines | 253 code | 37 blank | 1 comment | 0 complexity | 18f4513aaaf2ed504da6741862737a2e MD5 | raw file
- <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
- <html> <head>
- <title>Channel Overlay Viewer</title>
- <style type="text/css">
- body {
- font-family: arial;
- }
- </style>
- {% include "webgateway/base/includes/script_src_jquery.html" %}
- <script type="text/javascript" src="{% static 'webadmin/javascript/jquery.imgareaselect-0.9.8/jquery.imgareaselect.js' %}"></script>
- <link rel="stylesheet" type="text/css" href="{% static 'webadmin/javascript/jquery.imgareaselect-0.9.8/css/imgareaselect-default.css' %}" />
- <script type="text/javascript">
- $(document).ready(function() {
-
- var $zoomSelect = $("#zoomSelect");
- var $viewer = $('#viewer');
- var imgHeight = $viewer.attr('height');
- var imgWidth = $viewer.attr('width');
-
- function preview(img, selection) {
- if (!selection.width || !selection.height)
- return;
- var zoomPercent = parseInt($zoomSelect.attr('value'));
- var height = {{ image.getSizeY }} * zoomPercent/100;
- var width = {{ image.getSizeX }} * zoomPercent/100;
- var viewPortWidth = Math.round(selection.width * zoomPercent/100);
- var viewPortHeight = Math.round(selection.height * zoomPercent/100);
- var marginLeft = -Math.round(selection.x1 * zoomPercent/100);
- var marginTop = -Math.round(selection.y1 * zoomPercent/100);
-
-
- $('#preview').css({
- width: viewPortWidth + "px",
- height: viewPortHeight + "px",
- });
- $('#preview img').css({
- width: width + "px",
- height: height + "px",
- marginLeft: -Math.round(selection.x1 * zoomPercent/100) + "px",
- marginTop: -Math.round(selection.y1 * zoomPercent/100) + "px"
- });
-
- }
-
- $('img#viewer').imgAreaSelect({
- handles: true,
- onSelectChange: preview
- });
-
-
- $(".cSelect").click(function() {
-
- var $radio = $(this);
- var cIndex = $radio.attr('value');
-
- $(".planeRow").css("background", "white")
- .each(function() {
- var $i = $('input:checked', this);
- if ($i.length == 1) {
- $(this).css("background", $i.attr('name'));
- }
- });
-
- refreshImage();
- });
-
- // increment X/Y shift values
- $(".incShift").click(function() {
-
- var incValue = 0;
- var incType = $(this).attr('class').split(" ")[1];
- if (incType == "minusBig") incValue = -10;
- else if (incType == "minusSmall") incValue = -1;
- else if (incType == "plusBig") incValue = 10;
- else if (incType == "plusSmall") incValue = 1;
-
- var $input = $(this).parent().children('input');
- var oldVal = parseInt($input.attr('value'));
- var newVal = oldVal + incValue;
- $input.attr('value', newVal);
- refreshImage();
- });
- // increment Z indexes
- $(".incZ").click(function() {
- var incValue = 0;
- var incType = $(this).attr('class').split(" ")[1];
- if (incType == "minus") incValue = -1;
- else if (incType == "plus") incValue = 1;
- // increment all Z indexes
- $('.zIndex').each(function() {
- var $input = $(this);
- var oldVal = parseInt($input.attr('value'));
- $input.attr('value', oldVal + incValue);
- });
- refreshImage();
- });
- // increment T indexes
- $(".incT").click(function() {
- var incValue = 0;
- var incType = $(this).attr('class').split(" ")[1];
- if (incType == "minus") incValue = -1;
- else if (incType == "plus") incValue = 1;
- // increment all Z indexes
- $('.tIndex').each(function() {
- var $input = $(this);
- var oldVal = parseInt($input.attr('value'));
- $input.attr('value', oldVal + incValue);
- });
- refreshImage();
- });
-
- var refreshImage = function() {
-
- // need to construct the query string from the current status of our form and update img src
- // E.g. planes=0|2305:7:0:0$x:-50_y:10,1|2305:7:1:0,2|2305:7:2:0&red=2&blue=0&green=1
- query = "planes=";
- index = 0
- $(".planeRow").each(function() {
- var $row = $(this);
- if (index>0){
- query += ",";
- }
- var imageId = $row.find('[name="imageId"]').attr('value');
- var z = $row.find('[name="z"]').attr('value');
- var c = $row.find('[name="c"]').attr('value');
- var t = $row.find('[name="t"]').attr('value');
- query += index + "|" + imageId + ":" + z + ":" + c + ":" + t;
- var x = $row.find('[name="x"]').attr('value');
- var y = $row.find('[name="y"]').attr('value');
- query += "$x:" + x + "_y:" + y;
- index +=1;
- });
-
- $(".cSelect[name='red']").each(function() {
- if ($(this).attr('checked')) {
- var i=$(this).attr('value');
- query += '&red='+i;
- };
- });
- $(".cSelect[name='green']").each(function() {
- if ($(this).attr('checked')) {
- var i=$(this).attr('value');
- query += '&green='+i;
- };
- });
- $(".cSelect[name='blue']").each(function() {
- if ($(this).attr('checked')) {
- var i=$(this).attr('value');
- query += '&blue='+i;
- };
- });
-
- var imgSrc = "{% url 'webtest_render_channel_overlay' %}?" + query;
- $("#viewer").attr('src', imgSrc);
- $("#lens").attr('src', imgSrc);
- }
-
- $('#update').click(function() {
- refreshImage();
- });
-
- refreshImage();
-
- // when the "Save" button is clicked, we want to compile a 'comment' of z, x, y offsets for each channel
- // and post it to save it on the image (with particular namespace)
- // E.g. comment=0|z:1_x:0_y:0,1|z:0_x:10_y:0,2|z:0_x:0_y:0 &imageIds=1234
- $('#save').click(function() {
- var query = "ns=omero.web.channel_overlay.offsets&replace=true&comment=";
- var zOffsets = [];
- var xOffsets = [];
- var yOffsets = [];
- var imageId = null;
- $(".planeRow").each(function() {
- var $row = $(this);
- imageId = $row.find('[name="imageId"]').attr('value');
- var z = $row.find('[name="z"]').attr('value');
- zOffsets.push(z);
- var x = $row.find('[name="x"]').attr('value');
- xOffsets.push(x);
- var y = $row.find('[name="y"]').attr('value');
- yOffsets.push(y);
- });
- // normalise z-offsets to 0
- var minZ = Math.min.apply( Math, zOffsets );
- for (var i=0; i<zOffsets.length; i+=1) {
- if (i>0){
- query += ",";
- }
- query += i + "|";
- query += "z:" + (zOffsets[i]-minZ) + "_x:" + xOffsets[i] + "_y:" + yOffsets[i];
- }
- query += "&imageIds="+imageId
-
- // bit of a hack - should really POST properly.
- var url = "{% url 'webtest_add_annotations' %}" + "?" + query;
- window.location = url;
- });
- });
- </script>
- </head>
- <body>
- <div style="float:left">
- <img id='viewer' src="" width="{{ image.width }}" height="{{ image.height }}"/>
- </div>
-
- <div id="preview" style="float:left; width: 100px; height: 100px; overflow: hidden;">
- <img id="lens" src="" style="width: 100px; height: 100px;" />
- </div>
-
- <div style="padding:10px; margin:10px; float:left">
- <div style="float:right">
- Zoom: <input id='zoomSelect' type="text" size="5" name="zoom" value='200'/> %
- </div>
- Adjust the x-shift and y-shift of individual planes to align them. <br />
- Draw a rectangle on the image to zoom that region.<br />
- Also possible to pick the Z, C, T and Image-ID to mix planes from different images.
- <hr />
- <!-- table of all the channels -->
- <table>
- <tr>
- <td>Red</td><td>Green</td><td>Blue</td>
- <td>Image-ID</td>
- <td>Z
- <img class='incZ minus' src="{% static 'webtest/img/channel_overlay/minus12.png' %}" width='12'/>
- <img class='incZ plus' src="{% static 'webtest/img/channel_overlay/plus12.png' %}" width='12'/>
- </td>
- <td>C</td>
- <td>T
- <img class='incT minus' src="{% static 'webtest/img/channel_overlay/minus12.png' %}" width='12'/>
- <img class='incT plus' src="{% static 'webtest/img/channel_overlay/plus12.png' %}" width='12'/>
- </td>
- <td>Channel Name</td><td>x-shift</td><td>y-shift</td>
- </tr>
- {% for c in channels %}
- <tr class='planeRow'
- {% ifequal blue forloop.counter0 %}bgcolor="blue"{% endifequal %}
- {% ifequal green forloop.counter0 %}bgcolor="green"{% endifequal %}
- {% ifequal red forloop.counter0 %}bgcolor="red"{% endifequal %}
- >
- <td><input class='cSelect' type="radio" name="red" value="{{ forloop.counter0 }}"
- {% ifequal red forloop.counter0 %} checked="True" {% endifequal %}/></td>
- <td><input class='cSelect' type="radio" name="green" value="{{ forloop.counter0 }}"
- {% ifequal green forloop.counter0 %} checked="True" {% endifequal %}/></td>
- <td><input class='cSelect' type="radio" name="blue" value="{{ forloop.counter0 }}"
- {% ifequal blue forloop.counter0 %} checked="True" {% endifequal %}/></td>
- <td><input type="text" size="10" name="imageId" value='{{ image.id }}'/></td>
- <td><input class='zIndex' type="text" size="2" name="z" value='{% if c.z %}{{c.z}}{% else %}{{ default_z }}{% endif %}'/></td>
- <td><input type="text" size="2" name="c" value='{{ forloop.counter0 }}'/></td>
- <td><input class='tIndex' type="text" size="2" name="t" value='0'/></td>
- <td>{{ c.name }}</td>
- <td>
- <img class='incShift minusBig' src="{% static 'webtest/img/channel_overlay/minus12.png' %}" width='16' />
- <img class='incShift minusSmall' src="{% static 'webtest/img/channel_overlay/minus12.png' %}" width='12' />
- <img class='incShift plusSmall' src="{% static 'webtest/img/channel_overlay/plus12.png' %}" width='12'/>
- <img class='incShift plusBig' src="{% static 'webtest/img/channel_overlay/plus12.png' %}" width='16'/>
- <input type="text" size="5" name="x" value='{% if c.x %}{{c.x}}{% else %}0{% endif %}'/>
- </td>
- <td>
- <img class='incShift minusBig' src="{% static 'webtest/img/channel_overlay/minus12.png' %}" width='16' />
- <img class='incShift minusSmall' src="{% static 'webtest/img/channel_overlay/minus12.png' %}" width='12' />
- <img class='incShift plusSmall' src="{% static 'webtest/img/channel_overlay/plus12.png' %}" width='12'/>
- <img class='incShift plusBig' src="{% static 'webtest/img/channel_overlay/plus12.png' %}" width='16'/>
- <input type="text" size="5" name="y" value='{% if c.y %}{{c.y}}{% else %}0{% endif %}'/>
- </td>
- </tr>
- {% endfor %}
- <tr>
- <td><input class='cSelect' type="radio" name="red" value="off" />off</td>
- <td><input class='cSelect' type="radio" name="green" value="off" />off</td>
- <td><input class='cSelect' type="radio" name="blue" value="off" />off</td>
- <td colspan='5'></td>
- <td><input id='update' type="button" value="update" /></td>
- <td><input id='save' type="button" value="save" /></td>
- </tr>
- </table>
- <hr />
-
- </div>
- </body> </html>