Cloner Option: "Hotspots"

Overview

This “Pano2VR V7” tutorial shows you how to use the new Cloner Option: “Hotspots” to create a dropdown menu displaying a list of Youtube videos that open in a YouTube video player popup window.

Prior to V7 the only source options available were Nodes and Tables. V7 introduces Hotspots, Floorplans and Translations.

Note: this tutorial is designed for Pano2VR V7. You can download the software here. In following these tutorials a working knowledge of Pano2VR is an advantage.

Final Output

Tutorial Files

In the tutorial folder, Cloner_Hotspots, there is an asset Folder with 2 components, links to YouTube videos and a panorama. There is also a V7 Pano2VR project ‘cloned_hotspots_base.p2vr', a skin 'cloned_hotspots_base.ggsk' and an empty output folder called 'cloned_hotspots_v7'. (figure #1)

 

Figure #1: Tutorial Folder

 

Project Overview

In this tutorial, we will modify the cloned_hotspots_base.p2vr project file and the cloned_hotspots_base.ggsk skin by;

Note: this tutorial assumes a basic knowledge of Pano2VR V6

Note: click on any image in the tutorial to enlarge it


Step 1 - Getting Started

1. Download the zipped tutorial folder here

2. Extract the files

3. From the assets > components folder add the two components, ‘show_button.ggskc’ and ‘video_icons.ggskc’ to the Component Toolbox

Note: In this tutorial I have created a category in my Component Toolbox called ‘Cloned Hotspots’ but you can use an existing category or create a new one.

In the finished example I there is a small video icon on the left of the title that changes color on mouse over and a show/hide button to show/hide the Point Hotspots and Hotspot Cloner menu.

If you don’t want to use the components you can skip any reference to them in the tutorial.

If you are unfamiliar with the Component Toolbox or want more information on how Components work in Pano2VR check out this video from Martin Hopkins.


Step 2 - Setting up the Point Hotspots #top

1. Open the cloned_hotspots_base.p2vr into Pano2VR Beta 74a (figure #2)

Figure #2: cloned_hotspots_base.p2vr

Note: The project contains 3 Point Hotspots in the node. The first step is to add YouTube links to each of the Point Hotspots

2. Open the ‘youtube video links.txt’ file found in the assets>youtube links folder into a text editor (figure #3)

 

Figure #3: Youtube links

 

3. Copy the link for the first video

4. Click on the first Point Hotspot to open the Point Hotspot Properties panel

5. Paste the link into the YouTube ID: text field (figure #4)

Figure #4: Add link to the YouTube ID: text field

6. Select return and the Title and YouTube ID are entered into the relevant property fields (figure #5)

 

Figure #5: Video data entered into the Point Hotspot Properties

 

7. Repeat for the other two Point Hotspots adding the video links

8. Save the project as cloned_hotspots_links.p2vr

9. Publish the project to produce the output below

Note: Clicking on a hotspot will open the video player and play the associated video. Clicking on the Close button or the background will close the video and display the Point Hotspots.


Step 3 - Setting up the Hotspot Cloner

1. Open the Skin Editor to show the cloned_hotspots_base.ggsk (figure #6)

Figure #6: cloned_hotspots_base.ggsk

Note: The skin is prepopulated with a Video Popup Silhouette (YouTube) component that is comprised of a Hotspot Template ht_video_youtube and a video_popup_youtube element. The component has been sourced from the Component Toolbox.

2. Select all the elements in the tree, right-click and select ‘Hide in Canvas’ (figure #7)

 

Figure #7 Hide in Cavas

 

Note: This gives us a clean canvas to work on while we create the elements for our cloner

The next step will be to build a button that will be used to display the video icon and title of the link as well as containing the actions to open the video.

3. Add a text box to the canvas and set the following Properties;

Position > ID: hotspot_cloner_video_button
Position > Size: > Width: 250px | Height: 40px
Appearance > Hand Cursor: = checked
Rectangle > Color: Black
Rectangle > Border: Width: 0
Text > Text: $(ctitle)
Text > Color: White
Text > Align: Horizontal: Left | Vertical: Center
Text > Formatting: uncheck = Scroll bar
Text > Formatting: check = Enable trailing ellipses
Text > Padding: top=10 | right = 10 | bottom = 10 | left = 40
Advanced > CSS Classes: title (figure #8)

 

Figure #8: hotspot_cloner_video_button properties

 

Note: $(ctitle) will display the current hotspot title in the cloner and the CSS Classes ‘title’ will use the CSS from the hotspot_cloner_ce Code Element.

The button in the cloner will work in the same way as the Point Hotspots when they are Mouse Clicked. To do this the actions from the Point Hotspot to the button are copied to the button.

4. In the tree, select the ht_video_youtube Hotspot Template element

5. In the Properties > Actions shift select both actions

6. Right-click and select ‘Copy’ (figure #9)

Figure #9: copy actions from the ht_video_youtube Hotspot Template element

7. In the tree, select the hotspot_cloner_video_button element

8. Open the Properties > Action panel, right-click and select ‘Paste’ (figure #10)

Figure #10: paste actions from the ht_video_youtube Hotspot Template element into the hotspot_cloner_video_button element

11. Save the skin as cloned_hotspots_button.ggsk

Note: In my finished sample I have a small video icon on the left of the title that changes color on mouse over and a show/hide button to show/hide the Point Hotspots and Hotspot Cloner menu.

12, Open the Component Toolbox, navigate to the category you saved the components into (figure #11)

 

Figure #11: Component Toolbox

 

13. Double-click on the Video_Icons component to add it to the skin (figure #12)

Figure #12: video_icon component added to the skin

14. Drag the two video icons onto the hotspot_cloner_video_button to make them children of the button

15. Set the following Properties of the video icons to:

Position > Position: X: 5px Y: 0px (figure #13)

Figure #13: video icon added to the button

Note: The video_icon component already has actions to show and hide when the mouse is over the parent so there is nothing more required

The next step is to add and configure the cloner

15. Add a ‘draw cloner’ to the canvas and set the following Properties;

Properties: ID: hotspot_cloner_youtube
Properties > Position: X: 20px Y: 20px
Properties > Size: Width: 450px Height: 45px
Properties > Cloner: Clone Direction: Vertical
Properties > Cloner: Source: Hotspots
Properties > Cloner: Filter: Skin ID: ht_video_youtube (figure #14)

Figure #14: Cloner properties

16. Drag the hotspot_cloner_video_button into the hotspot_cloner_youtube element

17. Select the hotspot_cloner_video_button and set the following Properties:

Properties: Position: X: 0px and Y: 0px
Properties: Position: Size: Width: 100.00 Percent (figure #15)

Figure #15: button added to the cloner

17. Save the skin as cloned_hotspots_cloner.ggsk and close the skin

18, Publish the project to produce the output below

Note: Clicking on either the Cloner Buttons or the Point Hotspots will open the video and player.

in the output we can see both the Cloner Buttons and the Point Hotspot buttons so we will finish up the skin and hide the Point Hotspots, add in some mouse over effects on the Cloner Buttons, scaling options for the button width and a button to show/hide the Point Hotspots and Cloner


Step 4 - Hide the Point Hotspots

1. Open the Skin Editor

2. In the tree select the ht_video_youtube Hotspot Template

3. In Properties set the Properties > Appearance > Visible: = unchecked (figure #16)

Figure #16: uncheck visible to hide the Point Hotspots


Step 5 - Sizing the Cloner Buttons

Note: Set a max and minimum width for the cloner and buttons by adding a container for the hotspot_cloner_youtube element

1. Select ‘Draw Container’ from the menu and drag a rectangle over the hotspot_cloner_youtube element

2. Select the Container 1 element and set the following properties:

Properties: Position: ID: hotspot_cloner
Properties: Position: Size: Width: 40.00 Percent
Properties: Appearance: Alpha: Logic Block: *vis_youtube = true
Properties: Appearance: Alpha: Logic Block: Alpha: = 0.000
Properties: Advanced: CSS Classes: clonerwidth (figure #17)

Figure #17: container properties

Note: ‘clonerwidth’ is a class set in the cloned_hotspots_ce code elements file and sets a max-width: 450px and a min-width: 360px.

3. Select the hotspot_cloner_youtube element and set the following properties:

Properties: Position: Size: Width: 100.00 Percent (figure #18)

Figure #18: set properties for hotspot_cloner_youtube element


Step 6 - Mouse Over Effects

Note: Add Mouse Over effects to the cloner button

1. Select the hotspot_cloner_video_button element and set the following properties:

Properties: Rectangle: Color: Logic Block: Mouse Over = true
Properties: Rectangle: Color: Logic Block: Background Color: HTML: #aaaa7f
Properties: Text: Color: Logic Block: Mouse Over = true
Properties: Rectangle: Color: Logic Block: Background Color: HTML: #000000 (figure #19)

Figure #19: Mouse Over colors for the cloner button


Step 7 - Show and Hide

Step 4d: The example shown at the beginning of the tutorial has a button that shows/hides the Point Hotspots or Hotspot Cloner. This is only an example to show the Hotspots Cloner vs Point Hotspots but could easily be modified to create an option whereby the desktop showed the Point Hotspots but a Mobile Device showed the Hotspot Cloner menu.

1, Open the Component Toolbox, navigate to the category where you saved the components and select the Show Cloner - Show Hotspots component (figure #20)

 

Figure #20 component Show Cloner - Show Hotspots

 

2. Double-click on the Show Cloner - Show Hotspots component to add it to the skin

Note: The component will appear in the tree as a container called ‘buttons’ (figure #21)

Figure #21: component added to the skin

Note: The Show Cloner - Show Hotspots component add two new variables to the skin, vis_cloner and vis_hotspots. The hotspot_cloner and ht_video_youtube elements need to use these variables to affect their visibility.

3. Select the hotspot_cloner container and set the following properties:

Properties: Appearance: Visible: = unchecked
Properties: Appearance: Visible: Logic Block: *vis_cloner = true
Properties: Appearance: Visible: Logic Block: Visible: = true (figure #22)

Figure #22: applying variable to hotspot_cloner

4. Select the ht_video_youtube Hotspot Template and set the following properties:

Properties: Appearance: Visible: Logic Block: *vis_hotspots = true
Properties: Appearance: Visible: Logic Block: Visible: = true (figure #23)

Figure #23: applying variable to ht_video_youtube

5. Save the skin as cloned_hotspots_final.ggsk and close the skin

6. Publish the project and the tutorial is finished.


Summary

"Hey there! 👋 If my tutorials have made your tech life a little easier (or a lot less confusing), consider buying me a virtual coffee! ☕️ Retirement means more time to help you, but sadly, less income for snacks. Click the Donation button 🙌 and thanks for the love!"

I'd like to donate

Using Ai to create Animated SVG's

Using Ai to create Animated SVG's

Let me preface this post by saying that I love the way AI can help us accomplish many of the tasks we need to do to realise our design/development goals. Let me also say I love using SVG files in Pano2VR for their resolution independence and the flexibility they offer.

This tutorial will use Le Chat AI features to update SVG files developed in Adobe Illustrator. From there we will create Custom Hotspot Templates, add them to the skin and project and expose the colors so we can customise the SVG files.

ngrok & Live Update - Mac

ngrok & Live Update - Mac

Pano2VR recently released a new beta version, Pano2VR 7.1. In a recent webinar, What’s New in Pano2VR 7.1, Martin Hopkins showed us how to use an application called ngrok. He demonstrated how remote locations can connect their local devices to your Pano2VR application running on your localhost via a URL and automatically update using Live Update.

In this tutorial, I’ll take you step-by-step through the process described by Martin in the video.

In it, I’ll cover the following topics;

  • Requirements

  • What does ngrok do?

  • Advantages of using ngrok

  • Limitations of Tunnel

  • Signing up to ngrok

  • Installing ngrok

  • Sharing a Project

  • Using a Rebrandly URL Shortener

Intro Animation with Fading Text and a Projection Button - Part One

Intro Animation with Fading Text and a Projection Button - Part One

This two-part “Pano2VR” Intro Animation with Fading Text and a Projection Button tutorial shows you how to create an animated opener that starts as a Little Planet (Stereographic projection) and, over 10 seconds, ends as a Flat (Rectilinear projection) panorama.

During the transition, a text block fades in and out and disappears at the end of the animation, and a small button that allows you to change the projection type appears.

Intro Animation with Fading Text and a Projection Button - Part Two

Intro Animation with Fading Text and a Projection Button - Part Two

This is part two of the “Pano2VR” Intro Animation with Fading Text and a Projection Button tutorial, which shows you how to create an animated opener that starts as a little planet (stereographic) and, over 10 seconds, ends as a flat (rectilinear) panorama. During the transition, a text block fades in and out and disappears at the end of the animation, and a small button that allows you to change the projection type appears.

Creating a Split-Screen Effect in V6 or V7

Creating a Split-Screen Effect in V6 or V7

If you need to compare two 360˚ panoramas side-by-side on a screen, this tutorial will provide step-by-step instructions on creating the files required to achieve the Split-Screen effect.

Two panoramas will be displayed; the left will display a skin that will control the view of the right panorama to match that of the left one reflecting any of the functions enabled in the skin.

Category Menu with Node Popup

Category Menu with Node Popup

This “Pano2VR” tutorial shows you how to use Cloners to create a Category Menu and a Popup window in Pano2VR V7.0.1. The Category Menu will open a popup window with information and clickable node images related to the selected category. Clicking on a node image will take you to that node. Active nodes will have highlighted text and a tick to indicate they have been visited.

Hotspot Templates and iFrames - Update 4/10/21

Hotspot Templates and iFrames - Update 4/10/21

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 template and external .html files with multiple hotspots.

This update details how to add the external HTML files to the assets folder in the output project using the Output > Advanced panel. Adding them this way a Garden Gnome Package Output will correctly show the HTML files in the iFrame.

Building a Desktop App (Windows 10)

Building a Desktop App (Windows 10)

Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.

This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.

Building a Desktop App (Mac)

Building a Desktop App (Mac)

Sometimes your client and/or project requires not only an offline project but also one that doesn’t require a web browser when outputting to HTML5.

This “Pano2VR” tutorial shows you how to Create a Desktop app suitable for use on a desktop Mac and works with both Pano2VR and Object2VR projects. The tutorial is based upon the original published by Garden Gnome Software on their website at https://ggnome.com/doc/tip-desktop-app/.

Trimming the Tree - Part 1

Trimming the Tree - Part 1

Once you start working in Pano2VR you quickly realise that the Skin Editor is a very powerful part of the software application. The Skin Editor allows us to create unique User Interfaces and Interactivity inside our tours.

However during the development of a project the skin can be quite complex and requires the management of a large number of skin elements, such as interactive Components, Actions and Logic Blocks.

In this tutorial I’m going to take a look at a process that I call “Trimming the Tree”. Step by step you will learn how to reduce the number of elements that have similar functionality reducing the number of elements by over 50%.

Blurred Panorama Background

Blurred Panorama Background

This “Pano2VR” tutorial will take you through the steps on creating a custom skin with the ability to blur and desaturate the current node panorama. The effect, activated by an Action in the skin, applies CSS Filters, Blur and Grayscale, to the current node panorama. A simple tint option is also available.

In this tutorial we will modify the tutorial project file by;

  • Adding Custom Node ID’s

  • Enabling Direct Node Access

    and modify the tutorial skin by:

  • Creating an iFrame that loads another instance of the node panorama

  • Apply CSS Filters

  • Add a Screentint

  • Add an Impermeable element

  • Add a Timer

  • Add Logic Blocks and Actions to control the blur and tint

Note: this tutorial assumes a basic knowledge of Pano2VR V6

Responsive Animated Lower Third Banner - Part 1

Responsive Animated Lower Third Banner - Part 1

This two part “Pano2VR” tutorial show you how to animate a multilevel Lower Third Banner that is responsive to mobile devices such as smartphones.

In the first part of this tutorial we will modify the project skin by;

  • Setting the Z-index of elements in the lower third to manage the stacking order

  • Adding Timers and configuring them to move/change elements in a sequence