Eclipse Community Forums: Eclipse Scout » How to use AbstractImageField doRotate(), etc. methods ?

Home » Eclipse Projects » Eclipse Scout » How to use AbstractImageField doRotate(), etc. methods ?

How to use AbstractImageField doRotate(), etc. methods ? [message #1815378]

Tue, 01 October 2019 17:24

Eclipse User

Hello,

I am trying to use an AbstractImageField to display an image and let the user do some usual display actions, such as a rotation or scaling.

There are apparently useful methods such as doRotate() or doZoom(), setRotateDelta(), etc., however none of them seems to do anything, excepted setAutoFit() which works perfectly.

But when I execute doRotate() or doZoom(), using a menu action, nothing happens.

I use Scout 9.0.

What do I miss ?

Thank you!

Re: How to use AbstractImageField doRotate(), etc. methods ? [message #1815401 is a reply to message #1815378]

Wed, 02 October 2019 06:20

Eclipse User

Hi Michael

Unfortunately those methods really do nothing at the moment. They update some model properties, but these changes are not sent to the UI. The only existing implementation in the long-gone Swing UI has not been re-implemented in the new HtmlUi yet (and will probably not be implemented in the near future).

You have two options:
1. Implement it yourself, i.e. write a custom JsonImageField adapter that transfers the properties to the UI and implement custom ImageFieldAdapter.js and ImageField.js.
2. For simple transformations, you could use the CSS "transform" property. E.g. you could define your own CSS class ".rotate-image-90 img { transform: rotate(90deg); }" and add this class to the image field via addCssClass().

Regards,
Beat

Re: How to use AbstractImageField doRotate(), etc. methods ? [message #1815444 is a reply to message #1815401]

Wed, 02 October 2019 18:02

Eclipse User

Hi Beat

Thank you very much !
This is a little bit disappointing because these methods seem very convenient. But the second option you gave might save my day as I am in a hurry... It seems quite easy to implement without having to understand the mechanics of widget adapters.

Thanks again!
Michel

Re: How to use AbstractImageField doRotate(), etc. methods ? [message #1815490 is a reply to message #1815444]

Thu, 03 October 2019 09:16

Eclipse User

Hello,

Well I tried and option 2 doesn't work so well even in simple cases although if it seemed OK at first sight and quick and easy to implement (but not trivial).

When I apply an AutoFit then a 90° rotation, the browser (or Scout js ?) still considers the un-rotated image dimensions, so the image is not at the right place nor the scrollbars are correctly calculated : the calculations are apparently done using the un-rotated image width and length (which means that they are inverted in the calculation). Same for the scale transformation. The image is scaled on the screen but the scrollbars use the unscaled image dimensions. The result is terrible, either part of the image is missing or a very small image must be found in a huge canvas...

I am afraid that I will have to go for option 1 unless there is a trick to make these calculation work properly.

Thank you anyway, of course.

Re: How to use AbstractImageField doRotate(), etc. methods ? [message #1815525 is a reply to message #1815490]

Fri, 04 October 2019 04:04

Eclipse User

Hi Michel

Scout does not draw the canvas itself, instead it uses an <img> tag. Unfortunately, autofit for both landscape and portrait images cannot be accomplished easily in HTML. The .autofit CSS class we use is somewhat of a "hack", but does work for simple use cases. It may not work with transformed images, though. But you could always try to redefine the .autofit class with better rules. For the scrollbars to work correctly, you probably have to set your transform-origin to "top left".

Depending on your use case, you could apply the image transformations in Java and send a new image to the browser after each change. Here is the code from the old Swing implementation, maybe it is useful to you.

Another option would be to search the internet for a more sophisticated "image drawing and manipulation" widget in JS and then include that external library in Scout (using a custom form field).

Regards,
Beat

Previous Topic:	[Neon] - insert dynamic image into menu without being icons.
Next Topic:	How to get a widget's display size ?

Goto Forum:

-=] Back to Top [=-

Current Time: Wed Jul 23 15:43:37 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter