Example: iframes (or any other html content) as distorted hotspot

  • My God, this is a powerful feature...

    I just ran a KRpano tour in a KRpano virtual museum setup.. Panoception! Everything just works, even gyro devices and smooth too, even on an old iPad.

    I added the iframe hotspot options to my custom tour editor suite and the possibilities have just shot up exponentially! Just imagine the possibilities with html/javascript interfaces that are part of the pano.

    This is hot stuff!

  • It is the perfect solution but before you spend hours on it check out the previous posts as it fails on an iPad or iPhone.

    Bit of a shame really.

    I have no issues with it on IOS devices at all. The only thing is that it is not rendered with webGl, which is a bit noticable on older IOS devices, but apart from that, It runs fine on several iPads and iPhones, so I don't get what the problem is.

    Even the forced CSS3D isn't much of an issue and that will be resolved eventually, I'm sure. It is just of late that ordinary hotspots get rendered with webGL..

    I see no reason why not to research these possibilities right now. The implementation will only get more straight forward in the future.

  • As mentioned... check out the previous posts.

    It's the scrolling that doesn't work. The iframe isn't cut off so the contents are displayed in their full length. On an iPhone / iPad there's no way to drag the contents up or down to see it all so while the iframe does display your completely limited to the size of the contents.

    You'd have to be insane not to cater for those devices.

    Hey, just trying to save you some time as I know how quickly the hours fly by when working with tours / xml *wink*

    Check with Umalo as he may have an alternative solution for you if you need it.

  • The fact that scrolling on a undefined page-height page does not work is a non-issue for me. Why would I even want that? The controls are tiny and the application is dubious at best. But even if I wanted long pages, I'd simply make a page-wrapper for it, no biggy.

    Most of my stuff is IOS friendly anyway, and these sites seem to run natively inside the pano. All the touch and gyro control is simply passed on. I'm not going to let a trivial thing like a issue of mis-rendering on non-formatting of a page stop me from using one of the most promising features in this pano engine, now will I?

    The stuff that I am interested in at this point work perfectly on IOS right now regardless of the limitations you cite. Nice interactive panels with info and buttons have a lot of potential. The javascript integration in KRpano makes it very easy for these "modules" to communicate with the pano actions and each other.

    KRpano works in KRpano in the iPad/iPhone for goodness sake!! My LCARS interface is fully operational. I tested all my CMS projects and these render prefectly between the lines... I do not see the reason to not develop with this feature just because 1995 comic-sans green and pink center-justified scrolling amateur pages do not, at this particular moment in time, render correctly within a 360 panorama....

    Let's just focus on stuff that DOES work and lets not get bogged down in stuff that at this moment perhaps doesn't which might bother somebody somewhere.. or possibly not. Now let me try and safe you some time by suggesting that you might want to take it easy on assuming stuff about somebodies workflow, wants, needs and goals before giving random unsolicited advice.

  • Hi Timescale,

    I either misunderstood your post and my apologies for that or you seem to have some serious issues going on communicating with other people so I will polity bow out of the conversation and move on as life's too short.


    Nice you of you to politely bow out of the conversation after that flaccid ad hominem quip about my possible issues in communicating. It was, for sure, you that thought it apt to curb my enthusiasm with trivialities that affect nobody but you.

    For a guy that is so seemingly obsessed with not wasting any time because life is to short, you sure wasted plenty of your and my time with this nonsense.

    A stark reminder of the true random nature of the internet forum, I think I'll simply put you on the ignore list now... for saving time..

  • Hi,

    that's already on my list for fixing - the reason is the new internal layout and the actions executions system and how and when the sizes where updated.

    E.g. in this case the element size will be updated after the executing the onloaded event code and so the registercontentsize call in the add_iframe action is without effect.

    As workaround a delayedcall(0,...) of the add_iframe call should work.

    In the next release that bug should be fixed.

    Best regards,
    Klaus

  • Clear!
    *thumbup*

    edit: version 4 (new) updated with delayed call 0 .... Works!!

    Thanks!
    Tuur *thumbsup*

  • I really love this iframe function but I am having an issue
    I use it to call an html audio player.
    Instead of an hotspot I used a layer button so it loads in a layer but when I close the layer, the music still plays.

    Any suggestions

    Here is my code

    Code
    <layer name="iframe" align="centertop" x="10" y="2" keep="true" url="skin/PlayButtonRed.png" zorder="2" scale="1.0" style="tooltip" tooltip="Play Samples" onclick="switch(autorotate.enabled); add_iframe('player/index.html', 450, 650); showinfo(closeiframe); " devices="!mobile"/>
    <layer name="closeiframe" url="skin/click_here.png" zorder="999" parent="layer[iframe]" keep="true" align="centertop" x="0" y="2" visible="false" alpha="0" scale="1.0" onclick="hideinfo(iframe); "/>

    Here is my "hideinfo" action.

    Code
    <action name="hideinfo"> 
    tween(plugin[%1].alpha, 0, 0.5, default, set(plugin[%1].visible,false));
    tween(plugin[%1].scale, 0.5); 
    </action>

    When I click on the layer "closeinframe", the iframe goes away but the music still plays
    Is there a way to kill the inframe along with the sound from the audio player?

    Thanks in advance

  • Thanks

    I tried that but when I do that it kills the entire process and then nothing happens when I try to click the button to bring up the iframe again.

    Anyone knows where I can find a Krpano plugin audio player with playlist?

    Thank you

  • I'm not much of a fan of JQuery, but the makers of the player have a pretty good method document : http://jplayer.org/latest/developer-guide/#jPlayer-methods

    So what you need to do to simply stop the music at any time you want is to call the method from the KRpano action. This means you need to know how to address the iFrame properly. Your action "add_iframe" does not assign an ID to the iFrame. Make it so that it does and than call the iframe and the jQuery method to stop or pause the sound.

    you should be able to control the player with something like this.

    Code
    document.getElementById('musicplayer').contentWindow.AjsFunction(argument);
  • How do we close the iframe?
    removeChild doesn't seem to work?

    Never tried that before.. Perhaps you can set visibility? Use JS to set the iframe SRC to blank for neatness?

    Another possibility is to give the iFrame a unique ID in the action add_iframe and then use JS to remove the element from the HTML tree. I think that would be the best way.

  • Okay I got the frame to close using:

    Code
    <action name="remove_iframe" type="Javascript">
    var iframes = document.querySelectorAll("1%");
        	var lastIframe = iframes[iframes.length - 1];
        	lastIframe.parentNode.removeChild(1%);
    
    
    	</action>

    Next is to get the YouTube API to the iframe and close the iframe on video end.

    Any Suggestions? Anywho tried Youtube api in Krpano iframe?

Participate now!

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