J3dv JavaScript Library
A collection of JavaScript-based functions and solutions that extend 3DVista Virtual Tour Pro beyond its standard capabilities.
The library combines prior expertise in building interactive experiences with VTP's underlying framework, adding functionality the platform does not provide natively.
01 — Overview
What the library provides
The J3dv JavaScript Library is a collection of JavaScript-based functions and solutions intended to work with 3DVista Virtual Tour Pro. It provides solutions for a number of technical challenges, including:
- Programmatic control over specific functionality in the VTP player
- Sophisticated, high-level solutions such as search, social media sharing, user activity management, slide shows, and more
- Integration with popular services including YouTube, Vimeo, Google Sheets, Google Maps, Mapbox, tawk.to chat, IFTTT, and others
02 — Licensing
Licensed software
The J3dv JavaScript Library is licensed software and is provided as a compiled and obfuscated component intended for those comfortable working with JavaScript. Please review the license agreement for detailed information regarding licensing terms.
The cost for licensing depends on the specific functionality included in the project-specific library component custom built for each deployment. Please contact me via Facebook DM @jeffabruce or by visiting jeffbruce.com to discuss specific details, costs, limitations, and restrictions for your project.
03 — Samples
Capability samples
Each sample is a small demonstration of one or more capabilities built with the J3dv JavaScript Library.
-
Active Visitors
Demonstrates the ability to show the number of simultaneous visitors in a specific pano of the tour.
-
Animated Hotspot
This sample demonstrates the ability to animate hotspots programmatically. There are NO animated GIFs or APNGs used in this sample.
-
Animated View
This sample demonstrates animating the starting view. You should first load this sample without parameters to see the "default view". Then, reload the page adding URL parameters like "animate-to-hotspot=empire" or "animate-to-hotspot=wtc" to see how the view can be made to animate to a particular hotspot. The default animation uses a "slow in/out easing" over 5 seconds.
-
Autopilot Inactivity Timeout
This sample demonstrates the ability to start/stop auto pilot and hide/show hotspots based on user activity. If you interact with the sample, auto pilot will stop and hotspots will appear. If you are inactive for 10 seconds, auto pilot will resume and the hotspots will disappear.
-
Chat
Integrates the very popular tawk.to chat service.
-
Chatwoot
Integrates the very popular Chatwoot chat service.
-
Comments
Demonstrates a very basic strategy to add "comments" to items in a tour. The comments are stored in a live, server-side database. In a real world project you might want to have user registration, comments reviews, admin control, etc.
-
Compass Component
Demonstrates a component that displays the "compass direction" of the current view.
-
Copy/Paste
This sample demonstrates the ability to copy text from a VTP multiline text skin component. Click the 'Copy' button to copy the text. Switch to some other tool like Windows Notepad and paste the copy buffer to see that the buffer contained the proper text.
-
Dropdown
Demonstrates the ability to create a more advanced UX through UI components such as "dropdown" or "select" elements.
-
Dropdown Hotspots
This sample demonstrates the ability to create a more advanced UX through UI components such as a "dropdown" or "select" element. Select items from the dropdown to change the panorama. Use the search/filter feature to search for specific items.
-
Dynamic Text and Image Sample
This sample demonstrates the ability to use dynamic data as the content for information popups.
-
Effects
This sample demonstrates the ability to dynamically apply an effect to the VTP content. Simply click the 'Start Effect' button and observe the content.
-
Escape Room
Demonstrates features that might be used in a "virtual escape room". For example, VTP doesn't currently have any native support for "input fields" allowing users to enter text-based responses. This sample demonstrates adding a text input field requiring a specific value to advance to the next pano.
-
Floorplan Visited Hotspots
This sample demonstrates the ability to indicate that a panorama was "visited" by dynamically changing floorplan hotspots. In this sample there are 3 panoramas, one each for the cities of New York, Miami, and San Francisco. The application starts in New York and you will notice the marker on the floorplan/map is "blue" to indicate it corresponds to the active/visible panorama. Markers that are "red" indicate the panorama has not been visited. Markers that are "green" indicate the panorama has been visited. As you navigate from one panorama to another (either using the labeled buttons or the floorplan hotspots), notice the hotspots/markers "change colors" to appropriately indicate the visited state. To reset the state as if nothing was visited, click the "Reset" button.
-
Glassmorphism
Demonstrates popular "glassmorphism" in modern UI design.
-
Google Maps
Demonstrates integration with Google Maps and provides the capability to show/hide Google Maps "markers".
-
Google Maps Floorplan
Demonstrates floorplan integration with Google Maps.
-
Google Maps Highlight
Demonstrates the integration with Google Maps and highlight the current pano "location".
-
Google Sheets
Demonstrates the integration with Google Sheets and the ability to obtain data from a Google Sheet document.
-
Google Sheets Hotspots
This sample demonstrates using Google Sheets to dynamically change elements within a tour. In this sample, several buildings have their "sale status" indicated by overlaying colored polygons. "Green" indicates the building is "available". "Yellow" indicates the building is "pending". "Red" indicates the building is "sold". Change the "Status" values in the Google Sheet and refresh the tour to see the updated status within the tour.
-
Hotspot By Spreadsheet
This sample demonstrates the ability to obtain data from a Google Sheet document and use it to set hotspot locations. The data is coming from here: https://docs.google.com/spreadsheets/d/1A93KYkCZWDYCtYw-pz_MIQBBmNJP9Tsan-3vyJnDx8I/edit?usp=sharing If you edit the data, you will need to reload the sample page to see the new hotspot locations.
-
Hotspot On View
This sample demonstrates the ability to control hotspots based on the current view.
-
Hotspot State
This sample demonstrates the ability to save and restore the state of hotspots using local storage.
-
IFTTT
Demonstrates integration with the popular IFTTT service. The sample shows how real world, physical object can be used to affect their digital counterpart. In addition, the sample integrates with live data services to provide real-time temperature data.
-
Image Carousel
Creates an experience similar to PowerPoint by allowing the user to navigate a series of "slides". In this sample there are only 3 slides, but the concept easily extends to any number of slides. And while it is fairly easy to create "image carousels" with other strategies, the goal here was to make the slides appear "pinned" to the pano.
-
Image Comparison Sample
This sample demonstrates the ability to create custom popups and components such as this "image comparison" slider.
-
Image Slider
Creates an alternative component to the native photo album component. This image slider component allows users to slide *any* VTP skin elements (including buttons) in any layout rather than the single image used by the VTP photo album.
-
Inactivity Timeout
Demonstrates the ability to trigger actions upon detecting no user activity after a configurable amount of time. When implementing tour "reset" functionality, using inactivity is a far superior option compared to simply using time alone.
-
Local Storage
Demonstrates using local storage to keep temporary "user state" information such as whether a user has already visited a site. Often, it is desirable to have a web application behave differently based on whether a user has already visited or made specific choices in the application.
-
Mapbox
Demonstrates integration with the popular Mapbox service.
-
Menu Builder
This sample demonstrates a menuing system built using a combination of VTP native functionality and JavaScript. The menu structure, labels for the menu items, and all "actions" actually come from within the VTP authoring environment. Custom JavaScript uses this data to build a menu system. So, non-programmers can easily make customizations right from within VTP without any additional coding or requiring external data sets.
-
Menu Builder 2
This sample demonstrates a menuing system built using a combination of VTP native functionality and JavaScript. The menu structure, labels for the menu items, and all "actions" actually come from within the VTP authoring environment. Custom JavaScript uses this data to build a menu system. So, non-programmers can easily make customizations right from within VTP without any additional coding or requiring external data sets.
-
Model Viewer
Demonstrates integration with Google model-viewer service to create a "dollhouse-like" experience.
-
Random Text
This sample takes random quotes from a data file and displays them.
-
Random Video
Demonstrates the ability to use randomization to change the order in which videos are played.
-
Search
Demonstrates "full text" search functionality. The searchable text is *not* simply limited to the names of the panoramas and hotspots. Rather, the full description text associated with items is searched for keywords.
-
Share
Demonstrates "sharing" functionality using popular social media sharing services.
-
Slider Control
Demonstrates a custom slider component (using jQueryUI) to control which hotspots are visible.
-
Smoke
Demonstrates the ability to create very specialized visual effects like this "smoke" effect.
-
Subtitle
Demonstrates fully customizable subtitles for videos. This sample was created before VTP had support for subtitles. It is still relevant today since the VTP native feature doesn't allow customization.
-
Swiper
Demonstrates integration with popular Swiper JavaScript library which is primarily used for image sliding functionality (and is similar to the native VTP photo album, but with a ton more features and capabilities).
-
Tooltips from Sheet
This sample demonstrates assigning tooltips to hotspots dynamically using a GoogleSheet (https://docs.google.com/spreadsheets/d/1TTGnveeeQHvID_sJgXyZDU0omJ9P01vwKG6VkKPZh50/edit?usp=sharing) as the source of the tooltip text. Note: Tooltip data is read on start only. So, you must reload the sample after making any changes.
-
URL Change
Demonstrates the ability to maintain the current view information in the browser address bar such that you can copy and paste the URL to return to the view. You could also send the URL to someone which would then cause their tour view to match the same view.
-
Video End
Demonstrates the ability to trigger activity based on the status of external video services like YouTube and Vimeo. Notice how the "popup" is automatically closed when the video reaches the end.
-
Video FF/REW
Demonstrates the ability to create "fast forward" and "rewind" functionality for videos.
-
Video Pano to Pano
Demonstrates the ability to continue video playing when navigating between panos. Note that this sample was created prior to 3dVista adding native support for similar functionality.
-
Video PPT
Demonstrates the ability to create a "PowerPoint-like" slideshow with advanced transitions between slides.
-
Video Sync
This sample demonstrates synchronizing 2 different instances of a video. One video is a hotspot and the other is a video in a skin popup. Click the "expand" icon to see the video in the popup. Click on the videos to play/pause and open/close the popup. Notice how the state of the video and position are synchronized between the two different instances of the video.
-
View Controller Sample
Demonstrates a "View Controller" component that allows users to easily change the view direction, field of view, and pano.
-
View Controller Sample 2
Demonstrates a "View Controller" component that allows users to easily change the view direction, field of view, and pano. Similar to the original sample but includes a rotatable direction disk rather than buttons.
-
Visitor Count
Demonstrates the ability to show the total number of visitors to a tour.
-
YouTube Control
Demonstrates the ability to control YouTube content from within VTP.
-
Zoom to Hotspot Effect
This sample demonstrates a "zoom to hotspot" effect which can also trigger an info panel. Simply click the 'Zoom To' button and observe the content. To return to your previous view, click the 'Zoom From' button.
04 — Capabilities
A plug-in component model
The "Core" module includes functions to initialize the library and validate the license, obtain other plug-in components, and provides basic debugging methods. Additional functionality is delivered as focused plug-ins spanning navigation, media, third-party integrations, engagement features, and general-purpose utilities. Each project-specific library is built with only the modules it needs.
Navigation & UI
- NavPanorama navigation, hotspots, deep links, view state
- DOMCreate and manage HTML elements
- PopupShow and hide HTML-based popups
- LabelSet and get text in VTP components
- ListList management and randomization
Media
- AudioControl VTP audio components
- VideoControl video components
- Video SlidesA PowerPoint-like experience from video
- VidyardShow and hide Vidyard video components
Integrations
- Google MapsMaps, markers, and location highlighting
- Google SheetsRead and write data in Google Sheets
- Model ViewerGoogle Model Viewer 3D models
- Server RequestCommunicate with remote services over HTTP
Engagement & Effects
- ActivityDetect user activity and inactivity
- EffectsHigh-level screen effects
- SearchFull-text search across tour content
- ShareSocial media sharing integrations
Data & Utility
- JSONLoad data in JSON format
- Local StoragePersist data across browsing sessions
- CryptoData encryption and decryption
- String TableString management for easier translation
- MiscBrowser orientation, autoplay, and more