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
.
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
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.
})