Is there any way to add info spot dynamically?

[vinaysharma14]

Hi,

Is there any way I can add info spots dynamically instead of adding at the time of instantiation? I want to add an info spot in viewer when I click on a button.

When I try to do so, nothing happens with panorama.add(infoSpot); Is this some sort of drawback that once the viewer and panorama is initialised, we can't add any new info spot after that?

Thanks :)

[station72]

@vinaysharma14 Have you found a solution?

[vinaysharma14]

@station72 No, I couldn’t.

[prudhvinag007]

I figured this out, If you still want help Follow these instructions Add this HTML to your body <button id="add-infospot" class="btn btn-success" >Add a Tag</button> <input type="hidden" value="0" id="add-info-status">

This is the custom script after panorama is added to the viewer

`$(document).ready(function () { $('#add-infospot').click(function () { viewer.OUTPUT_INFOSPOT = true; $('#add-info-status').val(1); }); $(panorama).click(function () { console.log(viewer.outputPositionCustomx + ', ' + viewer.outputPositionCustomy + ', ' + viewer.outputPositionCustomz + ' - ' + 'custom'); var infoStatusVal = $('#add-info-status').val(); if (parseInt(infoStatusVal) === 1) { var newinfospot = new PANOLENS.Infospot(); newinfospot.position.set(viewer.outputPositionCustomx, viewer.outputPositionCustomy, viewer.outputPositionCustomz); newinfospot.addHoverText('Sofa');

                            panorama.add(newinfospot);
                            $('#add-info-status').val(0);
                            viewer.OUTPUT_INFOSPOT = false;
                            panorama.isInfospotVisible = false;
                            $(panorama).trigger('click');                                
                        }
                    });
                });`

add this line in viewer function

this.outputPositionCustomx; this.outputPositionCustomy; this.outputPositionCustomz;

add this line in the outputPosition function after if ( point.length() === 0 ) { return; } this.outputPositionCustomx = point.x.toFixed(2); this.outputPositionCustomy = point.y.toFixed(2); this.outputPositionCustomz = point.z.toFixed(2);

[adam-sal]

@prudhvinag007 Could you please explain a little more detail what your code does? I pasted the code with your recommendation and I don't know what effect to expect. Best regards

[prudhvinag007]

Do you want to add infospot dynamically? By default, on hover, it logs the position in the console But when you click on it, you want to get the x,y,z position so that you could add an infospot there. I added a button that will tell the panolens to save the last hover location to those custom parameters, when they do, I retrieve them to add an infospot

[lucychen0103]

Hi @prudhvinag007 Thank you so much for your help! I am a bit new to coding however, and I'll like to know what you mean when you say

add this line in viewer function

this.outputPositionCustomx; this.outputPositionCustomy; this.outputPositionCustomz;

add this line in the outputPosition function after if ( point.length() === 0 ) { return; } this.outputPositionCustomx = point.x.toFixed(2); this.outputPositionCustomy = point.y.toFixed(2); this.outputPositionCustomz = point.z.toFixed(2);

How do I add the lines to viewer function and outputPosition function? Thanks!

[prudhvinag007]

this.outputPositionCustomx; this.outputPositionCustomy; this.outputPositionCustomz;

This is declaring new variables.

this.outputPositionCustomx = point.x.toFixed(2); this.outputPositionCustomy = point.y.toFixed(2); this.outputPositionCustomz = point.z.toFixed(2);

Here I am saving x,y,z values in those new variables.

[lucychen0103]

@prudhvinag007 Thanks, I meant, where in the viewer function? Do I simply open the Panolens.min.js file and change the viewer function directly?

[prudhvinag007]

The variable declaration can be done anywhere within the viewer function I declared them after this line this.outputDivElement = null;

[flyandi]

I added the position as event .. #299

[flyandi]

This is released in 0.12.1 now https://github.com/pchen66/panolens.js/releases/tag/v0.12.1

[NgaNT1096]

I figured this out, If you still want help Follow these instructions Add this HTML to your body <button id="add-infospot" class="btn btn-success" >Add a Tag</button> <input type="hidden" value="0" id="add-info-status">

This is the custom script after panorama is added to the viewer

`$(document).ready(function () { $('#add-infospot').click(function () { viewer.OUTPUT_INFOSPOT = true; $('#add-info-status').val(1); }); $(panorama).click(function () { console.log(viewer.outputPositionCustomx + ', ' + viewer.outputPositionCustomy + ', ' + viewer.outputPositionCustomz + ' - ' + 'custom'); var infoStatusVal = $('#add-info-status').val(); if (parseInt(infoStatusVal) === 1) { var newinfospot = new PANOLENS.Infospot(); newinfospot.position.set(viewer.outputPositionCustomx, viewer.outputPositionCustomy, viewer.outputPositionCustomz); newinfospot.addHoverText('Sofa');

                            panorama.add(newinfospot);
                            $('#add-info-status').val(0);
                            viewer.OUTPUT_INFOSPOT = false;
                            panorama.isInfospotVisible = false;
                            $(panorama).trigger('click');                                
                        }
                    });
                });`

add this line in viewer function

this.outputPositionCustomx; this.outputPositionCustomy; this.outputPositionCustomz;

add this line in the outputPosition function after if ( point.length() === 0 ) { return; } this.outputPositionCustomx = point.x.toFixed(2); this.outputPositionCustomy = point.y.toFixed(2); this.outputPositionCustomz = point.z.toFixed(2);

Hello, I followed the instructions but nothing changed.i use ajax to save to database ok. But it doesn't appear until page reload. Console log infospot has been added to panorama. Give me advice.

[joscelyn]

I founded !

The important line to add is infospot.show()

A full example: `function addInfoSpot() { const position = getPanoClickPosition() if (position === null) return

        infospot = new PANOLENS.Infospot()
        infospot.position.set(-position.x, position.y, position.z)
        infospot.addHoverText('The Where Is Bar')
        panorama.add(infospot)
        infospot.show()
    }

    function getPanoClickPosition() {
        const intersects = viewer.raycaster.intersectObject(viewer.panorama, true)
        if (intersects.length > 0) {
            const point = intersects[ 0 ].point.clone()
            const world = viewer.panorama.getWorldPosition(new THREE.Vector3())
            point.sub(world)
            if (point.length() !== 0) { 
                return {
                    x: parseInt(point.x.toFixed(2)),
                    y: parseInt(point.y.toFixed(2)),
                    z: parseInt(point.z.toFixed(2))
                }
            }
        }

        return null
    }`