Hotpots on mobile sites

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
kvalmeo
Posts: 4
Joined: Thu Aug 04, 2016 2:10 pm

Hi there,
Has anyone ever experienced issues with hotspots not working efficiently on mobile?

I'm currently working on a project that needs to be viewable on desktop and mobile. I've placed hotspots throughout my panorama which work great on desktop. However, I'm finding that on mobile/tablet, the hotspots don't trigger on initial touch - in other words, I have to 'touch' the hotspots a few times before it triggers. Note that the hotspots do work sometimes, but not on a consistent basis.

I've thought about doing the following, but I'm also not sure how to go about executing? Would love to hear thoughts on people that have had the same issues (how did you solve your problems?) as well as thoughts on my suggested solutions below:

- Could increasing the 'hit states' of a hotspot allow for a more consistent trigger? My thinking is that the bigger the hit state, the better chance the user will trigger it. Has anyone tried to do this? I briefly looked into this, but couldn't find where I'm able to increase the hit state.
- Could the solution be using a polygon hotspot? If so, has anyone tried to 'mimic' the behavior of point hotspots for polygon hotspots?
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

I read your comment:
First thoughts

What mobile device are you referring to ? Manufacturer, model Operating system and the mobile browser name and version.
Example, Samsung s7, OS Android 6.0.1, Google Chrome (primary browser) and Samsung "Internet" browser.

A lot of browser issues flow from the browser you are using.

Specifically, some smartphone browsers are not html5 aware so they can not use your Pano2vr 5.0.2 output.

I know this is not much help, but... :(
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
kvalmeo
Posts: 4
Joined: Thu Aug 04, 2016 2:10 pm

360Texas wrote:I read your comment:
First thoughts

What mobile device are you referring to ? Manufacturer, model Operating system and the mobile browser name and version.
Example, Samsung s7, OS Android 6.0.1, Google Chrome (primary browser) and Samsung "Internet" browser.

A lot of browser issues flow from the browser you are using.

Specifically, some smartphone browsers are not html5 aware so they can not use your Pano2vr 5.0.2 output.

I know this is not much help, but... :(

Thanks for your speedy feedback. We have tested on the following:
iPhone 6, 6+ and 7 on Safari
Samsung Galaxy S7 on Chrome running Android 6.0.1
Sony Xperia on Chrome running Android 6.0.1

All the above devices do pull up the pano2vr site, and in most cases the functionality is great - it's just the issues with the hotspots that are a concern.
kvalmeo
Posts: 4
Joined: Thu Aug 04, 2016 2:10 pm

I should also note that the issues occur when the hotspot that's being triggered isn't centered in the panorama.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

As a thought,
Do you have any "transparent" skin elements such as containers that when viewed on a smaller screen would block the hotspot?
This is quite common, if a container is not needed then hide it. In most cases people hide the elements in containers but not the container itself.
A container is an active element that will block interaction with other skin elements if they are more forward, although you can still click and drag the pano through them.
Regards,
Hopki
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/
carlosmossman
Posts: 4
Joined: Tue Oct 18, 2016 2:51 pm

I am experiencing something similar on an iPhone 6s using Pano2VR 5.0.2/15080

On any desktop browser, I can click links in my content panels but touch events appear to fail (return false/prevent default I presume).

I am embedding a minified version of the player so it's difficult for me to identify the likely cause/culprit but I have narrowed it down to the function defined at e.prototype.qk.

The function body is pasted below. If I comment out the portion from if(this.tb) to the end, my mobile links work. If I don't permit this.tb to be defined, I get a JS error. If I allow it to be defined and comment out the remainder, my mobile links work.

For context, I have two types of links in my content panels - those which invoke JS functions and those which open new pages. The former works on all devices, the latter does not on touch devices. I could solve my problem by binding to standard links and opening new windows or redirecting but it would be better to understand the following code block and then not write a hacky patch, or write a patch from a more informed perspective.

Any insights are appreciated.

e.prototype.qk = function(a) {
var c, b = this.Hc(),
d = !1;
this.se && (this.se = !1, this.Bg());
if (!this.C.Wa) {
0 <= this.N.Da && this.ia();
var g =
(new Date).getTime(),
e;
c = Math.abs(this.N.start.x - this.N.W.x) + Math.abs(this.N.start.y - this.N.W.y);
if (0 <= c && 20 > c) {
a.preventDefault();
d = !0;
this.ic(this.tb) && this.rc && this.rc.Yb();
if (this.tb)
for (c = this.tb, e = !1; c && c != this.control;) c.onclick && !e && (c.onclick(), e = !0, d = !1), c = c.parentNode;
c = Math.abs(this.N.kc.x - this.N.W.x) + Math.abs(this.N.kc.y - this.N.W.y);
if (700 > g - this.Ld && 0 <= c && 20 > c) {
a.preventDefault();
if (this.ic(this.tb) && this.C.wf) {
var f = this;
setTimeout(function() {
f.cf()
}, 1)
}
if (this.tb)
for (c = this.tb, e = !1; c &&
c != this.control;) c.ondblclick && !e && (c.ondblclick(), e = !0, d = !1), c = c.parentNode;
this.Ld = 0
} else this.Ld = g;
this.N.kc.x = this.N.W.x;
this.N.kc.y = this.N.W.y
}
if (this.tb)
for (a.preventDefault(), c = this.tb, e = !1; c && c != this.control;) {
if (c.onmouseout) c.onmouseout();
c.onmouseup && !e && (c.onmouseup(), e = !0);
c = c.parentNode
}
this.tb = null;
this.N.Da = -11;
this.Qe(this.Qa);
a = this.Cd(a);
this.nd(a.x - b.x, a.y - b.y);
this.kd && d && this.Sh(this.kd);
this.kd = null
}
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Guys,
I had a situation with a skin where the hotspots works on the desktop but not on a phone or tablet.
This was due to the hotspot template and hotspot image having actions.
The hotspot template needs the actions and the image should not have any.
Regards,
Hopki
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