channel_overlay_viewer.html

/components/tools/OmeroWeb/omeroweb/webtest/templates/webtest/demo_viewers/channel_overlay_viewer.html

https://github.com/ximenesuk/openmicroscopy
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>