Image Properties

URL
Defines the path where the image is located. Click the folder icon to select or upload an image, or enter a relative URL within the project, such as assets/image.png. You can also enter any absolute URL, even if it is outside of your project or DGLux.

You can also drag the file from your computer:

1. Drag the image onto DGLux5.
2. When prompted to upload the image, click Yes. Your image is uploaded. It can be found under the assets folder in the Project Tree.

You can use any image format that is supported by the user's browser.

The URL property

Tiling/Scaling
Determines whether the image tiles (repeats to fill the container) or scales (changes size to match the container).

No Tiling
The image does not tile or scale. An image larger than its container is clipped.

Tiling
The image tiles to fill the container either horizontally, vertically, or both horizontally and vertically.

Scaling
The image scales to the size of the container.

The Tiling/Scaling property

Tiling Options
Determines whether the image tiles (repeats to fill the container) horizontally, vertically, or both horizontally and vertically.

Repeat
The image tiles horizontally and vertically.

Repeat Horizontally
The image tiles horizontally only. One row of tiles appears.

Repeat Vertically
The image tiles vertically only. One column of tiles appears.

The Tiling Options

Tiling Angle
If Repeat Horizontally or Repeat Vertically is selected, changing this value causes tiles to repeat along an angle. Valid values are between −45 and 45.

The Tiling Angle property

Scaling Options
Determines how the image scales (changes size to match the container).

Contain
The image scales while maintaining its aspect ratio. Part of the container might be empty.

Cover
The image scales to fill the container while maintaining its aspect ratio. Any part of the image that overflows the container is clipped.

Stretch
The image stretches to cover the container. The image’s aspect ratio is not maintained.

The Scaling Options

Horizontal Alignment
Determines how images or tiles are horizontally aligned.

Left
The leftmost edge of the image or tiles is justified to the left container boundary.

Center
The image or tiles are horizontally centered.

Right
The rightmost edge of the image or tiles is justified to the right container boundary.

The Horizontal Alignment property

Vertical Alignment
Determines how images or tiles are vertically aligned.

Top
The topmost edge of the image or tiles is justified to the top container boundary.

Middle
The image or tiles are vertically centered.

Bottom
The bottommost edge of the image or tiles is justified to the bottom container boundary.

The Vertical Alignment property

Left Padding
Defines a number of pixels of space between the left container boundary and the leftmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Left Padding property

Right Padding
Defines a number of pixels of space between the right container boundary and the rightmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Right Padding property

Top Padding
Defines a number of pixels of space between the top container boundary and the topmost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Top Padding property

Bottom Padding
Defines a number of pixels of space between the bottom container boundary and the bottommost edge of the content. Negative numbers are not allowed.

Paddings are part of an object's width and height. See Borders, Padding, and Content Size.

The Bottom Padding property

Link Paddings
Links all four padding editors so that their values are equal.

The Link Paddings property

Frame Animator
Specifies whether the image component animates a specified list of frames.

The image defined by the URL property is displayed only when the animation is not active.

Frame animators can be used to create moving images, such as a running fan or moving dampers.

The Frame Animator property

Active
Sets or returns whether the animation is currently running.

The Active property

Reverse
Determines whether the animation frames are displayed in reverse.

TRUE
The topmost frame in the Property Inspector appears first in the animation sequence.

FALSE
The bottommost frame in the Property Inspector appears first in the animation sequence.

The Reverse property

Loop
Determines whether the animation sequence is repeated.

TRUE
As soon as it is complete, the animation starts again.

FALSE
The animation happens once, and then the image defined for the image component is displayed.

The Loop property

Interval
Defines how long each frame is displayed, in seconds.

The Interval property

Frame Index
Returns the index of the frame currently displayed in the animation. The image defined by the URL property is 0, the topmost frame in the animation sequence is 1, and so on. This is a read-only property, so changing it manually does nothing.

The Frame Index property

Total Frames
Returns the number of frames in the animation, not including the image. This is a read-only property, so changing it manually does nothing. Add frames by clicking the Add button.

The Total Frames property

On Complete
Triggers an event on completion of this animation. Can be used to invoke actions or trigger other events.

The On Complete property

Frames
Specifies the paths to each of the frames in the animation sequence. Click Add to add frames, and then specify an image path for each frame.

The Frames property

Break Apart
Separates an SVG into its component vectors to allow you to edit it within DGLux5. This property is available only for image components that contain an SVG image.

The Break Apart property