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 :
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:
<!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:
<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>