Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


Coordinate container creates a traditional yet simple type of layout to use in Perspective. Each element (i.e., component or nested container) inside the layout has the familiar x, y, width, and height Position properties for each component. The way these properties work depends on the mode property of the layout, specified on the Coordinate container.

Position Properties

The position properties are always named the same, but have two different modes that drive how they work: Fixed and Percent. These two modes change how the width and height values work in respect to the view size.

  • Fixed mode - The width and height are a fixed number of pixels. The component will not stretch or shrink as the view size changes.
    • X and Y specify the offset, in pixels, of the top left corner of the element, relative to the top left corner of the coordinate container. A component flush with the top and left sides of its parent will have coordinates x = 0, y = 0.
    • width and height specify the size of the element in pixels.
  • Percent mode - The width and height are a variable percentage of the width and height of the view. The component will stretch or shrink as the view size changes.
    • X and Y specify the offset of the top left corner as a ratio of the width and height of the coordinate container. For example, x=0.1, y=0.1 will set the top left corner of the element at 10% across, 10% down.
    • width and height specify the width and height as a ratio of the width and height of the coordinate container.

To change the Mode property, select the Root object under the View in the Project Browser. The Mode property is the first in the list.

On this page ...

IULocgo


Coordinate Container

The position properties control the location of a component on the view and the width and height of the component. The rotate property sets the angle of rotation for a component and the point (anchor) around which it should be rotated. For more information on rotating components, see Working with Perspective components.

Mode: Fixed
Position PropertyDescriptionData Type
xSpecifies the horizontal positioning of a component in pixels.value: numeric
ySpecifies the vertical positioning of a component in pixels.value: numeric
widthSpecifies the width of a component in pixels.value: numeric
heightSpecifies the height of a component in pixels.value: numeric

rotate

Settings that set the anchor and angle of rotation.

Position 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 of numbers
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

Mode: Percent
Position PropertyDescriptionData Type
xSpecifies the horizontal positioning of a component in pixels.value: numeric
ySpecifies the vertical positioning of a component in pixels.value: numeric
widthSpecifies the width of a component as a percent from 0 to 1 where 1.0 means 100% of the view width.value: numeric
heightSpecifies the width of a component as percent from 0 to 1 where 1.0 means 100% of the view height.value: numeric

rotate

Settings that set the anchor and angle of rotation.




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 of numbers
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


Root Properties

Root properties are accessed by selecting the root folder for a Perspective View on the Project Browser tree.


Root PropertyDescriptionData Type
modeWhether child layouts should always be in fixed coordinate space, or should stretch relative to different container sizes. Options are fixed or percent.value: string
aspectRatioOnly applies in percent mode. Optional dimension, 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 view. 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


Configuring a Coordinate Layout

Fixed Mode (No Stretching)

The default behavior of all new Coordinate Layouts is Fixed mode (no stretching). In the Fixed mode components are given x, y, width, and height values in pixels and will strictly stick to those. This mode will not adjust its size or shape regardless of screen size. If you want to plan out your views to the pixel, coordinate layouts serve this purpose well. If you plan to launch your Perspective Sessions on a variety of different screen sizes, the Coordinate Layout is not very flexible. 

  1. Let's create a new view using the Coordinate layout with a Page URL. 

  2. Drag a component into your view. In this example, we used the Icon component. You'll notice the Coordinate container's mode property defaults to fixed. Place your components and sub-containers however you see fit. Use the edge handles of the component or position properties to change the width and height. 



  3. Let's open a Perspective Session by clicking on the Page Configuration  icon. Right click on your Page URL for your Coordinate View to launch a Perspective Session. 



  4. A Perspective Session will never move, stretch, or shrink the components on the screen. 



  5. If you resize the session to make the screen narrower, you'll notice that the components will not resize, and you'll get scroll bars at the bottom of the screen.

     


Percent Mode (Simple Stretching)

The Percent mode on coordinate layouts provides a simple and intuitive scaling option for screens of different sizes. As a special case, you'll often want to make a component or container fill its parent container entirely, regardless of the final dimensions of the parent. A Coordinate Layout is one way to accomplish this:

  1. If working in a Coordinate View, select the view's root container, otherwise select the Coordinate Container component. 
  2. In the Perspective Property Editor, set the container's mode property to percent.



  3. From the Component Palette, drag a new component to the top left corner of the parent of your Designer workspace. For this example, we used a Table component.
  4. Set the the x and position properties to 0.
  5. Set the width and height properties to 1. 



  6. Percent mode allows your components to resize and completely fill the space as you can see in this Perspective Session. 



Using the Coordinate Container as a Component

The Coordinate container also works well as a separate component. You can use it as a small container to hold components that you don't want to move around, and place it inside a more responsive container such as a Flex container or Column container. This works extremely well if you are looking for a more responsive design for your project. 



  • No labels