Edit shapes

Create shapes

Navigate to the desired shape group in the left sidebar and then click Add at the top in the action bar and then Add Shape. Enter the name of the new shape in the following dialog. If your shape will only contain a single data point, check the option Single Data Point Shape. For more information about this option, see Object Types in the Shape Library. If the menu items are disabled, please select a shape group first.

Warning

Please note that modifying the shape library will clear the change history of all schematics in your client account. This means that you will no longer be able to revert changes that were made on the schematics prior to the modifications in the shape library.

Edit shape groups

If you select a shape group in the left sidebar, you can edit the following settings of that group:

Name

The name of the shape group as it appears in the shape library. Use the Edit Translations button to change the name in multiple languages.

Deprecated

Marks a shape group as deprecated or obsolete. This is to inform users that the shapes in this shape group are no longer to be used in production systems and will be removed from the shape library in the future. Deprecated shape groups and shapes therein are displayed as strikethrough in the shape library sidebar.

Edit shape

If you select a shape in the left sidebar, the visual appearance and behavior of the shape can be configured on the right side of the screen.

General properties

Name

The name of the shape as it appears in the shape library. Use the Edit Translations button to change the name in multiple languages.

Deprecated

Marks a shape as deprecated or obsolete. This is to inform users that the shape is no longer to be used in production systems and will be removed from the shape library in the future. Deprecated shapes are displayed as strikethrough in the shape library sidebar.

Show Status Icons

Status icons relating to manual intervention and alarm status are automatically displayed to the right of the shape on the schematic. If you prefer to replace these default symbols with your own visualizations, you can deactivate this option and configure SVG code and behavior rules yourself instead (see Visualize manual mode and alarm status of linked schematics).

Open Faceplate on Click

By default, the faceplate will be displayed when the user clicks on the shape on the schematic, where individual data points are displayed and can be edited by the user. You can disable the faceplate by unchecking this option. This is useful for purely decorative shapes that are not supposed to display any information or offer any interactions, but it can also be used for more complex shapes where only certain areas of the shape should write a specific value to the data point without showing a faceplate, such as buttons, sliders or room automation shapes.

Note that the faceplate will not be displayed if the entire shape is covered by an element that has an “On click”, “On press” or “On slide” action, regardless of this option.

Schematic Usage

Displays a list of all the schematic widgets on which the corresponding shape has been placed. Click on an entry in the list to jump directly to the corresponding schematic.

Shape preview and simulator

A preview of the shape is displayed on the left-hand side of the shape settings. By default, it will show the SVG code as defined on the Code tab. If you click on Start Simulator or enter a test value in the grid below, the test values will be applied to the shape according to the behavior rules.

The preview also offers some handy view options to test your shape:

Show View Box	Shows the view box of the shape, i.e. the position and dimension of the SVG viewport.
Show Connection Stubs	Shows the connection stubs, i.e. small triangles that indicate the position and orientation of places from where connections can be drawn. See Shape connection stubs.
Rotate	Rotates the preview by 90° increments. This rotation only affects the preview, not the actual shape.

Edit the SVG code of a shape

Above the shape settings, to the right, click on Code to display the SVG source code of the shape. To edit the visualization of the shape, you can edit the SVG code directly in the text field or copy and paste it from third-party applications such as Adobe Illustrator, Affinity or Inkscape.

Note

This manual assumes a basic knowledge of SVG. A short introduction can be found under SVG reference.

In order to animate certain elements using behavior rules in dependance of measurements or properties or the current data point, they must first be uniquely marked. You do this by assigning a unique ID to the corresponding elements in the SVG code:

<path id="Background" fill="#ED145B" d="M10,0L20,20H0L10,0z" />
<path id="OperationState" fill="#FFFFFF" d="M10,5L15,15H5L10,5z" />

Warning

The IDs LinkedAlarmStatus, LinkedManualMode and ShapeLabel are reserved IDs with a special meaning. You can read more about this in the section Visualize manual mode and alarm status of linked schematics and Automatically display shape label in shape.

Edit the behavior rules of a shape

How to animate shapes with behavior rules is described in the chapter Shape behavior.

Visualize manual mode and alarm status of linked schematics

For linked shapes, the states Manual Mode and Alarm of the link target can also be visualized. The link target is usually another schematic or a group.

First switch to the code view of the shape and create the desired visualization (for example, a path or group of elements). Give the element or group one of the following ID attributes so that it is only displayed when the corresponding state occurs:

LinkedManualMode

The element is displayed if one of the data points placed in the shape is set to Manual Mode.

LinkedAlarmStatus

The element is displayed if one of the data points placed in the shape is set to Alarm.

Examples

<path id="LinkedAlarmStatus" fill="#ED145B" d="M10,0L20,20H0L10,0z" />
<g id="LinkedManualMode">
  <circle fill="#CCCCCC" cx="10" cy="10" r="10" />
  <circle fill="#FFFFFF" cx="10" cy="10" r="5" />
</g>

Warning

Use each of these special IDs no more than once per shape.

Automatically display shape label in shape

Set the id attribute on a <text> element in the SVG source code to ShapeLabel so that the text is automatically set to the label of the corresponding shape when the shape is placed on a schematic.

You can set the Label of a shape individually for each shape placed on the schematic using the Properties sidebar.

Example

<text id="ShapeLabel" x="50" y="10" fill="black" text-anchor="middle" />

The same shape with two different labels, which can be set in the Properties sidebar of each shape individually.

Warning

Use this special ID only once per shape.

Shape connection stubs

In order for a shape to be connectable to other shapes on the schematic, you must define so-called connection stubs in your shape. Each connection stub has a position and a direction and can be connected to any number of shapes on the schematic.

The connection stubs must be declared inside the <defs> block, which must be defined as the first element within the <svg> block.

<svg version="1.1" id="AvelonVentilationCrossFlow"  xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
  <stub direction="left" x="0" y="50"></stub>
  <stub direction="right" x="100" y="50"></stub>
  <stub direction="up" x="50" y="0"></stub>
  <stub direction="down" x="50" y="100"></stub>
</defs>
<!-- Graphic elements -->
</svg>

In order to display the stubs in the shape preview on the left, click on Show Connection Stubs in the preview area.

Warning

Note that the order of the <stub> elements is critical. If you have placed a shape on a schematic and connected it to other shapes and then remove, rearrange or add additional <stub> elements, this can have unforeseen effects on existing connections. Therefore please be certain to check all previously placed shapes and their connections after a change.

Context-aware colors

By default, colors defined in the shape’s SVG code are fixed. As long as all elements of a shape are placed on an element with a solid fill, this is okay for most use cases. However, if elements such as texts or thin lines are not placed on elements with a solid fill, they might not look as expected if the user places the shape on a schematic with a dark background color, or if the user has dark mode enabled.

To fix issues like these, you can add one of the following CSS classes to your elements to have them change color depending on their context.

theme-fill	Automatically sets the fill color of the element to the current theme color.
theme-stroke	Automatically sets the stroke color of the element to the current theme color.
contrast-fill	Automatically sets the fill color of the element to the appropriate contextual contrast color.
contrast-stroke	Automatically sets the stroke color of the element to the appropriate contextual contrast color.

Note: theme-fill and theme-stroke reflect the current theme color (dark or light). If the background of the schematic is set to a fixed color, however, they will adapt accordingly, appearing dark on dark backgrounds and light on light backgrounds. contrast-fill and contrast-stroke will take on a contrast color, appearing light on dark background and dark on light backgrounds, respectively.

Example

<text x="0" y="0" class="contrast-fill">Context-aware text</text>
<line x1="0" y1="0" x2="100" y2="100" class="contrast-stroke" stroke-width="1"/>
<rect x="0" y="0" width="100" height="100" class="theme-fill contrast-stroke" stroke-width="1"/>

Do not add an explicit fill attribute when using theme-fill or contrast-fill, nor an explicit stroke when using theme-stroke or contrast-stroke, as these might conflict with the context-aware colors.

Fixed elements

If you want to add elements to your shape that are not affected by the rotation of the shape on the schematic, you can add the attribute fixed="true" to the corresponding elements in the SVG code.

Example

<rect x="0" y="0" width="100" height="100" fill="none" class="contrast-stroke"/>
<path d="m 100 100 h -100 l 50 -50 z" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
<rect x="40" y="15" width="20" height="20" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
<text x="50" y="29" text-anchor="middle" class="contrast-fill" fixed="true">ΔT</text>

If you want multiple elements to be fixed, you can also group them together in a <g> element and add the attribute to the group.

<rect x="0" y="0" width="100" height="100" fill="none" class="contrast-stroke"/>
<path d="m 100 100 h -100 l 50 -50 z" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
<g fixed="true">
  <rect x="40" y="15" width="20" height="20" class="contrast-fill contrast-stroke" fill-opacity="0.1"/>
  <text x="50" y="29" text-anchor="middle" class="contrast-fill">ΔT</text>
</g>

Note how the text inside the small rectangle remains the right way up, even when the shape is rotated.