Category: “Skin Editor”
Adding Google Fonts
Learn how to add Google Fonts to your project.
Button Element
The button element provides multiple states of a button. Each state can have a different image which provides visual indications of interaction.
Cloner Element
The cloner is a useful tool that creates lists for building menus. The cloner is used to create thumbnails of nodes within a tour, creating a thumbnail menu. The cloner is also used to create a multi-level menu, a multilingual menu, a menu of all hotspots, or a menu of all floor plans.
Code Element
The code element is used to apply Javascript to the skin.
Container
A container is an invisible element that allows you to group elements together in the tree or in the editor.
Create a Popup Image with Expanding Text
Learn how to create a custom image popup with a text box that expands to fit the amount of text.
Create Animated Hotspot Icons
Learn how to create animated icons for point hotspots. This particular animated icon will consist of to rotating bars hinged at the center.
Create Buttons Using Text Boxes
Learn how to use a couple of text boxes to create a 2-state button.
Embedding Fonts
Fonts can be embedded in Pano2VR’s skin. This means that the fonts are served locally, rather than fetching them from third-party servers like Google Fonts.
External Image
Use the external image to add images that need to be loaded externally rather than embedded in to the skin. This is especially useful if you have a lot of thumbnails in a tour and are not using the Node Image element.
Hide Elements When Player is Active
Learn to use a logic block to hide elements when the player is active (when interacting with the panorama or skin). You use a timer that has a logic block by default.
Image
The image element is used to add images to the skin. Once you click on the Canvas, you'll be instructed to selected an image.
Lottie Animation
Lottie files are small animations designed to work on all devices. Use them for buttons and hotspots.
Map Element
Maps and Floor Plans can be easily added to the skin by selecting the Map Element in the Toolbar and clicking in the Canvas to add.
Mapping Keys to the Skin
You can map keyboard keys to actions in the Skin Editor. This allows a user to use either the mouse or the keyboard to control and interact with the panorama or tour.
Node Image
Use the Node Image Element 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 settings to choose the node.
Node Marker
Node Markers are used to show elements depending on the current panorama, or node, in a virtual tour. It can also be used to activate or deactivate other media within the tour through the use of tags.
Rectangle
The rectangle element can be drawn to any size. Use it as a button or as a screen tint. Or even as a fix to create active areas in 3D distorted hotspot images.
Scale an Element Based on Player Width
You can use logic blocks to create a responsive skin (where the skin elements scale to the player's width). This will require a logic block with multiple expressions.
Scroll Area
A scroll area is a container that will add scrollbars around an element or group of elements, if necessary. It can also be used to clip content.
Seekbar
Seekbars can be used to seek or move backwards and forwards in time for background sounds, all pinned sounds and videos of the project, as well as skin sounds and skin videos, and even 360° video panoramas (except embedded YouTube and Vimeo videos).
Skin Actions
Actions or a set of directions can be applied to any element added to the skin to create interactivity.
Skin Actions Examples
Here you'll find a few examples of common actions. You can assign actions to any element in the skin editor.
Skin Elements
A skin element is any object added to the skin.
Skin Modifiers
Use modifiers to affect a skin element's behavior. Open the Modifiers panel and double-click in the table or click the plus sign to the right to open the Modifier Settings.
Skin Sources
In the actions section of the Actions/Modifiers tab in the Skin Editor, you'll find a column called Sources with a pop-up menu. These sources represent the triggers that cause the actions.
Styling with CSS
CSS or Cascading Style Sheets are what the web uses to style a web page. It is a rule-based language that specifies how elements should look or be presented in a web browser. For example, You can make a text box blue and you can have that text box animate using CSS.
SVG
Click the *Add Scalable Vector Graphics* button in the Toolbar and then click in the Editor to choose a SVG file. Or, just drag the SVG in to the editor.
Text Box
Text Box are for adding text to the skin. You can use basic HTML tags to format the text, or use CSS.
The Color Tool
The Color Tool, found in the Skin Editor, lets you quickly change the colors of a skin or a selection of elements.
Timer Element
The timer is a container that is useful for timing actions in the skin. For example, you can use a timer to hide a Welcome Screen (or splash screen) after 5 seconds.
Using Action Filters
Action filters let you define conditions for the execution of actions assigned to an element.
Video Element
Use this to add videos to your skin. You can use local files, URLs or YouTube and Vimeo IDs.