- 04 Nov 2024
- 2 Minutes to read
- Print
Shapes widget
- Updated on 04 Nov 2024
- 2 Minutes to read
- Print
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:
|
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. |