You are not logged in.

1

Friday, November 26th 2021, 1:38pm

Add drag event on Hotspot with javascript not using plugin

function addHotspot(krpano) {
var mouse_at_h = '13.2154';
var mouse_at_v = '12.6504';

var str = '';
str += 'addhotspot(' + spotname + ');';
str +=
'set(hotspot[' +
spotname +
'].url,http://45.79.111.106:3100/public/markers/venue2.png);';
str += 'set(hotspot[' + spotname + '].ath,' + mouse_at_h + ');';
str += 'set(hotspot[' + spotname + '].atv,' + mouse_at_v + ');';
str += 'set(hotspot[' + spotname + '].scale,0.7);';
str += 'set(hotspot[' + spotname + '].zoom,false);';
str += 'set(hotspot[' + spotname + '].dragging,true);';
str += 'set(hotspot[' + spotname + '].enabled,true);';
str += 'set(hotspot[' + spotname + '].visible,true);';
str += 'set(hotspot[' + spotname + '].renderer,css3d);';
str += 'set(hotspot[' + spotname + '].ondown , ' + moveHotspot(krpano) + ');';
krpano.call(str);
}


function moveHotspot(krpano) {

}


As above what should i add in moveHotspot function in order to able the drag the hotspot ?

2

Saturday, November 27th 2021, 1:54pm

Hi,

here a full Javascript example:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function addhotspot(krpano)
{
  var mouse_at_h = 13.2154;
  var mouse_at_v = 12.6504; 
  
  krpano = krpano.get("global");

  var hs = krpano.addhotspot("auto");
  hs.url = "http://...";
  hs.ath = mouse_at_h;
  hs.atv = mouse_at_v;
  hs.scale = 0.7;
  hs.zoom = false;
  hs.dragging = true;	// a custom setting for enabling/disabling the dragging
  hs.enabled = true;
  hs.visible = true;
  hs.renderer = "css3d";
  
  hs.ondown = function()
  {
    if (hs.dragging)
    {
      // get the current screen position of the hotspot
      var hs_screen = krpano.spheretoscreen(hs.ath, hs.atv);
      
      // get the offset from the hotspot center to the mouse cursor
      var offsetx = krpano.mouse.stagex - hs_screen.x;
      var offsety = krpano.mouse.stagey - hs_screen.y;
  
      krpano.actions.asyncloop( 
        function(){ return hs.pressed; },	// loop as long the mouse is pressed
        function()
        {
          // subtract the mouse-hotspot offset and get the spherical coordinate
          var pt = krpano.screentosphere(krpano.mouse.stagex - offsetx, krpano.mouse.stagey - offsety);
          hs.ath = pt.x;
          hs.atv = pt.y;
        }
      );
    }
  };
}


Best regards,
Klaus

3

Friday, December 3rd 2021, 12:18pm

Thanks Klaus It is working now *smile*