Skin Editor Properties

The Properties section is where you can edit each element and change the way it behaves through actions. All the properties are grouped in collapsable panels.

Element Properties

Depending on the element that is active, the properties will change. Learn more about each element’s properties:

Basic

Images

Advanced

Skin Settings

The skin settings are available when no element is selected. To deselect an element and return to these settings, click in the outer part of the canvas.

Canvas

Width & Height – This will adjust the canvas’s width and height, measured in pixels. To get a better idea of how your skin will look on output, set the size to the project’s output window size.

Grid – Adjust the canvas’s grid in pixels. For example, a setting of 10, will create a grid of 10 pixel squares.

Margins

Use margins to set extra space outside of the panorama window (Top, Bottom, Left, Right) to display elements outside of it. These elements could be anything from maps, thumbnails and buttons.

Variables

Variables are powerful little tools that can help simplify automation within a skin. An example of use would be to define skin themes. You can assign logic blocks to elements and use a single mouse-click action to change themes.

For instance, if on a button click you wanted to show 4 elements and hide 3 others, you just need to apply a logic block to those elements using the variable you defined.

Variables can be used as custom triggers in logic blocks.

Each variable has the option to apply a Logic Blocks.

Variables are added to the variables table:

Name – The name of the variable. This will show up in the Triggers list in a logic block and in the Set Variable Value in Skin Actions.

Type – Choose the type of variable:

  • Number – The value is expressed as whole or decimal numbers.

  • Text – The value is expressed as text.

  • True/False – A boolean type value using true or false.

Init Value – This is the variable’s base (default) value and it depends on the Variable type. For example, if the Type is set to True/False, the Init Value can only be either true or false. Apply Logic Blocks here.

Expose – Select to have the variable exposed in the web output. This allows for skins to be easily configured for the needs of each project.

Description – An optional description of the variable. If you expose the variable, this description will appear as the label in the Edit Skin Configuration dialog in the Output panel.

Rows can be adjusted by dragging on the handles to the left of the row.

Source – This column will show the variable’s source as an icon. These variables are added from Project Variables and Custom Properties in User Data and Hotspots. Click the source icon to change a variable’s source. This is useful if you’d like to have a variable access the hotspot triggers in a logic block. This way, the variable does not have to be defined in the project, just the skin which would make it possible to use in a component.

★ Right-click any variable to rename, cut/paste, delete, find its usage. Rename and Find Usage will open the Search and will find all instances of that variable. For Rename, enter the new name in the Replace field. Click Replace to rename the variable everywhere in the project.

Project Variables

This table will be visible once variables have been added to the Animation Editor, User Data, or Hotspots. To use them in the skin, click Add Variables to Skin. Any hotspot or user data variables removed from the Variables table will be moved to this table.

Project Properties Variables
Project Properties Variables

External Files

Use this table to apply your own external script files. You can choose between JavaScript and CSS. Add the full path URL in the URL column. Rows can be adjusted by dragging on the handles to the left of the row.

Embedded Stylesheet – Add CSS code to apply to the whole skin.


Edit an element

To edit an element, do any of the following:

  • Select it either in the Canvas, and make changes in the Properties.

  • Select it in the Tree, and make changes in the Properties.

Edit multiple elements

To edit multiple elements at the same time:

  1. Select multiple elements in either the Tree or Canvas.

  2. Edit their properties. Common properties amongst the elements will be shown.

    • Elements that share the same properties and have the same value, their values will be visible.

    • Values that mismatch will be empty.

Switch to Solo Mode

To show only one panel open at a time, do one of the following:

  • In the menu, choose, View > Properties Solo Mode.

  • Use the keyboard shortcut: Control-Shift-P/Command-Shift-P

  • Click the panel header while pressing the Alt key.

  • Hover your mouse over the right edge of the panel header and click the ellipses button.

Toggle through the Panels

Use the keyboard shortcut: Control-Shift-PageUp/Down (win) or Command-Shift-PageUp/Down (macOS)

Show or Hide the Actions and Modifier panels

For the Actions Panel: Control-Shift-A/Command-Shift-A

For the Modifications Panel: Control-Shift-M/Command-Shift-M

Hitting these shortcuts again will close the panels and return the other panels to their previous state.


See also