Using Placeholders in the Skin
Learn how to use placeholders in the skin to dynamically make changes using variables in a 2-node tour.
If you’d like to follow along, here are the general steps used in the tutorial:
-
Add a tag to Node 1. (
tag1
) -
Add a different tag to Node 2. (
tag2
) -
Open the Skin Editor.
-
Add a text variable. This lets you use a placeholder that will use this variable to dynamically change the text.
- Give it a name. In this case, it’s
url
. - Add the initial value; the starting URL.
- Give it a name. In this case, it’s
-
Add a text box.
-
Remove the default text.
-
Add a logic block to the text of the text box with two conditions:
- Trigger = Tag; Comparison = contain; Value: tag1; Text = Go to website a.
- Trigger = Tag; Comparison = contain; Value: tag2; Text = Go to website b.
-
Add an action to the text box:
- Source = Mouse Click; Action = Go To URL; URL =
$(*url)
- Source = Mouse Click; Action = Go To URL; URL =
-
Add actions to change the variable’s value.
- Source = Images Ready; Action = Set Variable Value; Variable name = the name of the variable added in step 4 (
url
); Operation = Set(=); Value = http://www.example.com. - Add an action filter to this action:
- Trigger = Tags (Tour > Tags); Comparison = contain; Tag =
tag1
. This action will only execute if the image has the tag, tag1.
- Trigger = Tags (Tour > Tags); Comparison = contain; Tag =
- Source = Images Ready; Action = Set Variable Value; Variable name = the name of the variable added in step 4 (
-
Copy that action and paste it to duplicate it.
- Source = Images Ready; Action = Set Variable Value; Variable name = the name of the variable added in step 4 (
url
); Operation = Set(=); Value = http://www.example2.com. - Add an action filter:
- Trigger = Tags (Tour > Tags); Comparison = contain; Tag =
tag2
. This action will only execute if the image has the tag, tag2.
- Trigger = Tags (Tour > Tags); Comparison = contain; Tag =
- Source = Images Ready; Action = Set Variable Value; Variable name = the name of the variable added in step 4 (
-
Export to test. The text box should now change its text and its link when the node changes.
★ Tip: Each input field in Pano2VR that is associated with a placeholder will have a tooltip showing it’s placeholder.