Hotspot with Image and Description

Q&A about the latest versions
elias.kateb
Posts: 4
Joined: Thu May 03, 2018 10:04 am

Hello,

I would like to create a hotspot that, when you click on it, pops-up an image with its title and description next to it.
So basically, if I add an image hotspot (ht_image) in my panorama - using 'silhouette.ggsk' skin -, how is it possible to make the Title and Description of that image appear next to it? - just like an Info hotspot format (ht_info).

Moreover, when opening an Info hotspot, you can click anywhere on the screen to close it.
How can we do the same for a Image hotspot - instead of clicking only on the 'X' in the top right corner of the screen to close it?

Thanks a lot,

Elias
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Elias,
Built with Pano2VR 6 Pro.
If your using V5 then you need to change the placeholders.
The image popup uses the URL text field for the file path to the image.
You can use the description text field for body text and the title to text title.
Please find attached a project.
How it works: The Hotspot Template has Set Value actions to read the Title and Description text and using the place holders $(hs) and $(hd) write it to the text boxes.
So the image does not spill over the text boxes the externes loader, the element that displays the image and its parent container have a fixed size. To make it responsive I use a scale logic block detecting player width in the container.
And Im using some CSS to format the text as found in the text box properties.
Regards,
Hopki
Attachments
ImagePopupWithText.zip
(279.54 KiB) Downloaded 425 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
JeuElissen
Posts: 3
Joined: Thu Sep 20, 2018 4:46 pm
Contact:

Hi all,


I tried to use the image popup with text but I can't get it to work. After adding it with the component toolbox there are two ht_image hotspot icons present. Do I have to remove the existing one? The image popup opens with only the text. Where the image should appear there's a spinning circle off little balls. Excuse my ignorance but I'm totally new to PanoV2r,




JeuElissen
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi JeuElissen,
After adding it with the component toolbox there are two ht_image hotspot icons present. Do I have to remove the existing one?
When you say there are two ht_image hotspot icons present I presume you are loading one of the skins that come with Pano2VR eg simplex_V6.ggsk. This skin has a full complement of components, including the ht_image hotspot template, so just remove the old one.
The image popup opens with only the text. Where the image should appear there's a spinning circle off little balls
Looks like the image hasn't been associated with the hotspot.Select the Hotspot in the Viewer and in Properties-Point Hotspot/Link Target URL: make sure you have linked to the image you want to display.

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/
User avatar
JeuElissen
Posts: 3
Joined: Thu Sep 20, 2018 4:46 pm
Contact:

Hi Tony,

Thanks for your help. The link to the image I want to display is valid. I am working with PanoV2r 6 and I added the the info_popup_picture.ggsk to the Components Toolbox. Then I Removed the original ht_image hotspot, slected the silhouette_v6.ggsk skin and added the component to the skin. Now a message popup "The component needs to add a variable (vis_image_popup) which is already defined in your skin. Do you want to rename the variable in the component or let it use the variable in your skin?". I tried both options but the result is negative. I also tried if I could get it to work with version 5 of Pv2r but that also didn't work. For now I'm taking a brake because this issue kept me busy for the greater part of the last 3 days. In few days I'm taking a new attempt.


Jeu
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
"The component needs to add a variable (vis_image_popup) which is already defined in your skin. Do you want to rename the variable in the component or let it use the variable in your skin?".
What this means is that the skin you are placing the component into already has a variable "named" the same as the one attached to the component you are placing. As it's the same variable you want to select "use the variable in your skin".

I'd be happy to take a look at the skin if you want to attach it or email it to me.

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/
User avatar
JeuElissen
Posts: 3
Joined: Thu Sep 20, 2018 4:46 pm
Contact:

Hello Tony,



I took the wrong approach. I had an existing skin I already edited and adapted. Then i put in the to component converted "info_popup_picture.ggsk" which caused the problems. What I should have done is selecting the "info_popup_picture.ggsk" as skin for a new panorama and expand it further from there with icon bar and other elements i want. And that went very well and now it's going OK and I have my image popups with text. :) Thanks again.



Jeu
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Jeu,

Good to hear. That's what I love about Pano2VR, there is always an alternative way to approach a problem. I often create small sections of a skin and then combine them to form a larger version. It also helps if you get into the habit of creating and saving components to reuse in other projects.

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/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

I've just read your blog article about polygon hotspots & information popups ( https://tonyredhead.com/pano2vr/polygon-hotspots-proxy )

I followed all your instructions from scratch and it worked perfectly.

Then I load a skin called: silhouette_autohide.ggsk. From that point I started following your steps from the skin editor...I inserted the "Information popup silhoutte", created the container, deleted the ht_info element..and everything up to the point where I had to add the actions for the "container1"..When I was adding the target for the action "Mouse Over", it gave me a warning saying:

"The target element is dynamically cloned in the browser and must be addressed using expressions. Click the warning icon to convert the target ID to a regular expression.

So when I click the warning icon, the target was converted from "tooltip" to "#tooltip"

I finished all the instructions and then generated the output...

In my new output, everything is working as per your instructions except that when I click on the polygon hotspot, the box that opens up does not have any descriptions.

I would really appreciate if you can provide any support here.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi edgar_ali,

Easy fix. The issue comes about because the 'silhouette_autohide.ggsk' already contains all the elements of an 'Information Popup Silhouette' component.

The easy way around this is to add an additional step to the process to create a unique 'info component'.

At step #3. where you 'Double click on the component to add it to the skin' do the following before you go to the next step #4.

1. Rename the information container to information_poly
2. Rename all the components within the information_poly container by adding '_poly' to the end of their names, ie info_text_body_poly

At step #6, where you Select the Container1 element and paste the two actions into its Action Properties do the following before you go to the next step #7

1. After copying the two Actions from the ht_info hotspot template and pasting them into the Container1 Actions modify the Mouse Click | Set Value | $(hd) | info_text_body to info_text_body_poly

At step #9, where you Click on ‘Draw Text Field’ and click once in the canvas to add a text field do the following

1. Change the Text1 ID to = tooltip_poly

Now you have an info component that is different from the one that's included in the base skin

I've attached the updated silhoutte_autohide.ggsk skin so you can see the changes.

cheers,

Tony
Attachments
poly-working.ggsk
(52.1 KiB) Downloaded 187 times
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/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thank you very much for such a quick reply...

Followed all your steps and now it works perfectly...

I would only add a little comment for the people who just started following this post and it is that at the step 11 of your blog post (https://tonyredhead.com/pano2vr/polygon-hotspots-proxy) you need to set the target as "tooltip_poly" instead of "tooltip".

Now that I have overcome this hassle, I was wondering if you could help me out with something else, now that i have set up that action for the polygons, I would like to add a logo that synchronize with the menu bottom and that when the menu hide (autohide) the logo hide together with the menu...

Explained again...currently using the template for the autohide menu, I just want to add a logo that autohide with the menu...really hope you can help me out with this one..

regards,

Edgar
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

Glad it works now.
I would only add a little comment for the people who just started following this post and it is that at the step 11 of your blog post (https://tonyredhead.com/pano2vr/polygon-hotspots-proxy) you need to set the target as "tooltip_poly" instead of "toolti
Note: you only have to do this if you are using a skin that already has an information hotspot component present.
I would like to add a logo that synchronize with the menu bottom and that when the menu hide (autohide) the logo hide together with the menu...
Easy, add your logo to the skin. Position it where you want it, create any actions you want to attach to it and then drag it in the tree to the 'hide element' container. The timer that hides the menu actually targets the 'hide element' container so anything you put in there is affected as well.

tutorial-1.jpg
tutorial-1.jpg (492.65 KiB) Viewed 5622 times
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/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thanks again for your reply and again it works..

I realized that if I place the logo on the top left corner, it is only visible when I maximize the window, otherwise it is not visible. I guess this has got to do with responsiveness???

For the time being I will leave it just beside the control bar, because in that case it does not matter whether you minimize or maximize the window, it is always there.

When I was setting up the logo, in the actions box you've got: source, action, parameters, target...in target you have: _blank; _parent; _self; _top.... What is the function of those targets??

I also was having problem with the URL since I was only writing www.example.com, it started working when I wrote: https://www.example.com


I also have another question regarding the polygon hotspots:

When I was following the steps of your blog article ( https://tonyredhead.com/pano2vr/polygon-hotspots-proxy ), on the step 10, for the border of the rectangle, you modify the alpha channel to 225....What is the alpha channel and what does it affects?

What would I need to do if I would like to have a rectangle with text inside but without any background?

in the same step 10, when working on the logic block for "visible", you set alpha to 0.000...what is alpha in this case and what does it affects?..what is its function?

Regards,

Edgar
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Edgar,
I realized that if I place the logo on the top left corner, it is only visible when I maximize the window, otherwise it is not visible. I guess this has got to do with responsiveness???
As long as you have it at 0,0 and anchored top left it will always appear on the page.

tutorial-5.jpg
tutorial-5.jpg (639.25 KiB) Viewed 5591 times
When I was setting up the logo, in the actions box you've got: source, action, parameters, target...in target you have: _blank; _parent; _self; _top.... What is the function of those targets??
These are called Target Attributes and specific where to open the linked documents. _blank = opens the linked document in a new window or tab. For more on the attributes check out https://www.w3schools.com/tags/att_a_target.asp
When I was following the steps of your blog article ( https://tonyredhead.com/pano2vr/polygon-hotspots-proxy ), on the step 10, for the border of the rectangle, you modify the alpha channel to 225....What is the alpha channel and what does it affects?
Pano2VR uses an RGBA color space. What this means is that you have three color channels (Red, Green and Blue) and one alpha channel. The RGB channels create the color and the alpha channel determines how opaque the pixels are. For example an alpha value of 255 is solid and alpha value of 0 is transparent and an alpha value of 127 is 50% transparent. In the example below I have 3 rectangles all filled with the same color but different alpha values.

tutorial-1.jpg
tutorial-1.jpg (810.73 KiB) Viewed 5591 times

For more information check out this Wikipedia article https://en.wikipedia.org/wiki/RGBA_color_space
What would I need to do if I would like to have a rectangle with text inside but without any background?
In the Rectangle dropdown menu uncheck 'Background enabled'.

tutorial-3.jpg
tutorial-3.jpg (792.45 KiB) Viewed 5591 times
in the same step 10, when working on the logic block for "visible", you set alpha to 0.000...what is alpha in this case and what does it affects?..what is its function?
Similar to the alpha in RBGA color space. In this case the value applies to the object Tooltip and has a value from 0 to 1 0 = invisible 1 = 100% visible 0.5 = 50% visible. The initial value is set to 0.00 so the object is invisible. The object, Container1 has two Actions, mouse over and mouse leave, when the mouse is over Container1 the alpha of the tooltip is set to 1.00 which makes it visible, when the mouse leaves the Container1 object the tooltip alpha is set to 0.00 which makes it invisible again.

Regards,

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/
User avatar
edgar_ali
Posts: 160
Joined: Wed May 03, 2017 12:00 pm
Location: Autralia
Contact:

Tony:

Thanks again, that was really good.

I have got another question...

Before using Pano2vr I used Panotour (kolor)...Using panotour I was able to create a function in the sking that allowed the user to open up a map (in my case on openstreet map)..I would like to add a function in the skin control bar (the same one that auto hide) that allows the user to see a map and the location of the panorama in the map

I have been looking in the documentation but have not been able to find that?...is it possible to do that in Pano2vr?
Post Reply