Cloner Element

The cloner is a useful tool that's used to quickly build menus from hotspots, translations and more.

To clone an element (like a text box or node image), select the cloner element from the toolbar, then draw around the element to be cloned.

Cloners can be expanded and worked on in isolation from the rest of the skin. Double-click the cloner to expand. When expanded, a breadcrumb menu appears. To get back to the skin, click Skin.

Cloner

Clone Direction

Choose the direction in which the cloned elements will repeat. Choose from:

• Horizontal – Clones content horizontally. Cloning will be indefinite.

• Vertical – Clones content vertically. Cloning will be indefinite.

• Single Row – Clones content horizontally but the cloning will end at the boundaries of its parent.

• Single Column – Clones content vertically but the cloning will end at the boundaries of its parent.

• Invert – Select to invert the direction of the cloned elements. For horizontal, the default is from left to right. Select Invert to change this from right to left. Likewise, for a vertical cloner, the default is from top to bottom. Invert will change the direction of the cloned elements from bottom to top.

• Invert Clone Order – Available when Invert is selected. Select to invert the clone order. The order of the cloned contents depends on the Clone Source.

  For Nodes, the order comes from the Tour Browser.

  For Table, the order is based on the table rows.

  For Floor Plans, the order is from the list in the Tour Map.

  For Hotspots, the order is from List View.

  For Translations, the order is from the Translation table.

Auto Size – Select to have the cloner adapt to the size of the cloned instance (rather than the size of the cloner itself).

Center in Parent – Available for Single Row and Single Column clone directions. Use this option to center cloned elements in the parent to build a paging cloner (instead of a sliding or scrolling cloner).

Transition

When Auto Size is selected, then Transition will be available. Select Enable to have a transition from one sized element to another.

• Time – Enter the length of the transition.

Horizontal and Vertical

Use this setting to set how the cloner will repeat. The setting will change depending on the chosen clone direction in the settings above. If the clone direction is Horizontal, then this setting will be Vertical, and vice versa. Enter a value for the number of columns (or rows) and choose Rows. Or choose Pixels or Percent to set how much of the parent element should be used in that direction.

Source

Choose what the cloner creates an instance for. Each source is described in its own section below:

• Nodes – one instance for each node in the tour.
• Table – one instance for each row of a table you fill in.
• Hotspots – one instance for each point hotspot.
• Translations – one instance for each language of the project.
• Floor Plans – one instance for each floor plan.
• Target Cameras – one instance for each Target Camera of the 3D model node that is open.

Inside the cloner, text boxes and other elements can show each instance’s data with the placeholders $(ctitle), $(ctag), and $(cdesc). See the cloner placeholders.

Filter

Limit the instances to a subset. The filter depends on the source:

• For Nodes and Table, choose one or more tags. Only nodes with those tags are used. Select Inherit filter tags from parent cloner to use the tags of the cloner this one is nested in.
• For Hotspots, enter one or more hotspot Skin IDs, separated by commas.
• The other sources have no filter.

Source: Node

The nodes in the tour will be used to create cloned instances.

Elements of the cloned instances will then get their data from each tour node. For instance node images will show an image for each node, text boxes that display user data will get their data from the cloned node, etc.

• Filter – Filter by tags. Only nodes that have the chosen tags will be used in the cloner.

  • Inherit filter tags from parent cloner – If the current cloner is nested (a child of another cloner), you can choose to have the cloner use the same filtered tags as its parent.

• Active Node – Select Scroll to view to always have the active node in view.

Source: Table

The titles and tags used in the table below will be used to clone instances.

✭ Cloners that use a table type will also have triggers for use in logic blocks.

• Filter – Filter by tags. Only nodes that have the chosen tags will be used in the cloner.

Use the table to manually define tags and titles. This will group nodes based on their assigned tags to create menu groups or categories.

For example, you might want to create a menu that has a category for each floor of a building. In this case, every node on the first floor might have a tag like, floor1 and every node on the second floor would have floor2 as the tag. Using the table, we can create two sub-menus; one for the first floor and one for the second. For the first floor, select the floor 1 tag and add the title, First Floor. There will now be a menu category for all nodes tagged with floor1 and the menu title will be First Floor.

The Description column can be used to describe the category. But it can also be used to address external images or add URLs. For example, images added to Assets, can be added to the cloner. Give the images a Title. And for description add their paths: assets/image1.jpg. Add an external image loader to the cloner and for the external URL, set it to $(cdesc). To take it further, you can add a text box to the cloner and add the placeholder, $(ctitle).

• Expose – Select to show table in the Edit Skin Configuration menu in the Web Output Panel.

• Description – Add the Description for the exposed table. This will appear as a heading in the Edit Skin Configuration dialog.

• Skip empty entries – Select to not show any category with no nodes.

• Inherit filter tags from parent cloner – If the current cloner is nested (a child of another cloner), you can choose to have the cloner use the same filtered tags as its parent.

• Active Node – Select Scroll to view to always have the active node in view.

Source: Hotspots

The cloner will create a list of all Point Hotspots providing a way to create a menu to navigate to every point hotspot.

Use $(ctitle) to display the hotspot’s title in a Text Box.

• Filter – Filter the menu by entering one or more Hotspot Skin IDs, separated by commas if you want to filter for multiple IDs.

Source: Translations

The cloner will create a list of all the translations added to the project.

Using a text box in the cloner, add the placeholder $(ctag) to show the langauge code (i.e., en-US, de ).

Use the placeholder, $(ctitle) to display the language’s title; the cloner uses both the language and the Title from this table.

Source: Floor Plans

The cloner will create a list of all the Floor Plans added to the project.

Use $(ctag) to add the Floor Plan ID and $(ctitle) for the Floor Plan title in a Text Box.

When using the action, Change Map, select <Cloner ID> from the list for Map ID.

Source: Target Cameras

The cloner will create an instance for each Target Camera of the 3D model node that is open, and fills in again when the viewer moves to another node. Use this to build a menu of camera views in a model.

Use $(ctag) to show the Target Camera’s ID and $(ctitle) for its Title in a Text Box.

To make the clones clickable, add the 3D Camera View action to an element inside the cloner and choose From Cloner as the Target Camera in the Model Target View parameters. Each clone will then move the camera to its own Target Camera.

Finding Clones in the Web Output

Every clone gets its own <div> in the web output, and Pano2VR writes the clone’s tag and title onto it as data-ctag and data-ctitle, the same values you would use as $(ctag) and $(ctitle) inside the cloner. That gives your own CSS or JavaScript a way to reach a single clone:

div[data-ctag="ground"] {
  outline: 2px solid gold;
}

An attribute is only written when the clone actually has that value. A cloner with the source Node has no tag, for example, so its clones carry only data-ctitle, and a clone with an empty title gets neither.

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.

Point Hotspot Templates will have a menu that shows all the default template IDs as well as any template IDs used in the project.

Position

The X and Y coordinates for the element.

An element’s position is relative to its parent and to its anchored position (the Canvas is the parent to top level elements).

For example, a video that is anchored and placed in the middle of the Canvas will have its anchor set to center and X and Y set to 0. So, if the element is anchored to the horizontal center, the X coordinate is measured from the center of the parent to the horizontal center of the element. Likewise, if an element is anchored right, the x-coordinate is measured from the right side of the parent to the right side of the element as indicated by the arrows.

X and Y:

• Pixels – Unit to set the actual location of the element within the skin.

• Percent – Unit to set the position of the element based on the size of its parent (the player window for top level elements).

• CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

  • Example: Set the x position unit to CSS. Enter, 100px in the edit field. Add a logic block, choose a trigger and add 20% for the size, effectively switching units.

Anchor

Use this grid to “stick” the element to a section of the player window. See above, to learn how the Anchor influences Position.

Size

The Hotspot Template and Node Marker do not have a size parameter.

Adjust the element’s size (width and height). Width and Height:

• Pixels – Unit to set the actual size of the element.

• Percent – Unit to set the size of the element based on the size of its parent (the player window for top level elements).

• Lock Aspect Ratio – Click the link icon to lock the element’s size aspect ratio when resizing in the Canvas or changing size values in the properties panel. This button is reset to off when another element is selected.

• CSS – Select CSS as a unit to allow for changing units when a logic block has been added or to use calculations.

  • Example: Position an element 50 pixels from the top and then set the height to calc(100% - 50px). The element will then always have the same distance of 50px from the top and will extend straight down to the bottom.

• Reset Size – Available for Image, Button, and SVG elements. Click to return to the image’s original size.

• Reset Size/2 – Available for Image, Button, and SVG elements. 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.

Appearance

Scaling

Scales the element 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 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 element visible or invisible. Visibility or invisibility can be changed and toggled with actions.

Alpha

The transparency of the element. A setting of 1.000 is opaque. Lowering this number will increase the elements’s transparency.

Cursor

Choose which cursor shows when the mouse rolls over the element.

Inherit – The element will inherit the cursor from its parent element. This is the default for all elements except Button and Seekbar.

Hand – The hand cursor will show. This is the default for Button and Seekbar elements. When selected, the cursor is not inherited from its parent element.

Default – Choose this option to force the browser’s default cursor (usually an arrow). When selected, the cursor is not inherited from its parent element.

Masking

Available for Container, Cloner, and Rectangle elements. Select Enabled to clip child elements at the element’s boundaries.

Accessibility

Tab Index

To make skin elements controllable via keyboard, they have to be added to the tab order of the web page. A tab index of -1 (the default) excludes the element from the tab order. A tab index of 0 includes the element in the tab order. Values from 1 to 99 include it with an explicit position: the browser visits those elements first, in ascending order. Browsers highlight the active element by putting a rectangle around them. Once a skin element is the active element, indicated by the highlight, press Return (macOS) or Enter (Windows) to trigger its click action.

ARIA Label, Description, Details

These are attributes or properties that are used to define the element and support the Role.

ARIA Label – Defines or names the element.

ARIA Description – Provide a brief description of the element.

ARIA Details – Provide an extended, detailed description of the element. This field uses your system’s spell checker.

ARIA Role

ARIA roles are used to define UI elements (button, loading bar, and so on). Choose from the list which best defines the element, or type another role.

ARIA Hidden

Select to hide all ARIA attributes.

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 elements are displayed in the correct stacking order especially when close or overlapping.

Use the Logic Block to change the Z-index value using variables, for example.

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.

Proxy ID

Link the element to a hotspot or to an object in a 3D model, so that the element receives the same mouse and touch events: mouse click, mouse double-click, mouse enter, and mouse leave. The element responds with its own actions for those events, so it needs a matching action to react. For example, a text box with a Mouse Enter action that shows it and a Mouse Leave action that hides it can work as a tooltip for a hotspot.

Enter one of the following:

• The ID of a hotspot, from the ID field in the hotspot properties. See hotspot proxy ID.
• The name of an object in a 3D model node. Right-click the model tree in the Overview panel to copy an object’s name.
• A node ID in curly brackets, like {node2}, to react to hotspots that link to that node. Learn more.
• A # followed by a regular expression, like #^info, to react to every hotspot or object whose ID matches.
• * to react to all of them.

CSS Classes

Enter the CSS class names for the selected element. You can enter more than one class separated by spaces. If you need more space, click the Edit button to the right of the field for a larger text field. No dot . needed.

Logic Block available. Use the Additive Mode, to apply different classes to the element. Every condition adds a class (or multiple classes) to the default list of classes set in the CSS classes property of the element or stylesheet. Classes set in the property are not replaced but rather added to.

CSS Styles

Enter the CSS style attributes for the selected element. You can enter more than one style separated by semi-colons. If you need more space, click the Edit button to the right of the field for a larger text field.

CSS Styles Inner Element

Enter CSS style attributes for the selected element’s inner element. (Some skin elements, like Image, Video and External Image, have an inner element nested inside the element’s main <div>.)

For example, an image element can have a border: border-radius: 20px; border: 5px solid red;. This can also be entered with a line break: border-radius: 20px; border: 5px solid red;

Keyboard Shortcut

Enter the preferred key to control the action defined to the element. For example, select the text field and press the Up Arrow key. Then add a Mouse Click action. The element performs the action when it’s clicked or when the Up Arrow key is pressed. Click Clear to remove the shortcut.

Exclude from Translation

Select this option to not include this element in the skin’s translation file.

Safe Area

Available for the Container Element.

Select Use Safe Area for Position and Size to keep child elements of the container inside the safe area of the device. This option makes sure that the elements are always 100% visible and the skin will automatically react to the device’s safe area.

Make sure Ignore Safe Area is not selected in the HTML template settings in the Web Output.

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.

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.

Notes

Use this section to add information about the element. This is especially useful if you have a component and want to explain the elements inside that component. The notes field uses your system’s spell checker.

Notes will show up as tooltips in the Tree.

See also…

• Set Value: Cloner

• Skin Editor

• Skin Settings

• Skin Sources

• Skin Actions

• Skin Modifiers

• Components

• Build a multilingual project

• Placeholders

• Accordion Menu with Sliding Titles

• Building a Tour