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

    Hi Jan,

    http://virtualtuur.com/WBtest/7/

    http://virtualtuur.com/WBtest/7/desktop.xml

    there is also phone.xml and pad.xml

    i'm not fully satisfied but it works nice..

    Could be very interesting to use your burst mode now, once and a while, when shooting pano's..

    the base code is simple:

    i call the movie(); in the onstart in this case.

    cheers

    Tuur *thumbsup*

    Hi Tuur, if y understand german, have a look at this thread

    wie vertical png filmstrip für html5 erstellen?

    the main point is....instead of loading individual jpges for the animation, create in photoshop a png strip with this photograms and use the hotspot animation action

    this way:

    <hotspot name="testspot"
    style="anim"
    distorted="true"
    onloaded="calc_pos_from_hfov_yaw_pitch_roll(91, -13, 32, -1); "
    enabled="false"
    alpha="1.0"


    />

    <!-- strip with photograms -->
    <style name="anim"
    url="animpng.png"
    crop="0|0|800|800"
    framewidth="800" frameheight="800" frame="0" lastframe="3"
    onloaded="hotspot_animate();calc_pos_from_hfov_yaw_pitch_roll(91, -13, 32, -1);"
    />

    <!-- hotspot animation action -->
    <action name="hotspot_animate">
    inc(frame,1,get(lastframe),0);
    mul(ypos,frame,frameheight);
    txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
    delayedcall(0.03, if(loaded, hotspot_animate() ) );
    </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);

    <!-- calc width -->
    mul(hfov,0.5);
    Math.tan(hfov);
    mul(width,hfov,1000);
    set(height,'prop');

    <!-- calc ath,atv,rotate -->
    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>


    test this link on an iPad (is a draft)

    http://homepage.mac.com/imge/test/test.html

    is an anim of a png strip with 4 photograms...the quality is pretty good


    imge

    ah yes,

    smart!

    da habe ich nicht auf gedacht.
    Ich versuche es mahl.

    but i'm afraid that the png strip gets very large with 14times 4000x875
    that's why i made the pad jpg's smaller but that is not serious option.

    i'll try.
    Thanx!

    EDIT: to big to save as png (875x56000)
    30000 long makes 11 mb :-|
    to heavy, even for desktop http://virtualtuur.com/WBtest/8/


    Tuur *thumbsup*

    well half size jpg was ugly also on better quality.
    fullsize gets rescaled on ipad (i think) =ugly

    but that halfsize png strip doen'st even work on desktop
    so i think it's not the best option for large hotspots.
    maaike: i'll try jpg... just a minute.
    Tuur *thumbsup*

    he he not so good job in the strip *wink*
    a.. ah i change the size.. well
    but clear that the quality is less!
    i try quick to make it better..


    :-|

    Tuur *thumbsup*

    a jpg or png can't be that long.

    i'm not sure what to try for ipad and how to calculate for a, not exactely, smaller size..
    the whole is now 30000 pixels heigh (that's like half and that is 14x 2142,85714285714 (pixels heigh per picture) ... *w00t*


    mmm...
    *thumbsup*

    what you see now on ipad is the same size of frames as with the single jpg's but now as a film strip..

    don't understand why the difference is...

    EDIT: i understand from Hans Nijberg that they also get downscaled to like 1414 pixels or so..

    so for that it's not ideal..
    Tuur *thumbsup*

    Hi guys, can somebody help me as I am not very good coder:
    I need to make the example with the pool, but with the slider, like in "slider/blending" example http://www.krpano.com/examples/10815…bes/slider.html

    how should I change the code to not change the cube faces, but the hotspot

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

    used in this example?

    here is the xml http://www.krpano.com/examples/10815…ubes/slider.xml:

    I can see, what is this code doing, but I don´t kow, how to change it for my purpose - it is too much for me :(
    Can somebody help? Thanx a lot!

    Best regards,
    Igor Socha

    Edited once, last by igor.socha (November 27, 2012 at 4:02 PM).

    Hi all,

    well let me tell you that we should have such tutorial a bit more often!

    Thanks Klaus! I can now manage hot spots! What about a page with more tutorial such as this one?

    Tuur your panorama is really great!

    Well but now let see if I can get some further help!? *smile*

    I have followed in detail all the instruction on how to create a Hotspot in any shape an place in my virtual tour.

    My end result is exactly as good as the sample of the swimming pool.

    However, being a bit silly and not really good at it, how do I link my blinking hot spot to a 2D photo?
    I have tried several code both in the tour.xml and in vtourskin.xml but I cannot manage it.

    I think it must be something pretty simple that I'm missing! Any help!?

    Thanks!!!

    Daniel

    Hi all again,

    I did finally manage to link my hotspot to a jpg,
    with onclick=openurl, and enable=true.
    (very simple after you know how to do it) *smile*

    However I would like to open the image above the tour, with fancy box.

    I did even pay the fancy box license but still not manage to use it.
    Any success out there? suggestions?

    I have looked at the following sample but... no success
    any ideas?
    How to insert a PDF document in Virtual Tour

    hopefully wil get there soon, meanwhile Merry Christmas to you all!!!! *smile* *smile* *smile* *thumbsup* *thumbsup* *smile* *smile* *wink* *wink*

    Strange: For the second time I found an issue with this kind of distorted hotspots. Is the zorder parameter not working here?


    I only tested in Safari with user agent set to iPad, but I don't understand why the high zorder value of the triggering hotspot is not working.


    Any help appreciated very much,

    Michael

Participate now!

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

Register Yourself Login