Hotspot with Image and text

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
sparrow
Posts: 67
Joined: Thu Aug 04, 2016 12:44 pm

Hi Hopki

Is there a tutoral for achieving the popup as per mockup.

It's basically an image hotspot with accompanying text or vice versa.
Components.jpg
Components.jpg (293.95 KiB) Viewed 6605 times
Ideally, the image would sit to the left at certain breakpoints. At smaller breakpoints it would stack above the text.

I know the nuances of how this would behave on different screensizes would need to be considered but looking for a push in right direction.

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

Hi sparrow,
See attached.
You use Hotspot Type Image and add the image as you would with the image popup.
It then uses the Hotspots title and description for the title and body text.

I also set that is player width is less than 768px it will scale by 0.8.
Regards,
Hopki
Attachments
image_popup.zip
(41.61 KiB) Downloaded 477 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/
sparrow
Posts: 67
Joined: Thu Aug 04, 2016 12:44 pm

Thanks Hopki.

Just saw this now and appreciate the demo. It looks simple enough.

In the meantime, I was trying the iFrame tutorial by Tony. In a tour with over 40 hotspots of this kind I am torn between the popup content being native Vs iFrame.

Did you have any possible experience with this?

In my head, these are the Good Vs Bad

iFrame
- GOOD: I can use UIKIT to control the content (I am very comfortable with this)
- GOOD: using CSS, I can rapidly update the look of over 40 html pages with little effort or time
- GOOD: using CSS, I can control the style of the contents within the Description field
- BAD: I don't like using iFrames in general and they can be tricky to control responsively
- BAD: Will an iFrame work when VR mode is enabled?

Native popup
- GOOD: I can work directly within the App
- BAD: My Description field needs some specific styling I probably can't achieve without a rich text editor (bold, italics, bullets)
sparrow
Posts: 67
Joined: Thu Aug 04, 2016 12:44 pm

Just found out I *can* use my own HTML in the description field and even my own span classes. Happy days! :D
sparrow wrote: Tue Apr 07, 2020 6:22 pm Native popup
- BAD: My Description field needs some specific styling I probably can't achieve without a rich text editor (bold, italics, bullets)
sparrow
Posts: 67
Joined: Thu Aug 04, 2016 12:44 pm

Hi @Hopki

I notice the ht_image hotspot has an action to sets the value of the title and description on the popup window.

Why do we do it this way and not just set a placeholder of $(hs) and $(hd) directly in the title and description text field?

I've tried it and can't get it to work so am just curious as to why it wouldn't work.

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

Hi,
A text box with a placeholder $(ht) or $(hd) will only display the text while the mouse is over the hotspot.
This is why we "Set Value", so when the mouse is over the hotspot we can set the title and description to the text boxes, so hard writing to teh tetx box.
Now the mouse can leave the hotspot and the text will remain.
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/
danMc
Posts: 11
Joined: Mon Apr 06, 2020 12:11 pm

Thanks for your example - very new to program, not sure I'll ever get my head wrapped around this... Especially the skins.

In your example the X close popup is on the corner of the popup, my close popup is way over at the edge of browser, I fear I will have to do something with the skin now ;(
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

I plan to start a series for skin webinars, this week is all about maps but then its skins.
There is already a size and position webinar video, so the next will look at actions vs variable and an introduction to logic blocks.
Depending on how it goes and of course, time. there may be more than one webinar on this.
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/
Idocio
Posts: 52
Joined: Wed Apr 15, 2020 9:26 pm

Very interesting. The truth is that the software is very powerful.

A curiosity. The image loading images does not disappear, even though the image has already been fully loaded.
I understand that this is not normal. How can it be fixed?

Also, where is that image? Looking at the skin, I see that it is of type .svg, but it does not refer to any file.
Is it possible to change that image for an animated gif, for example?
Thank you.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
The loading image is an animation and is always there, as it is below the external image loader when the externally loaded image appears then this covers the loading image.
You will need to use an external image loader for an animated GIF.
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/
Caz1982
Posts: 14
Joined: Tue Aug 11, 2020 9:55 am

Hopki wrote: Thu Mar 26, 2020 9:21 pm Hi sparrow,
See attached.
You use Hotspot Type Image and add the image as you would with the image popup.
It then uses the Hotspots title and description for the title and body text.

I also set that is player width is less than 768px it will scale by 0.8.
Regards,
Hopki
Hopki, to this complement I can add audio and make it independent, my idea is to have 10 hotspots with that hotspot and that they are independent in both information, image and audio, any ideas?
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Please find attached a modified version that has audio that play on Hotspot open.
There is also a stop button that unloads the mp3 file.

How it works, firstly all the audio files are added to assets.
Then in the point hotspot properties, the mp3 file is added to the point hotspots target text field, for example, Click.mp3.

In the skin, a Video element is added and given the ID AudioPlayer.
In the ht_image Hotspot Template there is an action added:

Source: Mouse Click
Action: Set Value
Value: assets/$(ht)
Target: AudioPlayer

So when you click the hotspot the audio file will be loaded to the AudioPlayer, it will then play.
There is also a stop audio button, all this does is unload the audio file with a Set Value action, which is blank, this will unload the audio file and stop the audio.

Regards,
Attachments
popup.zip
(52.39 KiB) Downloaded 210 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/
Post Reply