XML Editor - Image Crop widget

This XML Editor widget defines an image section in pixel with X, Y coordinates for upper left corner, width and height.

Introduction

In the first step, the widget is used for the definition of an image section in image transformation variants. The widget displays a picture and an overlay selection rectangle. The image scales proportionally to the available space. Similar to Photoshop and other image editing software the selected area is highlighted by dimming the image areas outside the selection. The size and position of the section can be determined via a selection tool rectangle.

The positions of the section are stored as "long" values in the asset features. When you open the widget the coordinates are readout. The section is then displayed using these coordinates. If the source attributes do not yet have any values, the entire image will be selected. If "fixed-pixel-width" and "fixed-pixel-height" are set, then a range of that size will be selected in the middle of the image. If "is-fixed-size" is set to "true", then "fixed-pixel-width" and "fixed-height-pixel" are interpreted as fixed values which means that the size of the area cannot be changed and you can only move it.

If "is-fixed-size" is set to "false", "fixed-pixel-width" and "fixed-height-pixel" this will calculate the ratio between width and height. The position and size of the section can be modified, but the size always changes proportionally. If "fixed pixel-width" or "fixed-height-pixel" is not set, then "is-fixed-size" with value "false" has no effect.

The user can determine the position and size of the section within the image as follows:

via handles at the corners and in the middle of the sides. If the attribute "is-fixed-size" it will define a fixed target and no handles are displayed (see Figure 2).
by dragging the mouse inside the section it can be moved.
by pressing the cursor keys you can change the position by one pixel.

Sample widget definitions

Example 1

An image crop widget defined by 'image-pixel-width' and 'fixed pixel-width' attributes with 'is-fixed-size="false" set to "true".

XML

<xe:image-crop label="Test"
source-x-pixel="xmldata@value_long1"
source-y-pixel="xmldata@value_long2"
source-width-pixel="xmldata@value_long3"
source-height-pixel="xmldata@value_long4"
image-url="=:'censhare:/service/assets/asset/id/11364/storage/master/file'"
is-fixed-size="false"
image-width-pixel="6048"
image-height-pixel="4032"
fixed-width-pixel="300"
fixed-height-pixel="150"
width="400"
height="400"/>

Example 2

An image crop widget with a fixed size has the same code except for this small change:

XML

… is-fixed-size="true" …

Widget configuration

The widget comes with the following attributes:
- "source-x-pixel" defines the x position in pixels for the top left corner of the selection
- "source-y-pixel" defines the y position for the upper-left corner of the selection
- "source-width-pixel" defines the width of the image selection in pixels
- "source-height-pixel" defines the height of the image selection in pixels
- "image-url" defines the URL of the displayed image as a string, formula or XPath expression
- "image-width-pixel" defines the width of the original image in pixels
- "image-height-pixel" defines the height of the original image in pixels
- "fixed-width-pixel" defines a fixed width of the rectangle in pixels (optional)
- "fixed-height-pixel" defines a fixed height of the rectangle in pixels (optional)
- "is-fixed-size" defines a fixed target size of "fixed-pixel-width" and "fixed-height-pixel" if "true", otherwise a ratio thereof