From 19840dad0e3d873b92dfc1e786f9d1b34a542865 Mon Sep 17 00:00:00 2001
From: Victor Hugo <victor.hugo.origins@gmail.com>
Date: Thu, 30 Nov 2017 17:48:53 -0300
Subject: [PATCH 1/2] small addition of the variable is_stereo to make it
 clearer and easier for new users on how it can build their ambient with
 different panorama types

---
 examples/gallery/index.js  | 1 +
 examples/hotspots/index.js | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/examples/gallery/index.js b/examples/gallery/index.js
index 7302b63a..95cec065 100644
--- a/examples/gallery/index.js
+++ b/examples/gallery/index.js
@@ -60,6 +60,7 @@ function loadScene(id) {
   vrView.setContent({
     image: scenes[id].image,
     preview: scenes[id].preview,
+    is_stereo: scenes[id].is_stereo || false,
     is_autopan_off: true
   });
 
diff --git a/examples/hotspots/index.js b/examples/hotspots/index.js
index 93c336b3..ed16a763 100644
--- a/examples/hotspots/index.js
+++ b/examples/hotspots/index.js
@@ -19,6 +19,7 @@ var scenes = {
   dolphins: {
     image: 'dolphins.jpg',
     preview: 'dolphins-preview.jpg',
+    is_stereo: true,
     hotspots: {
       whaleRight: {
         pitch: 0,
@@ -43,6 +44,7 @@ var scenes = {
   whaleLeft: {
     image: 'whale-left.jpg',
     preview: 'whale-left-preview.jpg',
+    is_stereo: true,
     hotspots: {
       whaleRight: {
         pitch: 0,
@@ -67,6 +69,7 @@ var scenes = {
   whaleRight: {
     image: 'whale-right.jpg',
     preview: 'whale-right-preview.jpg',
+    is_stereo: true,
     hotspots: {
       dolphins: {
         pitch: 0,
@@ -91,6 +94,7 @@ var scenes = {
   walrus: {
     image: 'walrus.jpg',
     preview: 'walrus-preview.jpg',
+    is_stereo: true,
     hotspots: {
       whaleLeft: {
         pitch: 0,
@@ -158,7 +162,7 @@ function loadScene(id) {
   vrView.setContent({
     image: scenes[id].image,
     preview: scenes[id].preview,
-    is_stereo: true,
+    is_stereo: scenes[id].is_stereo || false,
     is_autopan_off: true
   });
 

From 86fa6de6279ec3c60f99fd20955d60f9f0dd0861 Mon Sep 17 00:00:00 2001
From: Victor Hugo <victor.hugo.origins@gmail.com>
Date: Thu, 30 Nov 2017 21:50:00 -0300
Subject: [PATCH 2/2] feature that allows a hotspot to have its own icon if
 added 'icon: icon_path' in its definition. If no icon is assigned, a default
 hotspot is created

---
 images/hotspot_example.png    | Bin 0 -> 2321 bytes
 src/api/player.js             |   2 +
 src/embed/hotspot-renderer.js | 121 +++++++++++++++++++++++-----------
 src/embed/main.js             |   3 +-
 4 files changed, 86 insertions(+), 40 deletions(-)
 create mode 100644 images/hotspot_example.png

diff --git a/images/hotspot_example.png b/images/hotspot_example.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b1b17383586d7de28194e300229cfe509870b79
GIT binary patch
literal 2321
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

literal 0
HcmV?d00001

diff --git a/src/api/player.js b/src/api/player.js
index e4176c2a..7491a78e 100644
--- a/src/api/player.js
+++ b/src/api/player.js
@@ -73,6 +73,7 @@ Player.prototype = new EventEmitter();
  * @param distance {Number} The distance of the hotspot from camera, specified
  * in meters.
  * @param hotspotId {String} The ID of the hotspot.
+ * @param icon {String} The path of a image that will represent the hotspot
  */
 Player.prototype.addHotspot = function(hotspotId, params) {
   // TODO: Add validation to params.
@@ -81,6 +82,7 @@ Player.prototype.addHotspot = function(hotspotId, params) {
     yaw: params.yaw,
     radius: params.radius,
     distance: params.distance,
+    icon: params.icon,
     id: hotspotId
   };
   this.sender.send({type: Message.ADD_HOTSPOT, data: data});
diff --git a/src/embed/hotspot-renderer.js b/src/embed/hotspot-renderer.js
index 6e8cb140..d30304f3 100644
--- a/src/embed/hotspot-renderer.js
+++ b/src/embed/hotspot-renderer.js
@@ -93,24 +93,30 @@ HotspotRenderer.prototype = new EventEmitter();
  * in meters.
  * @param hotspotId {String} The ID of the hotspot.
  */
-HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, id) {
+HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, id, icon) {
   // If a hotspot already exists with this ID, stop.
   if (this.hotspots[id]) {
     // TODO: Proper error reporting.
     console.error('Attempt to add hotspot with existing id %s.', id);
     return;
   }
-  var hotspot = this.createHotspot_(radius, distance);
-  hotspot.name = id;
 
-  // Position the hotspot based on the pitch and yaw specified.
-  var quat = new THREE.Quaternion();
-  quat.setFromEuler(new THREE.Euler(THREE.Math.degToRad(pitch), THREE.Math.degToRad(yaw), 0, 'ZYX'));
-  hotspot.position.applyQuaternion(quat);
-  hotspot.lookAt(new THREE.Vector3());
+  var hotspotPromise = this.createHotspot_(radius, distance, icon);
+  var self = this;
+  hotspotPromise.then(function(hotspot){
+    hotspot.name = id;
+
+    // Position the hotspot based on the pitch and yaw specified.
+    var quat = new THREE.Quaternion();
+    quat.setFromEuler(new THREE.Euler(THREE.Math.degToRad(pitch), THREE.Math.degToRad(yaw), 0, 'ZYX'));
+    hotspot.position.applyQuaternion(quat);
+    hotspot.lookAt(new THREE.Vector3());
+    self.hotspotRoot.add(hotspot);
+    self.hotspots[id] = hotspot;
+  }).catch(function(err){
+    self.worldRenderer.emit('error', 'Error while creating the hotspot, check the hotspot image \' ' + icon +'\'');
+  });
 
-  this.hotspotRoot.add(hotspot);
-  this.hotspots[id] = hotspot;
 }
 
 /**
@@ -282,34 +288,63 @@ HotspotRenderer.prototype.getSize_ = function() {
   return this.worldRenderer.renderer.getSize();
 };
 
-HotspotRenderer.prototype.createHotspot_ = function(radius, distance) {
-  var innerGeometry = new THREE.CircleGeometry(radius, 32);
-
-  var innerMaterial = new THREE.MeshBasicMaterial({
-    color: 0xffffff, side: THREE.DoubleSide, transparent: true,
-    opacity: MAX_INNER_OPACITY, depthTest: false
-  });
-
-  var inner = new THREE.Mesh(innerGeometry, innerMaterial);
-  inner.name = 'inner';
-
-  var outerMaterial = new THREE.MeshBasicMaterial({
-    color: 0xffffff, side: THREE.DoubleSide, transparent: true,
-    opacity: MAX_OUTER_OPACITY, depthTest: false
-  });
-  var outerGeometry = new THREE.RingGeometry(radius * 0.85, radius, 32);
-  var outer = new THREE.Mesh(outerGeometry, outerMaterial);
-  outer.name = 'outer';
+HotspotRenderer.prototype.createHotspot_ = function(radius, distance, icon) {
 
+  var hotspotPromise;
   // Position at the extreme end of the sphere.
   var hotspot = new THREE.Object3D();
   hotspot.position.z = -distance;
   hotspot.scale.copy(NORMAL_SCALE);
 
-  hotspot.add(inner);
-  hotspot.add(outer);
+  //If no icon path is entered, create a default hotspot
+  if(!icon){
+    hotspotPromise = new Promise(function(resolve, reject) {
+      var innerGeometry = new THREE.CircleGeometry(radius, 32);
+
+      var innerMaterial = new THREE.MeshBasicMaterial({
+        color: 0xffffff, side: THREE.DoubleSide, transparent: true,
+        opacity: MAX_INNER_OPACITY, depthTest: false
+      });
+
+      var inner = new THREE.Mesh(innerGeometry, innerMaterial);
+      inner.name = 'inner';
+
+      var outerMaterial = new THREE.MeshBasicMaterial({
+        color: 0xffffff, side: THREE.DoubleSide, transparent: true,
+        opacity: MAX_OUTER_OPACITY, depthTest: false
+      });
+      var outerGeometry = new THREE.RingGeometry(radius * 0.85, radius, 32);
+      var outer = new THREE.Mesh(outerGeometry, outerMaterial);
+      outer.name = 'outer';
+
+      hotspot.add(inner);
+      hotspot.add(outer);
+
+      resolve(hotspot);
+    });
+  }else{
+    hotspotPromise = new Promise(
+      function(resolve, reject) {
+        var txLoader = new THREE.TextureLoader();
+        txLoader.crossOrigin = 'anonymous';
+        txLoader.load(icon, function(texture){
+          var material = new THREE.MeshBasicMaterial({ map: texture, transparent: false,
+          depthTest: false });
+          var geometry 	= new THREE.CircleGeometry(radius, 32);
+          var mesh			= new THREE.Mesh(geometry, material);
+          mesh.name = 'texture_mesh';
+
+          hotspot.add(mesh);
+
+          resolve(hotspot);
+        }, undefined, function(err){
+          reject(err)
+        });
+      }
+    );
+  }
 
-  return hotspot;
+  return hotspotPromise;
 };
 
 /**
@@ -353,7 +388,7 @@ HotspotRenderer.prototype.focus_ = function(id) {
   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);
@@ -367,7 +402,7 @@ HotspotRenderer.prototype.blur_ = function(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 );
   }
@@ -378,8 +413,11 @@ HotspotRenderer.prototype.down_ = function(id) {
   var hotspot = this.hotspots[id];
   var outer = hotspot.getObjectByName('inner');
 
-  this.tween = new TWEEN.Tween(outer.material.color).to(ACTIVE_COLOR, ACTIVE_DURATION)
-      .start();
+  if(outer){
+    this.tween = new TWEEN.Tween(outer.material.color).to(ACTIVE_COLOR, ACTIVE_DURATION)
+    .start();
+  }
+
 };
 
 HotspotRenderer.prototype.up_ = function(id) {
@@ -387,8 +425,11 @@ HotspotRenderer.prototype.up_ = function(id) {
   var hotspot = this.hotspots[id];
   var outer = hotspot.getObjectByName('inner');
 
-  this.tween = new TWEEN.Tween(outer.material.color).to(INACTIVE_COLOR, ACTIVE_DURATION)
-      .start();
+  if(outer){
+    this.tween = new TWEEN.Tween(outer.material.color).to(INACTIVE_COLOR, ACTIVE_DURATION)
+    .start();
+  }
+
 };
 
 HotspotRenderer.prototype.setOpacity_ = function(id, opacity) {
@@ -396,8 +437,10 @@ HotspotRenderer.prototype.setOpacity_ = function(id, opacity) {
   var outer = hotspot.getObjectByName('outer');
   var inner = hotspot.getObjectByName('inner');
 
-  outer.material.opacity = opacity * MAX_OUTER_OPACITY;
-  inner.material.opacity = opacity * MAX_INNER_OPACITY;
+  if(inner && outer){
+    outer.material.opacity = opacity * MAX_OUTER_OPACITY;
+    inner.material.opacity = opacity * MAX_INNER_OPACITY;
+  }
 };
 
 module.exports = HotspotRenderer;
diff --git a/src/embed/main.js b/src/embed/main.js
index cb32fdab..2b0bf77f 100644
--- a/src/embed/main.js
+++ b/src/embed/main.js
@@ -164,7 +164,8 @@ function onAddHotspot(e) {
   var radius = parseFloat(e.radius);
   var distance = parseFloat(e.distance);
   var id = e.id;
-  worldRenderer.hotspotRenderer.add(pitch, yaw, radius, distance, id);
+  var icon = e.icon;
+  worldRenderer.hotspotRenderer.add(pitch, yaw, radius, distance, id, icon);
 }
 
 function onSetContent(e) {