Tutorial: Javascript Filter Search

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

In response to this post, viewtopic.php?f=6&t=13585, by Dizzz asking if he could create a search field, to find specific nodes in a large (300 node) project I've created this "Little Bits" tutorial.

The 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.

Here's the finished project https://s3-ap-southeast-2.amazonaws.com ... index.html

In this tutorial we modify a basic p2vr project tour by;
  • Adding Custom Node ID’s to each node
  • Enabling Direct Node Access
and modifying the skin by:
  • Adding a global variable
  • Creating the Filter Search skin elements
  • Modifying a JavaScript Search Filter to work within a Pano2VR project
You can check it out here https://tonyredhead.com/pano2vr-little- ... ter-search

Once again feedback and comments welcomed.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
VBad
Posts: 29
Joined: Tue Mar 27, 2018 5:52 pm

Hi Tony. How can I pin a search string? (I need her to not move).
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Not quite sure what you mean by "pin" can you be a bit more specific?

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
VBad
Posts: 29
Joined: Tue Mar 27, 2018 5:52 pm

Tony, how to pin a search bar? (panel in which we write the search query)
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Sorry but I don't really understand what you want. The search element is currently pinned to the bottom center of the canvas but I think you want something different?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
VBad
Posts: 29
Joined: Tue Mar 27, 2018 5:52 pm

https://youtu.be/SFQWwkrs5v8
Tony, we can’t find the error in the code. We set the code as in your lesson. We checked several times. How to solve this problem?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

If you look at your video you will see the issue. At 0.12, on your version, the scrollbar extends from top to bottom while at 0.23, on my version, the scrollbar is within the application inline with the bottom fields.

image-previewgra33.jpg
image-previewgra33.jpg (301.5 KiB) Viewed 6502 times



I'd check the iFrame code to make sure you dont have Scrollbar selected.

If you go to https://s3-ap-southeast-2.amazonaws.com ... earch.html you can see the placement of the scrollbar.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
VBad
Posts: 29
Joined: Tue Mar 27, 2018 5:52 pm

Thank you, Tony. We will check it.
VBad
Posts: 29
Joined: Tue Mar 27, 2018 5:52 pm

Tony, the scrollbar should be inside the application. But after the search, the scroll bar is missing and the results do not scroll:
<IFRAME src="includes/search.html"width="100%"height="100%"frameborder="no"scrolling="no"></IFRAME>
We made a temporary decision, but it is wrong:
<IFRAME src="includes/search.html"width="100%"height="100%"frameborder="no"scrolling="yes"></IFRAME>
In search.html file:
div.fs1{
width: 100%;
height: 180px;
overflow: auto;
Please tell me what needs to be fixed?
Sincerely, Vladimir
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

The sample iFrame code you supplied has no spaces between functions.
<IFRAME src="includes/search.html"width="100%"height="100%"frameborder="no"scrolling="no"></IFRAME>
It should be;
<IFRAME src="includes/search.html" width="100%" height="100%" frameborder="no" scrolling="no"></IFRAME>
Can you provide me more information on the OS, Browser etc and if possible the skin.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
VBad
Posts: 29
Joined: Tue Mar 27, 2018 5:52 pm

HI Tony. We use Windows_7_64, Google Chrome_80.0.3987.87. I’ll send the skin after working on the bugs (a bit later).
Sincerely, Vladimir
Post Reply