# \[Feedback\] Perspective View Canvas **URL:** \ **Category:** Ignition Early Access\ **Created:** [October 28, 2019, 10:21pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464 "2019-10-28T22:21:40Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [October 28, 2019, 10:21pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/1 "2019-10-28T22:21:40Z")
# Overview Starting with the 8.0.6 nightly from today, we've introduced a new Perspective component: the View Canvas. The View Canvas allows the user to embedded multiple views in a coordinate based canvas. Think of it as a coordinate-y version of the flex repeater. The View Canvas also allows for smooth transitioning of views through CSS transitions. Feel free to post comments, questions, suggestions here. # Properties - **instances** : `Array` - Array of view config objects - **position** : `relative | absolute` - Mode 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. - **top** : `string | number` - The top position of the view. - **left** : `string | number` - The left position of the view. - **bottom** : `string | number` - The 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. - **right** : `string | number` - The 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. - **zIndex** : `number | auto` - The z-order position of the view. - **width** : `string | number` - The width of the view. - **height** : `string | number` - The height of the view. - **viewPath** : `string` - The path of the view. - **viewParams** : `Object` - The parameters of the view. - **style** : `StyleObject` - The style of the view. - **transitionSettings** : `TransitionSettingProps` - Transition settings on each view. The properties affected by transition settings are top, left, bottom, right, and zIndex. - **duration** : `string` - Duration of the transition. Units are seconds or milliseconds. Example: 200ms - **delay** : `string` - Delay of the transition before it begins. Units are seconds or milliseconds. Example: 1s - **timingFunction** : `string` - A mathematical function that describes 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. - **enableTransitions** : `boolean` - Determine whether transitions should be enabled - **defaultStyle** : `StyleObject` - The default style that is applied to all views. This can be overridden on an instance basis. - **style** : `StyleObject` - The style of the canvas. # Events - **onInstanceClicked** - Event fired when a view instance is clicked - **index** : `number` - The index of the view instance. - **params** : `dictionary` - The current view parameters of the view instance. - **path** : `string` - The path of the view instance. - **position** : `dictionary` - The position of the view instance in relation to the canvas. - **top** : `number` - The top position of the view instance - **left** : `number` - The left position of the view instance - **bottom** : `number` - The bottom position of the view instance - **right** : `number` - The right position of the view instance - **size** : `dictionary` - The size of the view instance - **width** : `number` - The width of the view instance - **height** : `number` - The height of the view instance > **Example GIF** > > ![viewcanvas3](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5d6bfd2800eb693f34ee992b31e7dba6002f6f2f.gif) ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [October 28, 2019, 10:23pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/2 "2019-10-28T22:23:07Z")
---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [October 31, 2019, 2:24pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/3 "2019-10-31T14:24:02Z")
Can you provide some insight on how the “Example GIF” is coded? I created a simple canvas and added a couple (of the same) embedded views ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/ded9aa1fdebe738f8284c6345d10f4a42f712c07.png) I want to click the down arrow and have Task#1 slide up and out of canvas and Task#2 slides to the top. My First Try was to create a custom property ‘Position’ on the canvas and I bound the top property of each instance (for example canvas.intances[0].top) to the ‘Position’ property. If ‘Position’ = 0 then top of Task#1 would be 0 and top of Task #2 would be 60; and if ‘Position’ =1 top of Task#1 would be -60 and top of Task #2 would be 0. I added a script to each button to change the custom ‘Position’ property and the Tasks moved to the correct posiiton but there is no animation they just immediately jump to the calculated position. I also tried simply adding ```auto self.getSibling("ViewCanvas").props.instances[0].top=0 self.getSibling("ViewCanvas").props.instances[1].top=60 ``` as the script to the up arrow, and ```auto self.getSibling("ViewCanvas").props.instances[0].top=-60 self.getSibling("ViewCanvas").props.instances[1].top=0 ``` to the button arrow. But I got the same results. The Tasks just jump to position, no animaiton. What script is used in the GIF when the ‘Forward’ and ‘Back’ buttons are clicked? ---
**Author:** ![Paul.Scott](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul.scott/32/4578_2.png) [@Paul.Scott](https://forum.inductiveautomation.com/u/Paul.Scott)\ **Post date:** [October 31, 2019, 4:09pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/4 "2019-10-31T16:09:42Z")
What are your `transitionSettings` props (as well as `enableTransitions`) set to? The animation should be driven by the transition related properties on the component, not the script or a binding. Since the views are jumping to the new positions, it sounds like there is a configuration issue on some of the properties. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [October 31, 2019, 4:11pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/5 "2019-10-31T16:11:53Z")
I think they are the default ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/3afe1e8265241d2bbfde9e76f0f38db9138b43f9.png) If I type in a value in the property field the transition works but the click event doesn’t work. ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [October 31, 2019, 4:15pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/6 "2019-10-31T16:15:21Z")
Hi @dkylep, There currently is an issue with the view canvas where transitions aren’t playing if transitioning from and to 0. This is certainly not ideal, but try using a start/end position other than zero. I can keep you updated when this issue gets fixed. ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [October 31, 2019, 5:27pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/7 "2019-10-31T17:27:19Z")
Perfect (well almost 😀)! Thank you, just changing the value to 1 works. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/ecb687600e626a341d4944eb37d6e8708b21aa71.png) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [November 11, 2019, 2:11pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/8 "2019-11-11T14:11:02Z")
Just an FYI, I’m seeing some odd behavior on my mobile device (iOS with Safari, Chrome and Google browsers) My view canvas above has a black border around it just so I can see where the actual canvas is and it works great on the PC. In the mobile browser the canvas items are appearing outside the canvas in a static state. They appear initially when canvas is loaded but do not move. Looks like this when I initially load the page ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/86fdd43deb4e98645897c60e1e7ab954815ddc4c.png) Canvas behaves ok, all items show in canvas and scroll fine but the items that are outside canvas still show in place. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/ba5037419ad028be23708aa2f793efc23d00045e.png) ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [November 11, 2019, 4:54pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/9 "2019-11-11T16:54:41Z")
Hi @dkylep, Would you mind DM’ing me the view if you can? ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [November 11, 2019, 5:37pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/10 "2019-11-11T17:37:45Z")
I’m not really sure what “DM’ing me” means but I created a project with a view containing the View Canvas and uploaded it here. I confirmed the same behavior. Oddly enough though, if the canvas is close to the left edge of the view it seems fine. If it’s moved 200-300px away from edge it starts showing the embedded views outside the canvas. Project : [CanvasBackup.zip](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a2dd46d9cca0d5c050a7b0c2cef570049bc856b0.zip) (12.6 KB) ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [November 11, 2019, 5:56pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/11 "2019-11-11T17:56:28Z")
Hi @dkylep, Thanks for the upload. I’ll check out the project and let you know what I find. P.S. DM means to direct message 🙂 ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [November 11, 2019, 7:15pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/12 "2019-11-11T19:15:40Z")
@dkylep I’ve been able to reproduce the bug. I’ll file a ticket and keep you up to date when it gets fixed. ---
**Author:** ![ayu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ayu/32/16635_2.png) [@ayu](https://forum.inductiveautomation.com/u/ayu)\ **Post date:** [December 4, 2019, 9:29pm UTC](https://forum.inductiveautomation.com/t/feedback-perspective-view-canvas/29464/13 "2019-12-04T21:29:00Z")
Hi @dkylep, Both the 0 transition and mobile device issue have been fixed. They should be included in the most recent nightly build.