REVERT TO CONSOLE

Recently I had an interesting problem to solve. A manufacturing client wanted to know if it was possible to dynamically draw images based on engineering and dimensional data provided by end-users, and show them on the Web.


So, the first question I have to answer is. “Is this doable?” And my answer, as always, is “yes”. But the real question is, “Is this doable with the amount of time and resources we have?” That’s when I started exploring different possibilities.


The architecture both server and client-side is Java-based. So that’s what I want to use for my solution. I thought of using applets, but then it introduces issues and is dependent on the end-user’s JVM. I just wanted to create an image on the server the same way as I would in an applet with AWT, and have it rendered as a jpeg or gif to the user.

I found my solution with the help of this article. It’s indeed possible to draw images in the dark and render them as actual files later. I’m rambling again, so let’s get to it.

This class is a sliced up version of the prototype servlet I made for the client. All the meat is in this snippet. Actually, there isn’t much more to it in the real thing.

package com.boohbah.web.servlet.demo;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.io.IOException;

import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class SizingDiagramServlet implements Servlet{
	/**
	 *
	 */
	//input properties
	private int disWidth;
	private int disHeight;
	private int ductWidth;
	private int ductHeight;

public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
		setDisHeight(Integer.parseInt(request.getParameter("disHeight")));
		setDisWidth(Integer.parseInt(request.getParameter("disWidth")));
		setDuctWidth(Integer.parseInt(request.getParameter("ductWidth")));
		setDuctHeight(Integer.parseInt(request.getParameter("ductHeight")));

		BufferedImage im = createImage();

		response.setContentType("image/jpeg");
		//encode the image we created with sun's jpeg codec
		JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(response.getOutputStream());
		encoder.encode(im);
	}

	//using the properties provided by the user, we can create the image
	private BufferedImage createImage()
    {
	//blank.jpg is an actual file I created ahead of time and put into the top level of my application war
		Image image = Toolkit.getDefaultToolkit().getImage("blank.jpg");
		BufferedImage bufferedImage = new BufferedImage(IMG_WIDTH, IMG_HEIGHT,BufferedImage.TYPE_INT_RGB);
		Graphics g = bufferedImage.createGraphics();

		//clear and set background
		g.clearRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
		g.setColor(Color.WHITE);
		g.fillRect(0, 0, IMG_WIDTH, IMG_HEIGHT);

		//image drawing code takes place here
		//...
		//...
		//...
		//...
		//...

		//finalize drawing
		g.drawImage(image, 0, 0, null);
		g.dispose();

		return bufferedImage;
	}

	/*
		Code for
		property getters and setters would be here.

	*/

}

Not too bad is it?


Here are some screen shots that show the resulting jpegs based on a user request.



From:

http://localhost:8080/diagram?disHeight=46&disWidth=46&ductWidth=48&ductHeight=48

And another image where the user’s configuration (data entered) is apparently ill-advised.


From: http://localhost:8080/diagram?disHeight=35&disWidth=60&ductWidth=50&ductHeight=50





What’s the point of all this? You can and you WILL avoid using Flash, Ajax widgets, and other fancy means of drawing dynamic and attractive graphics. All chant “Server-Side AWT!”