Sie sind nicht angemeldet.

Error After Removing Hotspot

martincarlin87

Anfänger

  • »martincarlin87« ist der Autor dieses Themas

Beiträge: 17

  • Nachricht senden

1

Dienstag, 28. Januar 2020, 18:35

Error After Removing Hotspot

I add a hotspot by doing:

Quellcode

 
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.

Quellcode

 
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« hat folgendes Bild angehängt:
  • Screenshot 2020-01-28 at 17.35.11.png

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

2

Dienstag, 28. Januar 2020, 21:11

Hi,

there must be also something else involved.

Please post a full example.

Best regards,
Klaus

martincarlin87

Anfänger

  • »martincarlin87« ist der Autor dieses Themas

Beiträge: 17

  • Nachricht senden

3

Mittwoch, 29. Januar 2020, 11:06

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

martincarlin87

Anfänger

  • »martincarlin87« ist der Autor dieses Themas

Beiträge: 17

  • Nachricht senden

4

Mittwoch, 29. Januar 2020, 11:45

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.

Quellcode

 
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« hat folgendes Bild angehängt:
  • Screenshot 2020-01-29 at 10.49.51.png

martincarlin87

Anfänger

  • »martincarlin87« ist der Autor dieses Themas

Beiträge: 17

  • Nachricht senden

5

Donnerstag, 30. Januar 2020, 14:28

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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

6

Samstag, 1. Februar 2020, 11:03

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

Ähnliche Themen