Skip to main content

The Skin Editor

In Pano2VR, you can create or add a skin to your HTML5 and Flash outputs.

A skin, as a whole, is a graphical element (interface) that is layered over the panorama and can include images, buttons and sounds. For example, a controller skin includes graphical elements (buttons) that allow you to control the panorama.

Skin Editor's Interface

The Skin Editor has 4 main sections: the Tree, the Editor, Properties and the Toolbar.

Introduction to the Skin Editor

The Basic Workflow

  1. Open the Skin Editor using any of the following methods:

    • Go to ToolsSkin Editor in the Menubar.

    • Click the Skin Editor button in the Toolbar.

    • Click the Skin Editor button in the HTML5 or Flash output panel. Above this button, you can choose from a selection of built-in skins.

  2. Customize the layout of the canvas in the Properties section:

    • Make sure no elements are selected. In the Properties section, Canvas panel, choose the size of the canvas and change the grid size.

    • Zoom in to the canvas using the Zoom control in the Toolbar.

  3. Add elements to the skin. These can be buttons, images, SWFs, SVGs, sounds, videos or external elements.

    • Go to the Toolbar and select any element, then click in the Canvas to add.

    • Go to the Menubar and choose, Elements. Select an element and then click in the Canvas to add.

    • Drag the elements on to the canvas.

  4. Arrange the elements.

    • Select an element either in the Tree or in the Canvas and drag to place.

    • Use a Container to group elements.

    • Right-click elements in the Tree to cut, copy, paste, lock, align, distribute or create a component from them.

  5. Apply actions to elements for user interactivity and control.

    Select any element and go to the Actions panel in the Properties section. Double-click the empty table row or click the green plus icon.

    For example, to make a button rotate/pan left, choose Mouse Click as the Source, and Pan Left as the Action.

✭ Tip: To quickly export a project to test the skin, go to the Tools menu and choose, Generate Output. This is only available when the skin is opened via the Output panel.

Understanding Skins

Learn how a skin works and then learn how to customize the built-in skins for your needs.

Built-in Skins

Pano2VR ships with fully functioning skins that you are free to use for your projects. You will find these skins in the Skin menu of the HTML5 and Flash output settings.

Silhouette

silhouette.ggsk

This is our latest skin design for version 5. It features the following:

  • Works with HTML5 outputs
  • Node preview image (pro only)
  • Hotspot, Web and Image Popup icons
  • Loading bar
  • User Data info box
  • Popup Image
    Add a point hotspots and set its Type to Image. Select the image to pop up.
  • Controller with the following buttons:
    • Zoom in and Zoom out
    • Autorotate
    • Information
    • Move Mode
    • Fullscreen

Simplex

simplex.ggsk

  • Works with both HTML5 and Flash outputs
  • Node Marker and icon
  • Hotspot template and icon
  • Loading bar
  • User Data info box
  • Controller with the following buttons:
    • Pan Left/Right
    • Tilt Up/Down
    • Zoom in and Zoom out
    • Autorotate
    • Information
    • Move Mode
    • Fullscreen

Simplex V5

simplex_v5.ggsk

Simplex V5 is the same design as Simplex Skin, but has been updated with the same features as the Silhouette Skin.
Works with HTML5 outputs

Simplex Auto Hide

simplex_autohide.ggsk

This is a variation of the Simplex Skin V5. Its controller will hide itself after 5 seconds.
Works with HTML5 outputs

Google Cardboard

cardboard.ggsk

Use this skin if you intend to view your panorama with a Google Cardboard Viewer.

  • Works with HTML5 outputs

  • Crosshair for pointing

  • Hotspot template and icon (simplex icon)

Hide the Tree and Properties with the keyboard shortcut, Shift + Alt/Option + Tab.


See also

2017-08-10 08:38:18