In this section we demonstrate the use of our toolkit for multimedia algorithms. As an example we present the
visualization of the different steps of the JPEG compression, including the procedures being executed at the encoder as well as those of the decoder. A JPEG encoder performs a series of transformations on
raw image data to produce a compressed output stream, which is then transmitted to a JPEG decoder that executes these transformations in the inverse order to decompress the image. The Figure in front
outlines the steps of the JPEG compression/decompression process.
JPEG deals with colors in the YUV color space. For each separate color component (Y, U and
V), the image is divided into 8x8 pixel blocks of picture elements. Each block is then transformed into a two dimensional DCT matrix. The following Figure shows an 8x8 coefficient matrix generated by
the DCT step. Coefficients with lower frequencies (typically higher values) are encoded first, followed by higher frequencies (with typically small values, near to zero).
The coefficients of the DCT matrix are then quantized. The final step of the JPEG compression consists of an entropy
coding. To develop an applet explaining the JPEG encoding and decoding process, a set of reusable itBeans that perform these transformations are
composed as illustrated in the Figure in front. The ItBeanKit library uses a fine grained modular decomposition to effectively de-couple the visualization of each step of the algorithm. This concept
allows for a significant reuse of code when developing new components, and moreover some of these can directly be reused to compose other software components. Although, the identification of the components
necessary to visualize a complex algorithm is performed applying a top-down technique, the development of these components (ItBeans) follows a bottom-up design. The development of the ItEncodingBean serves
as a good example how this is achieved: no new code visualizing the encoding process has to be developed. Instead of implementing a new component, the functionality of one of the different encoding
algorithms can be reused.
Each of our itBeans can have more than one view with respect to the specific needs of the user. An end-user who does not need to
be concerned with the details of the DCT transformation algorithm or the Huffman encoding, but who is only interested in the general functionality of JPEG, will get the ItJPEG-Bean presenting the input and
the output image with some additional information like the file size before and after the compression. Another end-user who might be interested in the execution of the DCT transformation algorithm will get
the ItBeans which are located at the second level with regard to our hierarchy.
Implementation
In the following we will explain our JPEG implementation with all the necessary steps according to our framework. In order to
develop an applet explaining the JPEG encoding and decoding process, a set of reusable itBeans that perform these transformations are composed as illustrated in the above Figure.
As mentioned earlier the itBeanKit library uses a fine grained modular decomposition to effectively decouple the visualization of each algorithm. This allows a
significant reuse of code when developing new components, and moreover some of these components can directly be reused to compose other software components.
The 3D view-Bean which shows the values of the Discrete Cosine Transformation, as well as the RGB-Bean, which is shown in Figure 56 are used in different
applets (for example JPEG, DCT and the preparation unit applet) as to be see next.
JPEG
This applet visualised the JPEG compression process. As illustrated in the figure bellow, a user can choose a block on the
original image on the left. When he changes the quality of the image he wants to be transmitted, the reconstructed image on the right will change according to the quality factor the user's choice. This is
not the only feature of this applet. Users can also specify, whether they want the data be computed using Discrete Cosine Transformation (DCT) or Fast-DCT. They can also change the parameter of the formula
if they wish. This aplet is set up out of different components. some of them are visible (3D-View, Block-chooser) and some are invisible (the data model of Run-length encoding).
The user can choose an image block and see the composition of the block in RGB (Red-Green-Blue) colors. The user can also explore the quality of the picture by
choosing a higher quantization value which then decreases the quality of the picture by increasing the compression factor and decreasing the file size of the picture. If the user presses the forward button,
an illustration of the steps of JPEG will be provided. By clicking on such a component a new applet window is opened and the detailed step is explained.
The user can switch between FDCT (Fast Discrete
Cosine Transformation) and DCT (Discrete Cosine Transformation), to explore the time differences necessary to calculate the output values (DCT is outperformed by FDCT).
