How to add hotspot by touchstart event (in mobile browser)

VladimirMakarchuk · May 18, 2017 at 4:03 PM

Hi everyone.
I want to add hotspot via js after touchstart event been executed. So this hotspot should appear exactly in the place where user touched. So in desktop browser with click event it works fine. But in mobile browser with touchstart event it's not. In some case hotspot appear in wrong place not where user made touch. Here code that I use for this taks

Code

$(document).on('click touchstart', function(e) {
    instance.chooseAttachmentPosMobile(e);
});
createHotspotMobile = function (name, posX, posY) {
    var hotspot = this.krpano.addhotspot(name);


    hotspot.loadstyle('hotspot_icon');
    hotspot.ath = posX;
    hotspot.atv = posY;
    hotspot.onhover="showtext('test-name', hotspottextstyle);";
    hotspot.scale = 1;
    hotspot.renderer="css3d";
};


chooseAttachmentPosMobile = function(e){
    var touch = e.originalEvent.touches;
    var x = touch ? touch[0].pageX : e.pageX;
    var y = touch ? touch[0].pageY : e.pageY;
    var degreeCoordinates = this.krpano.screentosphere(x,y);
    this.createHotspotMobile('test-name', degreeCoordinates.x, degreeCoordinates.y);
};

Display More

So here I grab pageX and pageY parameters from touch or click event and then by using screentosphere krpano method convert it to spherical coords. But like I said such approach works fine only for
click event In mobile browsers hotspot appear in wrong place.
So I wondering what i do wrong or maybe it some bug that related with krpano screentosphere method and mobile browsers?

klaus.krpano · May 19, 2017 at 9:23 AM

Hi,

in your code you would need to care also about the devicepixelratio and if krpano is not a fullpage element also about the position of the element on the page.

I would recommend simply using the krpano APIs (could be done also from js), this way you don't need to care about all the details.

E.g.

Code

krpano.set("events.onclick", function(){
  var x = krpano.get("mouse.x");
  var y = krpano.get("mouse.y");
  var pos = krpano.screentosphere(x,y);
  console.log(pos.x + " / " + pos.y);
});

Best regards,
Klaus

How to add hotspot by touchstart event (in mobile browser)

Participate now!

Users Viewing This Thread