Add hotspot with javascript

  • Hi All

    I am quite new with krpano. I try to add a hotspot with JavaScript. Bud it does not work. Can someone help me?
    <html>
    <head>
    <title>Add Hotspot</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
    body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#000000; margin:0; padding:0; }
    a{ color:#FFFFFF; text-decoration:underline; }
    a:hover{ color:#AAAAAA; text-decoration:underline; }
    </style>
    <script src="krpano/krpano.js" type="text/javascript" async=""></script>
    </head>
    <body>

    <center>

    <h2>Add Hotspot with Javascript</h2>

    <table width="700" style="border: 1px solid white; border-image: none;">
    <tbody>
    <tr style="vertical-align: top;">
    <td>
    <div onclick="addhotspotonkarpano()" id="krpanoDIV" style="width: 600px; height: 400px;">

    </div>
    </td>
    <td>
    <div style="padding: 5px; width: 100px;">
    <span><b><u>mouse</u></b></span><br>
    <span>x=</span><span id="mouse_x"></span><br>
    <span>y=</span><span id="mouse_y"></span><br>
    <span>ath=</span><span id="mouse_ath"></span><br>
    <span>atv=</span><span id="mouse_atv"></span><br>
    </div>
    </td>
    </tr>

    </tbody></table>

    </center>


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

    <script>
    // <![CDATA[

    embedpano({swf:"krpano/krpano.swf", id:"krpanoSWFObject", xml:"Aussen1.xml", html5:"prefer", target:"krpanoDIV"});


    function getlookat()
    {
    var krpano = document.getElementById("krpanoSWFObject");


    if (krpano && krpano.get) // it can take some time until krpano is loaded and ready
    {
    krpano.call("screentosphere(mouse.x, mouse.y, mouseath, mouseatv); js( showmouseinfo() );");
    }
    }

    function showmouseinfo()
    {
    var krpano = document.getElementById("krpanoSWFObject");

    var mouse_at_x = krpano.get("mouse.x");
    var mouse_at_y = krpano.get("mouse.y");
    var mouse_at_h = krpano.get("mouseath");
    var mouse_at_v = krpano.get("mouseatv");

    document.getElementById("mouse_x").innerHTML = mouse_at_x + "px";
    document.getElementById("mouse_y").innerHTML = mouse_at_y + "px";
    document.getElementById("mouse_ath").innerHTML = mouse_at_h.toFixed(2) + "°";
    document.getElementById("mouse_atv").innerHTML = mouse_at_v.toFixed(2) + "°";
    }

    // update mouse info 30 times per second
    var lookat_interval = setInterval('getlookat()', 1000.0 / 30.0);


    // disable text selection to avoid cursor flickering
    window.onload = function()
    {
    document.onselectstart = function() {return false;} // ie
    document.onmousedown = function() {return false;} // mozilla
    }

    function addhotspotonkarpano()
    {
    var krpano = document.getElementById("krpanoSWFObject");

    var mouse_at_h = krpano.get("mouseath");
    var mouse_at_v = krpano.get("mouseatv");

    krpano.call(addhotspot(newspot));
    krpano.set(hotspot[newspot].url,hotspot.png);
    krpano.set(hotspot[newspot].ath, mouse_at_h);
    krpano.set(hotspot[newspot].atv, mouse_at_v);
    krpano.set(hotspot[newspot].scale,0.7);
    krpano.set(hotspot[newspot].zoom,true);
    krpano.set(hotspot[newspot].onclick, draghotspot());

    }

    // ]]>
    </script>

    </body>
    </html>

    Edited once, last by dama79: typo (February 28, 2017 at 9:50 PM).

  • A way it works is:

    function addhotspotonkarpano()
    {
    var krpano = document.getElementById("krpanoSWFObject");

    var mouse_at_h = krpano.get("mouseath");
    var mouse_at_v = krpano.get("mouseatv");

    var spotname = "spot1";

    var str = "";
    str += "addhotspot(" + spotname + ");";
    str += "set(hotspot[" + spotname + "].url,hotspot.png);";
    str += "set(hotspot[" + spotname + "].ath,"+ mouse_at_h +");";
    str += "set(hotspot[" + spotname + "].atv,"+ mouse_at_v +");";
    str += "set(hotspot[" + spotname + "].scale,0.7);";
    str += "set(hotspot[" + spotname + "].zoom,true);";
    str += "set(hotspot[" + spotname + "].onhover,showtext(Name of the Hostpot));";
    krpano.call(str);

    }

  • This function works for me *smile*

  • Thank you Sebastien, this code works for me too now.

    But does someone knows a solution to get this work in the tour editor? I'm looking for a solution to add 4 kinds of hotspots in the tour editor.

    Tnx for help,
    Yvan

  • The plugin editor is in flash so i think you need to create your own tour editor in html5 and add some button to exec js code like this function.
    To change the style of the hotspot you juste have to change the image source.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!