Javascript: Certain Image Names Break Hotspots (They Disappear)

Anfänger

Donnerstag, 11. Oktober 2012, 17:22

I'm currently trying to generate hotspots on the fly with javascript. I have found that if I use short and simple names for my hotspots and my .GIF images, they work just fine.

However, I would like to use GUIDs (Globally Unique IDentifiers) for the names because I have a database associated with them. The problem with this is that a hotspot will successfully get created and then disappear when another hotspot is created somewhere else down the line. There's no specific order two which hotspots cause others to get deleted and whenever this occurs, the newer hotspot has a distorted size.

I wanted to just store the hotspot information in the XML file and modify it with javascript but it doesn't seem to work. If I use the krpano.set(hotspot[name].url=myurl.gif) action, the hotspot does not change from what I had in the XML. I need to be able to change this on-the-fly.

The following code all seems to work just fine because the names are simple, I want to be able to use complex GUID names like d342d26b-92c0-4671-8ba3-bfa2df8603fe.gif.

Thanks

Here is my Javascript for creating hotspots :

Quellcode

function init(pano) {


swf_path = "../main_flash.swf";
xml_path = pano+".xml";

displayApplet(swf_path,"krpanoSWFObject",xml_path,"PanoDiv");

krpano = document.getElementById("krpanoSWFObject");  
setTimeout(function(){loadHS();},1250); // Necessary, without it the SWF Object won't load everything

}

function getLink(link)
{
   window.location(link+".html");
}
   

var TweenIn = "tween(alpha,1);tween(scale,3.0);";
var TweenOut= "tween(alpha,0.8);tween(scale,1.5);";
var SCALE = 1.5;
var AUTH = 20;
var PATH = "PANOS\\images\\Link.png";

function createHotSpotWithImage(GUID,PAN,YAW,COPY,TYPE,INFO,STILL)
{
	
	generateHS(GUID,TYPE,PAN,YAW,STILL,false,COPY);
}

function createHotSpot(GUID,PAN,YAW,COPY,TYPE,INFO)
{
	generateHS(GUID,TYPE,PAN,YAW,false,false,COPY);
}

function createHotSpotLink(GUID,PAN,YAW,COPY,LINK)
{
	generateHS(GUID,"LINK",PAN,YAW,false,LINK,COPY);
}

function generateHS(GUID,TYPE,ATH,ATV,STILL,LINK,COPY)

{


	ID = "KrpanoSWFObject"; //ID of the SWF Object, won't change often.

	 HS_TYPES = ["LINK","RED","GRAY","BROWN","YELLOW","GREEN","BLUE","PURPLE"];
	 HSNAME = GUID+COPY;

	 // remove numbers from the actual hotspot name just in case it causes errors
	 
	 numArray = ["1","2","3","4","5","6","7","8","9","0","-"];
	 letArray = ["one","two","tre","for","fiv","six","svn","eit","nin","zro","dsh"];
	 
	 var i = 0;
	 while (i < 11)
	 {
		var curNum = numArray[i];
		var curLet = letArray[i];
		var	regex = new RegExp(curNum,"g");
		var HSNAME = HSNAME.replace(regex,curLet);
		i = i+1;
	 }

// predefine some krpano functions for clarity	 
	 ADDHS = "addhotspot("+GUID+COPY+");";
	 HSREF = "hotspot["+GUID+COPY+"]";

// actual hotspot generation code
	if (krpano && krpano.get)
	{

	
		if(STILL != false) // if there's a still image, add the showpic function
		{
			LOOKTO = "looktohotspot(get(name));showpic();";
			isStill = true;
		}
		else
		{ 
			LOOKTO = "looktohotspot(get(name));"
			isStill = false;
		}
		
		switch(TYPE) //
		{
			case HS_TYPES[0]: //0 = ClickTo
		
				LOOKTO = "js(getNewLINK("+LINK+");)";
				IMGTYPE = "";
				PATH = "..\\images\\Link.png";
				break;				
			
			default:
				
				IMGTYPE = "";
				PATH = "..\\hotspots\"+PanoName+"_"+GUID+".gif";
		}
		
/////// Create the actual Hotspot

		
		krpano.call(ADDHS); // creates the actual hotspot in krpano
		
		krpano.set(HSREF+".url",APPLETPATH);
		krpano.set(HSREF+".zoom",true);
		krpano.set(HSREF+".alpha",0.8);
		krpano.set(HSREF+".onclick",LOOKTO);
		krpano.set(HSREF+".ath",ATH);
		krpano.set(HSREF+".atv",ATV);
		krpano.set(HSREF+".scale",SCALE);
		krpano.set(HSREF+".auth",AUTH);
		krpano.set(HSREF+".onover",TweenIn);
		krpano.set(HSREF+".onout",TweenOut);
		
		if(isStill == true)
		{ 
			krpano.set(HSREF+".pic",STILL);
		}

/////// END
	}


}

Here is my HTML page for the panorama:

Quellcode

<!DOCTYPE html>
<html>
	<head>
	
	</head>
	
	<script src="../panofunctions.js"></script>
	<script src="../krpano.js"></script>
	<link rel="stylesheet" type="text/css" href="../style.css" /> 
	
	<script>
		var PanoName = "PANO001";
		function initialize()
		{
			init(PanoName)
		}
		
		function loadHS()
		{
			createHotSpotWithImage("NEW001",211,-3,1,"RED", "info","IMG015");
			createHotSpotWithImage("NEW002",185,7,1,"BROWN", "info","IMG016");
			createHotSpotWithImage("NEW003",340,0,1,"BROWN", "info","IMG017");
			createHotSpotWithImage("NEW004",211,14,1,"GRAY", "info","IMG018");
			createHotSpotWithImage("NEW005",211,4,1,"RED", "info","IMG019");
			
			createHotSpot("NEW006",264,18,1,"GRAYr", "info");
			createHotSpot("NEW007",271,-59,1,"GRAYr", "info");
			createHotSpot("NEW008",244,-46,1,"GRAYr", "info");
			createHotSpot("NEW009",234,-15,1,"GRAYr", "info");
			createHotSpot("NEW009",297,-15,2,"GRAY", "info");
			
			createHotSpotLink("NEW011",263,0,1,"NEW017.html");
			createHotSpotLink("NEW012",457,0,1,"NEW018.html");
			createHotSpotLink("NEW013",187,0,1,"NEW019");
			createHotSpotLink("NEW014",418,0,1,"NEW020");
			

		}
		
		
		
	</script>
	
	<body onload="initialize();">
		<div id="PanoDiv">
			<noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript>
		</div>
	</body>
</html>

Here is my XML file for the Panorama:

Quellcode

<krpano version="1.0.8">

<include url="../template.xml"/>

<action name="onstart">
  <!-- SET HEADING -->
  set(heading, 98);
</action>


<image>
	<left  url="PANO001.tiles/pano_l.jpg" />
	<front url="PANO001.tiles/pano_f.jpg" />
	<right url="PANO001.tiles/pano_r.jpg" />
	<back  url="PANO001.tiles/pano_b.jpg" />
	<up    url="PANO001.tiles/pano_u.jpg" />
	<down  url="PANO001.tiles/pano_d.jpg" />
</image>
</krpano>

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

2

Donnerstag, 11. Oktober 2012, 19:22

Might help to just simply the request for support.

Which filenames fail to load?

No one's got time to build out a project with your code for testing. A better idea is to build it out and post a link online, then we can interface your project and trace out what's going on.
You'll also need an onloaded attribute in your hotspot to call code to reset the size

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

stevenleoncooper

Anfänger

Beiträge: 10

3

Freitag, 12. Oktober 2012, 07:33

Zitat von »sachagriffin«

Might help to just simply the request for support.

Which filenames fail to load?

No one's got time to build out a project with your code for testing. A better idea is to build it out and post a link online, then we can interface your project and trace out what's going on.
You'll also need an onloaded attribute in your hotspot to call code to reset the size

Hmm turns out I kind of solved my problem. I had made a function to convert numbers into strings so that my hotspot name would never have numbers in it; I just forgot to actually use the output of that as the hotspot name.

So now the hotspots don't disappear - the problem seems to be that you can't have numbers in your hotspot name when using krpano.call(addhotspot(name)) .

My work-around is functional but it's a bit strange that using numbers makes this behave so erratically.

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

4

Freitag, 12. Oktober 2012, 07:38

Only at the beginning.

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

5

Freitag, 12. Oktober 2012, 18:07

Hi,

please see here:
http://krpano.com/docu/xml/#name-notes

krpano allows addressing elements by name and by index (0-n), and for performance-reasons only the first character of a 'name' will be checked - and when that first character is a numeric character, then that name will be interpreted/parsed as Integer Number and used as index.

Best regards,
Klaus

Zum Seitenanfang

stefan.vonfintel

Anfänger

Beiträge: 6

6

Dienstag, 15. Januar 2013, 19:10

I know this is an old post but was struggling with that as well. Thanks for the heads up Klaus. All running perfectly now :)

Zum Seitenanfang