JQuery-UI Viewfinder

Users want to select a rectangular area. There are many ways to do it but we are going to use JQuery-UI. We will create a transparent JQuery-UI dialog box which users can drag and resize like a viewfinder. Around the dialog box's empty and see-through content area we will attach a rectangular frame which will resize as the dialog box resizes. We will measure the frame while a user is viewfinding a rectangular area with it.

Here is the trick to make a JQuery-UI dialog box transparent.

There is a dialogClass property which we can use to assign customized CSS classes to a JQuery-UI dialog box. We just need to add a class that set the background color with a transparent alpha value. Not the entire dialog box will be transparent but the content area will. That is just perfect for a viewfinder.

We create a rectangular frame as a viewfinder using a div with a solid border, which we also set to resize itself whenever the dialog box resizes. We capture the current size and position of the frame as the dialog box is being dragged and resized, and show the metrics at the lower right corner of the frame.

We add an image in the background so that we can play with the viewfinder.

The following are CSS styles to make the dialog box transparent, and to make the viewfinder resizes with the dialog box. We also set the position of the viewfinder metrics to the lower right of the frame. And we also set the width of the image to fit into the background cointainer:

.transparent-dialog {
     background-color: rgba(255,255,255,0.5);
}

#dialog-snap-viewfinder {
    border: 1px solid black;
    height: 100%;
    width: 100%;
}

#dialog-snap-metrics {
    position: absolute;
    right: 1.25em;
    bottom: 0.5em;
}

img {
    max-width: 100%;  
    height: auto;  
}

The following are the HTML codes for the background image and the div placeholder for a dialog box with a viewfinder. JQuery-UI will wrap the div with an actual dialog box:

<img src="image/eagle-head.jpg">
<div id="dialog-snap">
    <div id="dialog-snap-viewfinder">
        <div id="dialog-snap-metrics"></div>
    </div>
</div>

The following are the Javascript codes to create the dialog box, and to handle dragging and resizing, and also to capture the viewfinder metrics:

var get_snap_metrics = function () {
    var vf = $('#dialog-snap-viewfinder');
    var pos = vf.offset();
    var w = vf.width();
    var h = vf.height();
    return {
        top: parseInt(pos.top), 
        left: parseInt(pos.left), 
        width: w, height: h};
}

var update_snap_metrics = function () {
    var sz = get_snap_metrics();
    $('#dialog-snap-metrics').text(
        sz.left + "," + sz.top + " : " +
        sz.width + "," + sz.height);
}

var snap_dialog = function () {
    $('#dialog-snap').dialog({
        dialogClass: 'transparent-dialog',
        title: 'Viewfinder',
        height: 330,
        width: 440,
        open: function(e, ui) {
            update_snap_metrics();
        },
        resize: function(e, ui) {
            update_snap_metrics();
        },
        drag: function(e, ui) {
            update_snap_metrics();
        },
        buttons: {
            Snap: function() {
                $(this).dialog('close');
            }
        }
    });
};

snap_dialog();

When a user click on the Snap button the dialog box will close. Then we can process the selected rectangular area according to our own individual application requirement.

A note on JQuery-UI dialog box:

    <div id="dialog-snap">

Our div will be wrapped as the content area of the dialog box. So, any class or styling we assign to it will only affect the content area and not the whole dialog box. Even measuring the div metrics will return unreliable values. That is why we added a child div as the frame for the viewfinder.

The eagle head image above was taken from https://pixy.org/173316/, which is under the public domain Creative Commons CC0 with no attribution required.