Skip to main content

Node Images Properties

Use the Node Image tool to easily add thumbnail images from the current tour. This is especially useful for creating galleries or buttons from the images. Use this in conjunction with the Cloner to build a tour menu or gallery.

Click in the canvas to add an image. A placeholder will appear. Go to the Node Image panel to choose the node.

Position

ID – Give the image a unique ID or name.

Position – The X and Y coordinates for the image.

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

Size – Adjust the container’s size (width and height) in pixels.

Appearance

Scaling – Scales the image 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 node image 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 node image will rotate around that corner.

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

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

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

Node Image

Tour Node – Select a node from the menu.

Projection – Choose a projection for the thumbnail. Select Use default view to use the defined default view.

Pan – The position of the image on the horizontal axis.

Tilt – This is the position of the image on the vertical axis.

Roll – The rotation of the image around the central axis.

FoV – The area of the image that is visible - also described as Zoom. Scroll up and down to zoom in and out, creating a narrow or wide field of view.

Advanced

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 classes for this element. You can enter more than one class, separated by comma.

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

Actions

In order for an element to act as a button, it needs to have a function or action applied to it.

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-02-07 08:19:48