Change hotspot description through javascript API

Q&A about the latest versions
Post Reply
snmabaur
Posts: 8
Joined: Mon Oct 04, 2021 3:03 pm

Hi

What I'm trying to do is to build a backend cms so that I can enter the data there instead inside the Pano2VR, it's easier for the content producers to work with the cms... For that I fetch the data through an API and update the data in the corresponding places

I see that I can update the pan and tilt of the hotspot but not the title and description. Is there a possibility to change the description or title of a hotspot through javascript? Since the content of each hotspot is read from the xml file and copied to the defined placeholder in the skin on click of the hotspt I can't just target a div with a class in the tour but have to change the content inside the xml file

I see that I can update the pan and tilt of the hotspot but not the title and description, is there anyone who tried something like that?

Or is there a way to get the hotspot information on click of the hotspot? Then I could just read the hotspot id, get the data and write it to the defined placeholder

Something like this:

Code: Select all

pano.on("hotspotclicked", function() {
    alert("Hotspot id:xxxxxx clicked");
});
Thanks for any help
snmabaur
Posts: 8
Joined: Mon Oct 04, 2021 3:03 pm

Nevermind :) found a solution

Since I can't add the hotspot id as a class variable in the skin to the actual hotspot I added a textfield inside the hotspot and set the id there as text

Screenshot 2021-10-20 at 16.21.57.png
Screenshot 2021-10-20 at 16.21.57.png (43.02 KiB) Viewed 1548 times

In Javascript I loop through all hotspot DOM elements, find the exact id match from the API response and then set the content to the hotspot popup through a click event

Code: Select all

// hotspotData from API
function setHotSpotDataAttr(hotspotData) {
    let hotspots = document.querySelectorAll('.ggskin_hotspot')
    document.querySelectorAll('.ggskin_hotspot').forEach(item => {
        if (item.querySelector('.hotspot_id')) {
            const hotspotId = item.querySelector('.hotspot_id').textContent
            item.addEventListener('click', event => {
                let currentHotspotData = hotspotData.filter(function (item) {
                    if (item.node.hotspot_id === hotspotId) {
                       document.querySelector('.popup_image img').src = '//localhost:8080' + item.node.hotspot_image.fullpath;
                       document.querySelector('.popup_title div').innerHTML = item.node.title;
                       document.querySelector('.popup_content div').innerHTML = item.node.description;
                    }
                })
            })
        }
    })
}
Maybe it helps someone ;)

cheers
Idocio
Posts: 52
Joined: Wed Apr 15, 2020 9:26 pm

Hello. I found this very interesting. Could you give more information?
What API are you using?
Where do you enter the code in Pano2VR?
What is the data source and how does it communicate with Pano2VR?

I don't have much experience with JS.
A small project or tutorial would be helpful.
a greeting
User avatar
Multimediafabrik
Posts: 63
Joined: Thu Jun 21, 2018 11:28 pm

snmabaur wrote: Wed Oct 20, 2021 2:04 pm Hi

What I'm trying to do is to build a backend cms so that I can enter the data there instead inside the Pano2VR, it's easier for the content producers to work with the cms... For that I fetch the data through an API and update the data in the corresponding places

I see that I can update the pan and tilt of the hotspot but not the title and description. Is there a possibility to change the description or title of a hotspot through javascript? Since the content of each hotspot is read from the xml file and copied to the defined placeholder in the skin on click of the hotspt I can't just target a div with a class in the tour but have to change the content inside the xml file

I see that I can update the pan and tilt of the hotspot but not the title and description, is there anyone who tried something like that?

Or is there a way to get the hotspot information on click of the hotspot? Then I could just read the hotspot id, get the data and write it to the defined placeholder

Something like this:

Code: Select all

pano.on("hotspotclicked", function() {
    alert("Hotspot id:xxxxxx clicked");
});
Thanks for any help
Hi, Maybe this will help you:
here is a bit of documentation about the js api: https://ggnome.com/doc/javascript-api/
If you want to change the discription of a specific hotspot, where you know the ID you can use

Code: Select all

pano.getHotspot(ID)
.
This will return you the hotspot object. There you change the "description" member:

Code: Select all

let hs = pano.getHotspot("hotspotID");
hs.description  = "new Description"
keep in mind that after changing nodes, the description will reset, as the hotspot is rerendered with the initial values.
to fix this, you can use the "changenode" event listener:

Code: Select all

	//I recommend using .addListener instead of .on, so you can have multiple triggers and functions for the event
	pano.addListener("changenode", ()=>{
		let currentNode = pano.getCurrentNode();
		if(currentNode = "myNodeID"){ //if you only want to continue, if a certain node is active
			let hs = pano.getHotspot("hotspotID");
			hs.description  = "new Description"
		}
	});
i you want to loop through all hotspots, you can do this:

Code: Select all

	pano.getPointHotspotIds().map((id)=> pano.getHotspot(id)).forEach((hs,i)=>{ //first get all hotspot ID's of the current node, then get the hotspots from the ids and loop through the hotspot objects with forEach
		hs.title = "new title - " + i.toString();
	});
if you want to mutate the DOM element for the hotspot, you can access it with:

Code: Select all

	let hs = pano.getHotspot(id);
	let hotspotElement = hs.div;
if you only need the DOM Elements for the hotspots, you can use

Code: Select all

pano.getCurrentPointHotspots()
function

So if you want to get the information of the hotspot on click, you can do this:

Code: Select all

pano.addListener("changenode", ()=>{
	pano.getPointHotspotIds().map((id)=> pano.getHotspot(id)).forEach((hs,i)=>{
		hs.div.addEventListener("mousedown",()=>{ //Id rather use mousedown here instead of click, as clicking on hotspots with external urls will cause it to not fire the event. The mousedown event fires before the click event.
			console.log(hs); //do whatever you need with the hs object
		});
	});
});
a more unreliable, but ressource lighter approach: (only works with hotspots that change nodes)

Code: Select all

pano.addListener("beforechangenode",()=>{
       let hotspot = pano.hotspot;
       if(!hotspot.type !== "empty"){
          console.log(hotspot)
       }else{
          console.warn("empty hs")
       }
 // pano.hotspot returns the hotspotObject the user currently hovers his mouse over. This is very unreliable tho.
})
Post Reply