Share

Creating and Managing Frontplates

Use frontplates (formerly known as overlays) to create car variants, to specify the product life cycle state, or to add watermarks, trademarks, or legal information. For meetings, overlay images, such as your company logo, and text, like dates, for presentations.

learnMore icon For reference information, check out:

How to Create a Frontplate

  1. In the Menu Bar, select Scene > Sceneplate Editor.

  2. Right-click in the left side of the Sceneplate Editor and select Create Frontplate.

  3. Under Properties, in the Name field, enter a name for the frontplate and for Content Type, select whether it will be text, web, or an image.

    • For a text frontplate, enter the text you want and properties, such as font, color, and transparency.
    • For an image frontplate, click the folder icon and select the image you want; if at any point the image is updated, click Restore Restore to load the latest version.

  4. Under Size and Position, adjust any necessary values.

    For absolute scale, pixels are used. For relative scale, percentage is used.

How to Create an Overlay Circular Menu

A circular menu sceneplate asset is already supplied for you and can be found in the VREDAssets installer. Just drag the asset into the scene.

However, to understand how it was created, follow these steps to load the circular menu UI on a frontplate using the Sceneplate Editor:

  1. In the Menu Bar, select Scene > Sceneplate Editor to open the editor.

  2. In the Sceneplate Editor, select Create > Create Frontplate to create a frontplate.

    Sceneplate Editor circular menu settings

  3. In the Properties section to the right, set Content Type to Web.

  4. Adjust the Width and Height to the render window size. This ensures the UI will fit into the render window.

    Note:

    Each time the render window is resized, repeat step 4.

  5. Set Click Through to 0.01 to ensure the circular menu uses transparency backgrounds; otherwise, the UI will not be responsive to user interactions.

  6. Set the URL to the HTML file containing the circular menu. An example file can be found at:

    C:\ProgramData\Autodesk\VREDPro-<internalVersion>\examples\webengine-circular-menu-genesis\index

    Note:

    It is important that all assets, like the icons, the stylesheet, and appropriated JavaScript file, are in the same folder or found at the same URL.

  7. In the Size and Position section, set the Size Mode to Relative and Size to 1.00 for the correct scaling.

    Circular menu

Configuring the Menu

With the circular menu created, now it's time to configure it. Its configurations are stored in a JSON object inside a script tag in the HTML file. The configuration starts with a root property called menu. Use any of the content from the Menu Properties and Item Properties tables.

Name Type Description
animationDuration number The duration in milliseconds an item is shown as active that plays an animation.
buttonSizeMultiplicator number A multiplicator that specifies the button size in relation to the icon size.
colorIconActive string Relative path to an icon that will be displayed for active items with a color property.
iconPath string Relative path to the item icons.
iconSizes array[number] An array that contains the icon size in pixel of each item level.
imagePath string Relative path to still frame images.
items array[object] The detailed description of all item properties can be found below.
position number The position of the menu. Possible values are: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left, center.
sizes number The diameter of each menu level in pixel.
type string Should be always circular.

Item Properties

Name Type Description
animation string Name of an animation that will be played on click.
animationDuration number The duration in milliseconds this item is shown as active when it plays an animation. This will overwrite the menu wide animation duration value.
children array[item] An array of nested items that will be displayed in the next menu level if that item is selected.
classNames array[string] An array of css class names that will be applied to an item for advanced customization.
color string An RGB color hex code that will be used to colorize the icon. This is useful for items that switches a variant for a color or car paint.
icon string Path to an icon file that is relative to the icon path.
image string Path to an image file that is relative to the image path. If specified it will set a background image on click.
isActive boolean If set to true the item will be marked as active and each assigned command property like variant, viewpoint or animation will be set when the menu is loaded.
name string A name that is descriptive, but not required.
type string A type of toggle should only be specified for the first item. The behavior of all other items is defined through the properties of an item.
variant string Name of a variant that will be set on click.
viewpoint string Name of a viewpoint the camera will jump to on click.

Example

The circular menu example is preconfigured for the demo scene Automotive_Genesis.vpb.

How to Create a Frontplate Switch

  1. Right-click in the left side of the Sceneplate Editor and select Create Switch.

  2. Drag and drop frontplates from the list onto the switch.

  3. Select which frontplate in the switch should be displayed by adding a check.

    Note:

    When a child of a switch is checked, making it visible, the others are automatically unchecked and hidden.

How to Manage Frontplates in the Sceneplate Editor

To duplicate a selection of frontplates, right-click the selection and do either of the following:

  • Right-click in the left side and select Edit > Duplicate.
  • Click Duplicate icon (the Duplicate icon) at the bottom of the editor.

To make changes after this, do any of the following:

  • To change the order in which frontplates appear in the scene, drag and drop them within the list to rearrange them.
  • To group a selection of frontplates together, right-click the selection and select Create Group.
  • To show or hide frontplates, check or uncheck them in the Sceneplate Editor list.
Parent page: Sceneplates

Was this information helpful?