• Hi Klaus,

    It's easier to show you than try to explain.
    http://www.projectsolutions.es/demos/yomec/tour.html (takes a while to load as I'm still working on stuff)

    As the tour opens, there are two animated hotspots visible.
    The one on the left opens an image in the manner that I would like but does not scale to the stage width or height.
    The one on the right opens an image which scales to stage width and height but opens in the way described in my previous post.

    Thanks for your time.

  • Hi,

    here an example:

    best regards,
    Klaus

  • Hi Klaus,
    I think I understand that I should insert or substitute some of this part of this section of the scourse code to adjust my plugin images to the proportion of the screen I would like them to fill, which is 60% of the width by proportion in height.
    I have tried several things but, again, my limited knowledge of the workings of this code has forced me back here to ask for more help.
    If it is of any consequence, the original size of the plugin image is 1075 x 725 pixels.

    By the way, I have noticed when I have been scouring the forum for answers, a lot of members refer to source codes 1,2,3...... 6,7,8 etc.
    Is there a data bank of source codes somewhere on the site that I can access?

  • Kevin,

    I believe your actions setup has been causing some issues for you. I took the following and adjusted it. You were using ))))); instead of closing each command in the action. Try the openImage code below and take a look at the rest too. I was able to get what I believe you wanted to work for me.

    Jarred
    P.s. the 1,2,3,4, numbers come from using the # button above, otherwise known as the code button.

    good luck


  • Hi Jarred,
    Thanks for your input.
    However it does not resolve my issue.
    The section of code that you have rearranged actually works fine in it's original form apart from not scaling to stage.
    Here's the example: http://www.projectsolutions.es/demos/yomec/tour.html

    As the tour opens, the hotspot on the left has the correct action but does not scale to stagewidth/height. On my screen (23" widescreen) the image opens to approximately 60% screen width. Depending on what size screen you are using it may cover the entire screen or even bleed out of the edges.

    The hotspot on the right does scale to stagewidth/height but not before opening to 100% width/height first. (for some reason it doesn't always act correctly the first time you click it... you may have to close the image and click it again or refresh the page once the tour has loaded..... something else I have to look into *wacko* )

    I can write an action to scale the image on both x & y simultaneously by using % and prop but the issue arises when I try to separate them.

    So, to summarize, what I would really like is the action of the left hotspot i.e. scale to it's width and then scale to it's proportionate height, but also to be in proportion to the stage (60% of stagewidth).

    Klaus kindly posted up a source code but, as I indicated in my last post, my lack of knowledge of the xml prevents me from making the appropriate changes or additions.

    As always, I appreciate any input and thanks for your time.

  • Ok, I may have looked at the wrong example. I thought about that last night after I posted the code. Anyway, you are tweening to stage.width and height which is 100%. I thnk I know what you want now. You want to calculate the stage size and display the image at 60% height while keeping the proportions of the image balanced. As for they way your code is written, perhaps that is why you don't always get consistant results. Maybe it's just me??? I don't believe I have seen it written your way before.

    Edited 3 times, last by Jarredja (March 15, 2011 at 6:37 PM).

  • Kevin,


    This is modified code from Klaus's image - gallery. Some snippits may be unnecessary but at this moment, I thought it would be better to present some U G L Y code and let you tweak it further rather than keep you waiting and wondering. I have added a few comments in to assist you in getting this working too. Let me know how it works and notice if you wish to change the % look for the 0.6 two places in the code.


    Good Luck,

    And to anyone else, if you can make it work better, please do so AND POST an edited copy here. *squint*

    Jarred

  • Hi Jarred,
    Firstly, thanks for taking the time to produce this source code.

    However, there's still one slight issue.
    I've used it in this tour of an art gallery to bring up plugin images of the art on the walls. http://www.projectsolutions.es/demos/gallery/tour.html
    Most of them look fine as they are portrait (i.e. height is greater than the width) but one of them is landscape (180º to the opening point of the tour) which still opens as portrait.
    I discovered that if the size of the browser window is altered, even just a couple of pixels, while the tour is open, everything then works as it should. Meaning, all the images open to their correct proportions.
    I also noticed that on the first click of the hotspots, there seems to be a bit of a struggle to open the image. Once closed and re-opened it seems fine apart from the proportions. This does not happen when I open the tour locally so I'm assuming it is something to do with connection speed or bandwidth... what's your opinion?

    The only thing I have changed is that I've set the image url to ' url"" ' to speed up initial loading time.
    Obvioulsy I have added an action to set the url and start the 'openImage' action.

    Thanks again.

    Kev

  • Here is my latest work. I am sure someone can still streamline it a bit and make it better so please jump in. But here goes.

    I added a variable to the hotspot calling the image, named urltxt Here I store the url value for each plugin that will be created.

    Code
    <hotspot name="spot1" url="%SWFPATH%/img/1.png" ath="-20" atv="-15" visible="true" urltxt="%SWFPATH%/plugins/art/pic1.png" onclick="looktohotspot(spot1,65,smooth(100,50,20)); showimage2(t1);" /> 
    <hotspot name="spot2" url="%SWFPATH%/img/2.png" ath="-20" atv="15" visible="true"  urltxt="%SWFPATH%/plugins/art/pic2.png" onclick="looktohotspot(spot2,65,smooth(100,50,20)); showimage2(t2);" /> 
    
    
    ........

    Then I add a plugin AND MUST USE A WAIT(1); HERE and I don't know why but it must be there or it will not copy the original image value for sizing. Maybe someone can explain it or give me a workaround here.
    At the end, the plugin is removed.
    Reasoning here is those plugins do not load until they are called and they do not hang around to intefere with anything else.

    Edit:links removed


    Jarred

    Edited 3 times, last by Jarredja (October 31, 2011 at 3:23 AM).

  • Well, it was working perfectly on flash. I just viewed it on iPhone and "not so good". I will return to the drawing board.
    Edit: I guess I need to add some kind of onloadcomplete, it works correctly if you let the pano load and then click on a hotspot. i originally clicked on the iphone before it was finished loading and that caused issues.

    Feedback please!

    Jarred

  • Hi Jarred,
    As I said in my message, everything works fine, at least, good enough for me to send off the example I was working on. Still a slight issue though.... just to drive you nuts!
    I'll write the rest of this post as a summary for anyone else interested.

    For the benefit of anyone else following this post, Jarred has come up with an action source code to resolve my issue of opening a plugin image, firstly to 20% of it's height (0% width), then to 100% of it's width in proportion to the stage before scaling to it's height in proportion to itself.
    Here's a copy of the code as I am using it:

    The code works perfectly but the only remaining issue was that the images all load as the tour loads.
    (adding 'set(plugin[plugin name or %1].url, plugin url or %1);' to the action, for some reason, messes with the already complex action of opening the plugin in stages, in proportion to itself and scaled to stage.)

    To rectify this I added:

    <events onloadcomplete="begin"/>

    <action name="begin">
    set(plugin[image1].url,plugins/art/pic1.png);
    set(plugin[image2].url,plugins/art/pic2.png);
    set(plugin[image3].url,plugins/art/pic3.png);
    set(plugin[image4].url,plugins/art/pic4.png);
    set(plugin[image5].url,plugins/art/pic5.png);
    </action>

    Fine, but this still means that if a user clicks a hotspot within the first 5 to 10 seconds after the tour has loaded, nothing happens. After this time, everything is ok.
    I say everything is ok, and this is true for the tour in question as it is just an example and only contains 5 plugin images. In reality the tour my contain many more (it's an art gallery) and this would cause major loading time issues.

    Today I have made another alteration. I've scrapped the earlier mentioned 'event onload' and it's corresponding action and made a simple 'set url' action for each image, outside of the main 'showImage' action:

    <action name="image1">
    set(plugin[image1].url,plugins/art/pic1.png);
    </action>
    <action name="image2">
    set(plugin[image2].url,plugins/art/pic2.png);
    </action>
    etc, etc.

    Then added to the hotspot onclick command (red txt):
    <hotspot name="spot1" style="info_spot" ath="14.13" atv="6.45" onhover="showtext(Clique para más información, buttonstyle);"
    onclick="lookto(14,0,65,smooth(150,30,40));image1(); showImage(image1);rotOff()" />
    <hotspot name="spot2" style="info_spot" ath="32.25" atv="6.50" onhover="showtext(Clique para más información, buttonstyle);"
    onclick="lookto(32,0,65,smooth(150,30,40));image2();showImage(image2);rotOff()" />
    etc, etc.

    Now what happens is, when the hotspot is clicked, the action is runs but stops just before the image opens. Click the hotspot a second time and the image opens (double click does not work). Close the image and click the hotspot again and the action runs to completion, even if I add into the close action 'set(plugin[image1].url,);'

    Here's copies of relevant sections of code:

    I know this is a long and quite complex post but, I think (and, obviously, so does Jarred judging by the amount of input he has had) that it will be worth it to get this sorted out.
    The opening action of the images, in my opinion, is a nice alternative to a simple alpha tween or a simultaneous scale of x & y values.
    Here's a link to the example: http://www.projectsolutions.es/demos/gallery/index.html

    It works on iphone 4 albeit a bit jerky while loading.
    I'd be interested to know how it performs on an ipad.

    Thanks

    Kev

  • Hi,

    The code below is based on the above code from Klaus , and the xml-image-gallery example code as Jarred has pointed out...
    To see it working you need to copy the image-gallery example folder and substitute the imagegallery.xml with this new one...
    Also, you MUST use the krpano.swf version from 2011-02-23 - krpano 1.0.8.14 viewer pre-release

    Quote

    originalwidth="NaN" - what does 'NaN' mean?

    NaN (Not a Number) http://en.wikipedia.org/wiki/NaN

    Hope this help...

    SAlut.

  • Thanks Michel,

    The only thing I didn't like was that, even though there was a tween command in the close action, the image dissapeared on click.
    I made a couple of minor changes (below) and everything is now exactly how I want it. *thumbsup*

    Thanks to everyone who has taken an interest in this post and for everybody's input.
    Hopefully some others will find this arrangement of source code useful also.

    Kev

  • Hi,

    The only thing I didn't like was that, even though there was a tween command in the close action, the image dissapeared on click.

    That's normal if you do not use the correct Krpano.swf version as I had noted in my post:

    If you do not use the correct Krpano.swf version, the closeimage() action does not work correctly because of the pixelwidth/pixelheight variables that returns null...

    I made a couple of minor changes (below) and everything is now exactly how I want it. *thumbsup*

    If it works exactly how you want it, then you can erase the call to the doimagepercent() action and the action itself as they have no effect in the way you use them on your code... As you can notice, despite the call to the function, the plugin[image] does not resize onresize event !!!

    SAlut.

  • Michel, just FYI.

    This line in your code causes the entire setup to fail on iPhone. It allowed one click, did a look to action and stopped. After that event took place, clicking the same hotspot again or a different hotspot did nothing.

    set(plugin[image].url,);

    I have removed it and have not seen any adverse reaction.

    I must admit, I had scanned over Klaus's example too quickly and didn't take the time to understand it. I I had my mind set on using the if statements from the image gallery to set a percentage of stage and set out to reinvent the wheel. Even so, I have learned quite a bit from this fishing expedition.

    Jarred

  • If you do not use the correct Krpano.swf version, the closeimage() action does not work correctly because of the pixelwidth/pixelheight variables that returns null...

    Hi Michel,
    I did download the latest swf's and js files and replaced them in the pano but it made the pano run as Demo Version.
    I guess the pano has to be produced with the has to with the latest files in place at the start. Everything is working as I want it for my demo so I'll leave it and try it on the next one.

    Thanks again.

  • Hi,

    Michel, just FYI.

    So thank you for that *wink* . I appreciate your feedback as it makes things go forward, isn't it *smile* ?

    set(plugin[image].url,);

    I have removed it and have not seen any adverse reaction.

    Well, there is some *whistling* ...
    Try to click one of the hotspots, the image pops up, closes the image, try to click again on the same hotspot... , the image does not pops up and the loading plugin stays... To be honest I do not know why this happen *huh* ...
    That's was the reason I had added the set(plugin[image].url,); and it seemed to solve the problem...
    But as you pointed out, this causes a major problem when using krpanoiphone.js *whistling* ...
    I had tried to trace the url value:
    trace('set(plugin[image].url,) = ',plugin[image].url);
    and the result is:
    set(plugin[image].url,) = plugin[image].url
    I suppose that is the problem, but that is just a supposition...

    So, Instead of using an empty value for the url, I have tried using a "dummy image"... And it seems to work correctly now...
    Here the modified code:

    Now, I have to try using addplugin() and removeplugin() instead of changing the url... (but no time at this moment *g* )

    Tell me if it is OK now *thumbup* ...

    Quote

    and set out to reinvent the wheel. Even so, I have learned quite a bit from this fishing expedition.

    Reinvent the wheel could be bad for production purpose, But it is a good exercice to understand how things work, do you not think so? I like those fishing expedition also *thumbsup* *wink* ...


    Thanks again.

    You are wellcome... Your color changing car is great... also your "cogwheel ( *huh* )" hotspot *thumbup* ...

    SAlut.

  • Hi,

    Here the same code using addplugin() and removeplugin() instead of changing the url...

    SAlut.

  • You are wellcome... Your color changing car is great... also your "cogwheel ( *huh* )" hotspot *thumbup* ...

    Thanks for the compliments.

    Here's another small issue, which I'm sure there is a very simple answer to but I can't work it out:

    I'm showing a video (flv) in a tour and want to be able to change the video on the click of a thumbnail image.
    These are the actions I'm using:

    <action name="changevideo1">
    set(hotspot[video1].videourl,vids/van_halen.flv);
    hotspot[video1].playvideo(vids/van_halen.flv);
    </action>
    <action name="changevideo2">
    set(hotspot[video1].videourl,vids/rage.flv);
    hotspot[video1].playvideo(vids/rage.flv);
    </action>
    <action name="changevideo3"> etc, etc....

    The issue is, on clicking the chosen thumbnail, the video that is currently playing stops and the next one starts, but only the sound... no image.
    I checked in the editor and the video url is correct for the chosen video. Then (without making any alterations) click 'load this xml' and the video is suddenly visible.

    If it's of any significance here's the video code:
    <hotspot name="video1"
    url="plugins/videoplayer.swf"
    videourl="vids/rage.flv"
    ath="100.00446731324874" atv="-11.206881978535328"
    distorted="true"
    alpha="0.3"
    width="492" height="360"
    handcursor="false"
    scale="0.21997464162342867" scale9grid="" scalechildren="false" rotate="0"
    rx="-13.25" ry="-35.5" rz="-0.7415011467273647"
    volume="0.7"
    loop="true"
    pausedonstart="false"
    directionalsound="true"
    range="180.0"
    rangefalloff="1.0"
    outofrangevolume="0.2"
    />
    and the thumbnail:
    <plugin name="Rockt1" url=""
    align="center,top" edge="top" keep="true"
    x="-300"
    y="150"
    width="12%"
    height="0%"
    onclick="action(changevideo1)" />
    (The thumbs are revealed by a selection button)

Participate now!

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