Image#

The Image Widget is for displaying an image in the view.

Props#

Source#

With the Source property the source for the image URL in the Image widget can be configured.

  • List - use a a list of static URLs, which will switch automatically, dependening on the Switch Interval property
  • Parameter - use the value of parameter as image URL, only available in full edition
  • Static - use a static URL

Switch Interval#

When selected source is List the interval for switching to the next URL in the URLs list can be configured. The unit is seconds.

URLs#

When selected source is List a list of URLs can be configured. The URL changes to the next element in the list depending on Switch Interval.

URL#

When selected source is Static a static URL can be configured.

Parameter#

When selected source is Parameter a String-Parameter can be selected. The Parameter Value is taken as URL.

Auto Reload#

If this option is enabled the image will be reloaded automatically. The property Reload Interval defines the reload interval in seconds.

Reload Interval#

Configures the interval for reloading the current URL in seconds.

❗ This property has no effect if Auto Reload is not enabled.

Styles#

Height#

A string defining the image height can be entered.

Examples#

  • 100% - the image will take 100% of the widget's height
  • 120 - the image height will be 120 px

ℹ️ For more possibilities for this prop, see height docs on MDN.

Width#

A string defining the image width can be entered.

Examples#

  • 100% - the image will take 100% of the widget's width
  • 120 - the image width will be 120 px

ℹ️ For more possibilities for this prop, see width docs on MDN.

Object Fit#

This property sets how the image will fit in it's container. Possible values contain, cover, fill, none and contain.

ℹ️ For a description of the possibilities for this prop, see object-fit docs on MDN.

Image Alignment#

This property sets how the image will be aligned in it's container.

Examples#

  • center - the image will be rendered in the center of the widget
  • left top - the image will be rendered in the left top corner of the widget

ℹ️ For a description of the possibilities for this prop, see object-position docs on MDN.

Border Color#

The border color of the widget. You can select between disabled, transparent or a color. If you click on the color string, a picker pops up with several options to select or enter the desired color.

❗ This property has no effect if you have configured Border Style to none or Border Width to 0.

Border Radius#

A string defining the border radius of the widget can be entered.

Examples#

  • 24 - will render the a radius of 24px on all 4 corners of the widget
  • 20% - will render the a radius of 20% on all 4 corners of the widget
  • 20px 40px 60px 80px - will render a radius of 20px on the top left corner, 40px on the top right corner, 60px on the bottom right corner and 80 px on the bottom left corner

ℹ️ For more possibilities for this prop, see border-radius docs on MDN.

Border Style#

A string defining the border styles of the widget can be entered.

Examples#

  • none - will render no border on all 4 edges of the widget
  • none dashed - will render no border on the top and the bottom edge of the widget, but a dashed border on the left and the right edge

ℹ️ For more possibilities for this prop, see border-style docs on MDN.

❗ This property has no effect if you have configured Border Color to transparent or disabled or Border Width to 0.

Border Width#

A string defining the border widths of the widget can be entered.

Examples#

  • 8 - will render a 8px wide border on all 4 edges of the widget
  • 8px 16px - will render a 8px wide border on the top and the bottom edge of the widget, but a 16px wide border on the left and the right edge

ℹ️ For more possibilities for this prop, see border-width docs on MDN.

❗ This property has no effect if you have configured Border Color to transparent or disabled or Border Style to none.

Opacity#

A number between 0 and 1 in steps of 0.01 defining the widget's opacity. 1 means no opacity, 0 full opacity.

Visibility#

The visibility of the widget. You can select between hidden and visibile.

Last update: June 16, 2020