Component Palette Icon:

On this page ...


The Coordinate Container makes a component's size and location relative to its parent's size and location.  Components can be fixed size, or optionally grow/shrink proportionally when the view is stretched. 

Coordinate Containers are ideal to use in cases where you need  components  to overlap each other, such as adding a component on top of another (z-axis) to act as an overlay. They're also useful in cases where you do  not  want  components  within to resize - for example, building a diagram where each element is a separate component. 

Components placed in coordinate containers can be rotated. The Rotate  property  has been moved to the Position Properties  section of the Perspective Property Editor. For more information, see Working with Perspective Components.

The following feature is new in Ignition version 8.1.2
Click here to check out the other new features

The Coordinate Container component has two pre-configured variants:

  • Fixed - Child layouts will be in fixed coordinate space.
  • Percent - Child layout will be stretched to different size containers.


Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Props
NameDescriptionProperty Type
mode

Whether child layouts should always be in fixed coordinate space, or stretched relative to different container sizes: fixed or percent.

Fixed mode uses absolute units, which reduces the amount of resizing of components within the container when launched across different display sizes. Percent mode uses relative units, which means child components will be able to resize appropriately when launched on different sized displays. 

value: string
aspectRatioOnly applied in percent mode. Optional dimensions, in x:y format to apply to maintain container aspect ratio for different sizes. Empty string (or non x:y input) will disable this mode.value: string
styleSets a style for this component. Full menu of  style options  is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a  style class . object

Child Component Position Properties

When a component is placed inside of a coordinate container, it will inherit the position properties listed below. 

Note that the values for x, y, width, and height will differ based on the mode of the coordinate container. 

  • fixed: Values represent absolute lengths. Example,  an x value of 100px means the left edge of the component starts 100 pixels from the left edge of the container.
  • percent: Values are in relative lengths. Example, say a component has an x value of 0.25. In this scenario, the left edge of the container would be 0, the right edge would be 1. So 0.25 would be 25% distance from the left edge of the container. 
PropertyDescriptionData Type
xSpecifies the horizontal positioning of the component in pixels.value: numeric
ySpecifies the vertical positioning of the component in pixels.value: numeric
widthSpecifies the width of the component in pixels.value: numeric
heightSpecifies the height of the component in pixels.value: numeric
rotate

Setting that sets the anchor and angle of rotation for the component. 

PropertyDescriptionData Type
anchorThe point around which the rotation happens. Either as an {x:number, y:number} object where x and y represent percentages such that {x:0, y:0} represents the (0%, 0%) or top-left corner of the component, or as a valid CSS transform-origin string.value: string, or object
angleHow much to rotate the component. Valid values include numbers (as degrees), and valid CSS angle strings such as '45deg', '2rad', '0.5turn', etc.value: numeric or string
object


Component Events

Perspective Component Events
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.
The following feature is new in Ignition version 8.1.13
Click here to check out the other new features

This event will trigger when a pipe in this container is clicked.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the  event  object, which is passed to the script action as a parameter.

  • Object Path

event.event

  • Type

Dictionary

  • Description

The event object generated from the mouse click.

  • Object Path

event.pipeIndex

  • Type

Integer or float

  • Description

The array index of the pipe within props.pipes that was clicked.

  • Object Path

event.pipeName

  • Type

String

  • Description

The name of the pipe that was clicked.


Scripting Functions

  • Description

Returns an ArrayList, which contains references to all components inside of the container.

  • Parameters

none

  • Return

Array List - An ArrayList of components in the container. The resulting ArrayList can be iterated over via a for-loop.


Example

In this example, we have a Coordinate container with a Cylindrical Tank component and a Slider component. We've set the container property to percent so that the components will grow and shrink with the container size.

Container properties:

Property

Value

props.mode

percent

Cylindrical Tank properties:

Property

Value

position.x

0.05
position.y0
position.width0.9
position.height0.9

Slider properties:

Property

Value

position.x

0.05
position.y0.9
position.width0.9
position.height0.09


  • No labels