Auto Resizing PDF in a Hotspot Popup

Auto Resizing PDF in a Hotspot Popup

This tutorial provides a step-by-step instructions on how to open an Adobe PDF file into a hotspot template and have the popup and PDF scale as the browser window is resized.

Update 15/10/18: A solution for this issue has been provided at the end of the tutorial

Note: at this time the option to load an original PDF file into a hotspot is only available on the desktop. I’ll be posting an alternative ‘Mobile’ friendly addendum to this tutorial shortly.

P2VR Fullscreen Image Viewer - Multiple Images & Thumbnails - Part 1

P2VR Fullscreen Image Viewer - Multiple Images & Thumbnails - Part 1

This two part tutorial starts where P2VR Fullscreen Image Viewer - Part 2 finished and expands on the single image viewer by showing how to create and manage a viewer that has multiple images contained within it and displays preview thumbnails of the images associated with each hotspot.

This is Part 1 of the tutorial we will modify the 'Flat Image' Pano2VR project from the ‘P2VR Fullscreen Image Viewer’ tutorial by;

  • importing two additional flat images

  • setting uniform viewing parameters across the nodes

  • enabling Direct Node Access

  • creating the thumbnail images

  • generating the 'flat image' output

Part 2 of the tutorial can be found here

P2VR Fullscreen Image Viewer - Multiple Images & Thumbnails - Part 2

P2VR Fullscreen Image Viewer - Multiple Images & Thumbnails - Part 2

This two part tutorial starts where P2VR Fullscreen Image Viewer - Part 2 finished and expands on the single image viewer by showing how to create and manage a viewer that has multiple images contained within it and displays preview thumbnails of the images associated with each hotspot.

This is Part 2 of the tutorial in which we modify the 'Equirectangular Image' Pano2VR project from the ‘P2VR Fullscreen Image Viewer’ tutorial by;

  • add additional 'point hotspots' for the new images

  • add additional content to the  'Properties - Point Hotspot'

  • create a 'hotspot_preview' folder and elements in the skin that manages the thumbnail and title previews

  • change the hotspot icon

  • generate the 'equirectangular' output and review the final project

  • fix a preview thumbnail issue in the Firefox browse

Part 1 of the tutorial can be found here

P2VR Fullscreen Image Viewer - Part 1

P2VR Fullscreen Image Viewer - Part 1

This, two part tutorial, shows how to create a project that contains an image viewer that can be opened via a hotspot. The image viewer zooms to fullscreen and displays an image that can be zoomed in to and out of and panned around using both mouse and touch.

No external applications are required and the whole tutorial is built using the tools within Pano2VR. There is a downloadable ‘Tutorial Folder’ with sample equirectangular and flat images and a skin component to provide the zoom and pan tools for the image.

A shout-out to  Jaroslav Pindora's solution to the hotspot image zoom and pan using just the tools within Pano2VR.

P2VR Fullscreen Image Viewer - Part 2

P2VR Fullscreen Image Viewer - Part 2

This, two part tutorial, shows how to create a project that contains an image viewer that can be opened via a hotspot. The image viewer zooms to fullscreen and displays an image that can be zoomed in to and out of and panned around using both mouse and touch.

No external applications are required and the whole tutorial is built using the tools within Pano2VR. There is a downloadable ‘Tutorial Folder’ with sample equirectangular and flat images and a skin component to provide the zoom and pan tools for the image.

A shout-out to Jaroslav Pindora (P2VR Facebook User Group) solution to the hotspot image zoom and pan using just the tools within Pano2VR.

Hotspot Fullscreen Image with Zoom and Pan

Hotspot Fullscreen Image with Zoom and Pan

Pano2VR provides a very comprehensive Skin Editor that allows a user to create unique interactive environments. However there may be occasions when you need to integrate external applications to extend the program and there are a number of ways to do so in Pano2VR.

This tutorial show you how to create a point hotspot and integrate a third party image viewer application that opens an image that fills the current screen. Once the image has opened the user can then zoom in and out of the image and pan around it using a mouse or by touch on a mobile device.

Zooming Popup with Reveal Text Overlay - Part 1

Zooming Popup with Reveal Text Overlay - Part 1

Using Point Hotspots to deliver contextual content is a great way to make your Virtual Reality tours more interactive and provide an enhanced experience for the viewer. One of the most effective options is to zoom up an image based on a mouse click. This option can highlight and provide information on specific areas of your panorama. This long form step-by-step tutorial takes you through building the image file, adding in zoom capabilities and a mouse over text reveal. This tutorial is presented in two parts, this is Part 1

Zooming Popup with Reveal Text Overlay - Part 2

Zooming Popup with Reveal Text Overlay - Part 2

Using Point Hotspots to deliver contextual content is a great way to make your Virtual Reality tours more interactive and provide an enhanced experience for the viewer. One of the most effective options is to zoom up an image based on a mouse click. This option can highlight and provide information on specific areas of your panorama. This long form step-by-step tutorial takes you through building the image file, adding in zoom capabilities and a mouse over text reveal. This tutorial is presented in two parts, this is Part 2

Hotspot Templates and iFrames

Hotspot Templates and iFrames

Using Point Hotspots to deliver contextual content is a great way to make your Virtual Reality tours more interactive and provide an enhanced experience for the viewer. The most convenient way to create and deliver the content is by employing .html files and iFrames within the hotspots. Rather than create and manage multiple hotspots this tutorial shows how to use a single point hotspot and external .html files.

An Unexpected Benefit of Multi-Resolution in Pano2VR projects - Part 1.

An Unexpected Benefit of Multi-Resolution in Pano2VR projects - Part 1.

This tutorial takes you, step-by-step through the process of calculating your multi-resolution tile and level sizes to create the perfect set of tiles for your project. We hope you will never need it but we look at extracting the high resolution tiles, renaming them and finally re-assembling them to restore your equirectangular image.

This tutorial is broken down into 3 parts, this is Part 1: Creating the Tile Size and Levels. The other parts are;

Part 1: Creating the Tile Size and Levels
Part 2: Extracting and renaming the Tiles
Part 3. Reconstructing the Panorama

An Unexpected Benefit of Multi-Resolution in Pano2VR projects - Part 2.

An Unexpected Benefit of Multi-Resolution in Pano2VR projects - Part 2.

This tutorial takes you, step-by-step through the process of calculating your multi-resolution tile and level sizes to create the perfect set of tiles for your project. We hope you will never need it but we look at extracting the high resolution tiles, renaming them and finally re-assembling them to restore your equirectangular image.

This tutorial is broken down into 3 parts, this is Part 2: Extracting and Renaming the Tiles. The other parts are;

Part 1. Create the Tile Size and Levels
Part 2: Extracting and renaming the Tiles
Part 3. Reconstructing the Panorama

An Unexpected Benefit of Multi-Resolution in Pano2VR projects - Part 3.

An Unexpected Benefit of Multi-Resolution in Pano2VR projects - Part 3.

This tutorial takes you, step-by-step through the process of calculating your multi-resolution tile and level sizes to create the perfect set of tiles for your project. We hope you will never need it but we look at extracting the high resolution tiles, renaming them and finally re-assembling them to restore your equirectangular image.

This tutorial is broken down into 3 parts, this is Part 2: Extracting and Renaming the Tiles. The other parts are;

Part 1. Create the Tile Size and Levels
Part 2: Extracting and renaming the Tiles
Part 3. Reconstructing the Panorama

Scrolling iFrames in a Gallery Component - Part 2

Scrolling iFrames in a Gallery Component - Part 2

This two-part tutorial covers the implementation of scrollable iFrames within the built-in Gallery Simplex Component. It was developed in response to a Pano2VR forum post in regard to loading external web pages into the gallery and then a further discussion on how to enable scrolling on iOS devices.

If the standard method of loading web pages into a text box is used, scrolling will be available on the desktop but not on iOS devices. To enable the scroll function on iOS requires some workarounds that this tutorial will cover in detail. 

Scrolling iFrames in a Gallery Component - Part 1

Scrolling iFrames in a  Gallery Component - Part 1

This two-part tutorial covers the implementation of scrollable iFrames within the built-in Gallery Simplex Component. It was developed in response to a Pano2VR forum post in regard to loading external web pages into the gallery and then a further discussion on how to enable scrolling on iOS devices.

If the standard method of loading web pages into a text box is used, scrolling will be available on the desktop but not on iOS devices. To enable the scroll function on iOS requires some workarounds that this tutorial will cover in detail. 

Converting .TTF & .OTF fonts to .WOFF

Converting .TTF & .OTF fonts to .WOFF

In the tutorial "Styling Text with CSS and Local Fonts" the fonts I use are in a file format .WOFF. This tutorial describes the conversion process using an online converter, developed by Andrew Sunto generate fonts suitable for use in the tutorial

Using specific or custom fonts are among the most potentially appealing aspects of CSS3 for designers creating skins within Pano2VR. With the @font-face rule, you can render any font you have online within your text, regardless of whether the user has it installed or not. 

Styling Text with CSS and Local Fonts

Styling Text with CSS and Local Fonts

When developing virtual tours for clients there is often the need to create unique user interface elements (skins) that on many occasions may require the use of a custom font. 

The best way to ensure consistency across browsers is to use a Local Font file and CSS to style the text. In this tutorial I'm going to style the text on a button and a popup information block using the local font file/css method.

This tutorial is designed for Pano2VR V5, if you don't have a the application you can download a trial version.

Managing Branded Accounts - Google Street View

Managing Branded Accounts - Google Street View

With the shuttering of Google's Street View online publishing tools and the development by Pano2VR of an integrated publishing system there is now a simple efficient method to publish single and multiple node panoramic tours to Google Maps. 

This blog describes how to set up and activate Branded Accounts for use within Pano2VR's Google Street View functionality.

Note: This tutorial is only relevant if the Branded Account was created when setting a password was an option in the Branded Account management console. Recent changes to Branded Accounts don't have unique logins and can only be accessed by the users main login/password.