| HOME | HELP | FEEDBACK | SUBSCRIPTIONS | ARCHIVE | SEARCH | TABLE OF CONTENTS |
|
|
|
|||||||
|
|||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Computers |
1 Department of Diagnostic Imaging, Yale University School of Medicine, PO Box 208042, New Haven, CT 06520-8042.
Received July 20, 2007; accepted after revision September 24, 2007.
Address correspondence to D. Cornfeld
(daniel.cornfeld{at}yale.edu).
OBJECTIVE. The objective of this article is to introduce a simple method for embedding user-controlled cines into a Web page using a simple JavaScript. Step-by-step instructions are included and the source code is made available. This technique allows the creation of portable Web pages that allow the user to scroll through cases as if seated at a PACS workstation.
CONCLUSION. A simple JavaScript allows scrollable image stacks to be included on Web pages. With this technique, you can quickly and easily incorporate entire stacks of CT or MR images into online teaching files. This technique has the potential for use in case presentations, online didactics, teaching archives, and resident testing.
Keywords: cine images • computers • JavaScript • presentations • teaching files
Conventional teaching files use a combination of static images and text. Although dynamic HTML allows the creation of interactive teaching files where the user can navigate through both didactics and images [1], such sites almost exclusively use static images where the user views only a single radiograph or slice from a CT or MRI examination at a time. However, many abdominal and pelvic processes require review of multiple images to formulate a diagnosis. For example, fluid in the anterior right pararenal space can generate a differential diagnosis that includes pancreatitis, cholecystitis, appendicitis, pyelonephritis, urinary obstruction, Crohn's disease, and right-sided diverticulitis, but review of the entire stack of images is required to reach a specific diagnosis.
Recent articles have detailed methods for including dynamic image stacks in electronic PowerPoint (Microsoft) presentations through the use of Macromedia Shockwave Flash [1–3] and animated GIFs (graphics interchange format) [4]. Another previous article described a Java (Sun Microsystems) applet to incorporate cine images into interactive Websites [5]. In this article, I describe how to create interactive, Web-based, user-controlled cine images using simple JavaScript (Sun Microsystems) and HTML code. Step-by-step instructions are included to guide the reader through the creation of such a Web page. When completed, the Web page allows the user to scroll through images as if sitting at a PACS workstation.
This JavaScript has several advantages over the Java applet previously published [5]. First, the JavaScript presented here does not require compilation or knowledge of Java to use or install. JavaScript is a scripting language used for client-side Web development. Although the name and syntax are similar to Java, JavaScript is a completely different computer programming language. Java is a computer programming language used primarily for developing cross-platform applications (i.e., programs that can run on a number of different computers and operating systems). Java programs are written and then must be compiled before use. A program called Java Runtime Environment (JRE, Sun Microsystems) must also be installed on the user's computer for the program to work. Unlike Java, JavaScript code is a simple text file interpreted by an Internet browser such as Explorer (Microsoft), Safari (Apple Computers), or Netscape (Mozilla Foundation). JavaScript code does not require compilation and JRE does not need to be installed on the user's computer. No computer programming skills are necessary to make cases.
Second, because JavaScript is interpreted by the Internet browser as if it were part of the HTML source code, no applets or cookies are placed on the user's computer. A cookie is a file placed on the user's computer by a Website that contains information about how the user interacted with the Website. When the user returns to the Website later the information in the cookie is used to customize the site's pages to the individual user. An applet is a program, often written in Java, that is downloaded onto the user's computer from a Website to perform interactive features not normally supported by the Internet browser. It requires that JRE be installed on the user's computer. Because applets and cookies are not used in the technique described here, the user can access the scrollable cine images from any computer with an Internet browser without the need to save, download, or install third-party applications such as an image viewer, compiler, or run-time environment. This makes the process completely portable. I routinely use this technique to transport cases and to show cases at departmental and multidisciplinary conferences. In addition to using this technique for viewing cases stored on a portable or local hard drive, this technique can also be used for viewing cases remotely via the Internet. When viewing cases remotely, only the images are downloaded onto the user's computer.
Finally, all the code is contained in a short, well-documented text file. Radiologists, residents, and students can make simple modifications to tailor the code to their needs. The process is designed so that a physician with minimal computer experience can create his or her own scrollable Web-based cine.
Implementation
Placing the user-controlled cine onto a Web page requires three things: a folder containing the images, the JavaScript code, and an HTML file that links the two together. A sample hierarchy of these files and folders is presented in Figure 1.
|
The JPEG image size should be 512 x 512 pixels, which is the default resolution for most CT images. In the subsequent section, I describe how to modify the HTML code to accommodate images that are a different size. All images in the cine should be the same size.
There are many techniques for transferring DICOM images from the PACS into a folder of JPEGs on your hard drive. The Centricity PACS 2.0 (GE Healthcare) allows you to save an entire image series as a stack of JPEG files. Similar functionality is available on DICOM readers such as EFilm Workstation (www.cedera.com/products/efilm/index.htm, Cedara Software).
It is slightly more difficult to obtain a stack of JPEG images using the Synapse PACS (Fuji Film) at my institution than using the Centricity PACS. Currently, I export the images to a workstation (Vitra 3D imaging workstation, Vital Images) and export the stack of images as an audio–video interleave (AVI) movie file. The AVI file is then converted to a stack of JPEG images using Image J, which is a freeware graphics analysis toolkit written at the National Institutes of Health (rsb.info.nih.gov/ij). Other freeware utilities such as IrfanView (www.irfanview.com) can perform a similar conversion. Using this technique, a stack of JPEG images can be created in less than 10 minutes.
I recommend that you contact your PACS vendor for instructions that are specific to your system.
HTML Code
The HTML code is the text file that will display the scrollable cine when
opened with an Internet browser such as Explorer, Safari, or Netscape. The
template HTML file is displayed in Figure
2. This text file is available via e-mail from the author.
|
Once these changes are made, save the file in the appropriate folder on your computer. I usually call this file "cine.htm." If you used Microsoft Word to modify the HTML file, then be sure to save the code as a text file and not as a Word document.
JavaScript Code
The JavaScript for this implementation is a 3-kB text file named
"cine.js." This file is available from the author via e-mail and
should be placed in the appropriate folder as shown in
Figure 1. No modifications to
this file are necessary.
Uses
Once the HTML code ("cine.htm"), the folder containing the images, and the JavaScript file ("cine.js") are placed in the same folder, open the HTML code with an Internet browser. Click on the images and while depressing the left mouse button, move the mouse in the direction you want the images to scroll. If you scroll past the first image the cine will jump to the last image.
This implementation is ideal for packaging cases to show in case conferences where Internet speed and computer availability make real-time use of a PACS difficult. I routinely use this method for interdisciplinary conferences in rooms where the PACS is slow or unreliable and for showing cases at other institutions. In this implementation, each case is placed in a separate folder as shown in Figure 1. Multiple case folders can be placed on a portable hard drive. To show a case, I open the appropriate folder and open the "cine.htm" file to display the case. Because most computers in our institution have an Internet browser on the hard drive, each folder is completely transportable.
An alternative implementation of this technique is to group multiple cases together into a larger teaching file. In this implementation, it is more efficient to organize the files into the hierarchy shown in Figure 3. Each case is placed within its own folder. The didactic part of the case is authored within a file named "case. htm." This file can either include a link to the "cine.htm" file or include it as a frame: A frame is simply a way of embedding one Web page into another. Including the file as a frame makes it easy to place the image stack depicted in "cine.htm" into a larger didactic Web page. A table of contents file serves to organize the cases and simply provides links to the "case. htm" files within each folder. In this manner, each case is written as a simple module that plugs into the larger teaching file. This hierarchy is simple to place on an Internet server or on a CD-ROM. Cases are added by dropping a new case folder within the master folder and simply updating the table of contents. When using this hierarchy, the JavaScript file "cine.js" should be placed in the large master folder so that a single modification to the code affects all the cases. In this scenario, change line 15 in cine.htm as shown in Appendix 1 to reflect the new location of the JavaScript code.
|
The program also works well when the images are stored on a file server and are accessed remotely via the Internet. A stack of 100 images takes less than 1 minute to download. Once downloaded, the images are stored in the Temporary Internet Folder on the user's system and can be scrolled through just as fast as if they were stored locally. A sample case is provided at the end of this article. Because of the simple file hierarchy, it is straightforward to place an entire teaching file on an Internet server for remote access.
Limitations
There are two major limitations to this technique. First, the user is unable to perform window and level changes or to cross reference. This simple script is not meant to replicate a complete DICOM viewer. Only basic scrolling functionality is supported. More advanced functionality is not practical because JPEG images do not contain the same color or position information as DI-COM images. This is reflected in file size. A 512 x 512 pixel CT or MR image requires 0.5–1 MB if stored as a DICOM file, bit map, or TIFF. The same image is 25–50 kB if saved as a JPEG. An entire 100-image, user-controlled cine can be compressed into a 2- to 5-MB folder. A single 600-MB CD can hold 100–200 scrollable cases. This makes the technology portable.
A second limitation to this technique is that the security settings on some computers block the execution of JavaScript files. This limitation also applies to Java applets. The user must change his or her Web browser's security settings to allow ActiveX (Microsoft) content to run. Most Web browsers have a setting that prompts the user whenever an ActiveX component is attempting to execute. On Internet Explorer, a yellow banner appears at the top of the screen informing the user that ActiveX content was blocked. By clicking on this box the user can allow the content (Fig. 4). This setting is the preferred one because the user can allow the interactive cines but can avoid placing his or her computer at risk for other ActiveX processes.
|
A sample case can be found at ydr.med.yale.edu/CineExample.
Conclusion
I present a simple technique for creating a Web-based scrollable cine from a stack of images. The technique is portable and can be used for showing cases at conferences or for making Web-based teaching files. The code is free and is available from the author by e-mail.
|
References
CiteULike 
Complore 
Connotea 
Del.icio.us 
Digg 
Reddit 
Technorati What's this?
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HOME | HELP | FEEDBACK | SUBSCRIPTIONS | ARCHIVE | SEARCH | TABLE OF CONTENTS |
