The last step was to fully integrate the media viewer with OpenMRS and Moca. Now the media viewer supports thumbnail handling by performing an HTTP post to an OpenMRS servlet to retrieve the image and downscale it properly. If it is an audio or video file, a preset thumbnail will appear.
I also changed the bottom toolbar to have the sliders stacked on top of each other so that it would be less wide on the screen when added next to the Moca panel. There are 2 new buttons to the toolbar - revert to default image and full screen mode.
Even though I used a pre-made Pan/Zoom component from Adobe Developer Connection, I had to read through the library to understand how to modify it for OpenMRS’ purposes. I added support for each Generic File in this encounter to save the image processing and zoom settings added so that if the user moved to the next thumbnail, the settings would still be saved when the user returned. However, these settings are not permanently saved to the OpenMRS server. According to my usability tests, the specialist wants to manipulate the image but doesn’t need to save the modified version. Another problem was that the image was animated to stick to one of the four corners of the content rectangle. This caused the image to fly to unexpected positions and the mouse would lose the image underneath it (see below). I wanted the ability to pan and drag the image anywhere, so I removed many of their animations and edge boundary restrictions.
With my modifications, the panning is much more controlled and the image stays under the mouse.
Here is the final version of the media viewer! (Although more modifications are coming soon..) Within the Moca module in OpenMRS, the doctor will access a list of pending cases from healthcare workers.
When a doctor clicks on an item, the media viewer will appear.
The doctor can browse through all the media files associated with this patient’s encounter and then fill in diagnosis and treatment recommendations on the left hand side. When the doctor hits the “send” button, it will get uploaded to the OpenMRS server and modify the encounter. The encounter viewer already built into OpenMRS shows the objects already associated with that encounter.
You can see that a new Obs was added to the list for this encounter of concept type “Diagnosis.” The value of the Obs is the text that we entered in the Moca panel above. This view also shows that Dr. Mark Johnson (the user account currently logged into OpenMRS) made this diagnosis on August 25. Different doctors are allowed to make a diagnosis for an encounter and a single doctor can also make multiple diagnoses if they change their mind.
Here are more examples of how the media viewer can be used in other applications. For this tele-oral case, you can add a summary below the image.
Or pop out the summary to move it around and allow you to zoom in on the image closer.
For teleradiology cases, many patients will have multiple x-ray views taken to help the doctor with the diagnosis. These can all be viewed together easily in the workflow. The 4 x-rays for this patient are displayed in preview thumbnails along the bottom.
You can turn off the toolbar on the bottom for a bigger view of the image. (Use the options menu in the upper right corner).
If you try to fix the image (brightness, contrast, sharpness, zoom) but don’t think the settings improve the image, you can always revert to the original image with this button on the toolbar.
The original image is back!
If the encounter contains an audio file, simply click on the audio thumbnail along the bottom toolbar and the file will begin playing. You can play/pause at any time, mute/unmute, change the volume, and skip track position. The audio player also displays the current time out of the total time length of the file, which provides the doctor with a cue point in annotating the file.
Here is an example of video playing in the media viewer. This is a video taken by the G1 phone in the MIT media lab. It was converted to FLV format using the Adobe Media Encoder. You can play/pause, mute/unmute, change the volume, skip to any position in the video, and change to full screen mode. 
Example of ultrasound video being played in the media viewer.
Video full screen mode!
That’s it! Next features to come: drop down boxes for diagnosis/intepretation fields (for data mining purposes), upload a file to the encounter viewer, and download all files.
Tags: GSOC Media Viewer, OpenMRS