Skip to main content

The Skin Editor

In Pano2VR, you can create and add a skin to your HTML5 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 Canvas, 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 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, 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 the built-in skins work.

✭ Note that this tutorial was made with Pano2VR version 5.2. Since version 6.0, we no longer recommend editing the built-in skins because of their complexity.

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 output settings.

Silhouette and Simplex

Both the Silhouette and Simplex skins include numerous features that can be applied or removed using the Edit Skin Configuration button.

✭ Please don’t try to directly modify these skins. Doing so, will only cause great pain. Rather, use components to build your skin.

  • Node preview image (pro)
  • Node Marker and icon (pro)
  • Point Hotspot, Web, Video and Image Popup icons
  • Thumbnail Menu
  • Loading animation for loading of tiles
  • Loading bar
  • User Data info box
  • Popup Image, Video, URL icons
  • Open URLs in Popups
  • Controller with the following buttons (other buttons can be added in Edit Skin Configuration):
    - Zoom in and Zoom out
    - Autorotate
    - Change Projection
    - Fullscreen

Google Cardboard

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

cardboard.ggsk (simplex) and silhouette_cardboard.ggsk

  • Crosshair for pointing/stare navigation

  • Hotspot template and icon (simplex icon)

  • Pulsing Hotspots

Skin Editor Keyboard Shortcuts

  • Hide the Tree and Properties with the keyboard shortcut, Shift-Alt-Tab (win) or Shift-Option-Tab (macOS).

  • Show and Hide the Panels within the Properties with Command-Shift-PageUp/Down (macOS) or Control-Shift-PageUp/Down (win)

First, select an element in the Tree to enable navigation.

Use the up/down arrow keys to move up and down the Tree, activating elements as you go.

Use the left/right arrow keys to open containers.

Once an element is selected, use Tab to move to the Canvas. Hit Tab again to return to the Tree.

Auto-saved Skins

Pano2VR will save skin files every ten minutes. If the program closes unexpectedly and the current skin was not saved, the next time Pano2VR is opened, it will give you the opportunity to open the last auto-saved skin file. Once that file is saved, the file path will return to the original file, rather than in the auto-save folder.

See also

2019-08-25 13:42:58