Polygon hotspots, floaing tooltips, and touch devices

Q&A about the latest versions
Post Reply
HaraldJ
Posts: 156
Joined: Wed Oct 10, 2012 2:05 pm
Location: Surrey, United Kingdom
Contact:

Tue Sep 09, 2014 12:52 pm

I'm using a lot of polygon hotspots to show text or images in a tooltip. All works perfectly well as if there is a mouse pointer, it doesn't work at all on touch devices (tested: iPad and iPhone).

What I have done:
- Disabled the system hot spot text box, to have full control over the tooltip area
- Added a textbox "floating-tooltip", according to the documentation: Two modifiers to follow mouse movement, three actions (mouse enter: display $self + set text to $hs, mouse leave: hide $self), and I've set the hotspot proxy ID to *.

On any device with a mouse, it works perfectly well. On a touch device, it doesn't do anything at all.

The "mouse enter" and "mouse leave" are processed nicely - I've created a test rectangle, where I use "mouse enter" and "mouse leave" to show my "floating-tooltip" element, and it works nicely. The problem seems to be the with polygon hotspot area.

To show what's going on, I've put a test panorama on the web - this is a temporary link: http://haraldjoergens.com/panoramas/mini

There are polygon tooltips at the windscreen, doors, steering wheel, glove compartment, and headrests of the car. There's also a blue box. The floating tooltip is set to an Alpha of .5, and the text "Initial floating tooltip text".

"Mouse Enter" and in the blue box set the tooltip Alpha to 1, and set the tooltip text, "Mouse Leave" sets the Alpha back to .5, so the tooltip is always visible.
If I understand the documentation correctly, setting the Hotspot Proxy ID of the tooltip to * should start the tooltips actions.
It does so with a mouse cursor present, but seems to fail on a touch device.

If you have an idea - I would really appreciate a hint how to solve the problem.

Thanks!

Harald
Harald Joergens
Harald Joergens Photography
Nutfield, Surrey, United Kingdom
Don
Posts: 140
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Tue Sep 09, 2014 6:35 pm

Think at it from a different direction. The challenge is: no mouse events on touch devices.

Concept #1: Tap anywhere in the polygon. That turns ON the label of a hotspot hidden within the polygon. The concept here is that one hotspot and one polygon work together as partners. Tap another polygon and the first label hides. A master skin button could show or hide all the hotspots, if desired.

Concept #2 builds on Concept #1: The first tap (such as on the steering wheel in your example) "activates" the polygon. Perhaps an activated polygon then becomes visible, or the hotspot label displays, or a context menu displays, or whatever. Next, a second tap on an activated polygon, then fires an event, such as a javascript function, or similar. Later on, tapping another polygon deactivates the previously active polygon. Generally I only allow one element to be active on a page at any one time.

The above allows lots of combinations to get around not having mouse events. Please share if you come up with other methods? Maybe someday the touch devices will recognize our finger hovering over an element on the page.
HaraldJ
Posts: 156
Joined: Wed Oct 10, 2012 2:05 pm
Location: Surrey, United Kingdom
Contact:

Tue Sep 09, 2014 7:45 pm

Hi Don,

Thank you for the quick response! I see your point, and if I understand you correctly, it can't be done in an easy way.

Please have another look at my example, I added a green rectangle and changed the Z-order to get the tooltip in front. On the iPad, it does exactly what I would like, showing the tooltips where I tap on the blue or green rectangle, dimming (hiding) when I move my finger off the touchscreen. The dimmed tooltip anywhere else shows that the tooltip is where a touch happens. What does not happen, outside my two rectangles, is that the mouse events are passed on to the tooltip.

From my perspective, those two rectangles are just polygons. Wouldn't it be possible to redirect the "Mouse Enter" and "Mouse Leave" events from all polygon hotspots to the floating tooltip?

Thanks!

Harald
Harald Joergens
Harald Joergens Photography
Nutfield, Surrey, United Kingdom
Don
Posts: 140
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Wed Sep 10, 2014 9:05 am

HaraldJ wrote:...What does not happen, outside my two rectangles, is that the mouse events are passed on to the tooltip...
Yikes, I replied from memory and was wrong, again. That's happening more frequently lately. So I checked my notes: What I do most often is place a hotspot in the middle of a polygon. The polygon stays hidden, and the polygon simply acts as a perimeter within which the user may click or tap. When mouseover is available the polygon changes the default semi-transparent Blue. The polygon url may have javascript code inserted like this, "javascript:alert('Hello World');" but cannot call a javascript function located on the page.

I typically leave the polygon title empty and use only the hotspot label. This avoids possibly having the polygon label and the hotspot label displayed at the same time.

I provide a skin button to turn ON/OFF all the point hotspot labels. And since polygon hotspots are 99% un-customizable, then all my actions and events occur on the point hotspots. Here is what I do least often, and try to avoid. If you are not comfortable with javascript code, then ignore the following - run away:

In skin.js are a couple of empty javascript functions that fire on hotspot polygons. They are called, "hotspotProxyClick", "hotspotProxyOver" and "hotspotProxyOut". Remember skin.js gets overwritten everytime you output your pano. So save your edits. A starter example triggered by a polygon hotspot mouseover looks like this, and if you know javascript, then you can run with it from here:

Code: Select all

	this.hotspotProxyOver = function (id) {
	    alert('I just moused over ' + id);
	}
HaraldJ
Posts: 156
Joined: Wed Oct 10, 2012 2:05 pm
Location: Surrey, United Kingdom
Contact:

Wed Sep 10, 2014 9:26 am

Hi Don,

Thanks, that's most useful! I have no problems with JavaScript, so it's a good starting point!

Following your advice I've added the "alert" as in your code example. It fires - on desktop only. It's ignored on the iPad.

If it would fire on a touch device, I would assume that the message would be passed on, and my floating tooltip would pop up just as I want it to:

this.hotspotProxyOver=function(id) {
alert('I just moused over ' + id);
me._floatingtooltip.onmouseover();
}

Do you happen to know which JavaScript function deals with MouseEnter and MouseLeave on touch devices?

Thanks!!

Harald
Harald Joergens
Harald Joergens Photography
Nutfield, Surrey, United Kingdom
Don
Posts: 140
Joined: Thu Mar 07, 2013 2:59 pm
Location: Southern California

Wed Sep 10, 2014 6:07 pm

I'm glad that might work for you! As-is, out-of-the-box is always best, but sometimes customizing is the only way to get it done. Your Mini presentation looks very customized already. For other folks on this forum, such as in real estate quickly copying presentations time after time, then avoiding intricate customization is the best bet.
HaraldJ wrote:Do you happen to know which JavaScript function deals with MouseEnter and MouseLeave on touch devices?
Smiles, there is no MouseEnter or MouseLeave on a touch device, because there is no mouse. There is no cursor on the screen - just a finger or two. Some touch devices do allow connecting a mouse or a stylus, and then javascript's onmouseover and onmouseout are effective. (There is also the CSS hover event, but I doubt that is applicable in the context of hotspots on a pano skin canvas. A canvas is a recently new html innovation with its own unique way of doing things. Could be wrong, but seems to me the polygon hotspots are on the canvas and the point hotspots are traditional page elements. That's why the point hotspots are so easy to work with and the polygon hotspots are not. The polygon hotspots will mature with time.)

The worst case scenario means no mouse events. So, the first tap activates an element. Keep a hidden field somewhere to track which element is active at the moment. Only one active element is allowed at a time. The second tap on the active element fires the code, i.e. display a label, a context menu, or populate an info box. Tapping on any other element de-activates the previous element and activates the tapped element.

I provide a skin button to turn ON/OFF all point hotspots (and their labels) so new visitors can get their bearings. Returning visitors already know where all the hotspots are.

Here is more reading. This article mentions touch and hold. That's fine, but no substitute for onmouseover:
http://www.html5rocks.com/en/mobile/touchandmouse/
Post Reply