Ideas for implementing an image selection tool


I am going to migrate an existing web project based on groovy/grails to vaadin. Most UI elements can easiliy be migrated. The back end for the calculations is plan old Java. So this part is a straight ahead job.

But for some menus in the workflow the user should select a rectual region/box of a given image. This part is done with an ugly java script code which creates a white selection box by overlaying and stretching 1px images. Also the relative coordinates of the selection frame according the given image are calculated for further transformations.

Demo image from type mandelbrot set.

Can reach this aim only with vaadin elements?

for getting the mouse clicks.

But how can I create the overlay frame.

with best regards


This task is quite easy to accomplish with some external tools. If Vaadin 6 is your choice, then
CropField add-on
could help you. In case you’re going to use Vaadin 7 - I would either wrap the guts of that add-on (gwt port of
) or JCrop itself or


I would recommend to build a simple client-side component for this. It would also allow you to drag-select the zoomed region.

for quickstart on this.