Hotspot with Image and text

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

Mon Mar 23, 2020 7:04 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 719 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: 10321
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

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
Attachments
image_popup.zip
(41.61 KiB) Downloaded 90 times
Hopki
Garden Gnome Software 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: 56
Joined: Thu Aug 04, 2016 12:44 pm

Tue Apr 07, 2020 6:22 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: 56
Joined: Thu Aug 04, 2016 12:44 pm

Tue Apr 07, 2020 6:23 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: 56
Joined: Thu Aug 04, 2016 12:44 pm

Tue Apr 07, 2020 10:40 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: 10321
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Apr 09, 2020 9:12 pm

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,
Hopki
Garden Gnome Software 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: 7
Joined: Mon Apr 06, 2020 12:11 pm

Mon Apr 20, 2020 6:49 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: 10321
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Mon Apr 20, 2020 7:44 pm

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,
Hopki
Garden Gnome Software 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: 7
Joined: Wed Apr 15, 2020 9:26 pm

Wed Apr 22, 2020 11:04 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: 10321
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Apr 23, 2020 8:53 pm

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,
Hopki
Garden Gnome Software 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