Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:



IULocgo


Coordinate Container

Description

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. See also Coordinate Containers.

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 place on 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.

This 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
modeWhether child layouts should always be in fixed coordinate space, or stretched relative to different container sizes: fixed or percent.value: string dropdown
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
Scripting Functions
 .getChildren()
  • 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

For more information and examples for Coordinate Containers, refer to Coordinate Containers.



  • No labels