Description
NOTE: As of Composer Version 7.5.4, Circular Panel is no longer available for selection in the Collections Panel. It can still be used in existing experiences, but Intuiface will no longer deliver updates or bug fixes for this collection.
NOTE: The Circular Panel collection is only supported in Composer and Player for Windows. It cannot be used in Player on any other supported platform.
The Circular Panel collection presents your content in a circular layout. It is a curved collection with a beginning and an end beyond which collection items can extend. Think of it as a rounded Asset Grid collection of just one row.
Like most collections, the Circular Panel collection can include any asset type, including buttons and even other collections (another Circular Panel collection for example).
Buttons in a Circular Panel collection can be used to trigger any action, including navigation to other scenes.
For example, you can use the Circular Panel collection as a circular menu displayed directly beneath a tangible object placed on display.
When assets or collections are added into the Circular Panel collection, they can be visually represented in one of two different ways:
- Fit: adjust content size so it fits entirely within the portion of the Circular Panel assigned to this item.
- Fill: adjust content size so the entire portion of the Circular Panel assigned to this item is filled. Clipping is applied to the content.
In the following picture, the items in the Circular Panel on the left side have the Fit container, whereas the ones on the right side have a Fill contaier.
Properties, Triggers & Actions
Properties
See common collection properties for details of common properties shared by different all collection types
- Style: provides the list of currently available collection styles. Select another collection style to display your assets in a different way.
Appearance
Collection appearance
- Starting point: distance, in degrees, separating the beginning of the circular collection from vertical
- Collection size: distance, in degrees, covered by the circular collection
- Midpoint: distance, in degrees, from the Starting Point to a point halfway through the collection. This property is automatically calculated using the "Starting point" and "Collection size" values. Useful, for example, as an input value when spawning a new Circular Panel collection around an existing collection.
- Inner radius: distance from the center point of the collection (if imagined as a complete circle) to its inner edge.
- Show curtain shadow: toggle whether or not a graphic effect should be displayed on either edge of the collection to indicate that unseen content can be scrolled into view
- Fill color: color used to fill the background of the circular panel. Set its opacity to 0% if you don't want any background
- Outline color -> color of the stroke of the background shape. Set its opacity to 0% if you don't want any outline
- Display loading images: shows the loading indicator set by the experience property
Item appearance
- Item angle: distance, in degrees, covered by each item in the collection
- Item spacing: distance, in degrees, of the scene separating each item in the collection
- Item Fill Color: color displayed behind the content for each item
- Show icons: displays "asset type" identification icons on the assets in the collection
Behavior
Collection Behavior
- Scroll by: defines the number of items scrolled when the collection is rotated by
- Initial scroll effect: reminds users that the collection is scrollable each time the scene is displayed
- Soft move speed: defines how quickly rotation caused by a swipe will come to a halt. The higher the number, the longer it will take a spun Circular Panel to stop spinning - i.e. the "softer" it will slow down.
- Elasticity: level of elasticity when repositioning the items
Item behavior
- Allow interaction with item: toggle whether or not an item can be interacted with. For example, if this property is turned on, touching a video in a collection can cause the video to play.
- Show usage animation: toggles whether or not to display a graphic illustrating how to interact with this collection.
- Display items as thumbnails: toggle whether or not the actual content - images, videos, etc. should be replaced by thumbnail. Using thumbnails can improve performance if the content is very large.
- Tap item to open: toggle whether or not a touch on an item will cause a copy of that item to open outside of its parent collection.
- Drag and drop item to open: toggle whether or not a drag-and-drop action on an item will cause a copy of that item to open outside of its parent collection.
- Resize ratio for opened item identify the size multiple of an opened item in comparison to its size while inside the collection. A ratio of 1 means don't change the size, a ratio of 2 means double the size, a ratio of 0.5 means reduce the size in half, and so on.
Autoscroll is discussed in the article about common collection properties.
Triggers
See Triggers Overview to get details of common triggers shared by all assets or collections
- Scrolled: raised when the Circular Panel is scrolled
- Moved backward: raised when the Circular Panel is scrolled backward
- Moved forward: raised when the Circular Panel is scrolled forward
- First item is reached: Raised when the first item has been reached.
- Last item is reached: Raised when the last item has been reached.
- Autoscroll
- Autoscrolling is paused: Raised if autoscrolling is paused due to a user action
- Autoscroll is activated: Raised if autoscrolling has started
- Autoscroll is deactivated: Raised if autoscrolling has been stopped
- Is autoscrolled: Raised if the collection has autoscrolled
5
Actions
See Actions Overview to get details of common actions shared by all assets or collections
- Backward: Scroll backward by one item
- Close all opened collection items: Close all opened collection items.
- Forward: Scroll forward by one item
- Open item: Open a copy of the item outside its collection.
- Index: The index of the item to open.
- X: The X position to open the item at.
- Y: The Y position to open the item at.
- Orientation: The orientation to open the item with.
- Scroll to an index: Scroll to display the indicated index
- Index: the index to scroll to.
- Scroll to an item: Scroll to display the indicated item
- Item name: the name of the item to scroll to.
- Autoscroll
- Start autoscroll: Start autoscroll for this collection if it isn't already running
- Stop autoscroll: Stop autoscroll for this collection if it hasn't already stopped
- Toggle autoscroll: Start autoscroll if it's stopped, stop it if it's running
Comments
0 comments
Article is closed for comments.