• Hi all,
    I'm completely new to KRPano and am wondering if anyone here can give me some pointers... or, better still, some examples of xml code.
    I have been using FPP for about the last 3 years and can, pretty much, get the tours to do whatever I want. The reason for moving over to KRPano is mainly because of it's iphone/pad compatibility.
    The problem I have is that it looks like I'm going to have to forget just about everything I've learnt about xml and start again!.... the coding in KRP is just so different. If I can get an example of code that incorporates most of what I need. Then I can go away and play with it until it makes sense to me.

    Here is an example of a typical opening sequence that I've made with FPP: http://www.i-barcelo.com/virtualtours/B…_bar/index.html

    The sequence is:
    Pano opens at pan -45 and tilt -20.
    After loading the pano pans to 15 and tilts to 5 timed to 1.5 seconds for the pan and 1.25 for the tilt.
    Then tilts down to -15 timed to 1 second.
    The 'help' screen then fades in from alpha 0 to alpha 1 timed at 0.3 of a second.
    Meanwhile the pano desaturates.
    The default help panel is in Spanish and in the top right corner there is an option to change it to English.
    When the user clicks 'close', the help panel scales to 0.2 timed at 0.2 of a second on it's Y axis, then to 0 on it's X axis and the pano starts to auto rotate while coming up to full saturation.

    I have been in touch with Klaus and he was very helpful and sent me some example code and links to the xml areas of the web site but, as the code is all new to me, I'm not really sure where to even start.
    If anyone can help, even with just parts of these commands for KRP, I will be very grateful as it will be a massive saving on my time.

    Thanks in advance

    Kev

  • first of all paste this into your main xml use it to set the very first initial direction you want the pano to face.

    <view hlookat ="-45"
    vlookat ="-20"
    camroll ="0.000000"
    fovtype ="mFOV"
    fov ="120.000000"
    fovmin ="50.000000"
    fovmax ="120.000000"
    maxpixelzoom ="NaN"
    limitfov ="true"
    fisheye ="0.00"
    fisheyefovlink="0.50"
    stereographic ="false"
    pannini ="false"
    architectural ="0.0"
    architecturalonlymiddle="false"
    limitview ="auto"
    hlookatmin ="NaN"
    hlookatmax ="NaN"
    vlookatmin ="NaN"
    vlookatmax ="NaN"
    />

    then make some actions. the intro action will fade the menu to alpha 1 over 0.3 seconds at the same time as starting the first pan. once it reaches the first pan settings it will wait 0.25 seconds then pan down.

    <action name="intro">
    tween(plugin[helpmenu].alpha, 1,0.3);
    tween(view.hlookat,15,1.5);
    tween(view.vlookat, 5,1.25);
    wait(0.25);
    tween(view.vlookat, -15,1); </action>

    the hide action will tween the height to 20 pixels over 0.2 seconds. once that is done it will fire off the ending tween action and scale it to 0 making it disappear. set this action to whatever button close the helpmenu using onclick="hidemenu()"

    <action name="hidemenu">
    tween(plugin[helpmenu].height, 20,0.20,,tween(plugin[helpmenu].scale,0));
    </action>

    if you set the intro action to onxmlcomplete below it will all start soon as the xml sheet is done being read. if that happens to fast. change it to onloadcomplete which will start the intro after all the tiles have downloaded.

    <events onxmlcomplete="intro()"

    onpreviewcomplete=""
    onloadcomplete=""
    onloaderror=""
    onkeydown=""
    onkeyup=""
    onclick=""
    onviewchange=""
    onidle=""
    onresize=""
    />

  • then make some actions. the intro action will fade the menu to alpha 1 over 0.3 seconds at the same time as starting the first pan. once it reaches the first pan settings it will wait 0.25 seconds then pan down.

    All of the tweens happen simultaneously.
    How do I turn these tweens into a chain of events? i.e. tween(view.hlookat,15,1.5) & tween(view.vlookat, 5,1.25); to happen simultaneously then, once this action is complete, wait 'X' seconds and tween(view.vlookat, -15,1)... on complete, tween(plugin[helpmenu].alpha, 1,0.3).

    Also, I tried changing onxmlcomplete to onloadcomplete, because everything starts too soon, but nothing happens. The tour loads but stays in it's opening position.

    As I already said, thanks for the info, any help is much appreciated, but I'm still struggling a little.

  • Hi,

    see here:
    https://krpano.com/docu/actions/#tween

    the tween() action has a donecall parameter,
    there you can put code that will be executed when the tween was done,

    e.g.

    Code
    tween(x, 100, 1.5, easeOutQuad, tween(x, 0, 1.5, easeOutQuad) );

    or put the keyword - WAIT - there as donecall, then the krpano actions system will wait until the tween has finished before continuing with the next action, but note - during the WAIT no user interaction can happen,

    e.g.

    Code
    tween(x, 100, 1.5, easeOutQuad, WAIT);
    tween(x, 0, 1.5, easeOutQuad);

    best regards,
    Klaus

  • delayedcall(10, actiongoeshere()); will delay the process by 10 seconds after the xml is read if under onxmlcomplete.

    tween(view.hlookat,15,1.5,,tween(view.vlookat, 5,1.25,,tween(view.vlookat, -15,1,,tween(plugin[helpmenu].alpha, 1,0.3))));

    the above tween code should work but i have not tried to use so many in a chain like that. each one is calling the next donecall action. test it and see !

  • If the pano blurs after you close the intro image, something is wrong... maybe connection speed?.What connection are you on?
    The pano is supposed to desaturate and blur immediately after the intro instruction screen opens so that the user is focused on the instructions.
    On click to close, the pano should return to normal. This is what happes at my end.

    If you want the code and method for the desaturation and blur, I'll post everything up when I get back from skiing on Monday.

    Thanks for your interest.

  • If you want the code and method for the desaturation and blur, I'll post everything up when I get back from skiing on Monday.

    i would like to see that. and i just checked again in both ie8 and ie7. after clicking close on the intro image the pano goes burry again. can't be a connection issue as i work at an isp and we have an insanely fast connection speed. the pano is blurry at start then it looks correct when doing its initial pans then soon as the intro image is clicked its goes blurry again.

  • @VN, I had the same issue but if you don't click on the intro and wait a second or two, it blurs out so clicking the intro doesn't seem to be the cause. But it is quite a bit of time after the intro is up before the blur begins.

    Jarred

  • i would like to see that. and i just checked again in both ie8 and ie7. after clicking close on the intro image the pano goes burry again. can't be a connection issue as i work at an isp and we have an insanely fast connection speed. the pano is blurry at start then it looks correct when doing its initial pans then soon as the intro image is clicked its goes blurry again.

    Its very simple. He just loads a duplicate panorama with keepview which is blurred and desaturated.
    But I can se he uses keepall, have not seen that code used before.

    That explains also the delay on slow connections.

    Hans

  • I've changed the timing of the pano blur so it should fade to a desaturated blur while simultaniously opening the intro help panel.
    There still seems to be a slight delay but, I think this will be acceptable as the user should be reading the instructions. However, I'll be interested to know how it looks from out there.

    VN2011, the method is simple. I just created another scene using a copy of the pano images that I desaturated and blurred.
    In the action that opens the intro panel I put: loadscene('scene_2',null,KEEPALL,BLEND(1.2));
    If you want to see the complete code, let me know.

    What I'm struggling with now is changing the hover language of my buttons.
    I have duplicated the plugins, called one <Style name="buttonES> and the other <Style name="button> which is set to visible, "false".
    I know Icould make an action to change each plugin individually but, it makes more sense to me to have just one command to change buttonES to visible, false and button to visible true.
    I've tried various combinations including set(style[buttonES].visible, false); set(style[button].visible, true); and onClick set(buttonES.visible, false); but can't get anything to work.
    Is what I'm trying to do even possible?

    Cheers

  • Quote

    But I can se he uses keepall, have not seen that code used before

    Hi Hans,
    What do you think I should use instead of KEEPALL. ? As I said earlier in the post, I'm just starting with KRPano after being a few years with FPP and I'm on a bit of a learning curve here so any advice or pointers will be gratefully recieved.

  • Hi Hans,
    What do you think I should use instead of KEEPALL. ? As I said earlier in the post, I'm just starting with KRPano after being a few years with FPP and I'm on a bit of a learning curve here so any advice or pointers will be gratefully recieved.

    Keepall is fine, I just did not know we had that code. It seems to be a collection of similar codes which includes the keepview I have used.

    LIke you I am used to FPP and I really missed the blur, contrast, brightness functions of FPP. I have used your method a couple of times in FPP as it can make some very nice transitions between panoramas. I think I will try it for KRpano also as the standard preview does not look good.

    If you do them with a nice blur in reduced size they should not need to be very large.

    Hans

  • Ok, here's the finished tour: http://www.virtualtours.es/downloads/barcelo__bar/tour.html
    All works nicely at my end but I've found that, since adding the buttons, I get an error 'xml parsing failed' when I try to view it on an iPhone.
    As viewing the tours on iPhone/Pad was my main reason for taking on the challange of learning to use KRPano, this is quite an important issue.
    Any ideas anyone?

    The entire code is too long to post on here.
    Here's the code for the buttons:

    <!-- Nav buttons -->

    <textstyle name="buttonstyle" font="Arial" fontsize="10" border="false"
    background="false" textcolor="0xFFFFFF" xoffset="0" yoffset="-20"
    effect="glow(0x000000,0.7,4,2);dropshadow(2,45,0x000000,3,1);" />

    <style name="button" keep="true" align="bottom" y="10" url="graphics/buttons.png" />

    <!-- some default buttons (zooming, direction, hotspots on/off, fullscreen) -->
    <plugin name="in_ES" style="button" x="-160" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" />
    <plugin name="out_ES" style="button" x="-120" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" />
    <plugin name="left_ES" style="button" x="-80" crop= "0|0|40|40" onovercrop= "0|40|40|40" ondowncrop= "0|80|40|40" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
    <plugin name="right_ES" style="button" x="-40" crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
    <plugin name="up_ES" style="button" x="+0" crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
    <plugin name="down_ES" style="button" x="+40" crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />
    <plugin name="rotationStop_ES" style="button" x="+80" crop="240|0|39|39" onovercrop="240|40|40|40" onoutcrop="240|80|40|40" onhover="showtext(Parar Autorotación, buttonstyle);" onclick="ARbuttonChange(); "visible="false" />
    <plugin name="rotationStart_ES" style="button" x="+80" crop="280|0|39|39" onovercrop="280|40|40|40" onoutcrop="280|80|40|40" onhover="showtext(Iniciar Autorotatión, buttonstyle);" onclick="ReverseARbuttonChange();" />
    <plugin name="info_ES" style="button" x="+160" crop="400|0|40|40" onovercrop="400|40|40|40" ondowncrop="400|80|40|40" onhover="showtext(Abrir Panel de Ayuda, buttonstyle);" onclick="openhelpES();" visible="true" />
    <plugin name="openfs_ES" style="button" x="+120" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onhover="showtext(Abrir Pantalla Completa, buttonstyle);" onclick="set(fullscreen,true);set(plugin[openfs].visible, false);set(plugin[closefs].visible, true); " visible="true" />
    <plugin name="closefs_ES" style="button" x="+120" crop="360|0|40|40" onovercrop="360|40|40|40" ondowncrop="360|80|40|40" onhover="showtext(Volver a Pantalla Normal,buttonstyle);" onclick="set(fullscreen,false);set(plugin[openfs].visible, true);set(plugin[closefs].visible, false);" visible="false" />

    <plugin name="in" height="0" style="button" x="-160" crop="160|0|40|40" onovercrop="160|40|40|40" ondowncrop="160|80|40|40" ondown="set(fov_moveforce,-1);" onup="set(fov_moveforce,0);" />
    <plugin name="out" height="0" style="button" x="-120" crop="200|0|40|40" onovercrop="200|40|40|40" ondowncrop="200|80|40|40" ondown="set(fov_moveforce,+1);" onup="set(fov_moveforce,0);" />
    <plugin name="left" height="0" style="button" x="-80" crop= "0|0|40|40" onovercrop= "0|40|40|40" ondowncrop= "0|80|40|40" ondown="set(hlookat_moveforce,-1);" onup="set(hlookat_moveforce,0);" />
    <plugin name="right" height="0" style="button" x="-40" crop= "40|0|40|40" onovercrop= "40|40|40|40" ondowncrop= "40|80|40|40" ondown="set(hlookat_moveforce,+1);" onup="set(hlookat_moveforce,0);" />
    <plugin name="up" height="0" style="button" x="+0" crop= "80|0|40|40" onovercrop= "80|40|40|40" ondowncrop= "80|80|40|40" ondown="set(vlookat_moveforce,-1);" onup="set(vlookat_moveforce,0);" />
    <plugin name="down" height="0" style="button" x="+40" crop="120|0|40|40" onovercrop="120|40|40|40" ondowncrop="120|80|40|40" ondown="set(vlookat_moveforce,+1);" onup="set(vlookat_moveforce,0);" />
    <plugin name="rotationStop" height="0" style="button" x="+80" crop="240|0|39|39" onovercrop="240|40|40|40" onoutcrop="240|80|40|40" onhover="showtext(Stop Autorotation, buttonstyle);" onclick="ARbuttonChange(); "visible="false" />
    <plugin name="rotationStart" height="0" style="button" x="+80" crop="280|0|39|39" onovercrop="280|40|40|40" onoutcrop="248|80|40|40" onhover="showtext(Start Autorotation, buttonstyle);" onclick="ReverseARbuttonChange();" />
    <plugin name="info" height="0" style="button" x="+160" crop="400|0|40|40" onovercrop="400|40|40|40" ondowncrop="400|80|40|40" onhover="showtext(Open The Help Screen, buttonstyle);" onclick="openhelpUK();" visible="true" />
    <plugin name="openfs" height="0" style="button" x="+120" crop="320|0|40|40" onovercrop="320|40|40|40" ondowncrop="320|80|40|40" onhover="showtext(Open Fullscreen, buttonstyle);" onclick="set(fullscreen,true);set(plugin[openfs].visible, false);set(plugin[closefs].visible, true); " visible="true" />
    <plugin name="closefs" height="0" style="button" x="+120" crop="360|0|40|40" onovercrop="360|40|40|40" ondowncrop="360|80|40|40" onhover="showtext(Return to Normalscreen,buttonstyle);" onclick="set(fullscreen,false);set(plugin[openfs].visible, true);set(plugin[closefs].visible, false);" visible="false" />

Participate now!

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