Image Editor

With the Image Editor, you can easily edit images that you have uploaded with a file selection directly in the browser.

The Image Editor is available in two versions: an editor for cropping, rotating and scaling an image and an editor for drawing, labeling and annotating within the image.

All images in JPEG and PNG formats can be edited.

Crop, rotate and scale

At the top left of this editor you will find buttons for setting the aspect ratio, showing and hiding the grid and for zooming in and out.

At the bottom left you will find buttons for rotating the image to the right or left.

At the bottom right, the image can be mirrored horizontally or vertically.

All changes are saved when you click on "Save and close" at the top right. Click on "Close" to discard all changes.

Draw, label and annotate

In this editor, you will find tools for image editing above the image - e.g. to mark or label parts of the image. You can define the available tools in the editor configuration. Here too, all changes can be saved or discarded using the buttons at the top right.

Configuration in the properties of a file selection

The Image Editor is not a separate application element. It can be activated by making the appropriate settings in the file selection properties. Here you will find general information on creating and configuring a file selection. The special functions and settings of the Image Editor are described below.

The settings for the Image Editor can be found in the properties dialog of the "File selection" application element on the "General" tab in the "Image editing" area. Under "Editor" you can activate the two editors with the following settings:

• Crop, rotate and scale

• Draw, label and annotate

Under "Display mode", you decide whether the image processing should be opened inline or in a pop-up. If the images are too small, the image processing is always opened in a pop-up.

Image compression can be controlled via a slider or the corresponding input field. The higher the image quality, the larger the file size of the image. Image compression only works with images of type "JPEG".

Image processing

If you have activated the "Draw, label and annotate" editor on the "General" tab, you will also find the "Image editing" tab in the properties of the file selection.

Tools

Tools for image editing can be set here.

All tools in the "Selected tools" list are available on the web. The order of the tools is taken into account. The arrow buttons can be used to move tools from one list to another and also to change the order.

Options

If you click on "Options" on the left-hand side of the dialog, the following general editor buttons can be selected as required:

• activate "Delete all changes"

• activate "Undo" and "Redo"

• activate "Zoom out" and "Zoom in"

Click on "Add color" or "Edit color" to open a dialog in which the desired color can be selected.

A preselection of colors is delivered, which can be selected again via the button "Restore standard colors".

JavaScript

If you have already familiarized yourself with scripting in Intrexx, you may be familiar with the "Script" tab, which you can find in the properties of all JavaScript-enabled application elements.

In the properties of a file selection with activated image editors, you will find the second area "Editor events" on the "Script" tab, in which the function for the script call can be selected. Click on "Add new script call".

Editor

Select the editor for which the event is to be configured here. The list of available events changes depending on the selected editor.

Function

Select the desired function here. You can find out how to create functions here.

Click on "Example" to open a dialog in which you will find example scripts.

Opening the editors via the file selection

The "File selection" application element offers various templates for displaying the element in the browser. The buttons that you can use to open the Image Editor in the browser also change accordingly. General information on the settings in the file selection properties can be found here.

Template 1 and Template 3

If you have selected template 1 or template 3, you can click on "Edit image" to open a menu from which you can select one of the two image editors.

Template 2 and Template 4

If you have selected template 2 or template 4, you can open the first editor by clicking on "Crop, rotate and scale". You can open the second editor by clicking on "Draw, label and annotate".

Layout

In the "Design" module, there is the "Image editor" control element in every layout. You will find it in the "Control elements" area below the "File upload / Input control" node. The layout of the Image Editor can be edited here for all templates of the file selection in which the editor is available(Standard, Minimal, Basic, Advanced).

If the "Image editor" control element is selected in the "Control elements" area, click on "Show CSS variables" in the "Styles" area on the right-hand side of the "Design" module. The variable values can be conveniently edited here in the "Value" column.

All changes are immediately displayed in the preview in the middle area of the "Design" module. The following illustration provides an overview of the components of the Image Editor and the associated variable groups.

Template 1 and 3

In the image above you can see the layout of the Image Editor when template 2 or 4 is selected in the file selection properties. The area occupied by the Image Editor lies within the frame colored red here. The surrounding elements - here the non-hatched background, file name, file size and the area for selecting a file in the upper area - belong to the file selection.

The layout of the frame style and hatched area of the Image Editor can be edited using the "Base colors" and "Base" variables. These two variable groups are fundamental for the variables that you will find in the "Advanced" category.

The layout of the button that you can use to open the Image Editor is defined via the variables in the "Advanced / Trigger (button)" area.

The button shows the "Edit image" area when the mouse is over and the two menu items for the editors when clicked, provided both editors have been activated in the properties of the file selection. If only one of the editors is activated, it is opened immediately when clicked and no further menu is opened. The layout of the button can be edited via the variables in the "Advanced/ Trigger (button)" area, menu and menu items via the variables in the "Menu" and "Menu item" category.

Template 2 and 4

With templates 1 and 4, you can access the editor via two buttons provided by the file selector. The layout of the buttons cannot be edited using variables. The layout of the area shaded here in the illustration can be changed via the corresponding variables, as with templates 1 and 3 - with the exception of the Edit button, which is omitted here.

Editor layout - background and buttons

The layout of the toolbar in the editor can be edited using the variables in the "Advanced/ Toolbar" area. Variables for the background and variables for the layout of the buttons are available.

Assign variables in application

As usual, new control elements of the "Image editor" type can be added in the "Control elements" area in all layouts and their appearance can be edited by changing the values of the variables.

The control elements can then be assigned to the file selection elements in applications via the style class on the "View" tab in the application designer.

The appearance of the Image Editor can be changed with an individual customization. Customization overwrites the values of the CSS variables. The individual customization is only valid for the currently edited Image Editor and has no effect on other Image Editors that are also included in the application.