You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, September 11th 2018, 6:28pm

Set id of hotspot div using javascript

Hi,

I'm having problems setting the id of a hotspot div when using Javascript. I've set the renderer to 'css3d', but I get the console error:

"WARNING: set hotspot[hotspot-6].sprite.id=hotspot-6 - sprite is null!"

The hotspots themselves appear correctly in the panorama, with their data being loaded from JSON... just without any ids. Here is the code that I'm using within my tour.html <head> tag:

Source code

1
2
3
4
5
6
7
8
9
10
hotspots.forEach(function(hotspot) {
  var hotspotID = "hotspot-" + hotspot.id;

  krPano.call("addhotspot(" + hotspotID + ");");
  krPano.call("set(hotspot[" + hotspotID + "].renderer, 'css3d');");
  krPano.call("set(hotspot[" + hotspotID + "].atv, " + hotspot.hotspotATV + ");");
  krPano.call("set(hotspot[" + hotspotID + "].ath, " + hotspot.hotspotATH + ");");
  krPano.call("set(hotspot[" + hotspotID + "].url, 'images/infopoint.png');");
  krPano.call("set(hotspot[" + hotspotID + "].sprite.id, " + hotspotID + ");");
});


As far as I know this should be possible - does anyone know what I'm doing wrong? I'm using krpano 1.19 pr16.

Many thanks in advance (and apologies if this has been covered elsewhere - I've searched, but couldn't find an answer)!

2

Wednesday, September 12th 2018, 11:00pm

Hi,

better use the onloaded event of the hotspot to make sure that the sprite is already created.

Best regards,
Klaus

3

Monday, September 24th 2018, 3:06pm

Hi Klaus - many thanks for the info, and apologies for the slow response!

I've tried adding onloaded to the hotspot generation code:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function test() {
  console.log("Working!");
}

hotspots.forEach(function(hotspot) {
  var hotspotID = "hotspot-" + hotspot.id;

  krPano.call("addhotspot(" + hotspotID + ");");
  krPano.call("set(hotspot[" + hotspotID + "].renderer, 'css3d');");
  krPano.call("set(hotspot[" + hotspotID + "].atv, " + hotspot.hotspotATV + ");");
  krPano.call("set(hotspot[" + hotspotID + "].ath, " + hotspot.hotspotATH + ");");
  krPano.call("set(hotspot[" + hotspotID + "].url, 'images/infopoint.png');");
  krPano.call("set(hotspot[" + hotspotID + "].onloaded, js(test();)");
});


However, the test() function does not get fired - nothing appears in the console, but the hotspot sprites are visible as usual in the panorama.

Any ideas?

4

Monday, September 24th 2018, 5:55pm

Hi,

difficult to say when seeing only small part of the example, there can be several reasons...

Maybe as help here a full example for using krpano fully from JS:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
    <title>krpano</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <style>
        html { height:100%; }
        body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
    </style>
</head>
<body>

<script src="krpano.js"></script>

<div id="pano" style="width:100%;height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>ERROR:<br><br>Javascript not activated<br><br></td></tr></table></noscript>
    <script>
        embedpano({xml:null, target:"pano", html5:"only", mobilescale:1.0, onready:function(jsapi)
        {
            // get the 'global' object for getting direct access to all krpano apis
            var krpano = jsapi.get("global");
            
            // load a preview grid as pano
            krpano.actions.loadxml("<krpano><preview type='grid'/></krpano>");
            
            // add a hotspot
            var hs = krpano.actions.addhotspot("spot1");
            hs.type = "text";
            hs.html = "TEST";
            hs.renderer = "css3d";
            hs.ath = 0;
            hs.atv = 10;
            
            hs.onloaded = function()
            {
                console.log("hotspot loaded");
                if (hs.sprite)  // for css3d only (note - no VR support)
                {
                    hs.sprite.style.border = "3px double red";
                }
            }
            
            hs.onclick = function()
            {
                hs.ath += 5;
                hs.html = "TEST[br]h=" + hs.ath;
            }
        }});
    </script>
</div>

</body>
</html>


Best regards,
Klaus