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.

Edit shape

In the middle of the screen, the currently selected shape is displayed graphically as it will ultimately look on the schematic. Several general settings for the shape are available to the right:

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.
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).
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 Designer 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.

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 name in shape

Give a <text> element in the shape source code the ID ShapeLabel so that it is automatically filled with the shape name (label) of the corresponding shape.

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" />

../../_images/shape-label.svg — The same shape with two different labels

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.