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, January 28th 2020, 6:35pm

Error After Removing Hotspot

I add a hotspot by doing:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
var pano = document.getElementById('pano');

var hotspotUuid = 'temphotspot';

var h = pano.get("view.hlookat");

var v = pano.get("view.vlookat");

pano.call("addhotspot(" + hotspotUuid + ")");
pano.set("hotspot[" + hotspotUuid + "].url", 'hotspot.svg');
pano.set("hotspot[" + hotspotUuid + "].ath", h);
pano.set("hotspot[" + hotspotUuid + "].atv", v);



then at a point later in time, when I try removing it, it works, but I get an error in the console and I don't know why.

Source code

1
2
3
4
var pano = document.getElementById('pano');

var hotspotUuid = 'temphotspot';
pano.call("removehotspot(" + hotspotUuid + ");");


I've removed hotspots before so not sure what I am doing incorrectly - any ideas?
martincarlin87 has attached the following image:
  • Screenshot 2020-01-28 at 17.35.11.png

2

Tuesday, January 28th 2020, 9:11pm

Hi,

there must be also something else involved.

Please post a full example.

Best regards,
Klaus

3

Wednesday, January 29th 2020, 11:06am

Thanks Klaus,

There is a fair bit of other code on the page but this is the most minimal example. I don't *think* anything else should be affecting this part as it all tends to be encapsulated within listeners and pure functions.

If I come up with anything I will update my post.

As I mentioned, the 'temp' hotspot is removed successfully but I don't know why the error then appears on the console.

It's probably worth checking my usage, when calling addhotspot(parameter) and removehotspot(parameter), what property of the hotspot is 'parameter'?

e.g. is it the 'name' of the hotspot?

The reason for asking is I've been generating uuids but setting the first two characters to 'hs' because hotspots need to begin with a letter, but when I'm loading persisted hotspots on the page and creating them, I'm noticing that all the properties are set correctly, but we have a 'name' column in our hotspot database table and that is being set as the hotspot name despite the hotspot being created by doing pano.call("addhotspot(" + hotspot.uuid + ")"); - but the uuid is also set correctly, so I'm not sure what would happen if I try and remove using the uuid, because it won't be found if 'name' is the identifier internally for the krpano api.

I don't think that affects my issue with the static hotspot name but it might be an issue in the future.

Thanks,
Martin

4

Wednesday, January 29th 2020, 11:45am

Hi again,

I've got a more self contained example.

In this one, I am setting the north position, and adding a hotspot at the current pano position, sending an ajax request to save the position, and then removing the hotspot.

This seems to be producing the same error when it didn't before, so it's entirely possible something else in my code is causing the issue but it's hard to see what it code be since all of this logic is contained within one function.

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
function setNorth() {

    var pano = document.getElementById('pano');    var h = pano.get("view.hlookat");

    var v = pano.get("view.vlookat"); 
var name = "hs" + ((Date.now() + Math.random()) | 0); 
console.log(name);

    pano.call("addhotspot(" + name + ")"); 
pano.set("hotspot[" + name + "].id", name);
pano.set("hotspot[" + name + "].uuid", name);
pano.set("hotspot[" + name + "].name", name);
pano.set("hotspot[" + name + "].url", 'compass-calibration.png');
pano.set("hotspot[" + name + "].ath", h);
pano.set("hotspot[" + name + "].atv", v);

    // save
$.ajax({
    type: 'POST',
    url: '/set-north',
    dataType: 'json',
    data: {                north: JSON.stringify(h)            }        }) 
    .done(function(data) {
        toastr.success('North position set, the calibration hotspot will now be removed');
        // remove north hotspot
        setTimeout(function() {
            console.log('remove north');
            console.log(name);
                pano.call('removehotspot(' + name + '));');            }, 3000);
        });
}



Interestingly, in my first example, if I remove the temporary hotspot immediately after adding it, no error is produced *blink*


Apologies for any bad formatting, it's tricky to align it for some reason.

Cheers,

Martin
martincarlin87 has attached the following image:
  • Screenshot 2020-01-29 at 10.49.51.png

5

Thursday, January 30th 2020, 2:28pm

Just an update, I think the errors were caused because we were setting the id attribute of the hotspot.

I haven't seen that mentioned in the docs I don't think - is it something that may be worth adding?

Cheers,
Martin

6

Saturday, February 1st 2020, 11:03am

Hi,

the elements have 'id' attribute and so setting it has no effect.

I have tried your example code now, but can't reproduce any problems. So there must be still something else involved.

And even when checking the krpano code itself in detail I can't image what would need to be done to produce such error...

When removing a hotspot, the index values of all hotspots 'above' it (that ones with an higher index) would get updated, so the error "Cannot read property 'index' of undefined" could eventually happen when there would be an invalid hotspot storage in the internal list/arary of hotspots, but even creating such is normally not possible...

Best regards,
Klaus