GSOC Media Viewer: Image Manipulation Sliders

Posted on August 16th, 2009 by katherine

I just finished integrating image manipulation sliders into the media viewer so that you can change brightness, contrast, and sharpness of the image. Also zooming and panning works nicely too.

This is a brief summary of the issues I ran into in developing this feature and what references I consulted to solve them.

In order for the image to be displayed and manipulated in the Flash application, it had to be retrieved from OpenMRS. I created an Encounter Servlet that would HTTP get the images from OpenMRS for a given unique encounter ID. The media viewer module page in OpenMRS loads the viewer by sending the Flash SWF file the ID number of the encounter it wants to be displayed. Then Flash does HTTP GET to the Encounter servlet to retrieve all images, creates internal classes to hold the images and then displays them. In order to load an image from a URL, I used the solution posted here.

Three Ways to Load an Image in Flex

http://ntt.cc/2008/03/09/tips-three-ways-to-load-an-image-file-in-flex.html

When I mentioned that I created internal classes, I essentially created an encounter class in Actionscript with generic file classes. A generic file class would hold metadata and the actual image/audio/video object. In order to build instances of these classes with the correct information, the Encounter Servlet on OpenMRS would send XML summarizing the encounter information and the obs ID numbers of the images/audio/video files in OpenMRS. I had trouble with XML parsing and being able to retrieve the fields, but solved it using the example provided here. The key part was realizing that you could access data in a tag heading using the @ symbol: e = new Encounter(xmlStr.@patientFirst,xmlStr.@patientLast,xmlStr.@patientID);

Adobe Flex Documentation on XML Class

http://livedocs.adobe.com/flex/2/langref/XML.html

I researched many sites to find a good image processing library for image manipulation in this viewer. There were some with licensing issues, but in general there were good options with just using the built-in libraries. Hence, I decided to go with these libraries, but if we find that the resolution isn’t good enough for medical diagnosis, replacing the zoom, brightness, contrast, and sharpness methods with another library would be pretty straightforward since the code is modular.

Here are the resources that I used to develop the OpenMRS media viewer.

Flex Interface Guide (FIG): The Pan | Zoom Component from the Adobe Developer Connection

http://www.adobe.com/devnet/flex/samples/fig_panzoom/

Image Manipulation in Flex by Andrew Alderson

http://www.insideria.com/2008/03/image-manipulation-in-flex.html

BitmapUtil for Changing Image Contrast and Brightness in Actionscript by Stan Reshetnyk

http://flashcrafter.org.ua/content/bitmaputil-changing-image-contrast-brightness-actionscript

Okay! Below are the screenshots of the media viewer Flash application, which is embedded in the OpenMRS media viewer module.

What you see when the application launches. You can see the toolbar at the bottom with sliders where you can zoom, change sharpness, change contrast, and change brightness of the image. You can also zoom or pan by using the mouse directly over the image like in Google Maps (use the mouse scroll button to zoom in/out).

img-processing-01

You can also use the options menu to hide the bottom toolbar to allow more screen space for the image. Even without the toolbar you can still zoom/pan with the mouse.

img-processing-02

Zooming way in to the upper part of the chest.

img-processing-03

This is an example of teledermatology and how you can play with the contrast slider. Original picture:

img-processing-04

After changing the contrast:

img-processing-05

Example of teleradiology and you can manipulate brightness. Original picture:

img-processing-06

Making it darker. The original of this particular image was already pretty good, but if it was too bright, this would be useful!

img-processing-07

Making it brighter.

img-processing-08

Example of opthamology and manipulating sharpness level. Original picture: (From http://www.mymedicalcareer.com.au/specialties/ophthalmology/)

img-processing-09

After picture. Looks sharp right?! :)

img-processing-10

Coming up: Proper thumbnail downscaling for the preview strip in the bottom toolbar, Moca panel on the left for patient symptoms to go along with the image

Tags: ,

Comments are closed.