How add hotspots to Compare Panos?

federiko

Hi, how add hotspots to new Splitscreen (Compare Panos)?
krpano.com - Examples

I am use dynamic js api.

Please make a simple example of adding any hotspot.

federiko

Code example.

HTML

<!DOCTYPE html>
<html>
<head>
	<title>krpano</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<style>
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>
</head>
<body>

<script src="krpano.js"></script>

<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>ERROR:<br><br>Javascript not activated<br><br></td></tr></table></noscript>
	<script>

  function krpano_onready_callback(krpano_interface) {
   
   var spotname="hotspot_name_22";
   
   //add hotspot
   krpano_interface.call("addhotspot(" + spotname + ");");
   
   krpano_interface.call("set(hotspot[" + spotname + "].renderer,svg);");
   
   //add line
   krpano_interface.call("set(hotspot[" + spotname + "].polyline, true);");

   krpano_interface.call("set(hotspot[" + spotname + "].bordercolor, 0xffff00);");
   
   krpano_interface.call("set(hotspot[" + spotname + "].point[0].ath,-12);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[0].atv,-5);");
   
   krpano_interface.call("set(hotspot[" + spotname + "].point[1].ath,-10);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[1].atv,-5);");
     
   krpano_interface.call("set(hotspot[" + spotname + "].point[2].ath,10);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[2].atv,5);");
     
   krpano_interface.call("set(hotspot[" + spotname + "].point[3].ath,10);");
   krpano_interface.call("set(hotspot[" + spotname + "].point[3].atv,-5);");



  }
  
  
		embedpano({xml:"compare-panos.xml", target:"pano", passQueryParameters:"xml,skin_settings.littleplanetintro,editmode", onready: krpano_onready_callback});

	</script>
</div>

</body>
</html>

Alles anzeigen

If you break the panorama, you can see a line behind the image layer. Screenshot in attachment.

federiko

Final decision.

JavaScript

//getting parent DIV SVG element by its ID
function setZIndexForSvgParent(divId) {
   //Get element by ID
   const element = document.getElementById(divId);
   
   //does the element exist?
   if (element) {
       //Find all SVGs inside an element
       const svgs = element.getElementsByTagName('svg');
       
       //Do SVGs exist?
       if (svgs.length > 0) {
           //use first SVG
           const svg = svgs[0];
           
           //Find the parent DIV element
           const parentDiv = svg.parentElement;
           
           //does the parent exist and is it a DIV?
           if (parentDiv && parentDiv.tagName.toLowerCase() === 'div') {
               // set z-index
               parentDiv.style.zIndex = '5';
           } else {
               console.log('Parent not found or not a DIV.');
           }
       } else {
           console.log('SVG not found within element with ID:', divId);
       }
   } else {
       console.log('Element not found:', divId);
   }
}

function krpano_onready_callback(krpano_interface) {
 if ( krpano_interface.get("device.html5") ) {
  // for HTML5 it s possible to assign JS functions directly to krpano events
  krpano_interface.set("events.onviewchanged", function() {    
   krpanoonviewchangeevent();
  }.bind(null));
 } else { 
  // for Flash the js() action need to be used to call from Flash to JS (this code would work  for Flash and HTML5)
  krpano_interface.set("events.onviewchanged", "js(krpanoonviewchangeevent(););");
 }
}

embedpano({html5:"only", id:"krpanoViewer", target:"krpanoDiv", xml:"compare-panos.xml", vars:krpano_vars, passQueryParameters:false, consolelog : true, onready : krpano_onready_callback});

function krpanoonviewchangeevent() {
   setZIndexForSvgParent('krpanoViewer'); //krpanoViewer or krpanoSWFObject
}

Alles anzeigen

How add hotspots to Compare Panos?

Jetzt mitmachen!

Tags