Skip to main content

Element Settings

Each element has following set of settings (except here noted).

When a group of elements is selected, all their common settings will be displayed so you can change them as a batch.

Position

ID – Give the element a unique ID or name. An ID is given automatically and will be numerically ordered when more than one are added. If an ID is already used by another element, a warning symbol will appear next to the input field.
★ Tip: Click the warning symbol to have Pano2VR create a unique ID for you.

Position – The X and Y coordinates for the button. Choose between Pixels and Percentage:

  • Percentage - Sets the position of the element based on the player’s size/window.

  • Pixels - Sets the actual location of the element within the skin.

  • Anchor - Use this grid to “stick” the element to a section of the player window.

Size – Adjust the button’s size (width and height) in pixels. (Not available for: Hotspot Template, Node Marker)

  • Percentage - Sets the size of the element based on the player’s size/window.

  • Pixels - Sets the actual size of the element.

  • Reset Size – Click to return to the image’s original size. (Not available for: Cloner, Container, External Image, Hotspot Template, Map, Node Image, Rectangle, Scroll Area, Seekbar)

  • Reset Size/2 - Use this when you want to add a PNG or JPG to your project but still want it looking sharp in Hi-DPI displays. For example, if the skin requires a 32px image, use a 64px image and then click, Reset Size/2. This will then make it 32px in the skin but will still have all the pixels for a high resolution display. (Not available for: Cloner, Container, External Image, Hotspot Template, Map, Node Image, Rectangle, Scroll Area, Seekbar)

Appearance

Scaling – Scales the button along the x and y axes. Doubling the value on either axis, for instance, will double the size of the element. If a scaling modifier is enabled, this scaling setting is ignored.

  • Center - Use this grid to determine how the button element scales. The default is set to the center so the element will scale in or out from its center. If you anchor the scaling to the upper left corner, for example, the scaling will center from this point.

Angle – Use this parameter to adjust the angle of the element. It will use the Center grid (above) as its axis. For example, if the center is chosen, it will rotate around its center. If the bottom left corner is selected, the button will rotate around that corner.

Visible – Select or deselect to keep the button visible or invisible. Visibility or invisibility can be changed and toggled with actions.

Alpha – The transparency of the button. A setting of 1.000 is opaque. Lowering this number will increase the button’s transparency.

Hand Cursor – Select to have the hand cursor show when the mouse rolls over the button. This makes it more obvious to the user that the area or button is interactive.

Advanced

Z-Index – Set the CSS z-index property. Use numbers to set the stacking order or leave the setting at Default. Default will use the stacking order set in the Tree.

This is used to ensure that hotspot images and their text fields or pop-up images are displayed in the correct stacking order especially when close or overlapping.

Permeable – Select to make sure the element does not accept mouse clicks. This is useful for when you want to include an element in the skin but don’t want it to hinder the ability to interact with the panorama. For example, you could add a vignette or logo or border that when clicked on, will allow interaction with the panoramas.
Container, Timer, and Cloner all have this selected by default.

Hotspot Proxy ID – Enter the corresponding hotspot ID. The ID should come from the hotspot’s ID field in the hotspot editor. Using hotspot proxies gives you the ability to link skin elements to specific hotspots.

CSS Classes – Enter the CSS class attributes for the selected element. You can enter more than one class separated by commas.

CSS Styles – Enter the CSS style attributes for the selected element. You can enter more than one style separated by commas.

Limit Output – This option lets you selectively choose which element should not be used for either the Flash or HTML5 outputs.

Actions

Actions or a set of directions can be applied to any element added to the skin to create interactivity.

Double-click in the Actions area or click the plus sign to the right to open the Action Settings.

See Skin Actions, for details on all actions.

Modifiers

Adding modifiers allows you to make elements move, scale or rotate when the panorama is being panned, tilted, zoomed or loaded. A good example of a use of a modifier is for a loading bar that scales in relation to how much of the panorama has been loaded. You can see how this is done by opening one of our default skins.

Double-click in the Modifiers area or hit the plus sign to the right to open the Modifier Settings.

See Skin Modifiers, for more details on all modifiers.


See also

2017-04-11 09:07:49