The side by side viewer

The Media Viewer is developed to enable to view and perform basic editing tasks on the media associated with a patient. The media could be images, audio or video for now and other things like time series data associated with an ECG scan among other things.

An important requirement for the Media Viewer has been to add the side by side image comparison facility. This would enable practitioners to compare two different images or two sections of the same image side by side. This component has been developed in flex, mainly using the DivBox container. The main reason for choosing this was that i could add sliders to separate sections in this divbox and a user could drag the slider to adjust either side of the view. More ever I could extend it to vertical as well as horizontal modes to enable side by side viewing and editing. The Divbox is added through actionscript to the main canvas area depending on the state of the viewer. Below I will illustrate some of the states which are the possible use-cases for the components.


This is the Single View for the Media Viewer. One can select a thumbnail and if its an image it would be displayed along with the basic editing functions (Zoom, Brightness, Sharpness, Contrast) at the bottom. There is a drop down list at the top which enables you to choose the state of the Media Viewer to either single view, horizontal side by side comparison or vertical side by side comparison. You can also make the image fullscreen and download it to your local machine respectively by using the two controls in the top right corner of the viewer. The thumbnail viewer gives a preview of the image for an image and fixed thumbnails for any other format (audio, video, time series data).


In here, the oral cancer patient images are viewed side by side. The slider in middle separating the two images can be moved so that either of them occupy as much space as they want to. You can select either of the two sides by clicking on either side to set the focus on the right or the left image. More over, you can pan the images and use the mousewheel scroll to zoom in and out by just hovering over the image on either side. The other image editing functions will operate on the selected side of the viewer.



In this use case you can select an image and then use the other side to focus on the same image to get a near and far perspective of the problem. As has been shown, the lesion from near can be seen on the right side while the bigger picture appears on the left. This can be done by simply selecting the images for either side and zooming/panning as may be necessary.



For some images a vertical comparison may be necessary and the media viewer supports this view by simply selecting the vertical side by side view from the drop down menu. The slider separating the two images can again be used to adjust the span of either of the images in the viewer. You can change either of the images by first focussing on the image by clicking it and then selecting the one you want from the thumbnails.


Any feedback or suggestions for more features to this are welcome.

Pratik Mandrekar
pratikmandrekar@gmail.com