Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment)

  • Hi guys,

    sorry for digging out this old thread, but I have some issues positioning a distorted video hotspot onto the pano image. I quadruple checked the values coming out from ptgui ... the distorted (video) hotspot is just off. not just by a single pixel or so, its quiet "a bit". see screenshot below.

    I'm using krpano 1.20.2 and ptgui 11.13 - is this "old" action still valid or did something change at krpano/ptgui so there's a missmatch now?


    Any help on this would be great, as the client waits for his panos *wink*
    SOLVED: I've overseen the vertical compression in ptgui. everyting's fine.


  • Hi,

    I have a problem (well i have a lot of problems with this one but i want to solve it one at the time). My hotspot picture is bigger that the place it's on. I tried to make hotspot jpg smaller but it "stretches" on the panorama.

    Thanks for any help!

  • SOLVED: I've overseen the vertical compression in ptgui. everyting's fine.

    I have the same problem, tried Ptgui 12 and old 10, all the numbers are rounded, still the hotspot is misaligned.
    Vertical and horizontal compression setting should be 0.0. OK, but where do i find it??? *confused*

    Best regards,
    Igor Socha

  • Hi,

    panorama editor --> right top little arrow --> projection

    by selecting the numbers you get the full, not rounded number,.
    make sure you are in 'rectangular' mode!

    Hope it helps!
    Tuur *thumbsup*

  • Answering my own question for posterity. Found the answer here - https://krpano.com/forum/wbb/inde…&threadID=17570

    if your image has a prealign, ox, oy, oz values

    You need to carry those values to the hotspot as tx, ty, tz and also add prealign="true"

    Code
    <hotspot name="left-device" distorted="true" enabled="true" visible="true" alpha="1"
    	              url="img/03-right-device.jpg"
    	              onloaded="calc_pos_from_hfov_yaw_pitch_roll(11,-109,0,-42);"
    prealign="true" tx="-38.33" ty="-46.13" tz="17.8"
    	              />
  • Hi. I know this has been so long ago but now I am trying to do some test with this for changing the materials of the tour.

    Please see here
    https://apartment.immexg.com/media/vtour/index.html

    I have been able todo what I want, but the problem is that when rendered from HUGIN the edge looks very pixelated. I have not been able to make it crisp even with higher resolution. My work around right now is just go into photoshop and increase the the feather of the edge so that it won't be as jarring. But I would want to know is there anyway to render our a crisp edge image from HUGIN since my source has been rendered out nicely (as a layered 360).

    Since I have so many layers that is on top of each other, I need PNG as output. so JPG is out of the question.
    I am fine with it being a bit larger but pixelated is still a big issue for me.

    My workflow is to follow the original tutorial by Klaus. Render out a bunch of options in equirectangular and then modified them in HUGIN to export as Rectilinear. Is there a better way of exporting or retaining it as equirectangular?

    Thank you!

  • Since the thread is already a bit outdated, I thought I would make a new tutorial for PTGui version 11.xxx (and higher?).

    The GUI of the PTgui has changed fundamentally, and the original post simply no longer fits the workspace.

    @ Klaus I used the original file, I hope that's ok?

    1. Load Panorama:

    Load the finished panorama on PTGui.


    2. Edit Panorama:

    Click on the panorma editor button.


    3. Projection:

    In the panorama editor, click on Projection.


    4. Rectalineaer projection:

    Select "Rectarlinear" from the projection options and set the vertical compression to "0".
    By default, a different value is set here!


    5. Field of view:

    Rotate the view in the desired direction and use the sliders to determine the image section. Copy the number under "Field of view", you will need it later.


    6. Yaw / Pitch / Roll:

    Go to "Image Parameters" in the main menu of PTGui. Copy the values for Yaw, Pitch and Roll


    7. get decimal values:

    Click on the number for Yaw Pitch and Roll in PTGui for all decimal places, copy it.


    8. Create the Pano:

    Go to "create Panorama" in the main menu of PTGui.
    Set the "% of optimum size" to 100 and click on "Create Panorama".
    A panorama of the selected section is created.


    9. Edit in Photoshop:

    Open the created file in Photoshop and edit it.

    For the pool example - here the extracted image (already modified - green instead of blue color):

    For the pool example - here the extracted values:
    hfov = 139.854
    yaw =-90.779
    pitch = -0.625974
    roll = -38.2707


    10. Load that hotspot image into krpano:

    That calc_pos_from_hfov_yaw_pitch_roll(hfov, yaw, pitch, rol) action can now be called in the onloaded Event from the hotspot. The action has the hfov, yaw, pitch and roll values from PTGUI as parameters.


    The final xml code will look like this:

    Code
    <hotspot name="spotNNN"
    url="pool_extract.jpg" 
    distorted="true"
    onloaded="calc_pos_from_hfov_yaw_pitch_roll(150, -90, -4, -30);"
    ...
    />


    The complete XML file:


    I hope I was able to help you a little with the small update for PTGui.


    best regards,

    Woiferl

    3 Mal editiert, zuletzt von Woiferl (6. Januar 2024 um 18:25)

    • Neu
    • Offizieller Beitrag

    how can i use plugin to open/close doors in VR Mode? in VR mode only hotspots from one panorama to another is visible

    That's are normal hotspots and they work in VR.

    But the setting depth="off" should be added to the hotspot - to let the hotspot appear at the same distance as the pano image in VR.

  • hello, i need to open/close door for the fridge by clicking on hotspot button. I added three hotspots (open/close and opened fridge image hotspot). by click first or second hotspot it change visibility for the third hotspot (opened doors image hotspot)

    Example: https://360.aero/t/d3/


    i need to write a script to work with one hotspot button to open/close fridge

    open fridge button action:

    for(set(i,0), i LT hotspot.count, inc(i),
    set(hotspot[spotpoint84].alpha,1);
    );

    close fridge button action:

    for(set(i,0), i LT hotspot.count, inc(i),
    set(hotspot[spotpoint84].alpha,0);
    );

    how can i change (on/off) by clicking for only one hotspot?

    image hotspot with this parameters:

    <hotspot name="spotpoint84 [name of the hotspot]"

    url="_14_opened-2_panorama.jpg [path to replace opened fridge file]"
    onloaded="calc_pos_from_hfov_yaw_pitch_roll(44, 128.267, -4.4187, 3.1648 [coordinates from this manual]);"
    enabled="true"
    alpha="1.0"

    ....


    and add calculate action:

    <action name="calc_pos_from_hfov_yaw_pitch_roll">
    div(hfov,%1,57.295779);
    div(yaw,%2,-57.295779);
    div(pitch,%3,57.295779);
    div(roll,%4,-57.295779);
    mul(hfov,0.5);Math.tan(hfov);mul(width,hfov,1000);set(height,'prop');
    Math.cos(ch,yaw);Math.sin(sh,yaw);
    Math.cos(ca,pitch);Math.sin(sa,pitch);
    Math.cos(cb,roll);Math.sin(sb,roll);
    mul(m0,ca,ch);
    mul(tmp,cb,sa);mul(tmp,ch);mul(tmp2,sb,sh);add(m3,tmp,tmp2);
    mul(m4,cb,ca);
    mul(tmp,cb,sa);mul(tmp,sh);mul(tmp2,sb,ch);sub(m5n,tmp,tmp2);mul(m5n,-1);
    mul(tmp,sb,sa);mul(tmp,ch);mul(tmp2,cb,sh);sub(m6n,tmp,tmp2);mul(m6n,-1);
    Math.atan2(yaw,m6n,m0);
    Math.atan2(roll,m5n,m4);
    Math.asin(pitch,m3);
    mul(ath,yaw,57.295779);
    mul(atv,pitch,57.295779);
    mul(rotate,roll,57.295779);
    </action>


    <action name="onclickspotpoint12">

    for(set(i,0), i LT hotspot.count, inc(i),
    set(hotspot[spotpoint84].alpha,1);
    );


    </action>

    Einmal editiert, zuletzt von Ferz2017 (19. Februar 2024 um 11:04)

    • Neu
    • Offizieller Beitrag

    Why three hotspots?

    Wouldn't be one enough?
    The pano with the closed door and one hotspot with opened door?

    Then the easiest would be toggling the alpha value on a click:

    Code
    onclick="switch(alpha,0,1);"


    Here a similar example as inspiration - on desktop the door-hotspot is shown on mouse-hovering and on touch devices when pressing on it:

    krpano.com - Examples


    Or here an other and very old example with an animation by dragging the door:

    krpano.com example

  • Maybe I can help you a little.

    Here you will find a demo file that I created for testing.


    Kitchen test


Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!