Scripting Web Graphics

Creation of even the simplest graphical elements can be a tiresome experience without a prior background and training in visual design. Most developers would rather work on the next application functionality than fiddle around with Photoshop and similar imaging tools. Usability and aesthetics are considered to be the prerogatives of Web designers as a distinct and separate group of professionals.

This article takes a closer look at some of the major issues faced by programmers with image manipulation and proposes a developer-friendly solution for the same.

The Problem with Image Editors

A common problem faced during image manipulation is the ability to define and repeat a set of operations on multiple images in a consistent manner with predictable outputs. The manipulation is more to do with the contents of the image (e.g. a change in the background color) rather than external characteristics (e.g. image size).

Nearly all image editors fail to deliver on the above-mentioned requirements. The root cause of such failure can be ascribed to the following three factors:

1. Fuzzy Generation: Input devices for image editors typically include mouse, lightpen and digital scanners. Predictability of output is affected by non-deterministic factors like steadiness of hand in drawing/erasing and digital noise introduced during scanning.
2. Change Quantification: Changes made to an image cannot be quantified or documented in an intuitive and reliable fashion. This affects repeatability while working across a set of images. The issue is also applicable for replicating a series of steps in creating a new image.
3. Rollback: While most image editors provide mechanisms to undo image manipulations, such rollbacks are at best transient in nature. Changes made to an image are usually permanent once the image is saved to disk. The series of changes made to arrive at the final output are never captured or stored.

Instruction-Driven Imaging

Instruction-driven images are more popularly known as vector graphics. Rather than store information about each and every pixel within an image, the set of instructions that can be used to arrive at the final raster are stored as image content. These instructions usually define geometrical primitives such as points, lines, curves and polygons. Examples of vector graphics formats include windows metafile (WMF), Postscript and Scalable Vector Graphics (SVG) to name a few.

While instruction-driven imaging can never replace raster graphics in terms of visual details, they do extremely well for simpler graphical elements that can be constructed using basic shapes, shadings and patterns. They also help avoid to a great degree the issues associated with raster editing as outlined above.

Imaging using High-Level Programming Languages

Ask yourself as a programmer, what could be the best possible syntax for an instruction-driven approach to imaging? The typical answer would be:

"the same high-level programming language that is used to implement most of the application functionalities."

The advantages of using a high-level programming language for instruction-driven imaging are as follows:

1. The developer is exempted from the nuances of learning the semantics of a new format.
2. Proficiency with known language syntax is leveraged.
3. The availability of high-level language features like looping, conditionals, operators and subroutine calls.
4. Extremely dynamic images with visual content based on the latest application data.

PHP is one such high-level language that can create and manipulate image files in a variety of different formats, including GIF, PNG, JPG, WBMP and XPM. Even more convenient, PHP can output image streams directly to a browser.

Introducing Scripted Imaging

Scripted Imaging is a small Java component that is inspired by and serves as an alternative to the graphical output capabilities of PHP. The component runs on a Java/JEE platform the minimum dependency being the availability of a servlet container for deployment. The imaging instructions are defined using a Java-like syntax and stored in text files (one file per image) on the server-side. These files are interpreted at runtime to generate raster images that are streamed to Web browsers on remote desktops using HTTP.

Other features of scripted imaging include the following:

1. Image generation and manipulation using standard AWT/Swing packages.
2. Output image in multiple formats (JPEG, PNG and GIF).
3. Supports palette transparency. The output is either a 8-bit PNG or a GIF image.
4. Load arbitrary fonts and images from disk.
5. Modifications to scripts loaded dynamically in a servlet environment (hot deployment).
6. Has access to HTTP request parameters, session and servlet context attributes.
7. Can be executed from the command line to pre-create raster images from scripts.

Future Possibilities

Using a scripting notation and environment to generate Web graphics has more ramifications than what is immediately apparent. Apart from the simple yet useful rounded-corner images, fancy dividers and background gradients, a lot of interesting widgets can be generated using this technique. Examples of such widgets include charting components (like bar and pie charts), topology maps and UML diagrams.

Since both PHP/GD and Scripted Imaging have access to all libraries and objects provided by the corresponding platforms, it becomes possible to directly associate external systems and services with image sources to generate dynamic output. As an illustration, consider a scripted image directly accessing an RDBMS using JDBC to retrieve data and render the same in a bar chart as the output raster image.

References

[1] Vector graphics and raster graphics definitions on Wikipedia.

[2] PHP: Image Functions from the PHP manual.

[3] Scripted Imaging project web on SourceForge.

[4] Scalable Vector Graphics (SVG) 1.1 Specifications.

[5] PostScript Language Reference, Third Edition published by Addison-Wesley (PDF format)