InteractiveImage

A vaadin UI component wraps a BufferedImage.

View larger

Close

You can use it with or without interactivity.

Support some interactivity, handling MouseMove, Click and BoxSelect at server side. You can specify update interval for MouseMove event or disable it.

setWidth, setHeight, setSize are not supported. The widget will update its size based on the image you passed in setImage(img).

Tiny example code for just using it as a wrapper of BufferedImage without interactivity: InteractiveImage imgWidget = new InteractiveImage(); imgWidget.setImage(yourBufferedImage); //disable MouseMove. You don't need to do this, //but it does save some traffic by disabling it. imgWidget.setMouseMoveUpdateInterval(-1);

Try short sample code for interactivity:

Try the longer sample code for other features: updateInterval, highlightBox.

Sorry, I don't have a place to host a demo page. (Too bad, Google App Engine doesn't support BufferedImage).

Sample code

package com.hcp.interactiveimage;

import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;

import com.vaadin.Application;
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;

public class InteractiveimageApplication extends Application implements
		InteractiveImage.InteractiveImageListener {
	private static final long serialVersionUID = -984559736698995896L;
	private Label info;
	private CheckBox turnOnHighlight;
	private InteractiveImage imgWidget;
	private Window mainWindow;

	@Override
	public void init() {
		mainWindow = new Window("Interactiveimage Application");
		VerticalLayout vl = (VerticalLayout) mainWindow.getContent();
		vl.setSpacing(true);

		mainWindow
				.addComponent(new Label(
						"Try move your mouse over the image. Try click on the image.<br/>"
								+ "Try hold on the left button and draw a rectangle on the image.",
						Label.CONTENT_XHTML));

		NativeSelect updateIntervalSelect = new NativeSelect(
				"Mouse move update Interval in milliseconds (default is 500ms. Use -1 to disable it.)");
		updateIntervalSelect.addItem(new Integer(-1));
		updateIntervalSelect.addItem(new Integer(100));
		updateIntervalSelect.addItem(new Integer(500));
		updateIntervalSelect.addItem(new Integer(2000));
		updateIntervalSelect.select(new Integer(500));
		updateIntervalSelect.setNullSelectionAllowed(false);
		updateIntervalSelect.setImmediate(true);
		updateIntervalSelect.addListener(new Property.ValueChangeListener() {
			private static final long serialVersionUID = -7999090464856994361L;

			public void valueChange(ValueChangeEvent event) {
				// default updateInterval is 500ms.
				// Use a smaller value for better user experience if your
				// client/server
				// latency is small.
				// accept 50 to 10000ms. or -1 to disable MouseMove update.
				imgWidget.setMouseMoveUpdateInterval((Integer) event
						.getProperty().getValue());
			}
		});
		mainWindow.addComponent(updateIntervalSelect);

		HorizontalLayout hl = new HorizontalLayout();
		hl.setSpacing(true);
		mainWindow
				.addComponent(new Label(
						"When you call setImage(img),<br/>"
								+ "the size of the InteractiveImage will be updated according to size of the img.",
						Label.CONTENT_XHTML));
		mainWindow.addComponent(hl);

		Button smallImgButton = new Button("Reset Image to size 300x200");
		smallImgButton.addListener(new Button.ClickListener() {
			private static final long serialVersionUID = 7020487250533409464L;

			public void buttonClick(ClickEvent event) {
				BufferedImage image = new BufferedImage(300, 200,
						BufferedImage.TYPE_INT_RGB);
				imgWidget.setImage(image);
			}
		});
		hl.addComponent(smallImgButton);

		Button bigImgButton = new Button("Reset Image to size 600x500");
		bigImgButton.addListener(new Button.ClickListener() {
			private static final long serialVersionUID = -6912730672252461962L;

			public void buttonClick(ClickEvent event) {
				BufferedImage image = new BufferedImage(600, 500,
						BufferedImage.TYPE_INT_RGB);
				imgWidget.setImage(image);
			}
		});
		hl.addComponent(bigImgButton);
		
		Button nullImgButton = new Button("Reset Image to null");
		nullImgButton.addListener(new Button.ClickListener() {
			private static final long serialVersionUID = 6686875980210152638L;

			public void buttonClick(ClickEvent event) {
				imgWidget.setImage(null);
			}
		});
		hl.addComponent(nullImgButton);
		
		turnOnHighlight = new CheckBox(
				"use setHighlightBox(...) to give user a feedback of current mouse location.",
				false);
		turnOnHighlight.setImmediate(true);
		mainWindow.addComponent(turnOnHighlight);

		mainWindow
				.addComponent(new Label(
						"(You can use setHighlightBox(...) for other purposes too, "
								+ "like hightlighting a region of the image based on user move or click.)"));
		
		imgWidget = new InteractiveImage();
		// set an optional InteractiveImageListener to handler locate_event,
		// clickEvent and boxEvent.
		imgWidget.setListener(this);
		BufferedImage image = new BufferedImage(400, 300,
				BufferedImage.TYPE_INT_RGB);
		imgWidget.setImage(image);

		mainWindow.addComponent(imgWidget);

		info = new Label("<h2>Mouse location:</h2>", Label.CONTENT_XHTML);
		mainWindow.addComponent(info);
		setMainWindow(mainWindow);
	}

	public void onMouseMove(int x, int y) {
		info.setValue("<h2>Mouse location: x=" + x + " y=" + y + "</h2>");
		if (turnOnHighlight.booleanValue()) {
			imgWidget.setHighlightBox(x - 20, y - 20, 40, 40);
		}
		else {
			imgWidget.setHighlightBox(0, 0, 0, 0);
		}
	}

	public void onClick(int x, int y) {
		mainWindow.addComponent(new Label("Clicked at x=" + x + " y=" + y));
		BufferedImage image = imgWidget.getImage();
		if (image == null)
			return;
		Graphics2D g2d = image.createGraphics();
		g2d.setColor(Color.red);
		g2d.drawRoundRect(x - 5, y - 5, 10, 10, 10, 10);
		g2d.dispose();
		imgWidget.setImage(image);
	}

	public void onBoxSelect(int x, int y, int w, int h) {
		mainWindow.addComponent(new Label("Selected at x=" + x + " y=" + y
				+ " width=" + w + " height=" + h));
		BufferedImage image = imgWidget.getImage();
		if (image == null)
			return;
		Graphics2D g2d = image.createGraphics();
		g2d.setColor(Color.yellow);
		g2d.drawRect(x, y, w, h);
		g2d.dispose();
		imgWidget.setImage(image);
	}
}

package com.hcp.interactiveimage;

import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class InteractiveimageApplication extends Application implements
		InteractiveImage.InteractiveImageListener {
	private static final long serialVersionUID = -984559736698995896L;
	private Label info;
	private InteractiveImage imgWidget;
	private Window mainWindow;

	@Override
	public void init() {
		mainWindow = new Window("Interactiveimage Application");
		
		imgWidget = new InteractiveImage();
		// set an optional InteractiveImageListener to handler locate_event,
		// clickEvent and boxEvent.
		imgWidget.setListener(this);
		BufferedImage image = new BufferedImage(400, 300,
				BufferedImage.TYPE_INT_RGB);
		imgWidget.setImage(image);

		mainWindow.addComponent(imgWidget);

		info = new Label("<h2>Mouse location:</h2>", Label.CONTENT_XHTML);
		mainWindow.addComponent(info);
		setMainWindow(mainWindow);
	}

	public void onMouseMove(int x, int y) {
		info.setValue("<h2>Mouse location: x=" + x + " y=" + y + "</h2>");
	}

	public void onClick(int x, int y) {
		mainWindow.addComponent(new Label("Clicked at x=" + x + " y=" + y));
		BufferedImage image = imgWidget.getImage();
		if (image == null)
			return;
		Graphics2D g2d = image.createGraphics();
		g2d.setColor(Color.red);
		g2d.drawRoundRect(x - 5, y - 5, 10, 10, 10, 10);
		g2d.dispose();
		imgWidget.setImage(image);
	}

	public void onBoxSelect(int x, int y, int w, int h) {
		mainWindow.addComponent(new Label("Selected at x=" + x + " y=" + y
				+ " width=" + w + " height=" + h));
		BufferedImage image = imgWidget.getImage();
		if (image == null)
			return;
		Graphics2D g2d = image.createGraphics();
		g2d.setColor(Color.yellow);
		g2d.drawRect(x, y, w, h);
		g2d.dispose();
		imgWidget.setImage(image);
	}
}

Links

• Source Code

Compatibility