Image Comparison

Parent Previous Next


This is an example of a comparison involving two basic PNG images.

Each section's sliders can be used to set the image of the corresponding section. In addition to section-specific sliders, there are also optional common sliders that can control the images of both the sections at the same time.

In the example above, the slider for 'Mode' changes the displayed image for different values of the 'Mode' variable of both the sections simultaneously.


A set of controls are also available to enhance the interaction with the slider images. You may use them to control the display of both the images at the same time. An example is shown below. Note the bar at the top.



On the right side are the Zoom In, Zoom Out and Reset buttons. These actions are performed on both images at the same time.

On the left are the Pan, Grid, Probe and Pin check boxes. The Pan button is used to pan both the images simultaneously. Note that panning will work only if the images are zoomed in. To use, check the checkbox and drag across a zoomed image. The Grid option is used to display a grid overlay over the images. This may be helpful when trying to zoom or focus into a particular point in the images.

Here's an example of an image which is zoomed, has a grid overlay and is also being panned.



The Probe option, as the name suggests, is used to probe for per-pixel information from the image. Below, the information available from the displayed images are the R,G,B values of each pixel. In addition, the X, Y coordinates of the image are also displayed (origin beginning from the top-left corner).

When Probe is enabled, you will not be able to use the Pan or Grid option and vice versa.



The Pin feature can be used to mark a permanent point on an image. To place a pin, enable Probe first and then double click on the image. The clicked point will be marked on the image and the values at that point will be displayed below. When you try to probe again, you can see that the Probe's current value is displayed alongside the Pin's value. You may use this to compare values at multiple points. This pin will persist through any action such as image changes, zooms and resets. When the image changes, the value at the pinned point will automatically update in the display below.



Pin and Probe may not be interesting with simple images shown above, but are very useful when we have 'enhanced' images, which we will see in another example in the next section.


To play with the above functionality, the properties image_comparison and image_controls need to be enabled. The properties: common_slider_tags, common_slider_title_width, common_slider_title_justification and image_controls are all enabled only when image_comparison is enabled.