Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » How to use AbstractImageField doRotate(), etc. methods ?
How to use AbstractImageField doRotate(), etc. methods ? [message #1815378] Tue, 01 October 2019 21:24 Go to next message
Michel R is currently offline Michel RFriend
Messages: 27
Registered: April 2015
Junior Member
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 10:20 Go to previous messageGo to next message
Beat Schwarzentrub is currently offline Beat SchwarzentrubFriend
Messages: 114
Registered: November 2010
Senior Member
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 22:02 Go to previous messageGo to next message
Michel R is currently offline Michel RFriend
Messages: 27
Registered: April 2015
Junior Member
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 13:16 Go to previous messageGo to next message
Michel R is currently offline Michel RFriend
Messages: 27
Registered: April 2015
Junior Member
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 08:04 Go to previous message
Beat Schwarzentrub is currently offline Beat SchwarzentrubFriend
Messages: 114
Registered: November 2010
Senior Member
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:
  


Current Time: Fri Dec 06 20:13:12 GMT 2019

Powered by FUDForum. Page generated in 0.01695 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top