Hotspot click event calls an external function help

  • Greetings

    I'm trying to figure out how to get external functions called when a hotspot in krpano is clicked to handle to UI functionality that lives outside of krpano. Here's what I'm thinking about doing this.

    Code
    var pano = document.getElementById("krpanoSWFObject");pano.addEventListener('hotspotClick', handle_hotspot_clicked);
    function handle_hotspot_clicked(e){	//handle ui	}


    Can anyone please point me in the right direction on how to accomplish this? Thank you.

  • <!-- dynamically generated xml file (by the editor plugin) -->
    <krpano version="1.18.5">

    <progress showload="none" showwait="none" />

    <display movequality10="BEST" stillquality10="BEST" />

    <view limitfov="false" stereographic="true" />

    <image>
    <left url="images/interior_l.jpg" />
    <front url="images/interior_f.jpg" />
    <right url="images/interior_r.jpg" />
    <back url="images/interior_b.jpg" />
    <up url="images/interior_u.jpg" />
    <down url="images/interior_d.jpg" />
    </image>

    <control keycodesin="" keycodesout="" />

    <contextmenu fullscreen="true">
    </contextmenu>

    <plugin name="n0" url="plugins/editor.swf" keep="false" align="bottom" x="0" y="16" />

    <hotspot name="car" url="hotspot.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="99.192" oy="94.70" width="264.811" height="272.446"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs1" capture="false" zorder="2" alpha="0" onclick="tween(hotspot[car].alpha,1.0);" onout="tween(hotspot[car].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();">
    >
    <point ath="11.433681" atv="22.169917" />
    <point ath="11.765017" atv="18.829234" />
    <point ath="13.55327" atv="15.374293" />
    <point ath="16.06359" atv="12.454018" />
    <point ath="18.942598" atv="10.989644" />
    <point ath="22.319177" atv="9.700223" />
    <point ath="27.239909" atv="10.037516" />
    <point ath="30.635586" atv="11.761362" />
    <point ath="32.840404" atv="13.744079" />
    <point ath="34.700327" atv="16.157505" />
    <point ath="35.557603" atv="18.76717" />
    <point ath="36.100035" atv="23.665224" />
    <point ath="34.700327" atv="27.61391" />
    <point ath="32.591832" atv="30.075088" />
    <point ath="30.117236" atv="31.769263" />
    <point ath="24.782563" atv="33.325419" />
    <point ath="19.563311" atv="32.855463" />
    <point ath="15.091573" atv="31.151082" />
    <point ath="12.101152" atv="27.033531" />
    <point ath="12.101152" atv="27.033531" />
    </hotspot>

    <hotspot name="hotspot_1" url="hotspot_2.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-500" oy="172.351" width="600.089" height="62.387"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs2" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_1].alpha,1.0);" onout="tween(hotspot[hotspot_1].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-45.470811" atv="15.391708" />
    <point ath="-44.974528" atv="15.991863" />
    <point ath="-43.860782" atv="16.989501" />
    <point ath="-42.755789" atv="17.56374" />
    <point ath="-41.380037" atv="18.091131" />
    <point ath="-39.985016" atv="17.928058" />
    <point ath="-37.797702" atv="17.820442" />
    <point ath="-36.575419" atv="17.328964" />
    <point ath="-34.435977" atv="17.308531" />
    <point ath="-33.26751" atv="17.292875" />
    <point ath="-31.088584" atv="17.967416" />
    <point ath="-26.872102" atv="19.199171" />
    <point ath="-23.207172" atv="19.937705" />
    <point ath="-18.568107" atv="20.96885" />
    <point ath="-14.20959" atv="22.334235" />
    <point ath="-10.592965" atv="23.710154" />
    <point ath="-9.313533" atv="24.294726" />
    <point ath="-6.87684" atv="24.814239" />
    <point ath="-5.173671" atv="25.009595" />
    <point ath="-1.062971" atv="25.188088" />
    <point ath="5.985321" atv="25.160663" />
    <point ath="7.831367" atv="25.094823" />
    <point ath="10.920146" atv="24.045965" />
    <point ath="11.170096" atv="21.738125" />
    <point ath="8.111357" atv="21.602442" />
    <point ath="-0.352118" atv="21.695816" />
    <point ath="-9.46778" atv="21.150658" />
    <point ath="-15.97216" atv="20.122679" />
    <point ath="-25.043428" atv="18.68617" />
    <point ath="-30.36272" atv="17.087626" />
    <point ath="-33.861222" atv="16.198404" />
    <point ath="-35.394685" atv="16.453977" />
    <point ath="-39.392284" atv="16.519733" />
    <point ath="-40.99393" atv="16.211808" />
    <point ath="-42.875735" atv="14.192274" />
    <point ath="-42.834413" atv="14.205573" />
    </hotspot>

    <hotspot name="hotspot_2" url="hotspot_3.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="0" atv="0" edge="lefttop" ox="-7.630" oy="289.048" width="51.166" height="44.434"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs3" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_2].alpha,1.0);" onout="tween(hotspot[hotspot_2].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-0.819291" atv="32.385154" />
    <point ath="0.0" atv="30.248431" />
    <point ath="2.917862" atv="29.865693" />
    <point ath="5.008631" atv="30.327188" />
    <point ath="4.787858" atv="31.95849" />
    <point ath="4.083953" atv="32.401086" />
    <point ath="2.806943" atv="32.602128" />
    <point ath="1.866281" atv="33.360267" />
    <point ath="0.696411" atv="33.778505" />
    <point ath="-0.708114" atv="33.539232" />
    </hotspot>

    <hotspot name="hotspot_4" url="hotspot_4.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="180" atv="0" edge="lefttop" ox="-217.235" oy="-90.215" width="717.235" height="113.105"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs5" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="177.071134" atv="1.751764" />
    <point ath="176.999895" atv="-0.260468" />
    <point ath="177.62329" atv="-1.84388" />
    <point ath="179.06812" atv="-3.928368" />
    <point ath="-177.782368" atv="-3.94749" />
    <point ath="-175.843455" atv="-3.32542" />
    <point ath="-174.923829" atv="-2.047436" />
    <point ath="-174.617349" atv="0.119084" />
    <point ath="-174.509301" atv="1.969077" />
    <point ath="-178.714305" atv="2.160494" />
    </hotspot>

    <hotspot name="hs4" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="158.051727" atv="1.7443" />
    <point ath="157.325818" atv="0.87418" />
    <point ath="156.688016" atv="-1.705727" />
    <point ath="156.907391" atv="-4.31969" />
    <point ath="157.709973" atv="-7.052353" />
    <point ath="158.829721" atv="-7.922569" />
    <point ath="160.796606" atv="-8.341617" />
    <point ath="163.188827" atv="-8.571263" />
    <point ath="165.562659" atv="-8.708957" />
    <point ath="167.812463" atv="-8.137664" />
    <point ath="169.248356" atv="-7.574078" />
    <point ath="170.414182" atv="-5.340325" />
    <point ath="170.90386" atv="-3.996173" />
    <point ath="171.252063" atv="-1.257337" />
    <point ath="171.210819" atv="0.769128" />
    <point ath="170.909625" atv="1.62272" />
    <point ath="170.909625" atv="1.62272" />
    <point ath="167.241926" atv="1.68068" />
    </hotspot>
    <hotspot name="hs6" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-163.2746" atv="1.647416" />
    <point ath="-163.2746" atv="1.647416" />
    <point ath="-162.709818" atv="-0.071034" />
    <point ath="-162.538744" atv="-2.360985" />
    <point ath="-161.109125" atv="-3.759568" />
    <point ath="-158.800321" atv="-3.721143" />
    <point ath="-156.065949" atv="-3.587112" />
    <point ath="-155.469141" atv="-2.112848" />
    <point ath="-154.755386" atv="0.66189" />
    <point ath="-155.079787" atv="2.238424" />
    <point ath="-159.524263" atv="2.292091" />
    </hotspot>
    <hotspot name="hs7" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_4].alpha,1.0);" onout="tween(hotspot[hotspot_4].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-145.666782" atv="0.872134" />
    <point ath="-145.666782" atv="0.872134" />
    <point ath="-145.461715" atv="-2.112851" />
    <point ath="-144.706247" atv="-5.11344" />
    <point ath="-142.82535" atv="-7.160761" />
    <point ath="-139.436186" atv="-7.757046" />
    <point ath="-135.877968" atv="-7.285168" />
    <point ath="-134.117207" atv="-6.236215" />
    <point ath="-133.281893" atv="-4.309679" />
    <point ath="-133.289741" atv="-0.482186" />
    <point ath="-134.129223" atv="1.207607" />
    <point ath="-137.764312" atv="2.225597" />
    <point ath="-144.724617" atv="1.803099" />
    </hotspot>

    <hotspot name="hotspot_5" url="hotspot_5.png"
    alpha="0.0"
    ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="-90" atv="0" edge="lefttop" ox="-500" oy="-116.696" width="788.599" height="254.039"
    onover="tween(alpha,1.0);"
    onout="tween(alpha,0.0);"
    />

    <hotspot name="hs8" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_5].alpha,1.0);" onout="tween(hotspot[hotspot_5].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-71.389913" atv="14.242007" />
    <point ath="-73.157008" atv="14.10206" />
    <point ath="-75.167144" atv="13.564463" />
    <point ath="-77.522285" atv="10.793353" />
    <point ath="-79.155312" atv="7.261824" />
    <point ath="-78.305368" atv="2.328479" />
    <point ath="-76.79706" atv="-1.949873" />
    <point ath="-75.411751" atv="-5.395214" />
    <point ath="-74.158278" atv="-8.530481" />
    <point ath="-72.939743" atv="-9.959162" />
    <point ath="-71.850804" atv="-10.554272" />
    <point ath="-69.150355" atv="-11.906185" />
    <point ath="-65.733255" atv="-12.183558" />
    <point ath="-63.324033" atv="-11.641559" />
    <point ath="-62.067855" atv="-9.406504" />
    <point ath="-60.950317" atv="-5.815135" />
    <point ath="-60.141509" atv="-2.052627" />
    <point ath="-60.114452" atv="0.411018" />
    <point ath="-60.128813" atv="4.868931" />
    <point ath="-60.236772" atv="7.472639" />
    <point ath="-60.953097" atv="10.383235" />
    <point ath="-61.790485" atv="11.626362" />
    <point ath="-63.579543" atv="12.954776" />
    <point ath="-67.632757" atv="14.145307" />
    </hotspot>

    <hotspot name="hs9" capture="false" zorder="2" alpha="0" onover="tween(hotspot[hotspot_5].alpha,1.0);" onout="tween(hotspot[hotspot_5].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    >
    <point ath="-143.516415" atv="-6.528562" />
    <point ath="-144.451428" atv="-5.328948" />
    <point ath="-145.229447" atv="-3.654662" />
    <point ath="-145.790717" atv="-1.277308" />
    <point ath="-145.931535" atv="0.63981" />
    <point ath="-145.256715" atv="1.573223" />
    <point ath="-144.395142" atv="1.514715" />
    <point ath="-142.786845" atv="1.636881" />
    <point ath="-139.691701" atv="1.712345" />
    <point ath="-136.619905" atv="1.882322" />
    <point ath="-134.545084" atv="1.343105" />
    <point ath="-133.575319" atv="-0.428056" />
    <point ath="-132.936247" atv="-3.423817" />
    <point ath="-133.825632" atv="-6.046596" />
    <point ath="-135.961469" atv="-7.341101" />
    <point ath="-139.990956" atv="-7.606331" />
    <point ath="-141.673137" atv="-7.426884" />
    </hotspot>

    </krpano>

    I want to show two images by clicking one hotspot. here i used cube for 360 view. Please suggest me some examples. I want hotspot like this website http://www.toyota.co.th/makemycar/yaris/

  • How can we call angular with js? I have sample but it isn't working.


    Code
    jscall(angular.element("#content").scope().sample());

    I am getting this error;
    "ERROR: jscall() - calling Javascript "angular.element('#content').scope().vm.vrService.refreshVrXml()" failed: ReferenceError: angular is not defined"

    EDIT :
    I found my answer *smile*

    Code
    jscall('window.top.angular.element("#content").scope().sample());

Participate now!

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