Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


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 USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Employees

Sign In

Skip to end of metadata
Go to start of metadata

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

General

Component Palette Icon:




Description

The View Canvas component can display multiple Perspective views, each positioned on a coordinate based system. The component offers smooth transition animations when views are relocated.  Familiarity with CSS is helpful in taking full advantage of the this component.

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.

NameDescriptionProperty Type
instances

Array of views to display in the canvas.

 Click here to see the instances properties
NameDescriptionProperty Type
positionMode that defines how the element is positioned within the canvas. For position absolute, the view is placed within the canvas based on its top, left, bottom, right positions. Views that are positioned absolute do not participate in the flow of the document. For position relative, the view is placed within the canvas placed in the normal document flow and then offset by its top, left values. This is the same with left and right.Options are relative or absolute. Default is absolute.value: string dropdown
topThe top position of the view.value: numeric
leftThe left position of the view.value: numeric
bottomThe bottom position of the view. Note: If both top and bottom are set, bottom is respected only if position is set to absolute and height is unspecified.value: numeric
rightThe right position of the view. Note: If both left and right are set, left is respected only if position is set to absolute and height is unspecified.value: numeric
zIndexThe z-order position of the view.value: numeric
widthThe width of the view.value: numeric
heightThe height of the view.value: numeric
viewPathPath to the view you want to display.value: string dropdown
viewParamsThe parameters of the view.object
styleSets a style for this view. Full menu of style options is available. You can also specify a style class.object


array
transitionSettings

Transition settings on each view. The properties affected by transition settings are top, left, bottom, right, and zIndex.

 Click here to see the transitionSettings properties
NameDescriptionProperty Type
durationDuration of the transition. Units are seconds or milliseconds.
value: numeric
timingFunctionMathematical function that defines how fast one-dimensional values change during the transition. The transition can be described as a cubic-bezier or steps function. The presets for cubic-bezier functions are linear, ease, ease-in, ease-in-out, ease-out. The presets for steps functions are step-start and step-end.value: string
value: numeric
enableTransitionsDetermines whether transitions should play when transitions are defined.value: boolean
defaultStyleSets a style for all views. Full menu of style options is available. You can also specify a style class.object
styleSets a style for the canvas. Full menu of style options is available. You can also specify a style class.object

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.

Component Events
 onInstanceClicked

Event is fired when a view instance is clicked.

 event.index
  • Object Path

event.index

  • Type

Number

  • Description

The index of the view instance.

 event.params
  • Object Path

event.params

  • Type

Dictionary

  • Description

The position of the view instance in relation to the canvas.


 event.path
  • Object Path

event.path

  • Type

String

  • Description

The path of the view instance.

 event.position
  • Object Path

event.position

  • Type

JSON Object

  • Description

A JSON Object representing the current position values.

 event.position.top
  • Object Path

event.position.top

  • Type

Number

  • Description

The top position of the view instance.


 event.position.left
  • Object Path

event.position.left

  • Type

Number

  • Description

The left position of the view instance.


 event.position.bottom
  • Object Path

event.position.bottom

  • Type

Number

  • Description

The bottom position of the view instance.


 event.position.right
  • Object Path

event.position.right

  • Type

Number

  • Description

The right position of the view instance.


 event.size
  • Object Path

event.size

  • Type

JSON Object

  • Description

A JSON Object representing the current size.



 event.size.width
  • Object Path

event.size.width

  • Type

Number

  • Description

The width of the view instance.

 event.size.height
  • Object Path

event.size.height

  • Type

Number

  • Description

The height of the view instance.


  • No labels