AJR 2005; 184:691-694
© American Roentgen Ray Society
A Simple Method for Displaying Cine Images on Web-Based Teaching Files
Chun-Shan Yam1,
Deborah Levine,
Mizuki Nishino,
Arkadiusz Sitek and
Michael Larson
1 All authors: Department of Radiology, Beth Israel Deaconess Medical Center,
330 Brookline Ave., Boston, MA 02215.
Received February 3, 2004;
accepted after revision April 26, 2004.
Address correspondence to C-S Yam, 1 Deaconess Rd., WCC, Rm. 306, Boston,
MA 02215
(csyam{at}caregroup.harvard.edu).
Abstract
OBJECTIVE. Our objective was to develop a simple method for
displaying dynamic cine images on Web-based teaching files.
CONCLUSION. We developed a simple method for displaying cine images
on Web-based teaching files using an open-source utility, the Java applet.
This interactive utility offers improved 3D visualizations compared with the
traditional approach using thumbnail and static images. Because Java is a
built-in component of common Web browsers and computer systems, no other
software was required. We have used this applet successfully for more than 2
years in our Web-based teaching system, including in our teaching files and on
our case-of-the-week page.
Introduction
With the introduction of PACS, radiologists have gained the flexibility to
access digital images directly. Presenting teaching cases electronically has
become a routine practice in radiology academic curricula. Because these
teaching cases are already in digital format, they can be easily converted to
digital teaching files. Many Web-based digital teaching file systems have been
reported
[1–3].
In general, each system has its own infrastructure and unique characteristics
in terms of case presentations. However, the content of these Web-based
teaching cases is still similar: static images are displayed in a common
graphics format, such as portable network graphics (PNG), JPEG, or GIF, along
with text describing patient history, clinical diagnosis, and imaging
findings. The limitations of the HTML format permit the display of only static
images because no image processing controls are provided for standard image
objects. In other words, an image object cannot be programmed as a cine loop
for image scrolling in standard HTML documents.
Often, cases with multiple images ideally would be displayed dynamically as
cine loops for 3D visualization. An MRI study of maternal abdominopelvic
abnormalities is one example in which findings would be difficult to establish
without the capability for cine viewing of the entire fetal anatomy.
Nevertheless, in most Web-based teaching files, these images are displayed as
thumbnail images on a single page, with each thumbnail linked to the
full-sized version of the image. This approach requires the users to flip
back-and-forth between Web pages to view images. Although this thumbnail
method may be a viable approach for displaying several selected images, it is
unacceptable for displaying sequential 3D images for two reasons. First,
having to use several mouse clicks to toggle between different pages is
tedious and inefficient. Second, the 3D anatomic perception of the imaging
findings may be destroyed by this process.
To illustrate this traditional thumbnail approach, we present a sample
teaching case of an abnormal obstetric MRI finding
(Fig. 1). In this case, 19
thumbnail images are shown on the first page. Each thumbnail image is
hyperlinked to the second page on which the full-sized image is displayed.
When users click on a thumbnail image, the Web browser jumps to the second
page, where the full-sized image must be loaded before it can be displayed.
Then, users must go back to the first page and select another image. In our
example, a button located at the bottom of the second page must be clicked to
return to the first page. Obviously, to finish viewing all the images, users
need to click this button so many times that they may lose track of the image
order.
In this article, we describe a simple method for displaying multiple images
as cine loops on the pages of Web-based teaching files using an open-source
utility, the Java applet. Although Java applets have been used in many
academic teaching activities
[4–6],
we know of no reports of an applet that has been developed for interactive
viewing of images for Web-based digital teaching files.
Java Applet
Java is a cross-platform programming language originally developed by Sun
Microsystems in late 1990 to integrate electronic consumer devices such as
cable TV boxes with other computing devices using a standard programming
language via the Internet. Originally, the Java compiler was written in the C
programming language, but a specific Java language was developed in 1994. In
1995, Sun formally unveiled the Java language and shortly after, many software
manufacturers licensed the Java technology into their program developments.
The first major use of Java on the Internet was the implementation of applets.
An applet is a fully functional Web application for object-oriented
programming that enables sophisticated graphics-and-text animations, thus
enlivening otherwise boring, static Web pages. Because of this unique advance
in graphics programming, most of today's Web-based telemedicine software
applications are based on Java technology (e.g., PathSpeed, GE Healthcare, and
IMPAX, Agfa).
Development Tool
To develop Java applets, we downloaded the free development tool Java
Software Development Kit (SDK) from the Java home page
(java.sun.com/j2se/1.4/index.jsp).
This software package contains all the components needed to build Java
programs. It may be used with many operating systems such as PC, Mac OS,
Linux, and Unix. In our implementation, we installed the Java SDK (Windows,
version 1.4.1_06, 36 MB) in a PC-based system (Micron PC, 650 MHz, 256-MB RAM,
38-GB hard drive) with Windows 2000 Professional (Microsoft) for Java
development. The installation process is simple and straightforward. Although
the Java SDK allows users to compile Java source files into either
applications or applets, in our implementation, we focused only on applets.
Detailed information in developing stand-alone Java applications is available
at the Sun Microsystems Web site at
developers.sun.com/.
Applet Development
Although Java has many sophisticated built-in tools and utilities for
developing large scalable applications, the only basic function required for
our application was image display. So, in terms of programming, no special
skills were required. The program schematic of this applet is similar to that
for the image scrolling mechanism on PACS workstations
(Fig. 2A). When the applet is
launched, the images are loaded into the computer memory, and initially only
the first image is displayed. The applet monitors the user's mouse movements
and updates the screen image accordingly. Users can simply click and drag the
mouse up or down to scroll the images.
Figure 2B is a screen capture
shot of the code snippets of this Java source file, Cine.java, for loading and
displaying images. As shown in the source code, this applet takes three input
parameters from the Web page: ImageName, TotalNum, and ImageType. ImageName is
the prefix of the image name; TotalNum, the total number; and ImageType, the
file extension. For example, our sample teaching case had 19 images with the
file names MR01.jpg, MR02.jpg, and so on up to MR19.jpg. The parameters for
this particular image were MR (for ImageName), 19 (for TotalNum), and jpg
(ImageType).
View larger version (13K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2A. —Development tools for Java applet that allows interactive
viewing of images on Web-based digital teaching files. Program schematic of
applet for interactive viewing of images is similar to that used for image
scrolling on PACS workstations (not shown).
|
|
View larger version (39K):
[in this window]
[in a new window]
[as a PowerPoint slide]
|
Fig. 2B. —Development tools for Java applet that allows interactive
viewing of images on Web-based digital teaching files. Screen capture shot
shows code snippets of Cine.java source file for loading and displaying
images. Applet requires three input parameters from Web page: ImageName,
TotalNum, and ImageType.
|
|
Because of the simple logic of this Java applet, the Java source code
contains only 65 lines. The source code must be compiled using the Java SDK.
In our PC implementation, we performed this task at the command prompt by
simply typing the name of the Java compiler followed by the name of the source
code "Cine.java." Successful compilation creates the applet
"Cine.class," which is the Java applet needed to scroll images.
The size of this applet file is relatively small (only 3 kB) compared with the
size of a typical Web image. For example, the file size of the MR images (512
x 512 JPEG) used in our sample teaching case is about 50 kB.
Applet Implementation in HTML
In HTML, tags are used to specify objects and their properties to be
displayed on Web pages. For example, <IMG> is the tag for image objects,
and <FONT> is the tag for text. For a Java applet, the tag is
<APPLET>. For demonstration and comparison purposes, we applied this
applet to the sample teaching case originally shown in
Figure 1.
Figure 3 shows the resulting
new Web page, on which thumbnail images are no longer needed. Users can scroll
through all the images on the same page. The HTML code segment of this applet
Web page is shown in Figure 4.
The applet name Cine.class is specified by the code property in the
<APPLET> tag. The dimensions of the applet, 512 x 512 pixels, are
specified, respectively, by the width and height properties. Because we are
using the sample case shown in Figure
1, the input parameters for the applet are the same as those
discussed in the previous section: ImageName = MR, TotalNum = 19, and
ImageType = jpg.
Compatibility and Performance
We have tested this applet in many computer systems and Web browsers,
including Internet Explorer 5.5 in Windows NT, Internet Explorer 6.0 in
Windows 2000 and XP, Internet Explorer 5 in Mac OS 9 and X, Netscape Navigator
4.04 in Linux 7.0, and Netscape 7 in Solaris. Because the Java applet is only
a small file (3 kB), it does not require a significant amount of extra
computer memory. Basically, the amount of memory required depends mainly on
the total number of images loaded. We compared the memory usage and loading
time for the applet versus HTML by loading the same number of full-sized
images onto a single applet Web page as we had on an HTML page. We did not
observe any noticeable differences between the applet and HTML performance for
up to 50 images. The scrolling was fast and smooth because all the images had
already been loaded into the memory.
Open Source
We have made this cine applet available as an open-source utility or
freeware for academic use by other institutions. Both the Cine.java source
file and the Cine.class applet are available from the corresponding author on
request. End users who are interested in adding this applet to their existing
HTML pages will only need the Cine.class file. The instructions for using this
applet in HTML pages are available in the Applet Implementation in HTML
section of this article. Developers and programmers will need the Cine.java
source file and the Java SDK.
Alternative Approach
Another alternative to displaying streaming images on HTML pages is using
AVI, MPEG, and animated GIF formats to display movie clips. These formats are
commonly used in today's Web-based streaming videotape businesses such as news
broadcasting and audio–videotape entertainments. In this approach,
images and sound tracks are preprocessed and converted into a single movie
file using commercial software such as QuickTime (Apple Computers), Flash
(Macromedia), and Movie Maker (Microsoft). However, because of browser
incompatibility, huge file size, unbalanced image quality, and lack of user
controls, movie clips have not been commonly used on Web-based teaching file
pages. Perhaps future advances in cine technology will allow easier
implementation of movie clips into teaching files.
Conclusion
We developed a simple method for displaying and scrolling cine images on
the pages of a Web-based teaching file using the open-source utility Java
applet. This interactive utility not only provides fast and smooth viewing
capability but also improves 3D visualization compared with the traditional
approach of using thumbnail and enlarged images on static HTML pages. Because
Java is a built-in component of common Web browsers, no other software is
required. We have used this applet successfully in our department for more
than 2 years. Currently, this Java utility is available as freeware to other
institutions.
References
- Goldberg DJ, DeMarco KJ, Parikh T. Internet-based interactive
teaching file for neuroradiology. AJR2000; 175:1371
–1373[Abstract/Free Full Text]
- Weinberger E, Jakobovits R, Halsted MJ.
My-PACS.net: a
Web-based teaching file authoring tool. AJR2002; 179:579
–582[Abstract/Free Full Text]
- Maldjian JA, Listerud J. Automated teaching file and slide database
for digital images. AJR2000; 175:1249
–1251[Abstract/Free Full Text]
- Mrowka R. A Java applet for visualizing protein–protein
interaction. Bioinformatics2001; 17:669
-671[Abstract/Free Full Text]
- Danias PG, Parker JA. Novel Internet-based tool for correcting
apparent sensitivity and specificity of diagnostic tests to adjust for
referral (verification) bias. RadioGraphics2002; 22:e4[Abstract/Free Full Text]
- Setti E, Musumeci R. A Java viewer to publish Digital Imaging and
Communications in Medicine (DICOM) radiologic images on the World Wide Web.
J Digit Imaging2001; 14[2 suppl 1]:229
–230[Medline]
CiteULike 
Complore 
Connotea 
Del.icio.us 
Digg 
Reddit 
Technorati What's this?
This article has been cited by other articles:
|
|
|
|
 
D. Cornfeld
A Step-by-Step Solution for Embedding User-Controlled Cines into Educational Web Pages
Am. J. Roentgenol.,
March 1, 2008;
190(3):
W218 - W221.
[Abstract]
[Full Text]
[PDF]
|
|
|
Top
Abstract
Introduction
