Adding a JavaScript Filter Search

Overview

This “little bit's” tutorial show you how to add JavaScript Filter Search to a virtual tour. You would use the search in a situation where you may have a large number of nodes and a scrolling list would be impractical and time consuming to search through.

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.

Final Output

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.

Tutorial Files

In the tutorial folder, Javascript Filter Search, there is an Asset Folder with 6 panoramas, a 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 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

Figure #2: Project file open in 6.1beta

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)

 

Figure #5: Edit Template button

3. In the HTML Template window, check ‘Direct node access:‘ (Figure #6)

 
 

Figure #6: Enable Direct Node Access

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)

 

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)

 
Figure #8: filter_search variable

Figure #8: filter_search variable

 

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)

Figure #9: Filter Search Screen Tint

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)

Figure #10: Filter Search Text iFrame

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)

Figure #11: Search button Action

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)

Figure #11: 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 #12)

 

Figure 12: ‘includes’ folder copied to ‘Filter-Search’ output folder

 

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

Figure #13: JavaScript application running in the iFrame

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)

Figure #14a: Original search.html

Figure #14b: Updated search.html

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)

Figure #15: 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 #16)

Figure #16: 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 #17)

  • Fonts: After <styles> add…

    body {

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

    }

  • Fonts: After </styles> add…

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

  • Link: After <link> add…

    <base target="_top">

  • Icon: In <styles> / #myInput change url('/css/searchicon.png'); to…

    url('searchicon.png');

  • Scrollbar: In <styles> after #myUL add…
    div.fs1{

width: 100%;

height: 180px;

overflow: auto;

}

  • Scrollbar: Before <ul id=”muUL”> add…
    <div class="fs1">

  • Scrollbar: After </ul> add…
    </div>

 

Figure #17: Updated search.html

 

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)

Figure #18: Final working output

7. Save your 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/04/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