Eclipse Community Forums - RDF feed
https://www.eclipse.org/forums/
Eclipse Community ForumsHow to use AbstractImageField doRotate(), etc. methods ?
https://www.eclipse.org/forums/index.php/mv/msg/1100770/1815378/#msg_1815378
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!]]>Michel R2019-10-01T21:24:47-00:00Re: How to use AbstractImageField doRotate(), etc. methods ?
https://www.eclipse.org/forums/index.php/mv/msg/1100770/1815401/#msg_1815401
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]]>Beat Schwarzentrub2019-10-02T10:20:59-00:00Re: How to use AbstractImageField doRotate(), etc. methods ?
https://www.eclipse.org/forums/index.php/mv/msg/1100770/1815444/#msg_1815444
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
]]>Michel R2019-10-02T22:02:42-00:00Re: How to use AbstractImageField doRotate(), etc. methods ?
https://www.eclipse.org/forums/index.php/mv/msg/1100770/1815490/#msg_1815490
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. ]]>Michel R2019-10-03T13:16:09-00:00Re: How to use AbstractImageField doRotate(), etc. methods ?
https://www.eclipse.org/forums/index.php/mv/msg/1100770/1815525/#msg_1815525
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).