Image Editor

With the Image Editor, you can easily edit images that you've uploaded via file selection right in your browser.

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

You can edit any images in JPEG or PNG format.

Crop, Rotate, and Scale

In this editor, you'll find buttons in the upper-left corner for adjusting the aspect ratio, showing or hiding the grid, and zooming.

At the bottom left, you'll find buttons for rotating the image to the right or left.

In the lower-right corner, you can flip the image horizontally or vertically.

All changes will be saved when you click "Save and Close" at the top right of . Clicking "Close" on will discard all changes.

Drawing, labeling, and annotating

In this editor, you'll find image editing tools above the image—for example, to highlight or annotate parts of the image. You can specify the available tools in the editor's configuration. Here, too, you can save or discard any changes using the buttons in the upper-right corner.

Configuration in the Properties of a File Dialog

The Image Editor is not a separate application component. It can be enabled by adjusting the settings in the file selection properties. Here you'll find general information on creating and configuring a file selection. The following section describes the specific features and settings of the Image Editor.

You can find the settings for the Image Editor in the Properties dialog box for the "File Selection" application element, on the "General" tab in the "Image Editing" section. Under "Editor," you can enable the two editors using the following settings:

  • Crop, Rotate, and Scale

  • Drawing, labeling, and annotating

Under "Display Mode," you can choose whether image editing should open inline or in a pop-up window. If images are too small, the image editor always opens in a pop-up window.

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

Image Editing

If you have enabled the "Draw, Label, and Annotate" editor on the "General" tab, you will also see the "Image Editing" tab in the file selection properties.

Tools

You can configure image editing tools here.

All tools listed in the "Selected Tools" list are available online. The order of the tools is taken into account. You can use the arrow buttons to move tools from one list to another and to change their order.

Options

If you click "Options" in the left pane of the dialog, you can select the following general editor buttons as needed:

  • Select "Clear All Changes"

  • Enable "Undo" and "Redo"

  • Enable "Zoom Out" and "Zoom In"

Clicking "Add Color" at or "Edit Color" at opens a dialog box where you can select the desired color.

A preselected set of colors is displayed, which can be reselected by clicking the " " button.

JavaScript

If you're already familiar with scripting in Intrexx, you may be aware of the "Script" tab, which you'll find in the properties of all JavaScript-enabled application elements.

In the properties of a file selection with image editors enabled, you'll find the second section, "Editor Events," on the "Script" tab, where you can select the function for the script call. Click on " " and then "Add New Script Call."

Editor

Select the editor here for which you want to configure the event. The list of available events changes depending on the editor you select.

Function

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

Clicking "Example" opens a dialog box containing a sample script.

Opening Editors via the File Dialog

The "File Selection" application element offers various templates for displaying the element in the browser. The buttons that let you open the Image Editor in your browser will also change accordingly. General information about 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 "Edit Image" ( ) to open a menu from which you can select one of the two image editors.

Template 2 and Template 4

If you selected Template 2 or Template 4, you can open the first editor by clicking " " under "Crop, Rotate, and Scale." You can open the second editor by clicking on " " ("Draw, Label, and Annotate").

Layout

In the "Design" module, every layout includes the "Image Editor" control. You can find it in the "Control Elements" section under the "File Upload / Input Validation" nodes. The layout of the Image Editor can be edited here for all file selection templates in which the editor is available (Standard, Minimal, Basic, Advanced).

The layout of the Image Editor can be edited only using the variables defined for the control. Custom changes to the CSS have no effect.

If the "Image Editor" control is selected in the "Controls" pane, click " " "Show CSS Variables" in the "Styles" pane on the right side of the "Design" module. You can easily edit the variable values here in the "Value" column.

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

Templates 1 and 3

The figure above shows the layout of the Image Editor when Template 2 or 4 has been selected in the file selection properties. The area occupied by the Image Editor is within the frame shown here in red. The surrounding elements—in this case, the unshaded background, the file name, the file size, and the area for selecting a file at the top—are part of the file selection.

The layout of the frame style and the shaded area in the Image Editor can be customized using the "Base Colors" and "Base" variables. These two groups of variables form the basis for the variables you'll find in the "Advanced" category.

The layout of the button that opens the Image Editor is defined by the variables in the "Advanced / Trigger (Button)" section.

When the mouse hovers over the button, the "Edit Image" section appears; when clicked, the two menu items for the editors appear, provided that both editors have been enabled in the file selection properties. If only one of the editors is enabled, it opens immediately when you click it, and no additional menu opens. The button's layout can be edited using the variables in the "Advanced/Trigger (Button)" section, and the menu and menu items can be edited using the variables in the "Menu" and "Menu Item" categories.

Templates 2 and 4

For templates 1 and 4, you can access the editor via two " " buttons provided by the file selector. This means that the layout of the buttons cannot be edited using variables. The layout of the area shown in gray in the figure can be modified using the corresponding variables, just as with Templates 1 and 3—with the exception of the Edit button, which is omitted here.

Editor Layout - Background and Buttons

You can customize the layout of the toolbar in the editor using the variables in the "Advanced/Toolbar" section. Variables are available for the background and for the layout of the buttons.

Assign Variables in the Application

As usual, new "Image Editor" controls can be added in the "Controls" section of all layouts, and their appearance can be customized by changing the values of the variables.

The control elements can then be assigned to the file selection elements in applications using the style class on the "View" tab in the Application Designer.

The appearance of the Image Editor can be customized. Customization overrides the values of the corresponding CSS variables. The customization applies only to the Image Editor currently being edited and has no effect on other Image Editors included in the application.