Shapes widget
  • 04 Nov 2024
  • 2 Minutes to read

Shapes widget


Article summary

With this widget, you can create different shapes and display them on a screen. You can configure all elements individually.

System requirements

This widget requires IXM Platform version 11.0 or later.

Configure the spot

In the HTML Wizard, you can see all configurable spot elements in the tree structure of the spot. Changes are immediately visible in the spot preview.

You can also include HTML Wizard spots as widgets in the HTML Composer, or configure them in the Composer to use them independently.

Configure the following elements of the spot as desired:

Element

Description

Spot

Spot duration

Specify the duration of the spot in the format: hh:mm:ss

The spot is reloaded at the end of the duration.

If you enter 00:00:00, the spot plays continuously.

Background

Select to set a background color of the spot.

Click in the color selection box to select a color.

Shape

Select one of the following shapes: 

  • Rectangle

  • Star

  • Polygon

  • Circle

  • Arrow

  • Line

  • By coordinates

Padding

Specify the padding between the shape and the border of the canvas in pixels.

Fill color

Select a fill color for the shape.

Line color

Select a line color for the shape.

Line on top

Select to display the line in the foreground.

Line width

Specify the width of the line in pixels.

Rectangle

Corner radius

Specify the roundness of the corners.

0 means square and 100 means round.

Star 

Number of points

Specify how many points the star has.

Point length %

Specify the point length in percent relative to the radius of the star.

Corner radius

Specify the roundness of the corners.

0 means square and 100 means round.

Polygon

Number of corners

Specify how many corners the polygon has.

Corner radius

Specify the roundness of the corners.

0 means square and 100 means round.

Circle

Partial circle

Add one or more circle sectors to the circle.

Fill color

Select a fill color for the partial circle.

From (Degree)

Specify the position of the partial circle’s first radius.

0 degrees means horizontally to the right of the center. 

To (Degree)

Specify the position of the partial circle’s second radius.

0 degrees means horizontally to the right of the center.

Line color

Select a line color for the partial circle. 

Line on top

Select to display the line in the foreground.

Line width

Specify the width of the line in pixels.

X offset

Specify the partial circle’s offset on the x-axis (horizontally) from the center of the circle in pixels.

Y offset

Specify the partial circle’s offset on the y-axis (vertically) from the center of the circle in pixels.

Shadow | Line shadow

Shadow color

Select color and opacity of the shadow.

Blur

Specify how blurred the shadow is in pixels.

X offset

Specify the shadow’s offset on the x-axis (horizontally) in pixels.

Y offset

Specify the shadow’s offset on the y-axis (vertically) in pixels.

Arrow

Head length (%)

Specify the length of the arrowhead in relation to the arrow length in percent.

Head sweep (px)

Specify the sweep of the arrowhead in pixels.

Shaft width (%)

Specify the shaft width in relation to the total width of the arrow in percent.

Corner radius

Specify the roundness of the corners.

0 means square and 100 means round.

Line

Width

Specify the line width in pixels.

Corner radius

Specify the roundness of the corners.

0 means square and 100 means round.

By coordinates

Point

Create a custom shape by adding points to the canvas.

You can add as many points as you want.

X offset

Specify the X offset of the point on the canvas.

Y offset

Specify the Y offset of the point on the canvas.

Corner radius

Specify the roundness of the corners.

0 means square and 100 means round.


Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.