Overview

Update 9 May 23: Checked and the tutorial is compatible with Version 7. I clarified some instructions and added a new section to display the close image in the magnifying glass.

This “little bit's” tutorial shows you how to add JavaScript Filter Search to a virtual tour. You would use the search when you may have many nodes, and a scrolling list would be impractical and time-consuming to search through.

Note: As “Little Bit” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.

Final Output

View in a new browser window

Note: 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 of the stations 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.

Tutorial Files

The tutorial folder, Javascript Filter Search, has an Asset Folder with six panoramas, an HTML page and a png icon. There is also a Project folder with a Pano2VR project 'filter-search.p2vr', a skin 'filter-search.ggsk', and an Output Folder called 'Filter-Search' with project files created from the .p2vr and .ggsk elements. (Figure #1)

Project Overview

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
Modifying a JavaScript Search Filter to work within a Pano2VR project

Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it

Getting Started

1. Download and open the zipped tutorial folder from here

2. Open the project file ‘filter-search.p2vr’ (Figure #2)

Note: the project will work in both Version 6 and Version 7 and I’m using Google Fonts implemented in the Version 6 release. 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)

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)

Figure #7: node 6 opened by adding #Royal_Albert to the original URL address

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, Add a Visible Logic block to the button element by:

Opening the ‘station-search-button’ element to reveal the child elements
Selecting the ‘close-x’ element
In Properties > Appearance, click on the Visible: Logic Block
Add a new trigger using the variable we just created *filter_search = true and Visible: true (figure #12)

5. Save and close 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 to reveal and hide the search elements. (Figure #13)

Figure #11: Skin search elements — Figure #13: Skin search elements

Adding the JavaScript Search Filter

The final element in our project is the Search Filter itself. This is a JavaScript web page from the w3schools.com website. If you would like more information on how the application works please visit the website via the link above.

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 #14)

3. Output the project again and now when you click on the search button the iFrame is populated with the JavaScript Search Filter application. You can try typing letters and see the list filtering to match your input. (Figure #15)

Figure #13: JavaScript application running in the iFrame — Figure #15: JavaScript application running in the iFrame

Customise the Filter Search

Note: The data already inserted into the search.html file is incorrect, 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 text editor such as 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> (Figure #16a, 16b)

2, Save the file replacing the old one.

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 #17)

Figure #15: Update Filter Search — Figure #17: Update Filter Search

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 #18)

Figure #16: Link opens in the iFrame — Figure #18: Link opens in the iFrame

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 #19)

a. After <style> add…

body {

font-family: 'Muli', sans-serif;

}

b. In #myInput - change url('/css/searchicon.png'); to…

url('searchicon.png');

c. After the second #myUL add…

div.fs1{
width: 100%;
height: 180px;
overflow: auto;
}

d. After the end tag </style> add…

<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">

e. After <link> add…

<base target="_top">

f. Between the <input and <ul tags add…

<div class="fs1">

g. After the </url> tag add…

</div>

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 #20)

Figure #18: Final working output — Figure #20: Final working output

7. Save and close the skin and project

Caveat

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)

Figure #19: Safari AutoFill (Greek text with Australian keyboard)

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.

Update 23 March ‘19

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(⌝)

Summary

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.

I'd like to Donate

Back to "Little Bits" Homepage

Adding a JavaScript Filter Search