Blog: Viewing

agsdix-fas fa-home

Blog: Home

agsdix-fas fa-pen-fancy

Blog: CEO's Corner

agsdix-fas fa-code

Blog: Tech Talk

Blog: Product Releases

Blog: Conversion

arrow left circle icon Blog: Viewing

Quickly Building a Wireframe using VirtualViewer for your AJAX Viewing Application

by | Dec 1, 2010

I’m fortunate enough to enjoy my work as a web designer with Snowbound Software and occasionally I’m called upon to showcase unique ways of marketing and providing value to our customers through web-based applications and demonstrations. Snowbound provides a wide variety of software applications to a number of industries including insurance, mortgage processing, banking, healthcare, and the federal government.

Marketing a product that provides useful functionality for so many applications can be challenging. As there are several CMS-type business solutions, like FileNet and SharePoint, in the marketplace, we wanted to provide a quick tutorial for providing useful proof of concept wireframes for our VirtualViewer product.

In the following demonstration, I’ll show how we can quickly embed our VirtualViewer application into a custom frame for proof of concept projects and wireframes. In the following example, we will be using the AJAX VirtualViewer application from Snowbound to view medical records.

After a recent health care conference, our Marketing Department was thrilled to hear how engaged customers were with product features and development. The users we spoke with were not only very specific about how medical imaging technology and repositories were changing, but they also provided specific examples of what they needed in a document viewing system and how the landscape was changing.

Rather than showcase our standard VirtualViewer demo, we wanted to find a way to showcase the viewer embedded in a medical imaging system with some of the features requested from end users at the show.

This is what we came up with:

As you can see, we wanted the repository to be connected directly to the VirtualViewer interface so that documents and images could be retrieved without having to change screens or navigate to additional directory pages.

We include a search feature so that documents can be retrieved by medical identification numbers, primary care physician, patient name, and even date of birth. A file repository is also included in the left column so that documents can be quickly organized, retrieved, annotated and saved back to the database (all without modifying the original document) by date and with a time stamp.

Keep in mind, this is a proof of concept to use as an example of how quickly and easily AJAX document viewing capabilities using VirtualViewer may be implemented.

The first part of this tutorial deals with importing the viewer data structure and code. You can see a screenshot of the directory structure below:

As you can see, most of the folders can remain static and modifications for a proof-of-concept wireframe can be made simply by editing the HTML and CSS files directly. Of course more advanced features could be added by simply including popular JavaScript libraries like MooTools or Jquery but in the following example we will be working directly with the HTML and CSS files.

Let’s get started!

Simply open one of your favorite text editions. (Coda or Dreamweaver for example) and find the code in brackets:


This code embeds the viewer and some modifications should be made in order for the content to scale properly.

Our main concern at this point, is the “ContentColumn” div which acts as the container for hosting the VirtualViewer code. If you view the original VirtualViewer demo you will notice that the contentcolumn div contains everything from the imageControlsDiv

And the annToolbar div

As you can see from the images, these divs contain our navigation and will need to be moved into our contentcolumn div in the following order:

Next, to ensure that the navigation doesn’t break rank and collapse onto itself, we will apply a percentage to the contentcolumn div and use CSS3 to give this window a minimum and maximum width while giving our container divs, “anntoolbar” and “imagecontrolsdiv” an absolute position:

Now that we have our VirtualViewer code embedded into our contentcolumn div, we can resize the browser and test to make sure it’s embedded properly and that the navigation expands and contracts as expected.

Now we will begin working on the surrounding proof of concept code for our physicians Portal with VirtualViewer AJAX. As I mentioned previously in this post, we are going to add images that will represent specific functionality (in concept only).

The top navigation is, conceptually, pretty straightforward. A search feature provides quick access to patient information and physicians files and notes. We also added links that could potentially guide the search. An easy integration here would be to use the Google Custom Search to integrate a searchable form for your front end.

Second, we’ve added a visual representation of application search fields, which could be used to extract records or documents from a database with either XML or a structure for the metadata.

Last, we’ve used the MooTools JavaScript library to integrate an animated drop down menu in the left column to further enhance the customization and organization of files and medical documents. All this code can be easily modified to restrict certain elements and/or add others dependent upon whether it’s a patient using the site or a physician.

MGH Boston recently incorporated a Patient Portal which was a popular concept at the McKesson users group gathering. We hope that demonstrations of this type will help more developers expand on their own proof of concept wireframes for medical imaging systems, so that they can quickly assemble the tools needed to develop their own patient portals and medical repositories.

We hope you found this tutorial helpful and informative and would love to hear any feedback or comments you may have about your own development tools or the medical imaging field in general. Many thanks for reading and stay tuned!