Linking Website from Popup

Q&A about the latest versions
Post Reply
User avatar
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Hi out there, mainly Hopki :-D so I made next steps with skin editor, the love is not complete but growing. So I realized a Polygon Image Popup, that works fine. Now I need the same component with a button added and a Link to a website. In the skin editor I can define mouseclick / open URL. How may I use this for several popups with differnt URLs?

Thanks again, Chris
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Chris,
Have a look at this project: viewtopic.php?f=22&t=12123
If you look at this image info popup you will see it has a text box that has the GoTo URL action.
You can stack many text boxes on top of each other which will all be hidden.
The numbered variable is used to show and hide each text box.
Regards,
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
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Thanks Hopki, does this method work as well with polygon Hotspots? And is it possible to use an image-button as well?
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Have a look at this post on how to get a point hotspot popup working with a polygon hotspot: viewtopic.php?f=13&t=14298
Regards,
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
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Hi Hopki, it is quite complicated, I reached to implement the box, the link works, only the picture doesn't show up. I tried now variouus ways and checked the tutorial, but still the image is missing. What kind of error can it be? I send you attached my actual skin, maybe you can have a look. Probably it is something stupid...

The actual export you can find here: https://vrtours.businessview.ruhr/Olympiabus/WIP/

Sometimes I get confused because I forget what belongs to what in the Skineditor. The possibility to arrange items and functions in folders would be helpful.

thanks and regards Chris
Attachments
bvr_v11_olympia_rev02.ggsk
(11.53 KiB) Downloaded 168 times
Last edited by sndrgn on Tue Sep 08, 2020 4:43 pm, edited 1 time in total.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Chris,
Using your skin.
1) Open Pano2VR and using the Advanced tab of the HTML5 output add the popup images to assets.

1.png
1.png (18.11 KiB) Viewed 4564 times

I am using two images with the file names, popup01.jpg and popup02.jpg.
Adding them to the assets means the images will be in the assets folder, as an example, assets/popup01.jpg.

2) Now add your Polygon Hotspot changing the ID to Polygon Image Popup
Then add a title and in the description text field enter the path to the image.

2.png
2.png (42.46 KiB) Viewed 4564 times

Here you can see the path is assets/popup01.jpg.
Create the output and when you click the Polygon Hotspot the image will show.


To add a second popup image just repeat the above but change the path of the image, as an example asstes/popup02.jpg
You can add as many popups as you like just remember to add the images to assets first.

Back in the skin you can remove the ht_image point hotspot template as this is no longer needed.
Also, I spotted you need to move the close button above the screentint_image in the tree as currently, the screentint is covering the button.

Regards,
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
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Hi Hopki, that wasn't exactly what I needed, but I found now a way:

https://vrtours.businessview.ruhr/Olympiabus/WIP/

The image popup from polygon hotspot works (the Infotable with the two athletes.) - fine.
Above the two info point hotspots work as well: Info fields with text and image and link are shown - great.
The video popup from polygon hotspot at the right work as well.

So now - what's missing is the info popup (with text and image and link) connected to a polygon hotspot. You mentioned a forum post, but I couldn't manage to work this out.

Thanks for helping, regards, Chris
Last edited by sndrgn on Thu Sep 10, 2020 4:18 pm, edited 1 time in total.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Using your skin as a reference.
The problem you have is with a Polygon Hotspot you can only use the title, description and target text fields.
You can not use the Link Target URL text field as this will cause a new browser window to show.

The solution is just to use the numbered variable which can be used to show and hide the website text boxes but also be used to show the info body text.
What you can do is move the body text to the text logic block and the description is just used to a number.

The Polygon Hotspot will be set up as follows.
Title = Tile
The description = Popup images file path
Target = number

Add the action to the container Polygon Image Popup

1.png
1.png (34.11 KiB) Viewed 4544 times

Note I am using the existing variable info_w_picture.


Now select the info_text_body text box and add a text logic block.

2.png
2.png (65.6 KiB) Viewed 4544 times

You will see that depending on the numbered variable will determine the text that will be displayed.
The number will also sho wand hide the relevant website button.

Regards,
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
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

getting closer... I am learning.... :-) So this time I get stuck in adding the text logic block. In my case the only possibility is to add "true" or "false", no number.
Attachments
Bildschirmfoto 2020-09-09 um 14.58.55.png
Bildschirmfoto 2020-09-09 um 14.58.55.png (204.35 KiB) Viewed 4539 times
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
The variable in the skin was a numbered variable, have you changed it to true/false?
Make sure it is a numbered variable.
Regards,
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
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

I found the mistake. :) I used now the external image function to connect the images with the popups, and - it works! :-D thanks for helping, this was the major part after three days testing, reading and cursing. Now I have some questions concerning the actual project:
https://vrtours.businessview.ruhr/Olympiabus/

- the video patch above (https://vrtours.businessview.ruhr/Olymp ... 4&f=76.477) works nearly well in Firefox, but in Safari you notice clearly the edges of the patch because of different color interpretation. So I tried to export the clip as quicktime with alpha, but instead of transparency I got a black frame. How may export the videopatch eith colors that match exactly the surrounding?
- I tested some sounds, but didn't find a method to clip the sound to a hotspot. Dragging a sound to skin editor and putting it to the ht_node results in crashing of the program. So I want for example the sound of an opening door be played when clicking on the door of the drivers place.
- the polygon info hotspot works fine, but only in the first panorama (https://vrtours.businessview.ruhr/Olymp ... 6.250&f=70). In the next panorama the hotspot doesn't work anymore, although it has the same parameters. On the table the items with polygon info hotspots work again fine.

Thanks, regards and all the best,

Chris
Last edited by sndrgn on Thu Sep 10, 2020 4:18 pm, edited 1 time in total.
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Chris,
You have a few issues there, I think it's always best to work on one at a time, also people will respond to one issue at a time rather than a list!
So with this said for the embedded video having different colours this is known and is due to the fact that only Firefox seems able to read the colour profile of both the image and the video. Other browsers can only read the colour profile of the image, so the video will have a different colour because it can not read it.

So the fix is to use an image mask, here is an example: https://support.ggno.me/forum_projects/bbq
You will see a button to toggle the image mask.

How this was built?
If you follow the video on how to embed video, https://ggnome.com/doc/embed-video/
At time index 8:52 you will see I add a mask to the video.

Once you have finished making the video, drag the mask from the video layer to the patch image layer and invert the mask, on the Mac its Command + i, you will end up with a patch image with a hole, the video will display through the hole.

Export the patch image as a PNG, then add this to the project using the same placement values as the pinned video.
Using the list view you should have the pinned video above the pinned image.
The lower an element is the more forward it will be.

As this is an image, the browser can apply the correct colour profile eliminating the hard edges so you should only see a colour difference around the hole in the image mask.
In the BBQ example, it is easy to hide.
To help understand I have attached the video I made then the patch image PNG with the inverted mask.
Regards,
Attachments
bbq_patch.png
bbq_patch.png (201.4 KiB) Viewed 4519 times
bbq_patch.mp4
(1.86 MiB) Downloaded 194 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
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Hi Hopki, nice trick, some kind of magic :-D it works. Didn't know before something about a list view. Great. The other questions I will post then seperately. Thanks again.
User avatar
sndrgn
Posts: 83
Joined: Mon Jun 19, 2017 12:32 pm
Location: Dortmund, Germany
Contact:

Hi Hopki, is it ok to post the questions here or is it better to open a new thread?

The polygon info hotspot works fine, but only in the first panorama (https://vrtours.businessview.ruhr/kunde ... 13.42&f=70). In the next panorama the hotspot doesn't work anymore, although it has the same parameters. On the table the items with polygon info hotspots work again fine.

What can be the cause of this behaviour?
Attachments
bvr_v11_olympia_rev04.ggsk
(26.9 KiB) Downloaded 150 times
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Chris,
For the sake of the search function, it's always better to start a new thread with a new question and get the title as close to the issue as possible.
This way it's easy to find.

But looking at your skin, its working for me?

I started a new project and added two node with node hotspots linking them.
Uisng assets I added two popup images, popup01.jpg and popup02.jpg

Added a poly hotspot in node one and gave it teh ID Polygon Image Popup, then in the description text area added "assets/popup01.jpg".
And then in node two added a poly hotspot with teh ID Polygon Image Popup, then in teh description text area added "assets/popup02.jpg".

This works for me, both poly hotspots opening their respective images.
Regards,
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/
Post Reply