it is somehow possible a picture to edit and save again ?

Hello dear Vaadin-friends

it is somehow possible a picture to edit and save again ?
i need the folowing function (as you can see it in the example picture at the end or in the appendix) :

There is an image, which i have to edit (only add a flexible rectangle and arrow ) and save it again, as you can see it in
the example below :

I do not think that you can create something in Vaadin, but maybe someone has an idea?
Or an alternative?

For each tip, I would thank a lot !

Thanks !

(a german guy , i apologize for my horrible English :wink: )

Modifying a picture in a Vaadin app and saving it on the server sounds more like an application logic task, but of course you’d need some Vaadin UI to let the user to specify the coordinates.

You could make a simple solution by using a ClickListener that lets the user click on the center or corners of the rectangle, and then use Java APIs to draw on the image. That doesn’t sound like very good UX though – it would be nicer to be able to drag the corners of the rectangle.

You could also use AbsoluteLayout, put the Image on the bottom and then have some other component such as Label floating on it, make it transparent but with visible borders, and control its position and width and height. This way, you wouldn’t need to modify the image itself.

You can also do all sorts of tricks using drag and drop and dynamic images, as in done
in this example
. You could have the controls for the size of the rectangle in the side bar (perhaps two Sliders that control the width and height of the Label) and then let the user move the Label using drag and drop.

For an ultimate solution, you could make a client-side component or extension with GWT that lets the user draw the rectangle and arrow more interactively. Handling mouse drag in GWT code is
somewhat simple
, as is drawing and sending the inputs to the server. I’d maybe do it as a component extension to Image. I don’t know if there’s an existing add-on for such exact purpose. Looks like there is a
, but it seems to be a completely undocumented experimental add-on.

Hello Marko,

First of all let me thank you for your reply and your many efforts to find a viable solution.
I think I will first try the undocumented add on, if this works , i think this will fix my needs if it works.
But I’ll be also have a check to the other approaches (I hope , I don’t need to create a new component in GWT).

I will definitely inform you from my experiments (now getting started)

greetings and many thanks from Germany (in the middle of the nowwhere near cologne)

OK. If the add-on is not suitable and you don’t want to go into GWT coding, I’d recommend going with my suggestion with AbsoluteLayout + either ClickListener or drag’n’drop. You could have size controls for the rectangle somewhat like in the
Slider example
(oops its border styling looks a bit broken but nevertheless).

yes , of course, can be work , too ! Thanks !
you hear from me!