Note: this tutorial is designed for Pano2VR V6.1 beta (to use the new Google Fonts function) but it will work within Pano2VR V6.0.4. You can download the beta application here. As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
There are 6 nodes in this virtual tour each named for a tube station on the London Underground. Each station can be accessed, laterally, using the ‘Previous/Next’ buttons; in a large tour this would take a long time to find the relevant station.
Using the Filter Search the user clicks on the magnifying glass and a module that shows all the stations, in a scrolling field, as well as a call to action to search.
Typing part of the name filters through the list showing only those locations that match what is typed. Once the search is successful clicking on the location name opens the relevant station panorama.
In this tutorial we will modify the filter-search.p2vr project file by;
Adding Custom Node ID’s to each node
Enabling Direct Node Access
and modifying the filter-search.ggsk skin by:
Adding a global variable
Creating the Filter Search skin elements
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
1. Download the zipped tutorial folder here
2. Open the project file ‘filter-search.p2vr’ (Figure #2)
Note: if you have 6.1 beta installed as your default P2VR app double click on the project file, if not and you are running both the beta and 6.0.3 then right click on the project file and select the application Pano2VR6.1Beta.app.
Note: the project will work in both versions but I’m using Google Fonts implemented via the new 6.1beta format. For more information on this new function take a look at my new tutorial Google Fonts for Text Fields
3. Review the current project by clicking on the ‘Open Output’ button in the Output panel. (Figure #3)
Note: at this point we can move between the nodes using the Previous/Next buttons and the station names are updating to reflect the User Data Titles in the project $(ut)
Adding Custom Node ID’s and enabling Direct Node Access
Note: In order to link to a node from the Filtered Search result we need to have Direct Node Access enabled. This will allow us to create a link such as this one https://s3-ap-southeast-2.amazonaws.com/p2vrlittlebits/Search-Me/index.html#Euston_Square that opens the Euston Square panorama.
1. Make node1 active and in the User Data panel add the Custom Node ID ‘Acton_Town’. Repeat for the remaining 5 nodes using the User Data Title as the text for the Custom Node ID (Figure #4)
Figure #4: Custom Node ID’s
Note: Custom Node IDs must begin with a letter and may only contain letters, digits or underscores.
2. Once you’ve created all the Custom Node ID’s we can enable the Direct Node Access. Under Output > HTML click on the small ‘Edit Template’ button next to the Template dropdown menu. (Figure #5)
3. In the HTML Template window, check ‘Direct node access:‘ (Figure #6)
4. Save the project, create an output by clicking on the ‘Generate Output’ button in the Output panel. To test the Direct Node Access add the following to the end of the URL address in the preview window, #Royal_Albert and hit return. The Royal Albert node opens (Figure #7)
Note: this concludes the work needed for the project, next we move onto the Skin Editor
Adding a Global Variable
1. Click on the ‘Edit Skin’ button in the Output panel to open the Skin Editor. In the Properties > Variables add an new variable named ‘filter_search’ with the Type ‘True/False’ and the Init Value = ‘false’ (Figure #8)
2. Save the Skin
Create the Filter Search Skin Elements
Note: The elements that will display the Filter Search form are quite simple, literally a text box with iFrame code and a screen tint background. The visibility of both elements will be controlled by the variable ‘filter_search’
1. For the screen tint add a ‘Draw Rectangle’ to the skin and set the following properties;
Position: ID:=filter-search-tint | Position: X=0, Y=0 | Size: Width: = 100%, Height: = 100%
Appearance: Visible = unchecked | Logic Block: Trigger = *filter_search, Comparison =, Value = True, Visible = true | Hand Cursor: checked
Rectangle: Background: Enabled: checked, Color: Black, Alpha channel: 125
Actions: Source: Mouse Click, Action: Set Variable Value, Variable Name: filter_search, Operation: Not(⌝) (Figure #9)
2. For the Text Field that contains the iFrame code add a ‘Draw Text Field’ to the skin and set the following properties;
Position: ID:=filter-search-frame | Position: X=0, Y=75 | Anchor: Center/Bottom | Size: Width: = 80%, Height: = 260 pixels
Appearance: Visible = unchecked | Logic Block: Trigger = *filter_search, Comparison =, Value = True, Visible = true
Rectangle: Background: Enabled: checked, Color: Mid Grey (#8c8c8c), Alpha channel: 255 | Border: Width = 0
Text: Text: <IFRAME src="includes/search.html" width="100%" height="100%" frameborder="no" scrolling="no" ></IFRAME>
Advanced: CSS Styles Inner Element: font-family: 'Muli', sans-serif;(Figure #10)
3. Enable the ‘Search’ button by;
Selecting it in the tree and drag it to the top of the tree
Add the following Action: Source: Mouse Click | Action: Set Variable Value | Variable Name: filter_search | Operation: Not(⌝) | Value: true (Figure #11)
4. Save the skin and save the project, create an output by clicking on the ‘Generate Output’ button in the Output panel. You can test the search button by clicking on it to reveal and hide the search elements. (Figure #12)
1. In the tutorial folder in the Assets folder is an ‘Includes’ folder with a search.html file. This is a direct copy of the working example on w2schools.com website.
2. Copy the ‘includes’ folder and it’s contents into the ‘filter-search’ output folder. (Figure #12)
Customise the Filter Search
Obviously the data already inserted into the search.html file is not correct so we need to modify it to match the station data already entered in the project file.
1. Open the ‘search.html’ file, from the includes folder in your output folder, into a simple text editor. I use TextWrangler (no longer supported) and replaced by BBEdit.
Make the following changes;
Delete the line <h2>My Phonebook</h2>
Change ‘placeholder=”Search for names..” to “Search for stations..”
In the <ul id=”myUL”> list change each entry to match the station data already entered in the project i.e.
<li><a href="#">Adele</a></li> changes to;
<li><a href="../index.html#Acton_Town">Acton Town</a></li>
Save the file replacing the old one. (Figure #14a, 14b)
3. Output the project or just refresh the browser; click on the Search button to see the updated Filter Search. Type in Eu to see the Euston Square station name. (Figure #15)
4. Click on the ‘Euston Square’ link to open the panorama via the Direct Node Access. However the new node is loaded into the iFrame and the current node, in the background stays the same. (Figure #16)
Note: the assumption here would be to add a ‘target’ to the URL string e.g. <li><a href="../index.html#ActonTown" target=”top”>Acton Town</a></li> However on testing it still opened within the iFrame. In the following updates we will apply the fonts from the main project, display the search icon, show a scrollbar and resolve the link issue.
5. Open the search.html in your text editor and make the following changes. (Figure #17)
Fonts: After <styles> add…
font-family: 'Muli', sans-serif;
Fonts: After </styles> add…
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
Link: After <link> add…
Icon: In <styles> / #myInput change url('/css/searchicon.png'); to…
Scrollbar: In <styles> after #myUL add…
Scrollbar: Before <ul id=”muUL”> add…
Scrollbar: After </ul> add…
6. Output the project or just refresh the browser; click on the Search button to see the updated Filter Search. Type in Eu to see the Euston Square station name. Click on the link and the background panorama is updated to reflect the selection. (Figure #18)
7. Save your skin and project
In response to the Forum post I created a version in Greek. On testing Hopki discovered an interesting issue. When using an English keyboard to filter the search rather than show the resulting Greek names it couldn’t find any and instead use the Safari AutoFill settings and showed entries from his contacts.
Here is the result of my testing. Greek language and Australian Keyboard. (Figure #19)
However if I change my keyboard to Greek then it functions as intended. So one of the options, on the Greek language version, is to insert a warning notice between the mouse click on the search icon and the actual filter search itself. You can see this in the example below.
If you’d like to automatically close the search window after selecting a node add an additional action to the filter-search-frame element. Action: Source: Node Changed | Action: Set Variable Value | Variable Name: filter_search | Operation: Not(⌝)
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.