Pano2VR is an application to convert spherical or cylindrical panoramic images into HTML5 VR Tours with features such as customizable skins, tour building, multiresolution, hotspots and directional sound. Little Bits are smaller tutorials related to a specific function or workflow.
The Polygon Hotspot Textbox is a built-in tooltip or information display that appears when a user hovers their mouse over a polygon hotspot. This built-in textbox primarily displays the Title of the polygon hotspot as a tooltip when hovered over.
However styling is quite limited so this “Little Bits” tutorial will show you how to create Font Styles for Polygon Hotspot Textboxes.
This “Little Bits” tutorial will show you how to use the same SVG file to add a mouse-over effect with a different colour.
Adding an SVG mouse-over option with alternate color can be a bit confusing and this tutorial shows, step-by-step, how to add the svg and setup the colors as well as how to expose them for future modifications.
In response to a post on the Pano2VR Users Group on Facebook, I posted a link to a test .ggpkg file I’d uploaded to a bucket on S3 and I was curious to see if I could download and publish it directly from the Facebook link using my Samsung S8.
Note: I’m using an Samsung S8, the package is “Bali to Cairns” and this tutorial was updated on the 19th January 2023
UPDATE 30th March 2022: I’ve updated the tutorial to include the use of Hotspot Node Buttons.
This “little bit's” tutorial shows you a little trick on how to create a skin template that can be re-used on different tours without having to change or modify the skin.
In this tutorial, we will modify the project file and the skin by;
Adding a Custom Node ID to one of the 3 nodes in the Tour Browser
Setting our output to include ‘Direct Node Access’
Adding an Action to the Home button to directly access that node
Adding Actions to the previous/next buttons to resolve an issue with Direct Node Access
Adding an Action to the ht_node Hotspot Template to resolve and issue with Direct Node Access
This “Little Bits” tutorial will show you how to add a Twitter Timeline to your project skin and reveal it with a mouse click. In addition, the tutorial also covers functions such as adding SVG and using it as a button, setting a variable to control the visibility of multiple elements, styling a Text Box with CSS, creating an animated reveal and creating a proportional scaling Text Box.
