Dynamically display a list of xml hotspots (for krpano) based on json list

Question

Dynamically display a list of xml hotspots (for krpano) based on json list

2.3k views Asked by Ian Steffy At 01 February 2016 at 16:28

A bit of a newbie question for xml/krpano,

I have a list of json items that I want to be dynamically loaded into XML <hotspots>. I can loop through each item in JavaScript but I have no clue how to do the same loop in XML!

Check out this picture: Imagine that each rectangle with an image is one item in a JSON list. Each rectangle you see is a <hotspot>. Right now these three hotspots are hardcoded into the XML file, but I want to dynamically load hotspots based on how many JSON list items exist.

Here is one hotspot. If my json list has 16 items, I would expect 16 hotspots to be loaded.

<!--* video image thumbnail *-->
    <hotspot name="start" distorted="true"
             url="/panorama/%$panoId%/thumb.png"
             ath="0" atv="0"
             ox="0" oy="36" 
             vr_timeout="2000"
             zorder="99"
             scale="0.8" 
             onclick="changepano( loadscene(video_scene, null, MERGE|KEEPVIEW|KEEPMOVING, BLEND(1)); );"
             alpha="0.0"
             onloaded="if(vr_start_done === true, removehotspot(start); start_vr(); , tween(alpha,1); );"
             />

Original Q&A

There are 1 answers

**Anoril** · Accepted Answer · 2016-08-16 15:57:32

Your question is about dynamically generating hotspots in KRPano from a JSON list.

It is not really clear to me the way you wrote your question if you want to read the JSON from KRPano XML file (let's say FROM KRPano) or if you are expecting to use Javascript to ask KRPano to produce the hotspots.

These are two completly distinct ways of doing it :)

Because I'm lazy and I suppose you want to deal with JSON in JS, I go for this solution...

Loading a JSON file from Javascript

Your KRPano project should look like a core HTML file presenting Javascript to embed the KRPano plugin.

There, you can declare a script content in your HTML in which you will parse your JSON content and you ask KRPano to generate a hotspot. This method should be called when you are sure KRPano is ready, or get it called from KRPano when it is ready, using "onready" attribute.

myHotspotList.json content:

var myHotspotList = [
    {
        name: "myFirstHotspot",
        atv:  15.0,
        ath:  56.5686,
        url:  "myHotspotImage.jpg"
    }
];

tour.html content:

<html>
    ...
    <script url="myHotspotList.json'></script>
    <script>
        function generateHotspots() {
            // First, we get the KRPano plugin
            var myKRPano = document.getElementById('krpanoSWFObject');
            // Now we parse the JSON object
            for(var idx in myHotspotList) {
                // Get the current Hotspot data
                var currHotspot = myHotspotList[idx];

                // Ask KRPano to create a hotspot with our current name
                myKRPano.call("addhotspot('"+ currHotspot.name +"');");

                // Now set various attributes to this hotspot
                myKRPano.call("set(hotpost['"+ currHotspot.name +"'].atv, "+currHotspot.atv+");");
                myKRPano.call("set(hotpost['"+ currHotspot.name +"'].ath, "+currHotspot.ath+");");
                myKRPano.call("set(hotpost['"+ currHotspot.name +"'].url, '"+currHotspot.url+"');");
            }
        }
    </script>
    ...
    // When you ask for pano creation, give your generation method as callback
    embedpano({target:"krpanoDIV", onready:generateHotspots});
    ...
</html>

I hope this help and you got the trick with calling JSON object attributes and all.

Regards

TechQA.

Dynamically display a list of xml hotspots (for krpano) based on json list

There are 1 answers

Related Questions in JSON

Related Questions in XML

Related Questions in KRPANO

Popular Questions

Popular Tags

Trending Questions