Circular Panel

Table of Contents

    Description

    NOTE: Circular Panel collection is supported only on Windows devices.

    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 tagged object placed on display with visual tag sensors. (For more about visual tags, visit this page.)

    DonutSeul.png

    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.

    circularContainer.jpg

    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.

    donut_containers.jpg

    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

    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

    Circular-panel.png

    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.

    Circular-behavior.jpg

    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
    • Last item is reached: Raised when the last item has been reached.

    Circular-triggers.jpg

    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.

    CircularActions.jpg