VR Mode: Reticle / Fuse button / Hotspot 'virtual' click

[transpirman]

Hi,

I tried the hotspot example in VR mode (Google Chrome on S7 Edge)

When I gaze at any hotspot, the white circle grows but I do not see any recticle.

I would also like to activate a short timer so gazing at hotspot would trigger a click after a few second (like a "fuse button" as described here: https://www.google.com/design/spec-vr/interactive-patterns/controls.html#).
Is there a way to do that ?

Do someone have code examples of how to capture these events like Hotspot onFocus, etc...

Thanks !

[weddingdj]

I had the same issue using Google Chrome 57 on a Nexus 5. Thanks!

[willian-sisinfo]

Same thing using latest version on iOS. The docs are not clear how we should proceed when VR mode is true. Thanks.

[fix2015]

@transpirman its easy, you have function HotspotRenderer.prototype.focus_ , there you can put some setTimeout and add logic if it focus more than 1 sec or whatever do this this.emit('click', id); if someone focus and than blur just remove it. Should work.

HotspotRenderer.prototype.focus_ = function(id) {
  var hotspot = this.hotspots[id];

  // Tween scale of hotspot.
  this.tween = new TWEEN.Tween(hotspot.scale).to(FOCUS_SCALE, FOCUS_DURATION)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .start();
      timeForHospotClick = setTimeout(function(){
          this.emit('click', id);
      }.bind(this),1000)
  };
HotspotRenderer.prototype.blur_ = function(id) {
  var hotspot = this.hotspots[id];

  this.tween = new TWEEN.Tween(hotspot.scale).to(NORMAL_SCALE, FOCUS_DURATION)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .start();
      if(timeForHospotClick ){
          clearTimeout(timeForHospotClick );
      }
};

[transpirman]

Thank you for the code.

Actually I started building on that already, but encountered a problem for which I found a workaround. I will try to post code asap.

The problem : when hotspots are created, the 'update' function in renderer emits a focus event, and no blur event.
The workaround: initialize a FocusEnabled status to false, and delay a true assignment

[fix2015]

@transpirman it will help to you this.hotspots[id].show check it before settimeout in focus

[transpirman]

@fix2015 Oh thank you for the tip ! I did not think of it.

What I did so far in hotspot_renderer:
1°) declare
var HoverTimer; // Timeout fn to simulate a click event after gazing at a hotspot
var HoverReadyTimer; // Timeout fn to enable "real" focus event after hotspot creation (avoiding the automatic trigger at creation in HotspotRenderer.prototype.update
var HoverReady = false; // initialize to false to avoid automatic first 'focus' event

2°) HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, id, image, is_stereo) {
clearTimeout(HoverReadyTimer); HoverReady = false;
HoverReadyTimer = setTimeout(function() { HoverReady = true; }, 500); // ready for real blur event
...
3°) in HotspotRenderer.prototype.update = function(camera)
if (isIntersected && !this.selectedHotspots[id] && HoverReady) {
this.emit('focus', id); this.focus_(id);
}
4°) HotspotRenderer.prototype.focus_ = function(id) {
var hotspot = this.hotspots[id];

// Tween scale of hotspot.
this.tween = new TWEEN.Tween(hotspot.scale).to(FOCUS_SCALE, FOCUS_DURATION)
.easing(TWEEN.Easing.Quadratic.InOut)
.start();
// color change
var inner = hotspot.getObjectByName('inner');
this.tween = new TWEEN.Tween(inner.material.color).to(ACTIVE_COLOR, ACTIVE_DURATION)
.start();

// Virtual Click (todo: real fuse button)
if (HoverReady == true) { var that = this; HoverTimer = setTimeout(function() { that.emit('click', id); that.up_(id); }, 2000); }
};

I will try to create a proper 'pull request' once I get how to fully use GitHub :-)

Now, any idea about the reticle not showing up ?

[fix2015]

@transpirman i found the reason, just need change this in package.json and rebuild

 from "tween.js": "^16.3.4",
 to "tween.js": "16.3.4",

80e7b34

[tommytee]

for the reticle, uncomment https://github.com/googlevr/vrview/blob/master/src/embed/world-renderer.js#L279

[tommytee]

The false calling of focus that happens when a hotspot is added can be stopped by moving this line https://github.com/googlevr/vrview/blob/master/src/embed/world-renderer.js#L64 two lines down so it is under "this.effect.render..."

This fix is also needed: https://github.com/googlevr/vrview/pull/158/files

Then, adding to the code from fix2015: ( hotspot-renderer.js )

HotspotRenderer.prototype.focus_ = function(id) {
  var hotspot = this.hotspots[id];

  // Tween scale of hotspot.
  this.tween = new TWEEN.Tween(hotspot.scale).to(FOCUS_SCALE, FOCUS_DURATION)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .start();

  if (this.worldRenderer.isVRMode()) {
      this.timeForHospotClick = setTimeout( function () {
          this.emit( 'click', id );
      }.bind( this ), 1200 )
  }
};

HotspotRenderer.prototype.blur_ = function(id) {
  var hotspot = this.hotspots[id];

  this.tween = new TWEEN.Tween(hotspot.scale).to(NORMAL_SCALE, FOCUS_DURATION)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .start();

  if (this.timeForHospotClick) {
      clearTimeout( this.timeForHospotClick );
  }
};

These changes (and the reticle enabled) are in the branch named "gaze" here. (will do a pr soon)

https://github.com/tommytee/vrview/blob/gaze/src/embed/hotspot-renderer.js