Hotspot.ox/oy questions

  • Hi everybody,

    I was wondering if there is a mathematical way (i use as3 to add hotspot) to convert an hotspot point (ath,atv), to http://hotspot.ox/oy coordinates.

    What I want to achieve is to convert a polyhotspot square (multipoint) to a hotspot with ox,oy,edge,with,height parameters

    for example i have this code that i want to be transformed:

    ...
    <hotspot name="hs1" fillcolor="0xf40c0c" fillcolorhover="0xf40c0c" fillalpha="0.9" fillalphahover="0.0" bordercolor="0xffff00" borderalphahover="0.0">
    <point ath="7.8" atv="-1.7" />
    <point ath="14.4" atv="-1.7" />
    <point ath="14.4" atv="4.3" />
    <point ath="7.8" atv="4.3" />
    </hotspot>
    ...

    TO (for front cubeface)

    ...
    <hotspot name="hs2" url="something.jpg" ath="0.0" atv="0.0" edge="lefttop" ox="?" oy="?" width="?" height="?" />
    ...

    Any help will be lovely appreciated *love* *love* *love*

    Regards,

    Julien

  • hm, good idea.
    You can use spheretoscreen. Results have to appropriately multiplied with some multiplication value depending how big you want your new hotspot.
    If you have 4 points than I think idea is feasable. If you transfer the points into x y coordinates you will have to make algorithm to identify top left point and bottom right and calculate the width and height out of it. Give it a try and provide us with the feedback of success.

  • hm, good idea.
    You can use spheretoscreen. Results have to appropriately multiplied with some multiplication value depending how big you want your new hotspot.
    If you have 4 points than I think idea is feasable. If you transfer the points into x y coordinates you will have to make algorithm to identify top left point and bottom right and calculate the width and height out of it. Give it a try and provide us with the feedback of success.

    Hi, thank you for the quick answer Umalo ;)

    This is working !. but I have strange behaviour when I move in the pano :(.

    I show you the code I am dealing with :

    I have three points :

    refPoint(ath,atv)
    the left-top point of the square.
    endPoint(ath,atv) the right-bottom point of the square.
    Considering I am working in front face cube :
    centerPoint(ath = 0, atv = 0)

    ...
    krpanoInstance.call("addhotspot(hs1)");
    var faceTest: Object = krpanoInstance.get("hotspot[hs1]");

    faceTest.edge="lefttop";

    var arrCenter:Object = krpanoInstance.spheretoscreen(0, 0);
    var arrRef:Object = krpanoInstance.spheretoscreen(refPoint.ath, refPoint.atv);
    var arrEnd:Object = krpanoInstance.spheretoscreen(endPoint.ath, endPoint.atv);

    faceTest.ox = arrRef.x - arrCenter.x;
    faceTest.oy = arrRef.y - arrCenter.y;

    faceTest.width = arrEnd.x - arrRef.x;
    faceTest.height = arrEnd.y - arrRef.y;

    faceTest.url = "%SWFPATH%bg.jpg";
    ...

    the hotspot is well placed over the pano (no move done) (pink : the ox/oy hotspot ):

    http://hpics.li/ac9d0ca</a>

    But, if I move the camera, here is the result (pink : the ox/oy hotspot, red : polyhotspot ) :

    http://hpics.li/8f35260

    the camera position seems to change the place of the ox/oy hotspot?
    Perhaps it's normal, but i don't remember such things when i used interactive areas.

  • Would like to see how the hs is defined in memory and trace some values. Can you pack/send (don't know if attaching here is in line with Forum policy) your work for examination.
    If no other quick solution is coming I can give it a try.

  • hai

    This is my coding

    <!-- 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="hs1" url="home-Service-041.png"
    ath="22.593199" atv="8.167536" width="34" height="34" onout="tween(hotspot[steering].alpha,0.0);"
    onclick="tween(hotspot[steering].alpha,1.0);"
    />
    <hotspot name="steering" 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"
    />

    <hotspot name="hs3" url="home-Service-041.png"
    ath="0.744616" atv="35.4174" width="34" height="34"
    onclick="tween(hotspot[Gearknob].alpha,1.0);" onout="tween(hotspot[Gearknob].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="Gearknob" 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"
    />

    <hotspot name="hs4" url="home-Service-041.png"
    ath="206.977097" atv="11.359236" width="34" height="34"
    onclick="tween(hotspot[sheet].alpha,1.0);" onout="tween(hotspot[sheet].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="sheet" 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"
    />
    <hotspot name="sheet" 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"
    />


    <hotspot name="hs5" url="home-Service-041.png"
    ath="-16.957505" atv="17.945473" width="34" height="34"
    onclick="tween(hotspot[dash].alpha,1.0);" onout="tween(hotspot[dash].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="dash" 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"
    />



    </krpano>

    I want to display two images at a time onclick one hotspot. http://www.toyota.co.th/makemycar/altis/ like this website

    Here if i click hotspot - hs4 i want to display two images but these images are in separate cube. Please suggest me some solutions


    <hotspot name="hs4" url="home-Service-041.png"
    ath="206.977097" atv="11.359236" width="34" height="34"
    onclick="tween(hotspot[sheet].alpha,1.0);" onout="tween(hotspot[sheet].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="sheet" 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"
    />
    <hotspot name="sheet" 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"
    />

  • - not clear what you want
    - why you posted your question in this thread. You should open new one as this has no relation to topic. Now leave it here....
    - Share some working link. By reading code I see that you have two hotposts of the same name what in memory looks like only one hotspots.

    Change hotspot names to e.g. sheet_1 and sheet_2 and if you wnat to turn both hotspots alpha at one click on hs4 change onlick on hs4 to:

    Code
    onclick="tween(hotspot[sheet_1].alpha,1.0);tween(hotspot[sheet_2].alpha,1.0);" 
    onout="tween(hotspot[sheet_1].alpha,0.0);tween(hotspot[sheet_2].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
  • I am very sorry for that i posted here. I don't know how to open a new one. how to post a new one. Very sorry for that.
    I clear tell about my question

    I need a hotspot like this website http://tmap.nimbusinteractive.com/altis/ in this website go to interior menu .


    this is my working link http://hns.in/krpano/krpano.html

    in this if i click the hotspot near Sheet i want to change the color of all head resist.

    I create this view using Cube

    This is my xml

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

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

    <display flash10="on" movequality="high" stillquality="high" movequality10="high" stillquality10="high" details="36" fps="60"/>
    <view fovtype="MFOV" fov="84" fovmin="45" fovmax="84" limitview="range" vlookatmin="-90" vlookatmax="+90" fisheye="0.75" fisheyefovlink="3"/>

    <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="hs1" url="home-Service-041.png"
    ath="22.593199" atv="8.167536" width="34" height="34"
    onclick="tween(hotspot[steering].alpha,1.0);tween(hotspot[sheet_2].alpha,1.0);" onout="tween(hotspot[steering].alpha,0.0);tween(hotspot[steering].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="steering" 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"
    />

    <hotspot name="hs3" url="home-Service-041.png"
    ath="0.744616" atv="35.4174" width="34" height="34"
    onclick="tween(hotspot[Gearknob].alpha,1.0);" onout="tween(hotspot[Gearknob].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="Gearknob" 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"
    />

    <hotspot name="changesheet" url="home-Service-041.png" ath="206.977097" atv="11.359236" width="34" height="34" onclick="js(changesheet());"/>
    <hotspot name="hotspot_4" visible="false" url="hotspot_4.png" alpha="0.0" ath="0.0" zorder="1" 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" />
    <hotspot name="hotspot_5" visible="false" url="hotspot_5.png" alpha="0.0" zorder="1" 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" />
    <hotspot name="hotspot_7" visible="false" url="hotspot_7.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="90" atv="0" edge="lefttop" ox="-410.682" oy="-213.644" width="390.484" height="498.204" />

    <hotspot name="hotspot_4_change" visible="false" url="hotspot_4 - Copy.png" alpha="0.0" ath="0.0" zorder="1" 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" />
    <hotspot name="hotspot_5_change" visible="false" url="hotspot_5 - Copy.png" alpha="0.0" zorder="1" 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" />
    <hotspot name="hotspot_7_change" visible="false" url="hotspot_7 - Copy.png" alpha="0.0" zorder="1" ath="0.0" atv="0.0" distorted="true" rx="0" ry="0" rz="0" ath="90" atv="0" edge="lefttop" ox="-410.682" oy="-213.644" width="390.484" height="498.204" />

    <hotspot name="hs5" url="home-Service-041.png"
    ath="-16.957505" atv="17.945473" width="34" height="34"
    onclick="tween(hotspot[dash].alpha,1.0);" onout="tween(hotspot[dash].alpha,0.0);" ondown.touch="onover();" onup.touch="onout();"
    />
    <hotspot name="dash" 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"
    />
    </krpano>


    If i click the hotspot name - changesheet .

    I called js onclick="js(changesheet());"

    and

    my js file is . if i click the hostspot there is no response

    var krpanoObj;

    interior_choose = {};

    function krpanoReady(krpano) {
    krpanoObj = krpano;
    }

    function loadPano(xmlfile) {
    alert("hai");
    var viewer = createPanoViewer({
    //swf: window.location.origin +"/interior/js/krpano_1_16_5.swf",
    swf: "krpano.swf",
    id: "krpanoSWFObject",
    target: "pano",
    onready: krpanoReady,
    html5: "auto",
    });
    viewer.addVariable("xml", "krpano.xml");
    viewer.passQueryParameters();
    viewer.addParam("wmode", "opaque");
    viewer.embed("pano"); //removepano("pano");
    }


    var isClickWorking = false;

    var redLineHtml = '<span style="color:red;">---------</span>';

    var frontConsole = ['standard', 'sport', 'wood'];
    var consoleNumberClick = 1;

    var dvd = ['default', 'f_radio_standard', 'f_radio_wood', 'f_classicdvd_wood', 'f_avx_wood', 'f_avn_wood'];
    var dvdNumberClick = 1;

    var chrome = ['default', 'chrome'];
    var chromeNumberClick = 1;

    var historyStatement = '';

    function runKrpano(statement) {

    krpanoObj.call(statement);

    if (historyStatement !== '') {

    historyStatement = historyStatement.replace(/visible/g, 'zorder');
    historyStatement = historyStatement.replace(/true/g, 1);
    krpanoObj.call(historyStatement);

    var zorder = statement.replace(/visible/g, 'zorder');
    zorder = zorder.replace(/true/g, 2);
    krpanoObj.call(zorder);

    }

    historyStatement = statement;
    }

    var historyDoorStatement = '';
    function runKrpanoDoorHandle(statement) {

    krpanoObj.call(statement);

    if (historyDoorStatement !== '') {

    historyDoorStatement = historyDoorStatement.replace(/visible/g, 'zorder');
    historyDoorStatement = historyDoorStatement.replace(/true/g, 1);
    krpanoObj.call(historyDoorStatement);

    var zorder = statement.replace(/visible/g, 'zorder');
    zorder = zorder.replace(/true/g, 2);
    krpanoObj.call(zorder);

    }

    historyDoorStatement = statement;
    }


    function showPath() {
    var dvdSelected = dvd[(dvdNumberClick === 0) ? 0 : dvdNumberClick - 1]
    var chromeSelected = chrome[(chromeNumberClick === 0) ? 0 : chromeNumberClick - 1];
    var consoleSelected = frontConsole[(consoleNumberClick === 0) ? 0 : consoleNumberClick - 1];

    if (chromeSelected === 'default') {
    chromeSelected = '';
    } else {
    chromeSelected = '_chrome';
    }

    if (dvdSelected === 'default') {
    dvdSelected = chromeSelected;
    } else {
    dvdSelected = '_dvd' + chromeSelected + dvdSelected;
    }

    var url = "front_console_" + consoleSelected + dvdSelected;
    $('.path').html(url);
    return url;
    }


    function addDebug(msg) {
    var $p = $('<p/>', {
    html: msg
    }).appendTo('.debug');
    }


    function showPattern() {
    //$('.pattern').fadeIn(500);
    }

    function hidePattern() {
    // $('.pattern').fadeOut(500);
    }
    var sheetName = [];
    sheetName[0] = [
    'hotspot_4',
    'hotspot_5',
    'hotspot_7',
    ];

    sheetName[1] = [
    'hotspot_4_change',
    'hotspot_5_change',
    'hotspot_7_change',
    ];
    var sheetIndex = 0;
    var sheetCount = 1;

    function changesheet() {
    var cmd = '';

    for (i = 0; i < sheetName.length; i++) {

    cmd = '';

    for (j = 0; j < sheetName[i].length; j++) {
    cmd += 'set(hotspot[' + sheetName[i][j] + '].visible, false);';
    }
    // console.log(cmd);
    krpanoObj.call(cmd);
    }

    sheetIndex++;
    cmd = '';
    for (i = 0; i < sheetName[sheetIndex].length; i++) {
    cmd += 'set(hotspot[' + sheetName[sheetIndex][i] + '].visible, true);';
    }

    krpanoObj.call(cmd);

    if ((handDoorCount++ % 2) !== 0) {
    showPart(107);
    }
    else {
    clearChoose(107);
    }

    if (sheetIndex === sheetName.length - 1) {
    sheetIndex = -1;
    }
    }


    function isMobile() {
    v = false;

    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) || navigator.userAgent.match(/Opera Mini/i) || navigator.userAgent.match(/IEMobile/i)) {
    v = true;
    }

    return v;
    }


    $(document).ready(function() {

    $('#btn-getvalue').click(function() {
    console.log(interior_choose);
    });
    });

Participate now!

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