Implementing a demo mode inside the Forge viewer Part 3

In this final (for now, anyway) part of the series, we’re going to look at the approach taken in the Dasher 360 kiosk mode to loop the demo indefinitely (although with variations, as mentioned last time) until someone interrupts by moving the mouse.

The first piece of this is to track the mouse. We do this by attaching an event handler to ‘mousemove’. Here’s the TypeScript code we’re using:

onMouseMove = (event: any): void => {
  this._canvasX = event.canvasX || event.clientX;
  this._canvasY = event.canvasY || event.clientY;
 
  if (this._startX !== null && this._startY !== null && this._inKioskMode &&
     (Math.abs(this._canvasX – this._startX) > this._moveThreshold ||
      Math.abs(this._canvasY – this._startY) > this._moveThreshold)) {
    this.endDemo();
  }
}
 

You’ll notice we do a little legwork before calling endDemo() (which resets state and sets a flag we check for in the main demo code). This was primarily because a colleague of mine…