Getting the HTML5 Interface Examples to work

  • I've been having a blast with this new version of krpano, and since HTML5 seems to be getting bigger I decided to take a look at a few of the interface examples, like the hotspot flyouts and the textfields. With parsing, I can take an introimage interface and put it in my tour,


    Code
    <plugin name="introimagePC"	        url="introimagePC.png"	        align="center"	        devices="desktop|!mobile"	        onloaded="set(alpha,0); tween(alpha,1.0);"	        onclick="hideintroimagePC();"	        keep="true"	        />
    	<action name="hideintroimagePC">		if(plugin[introimagePC].enabled,			set(plugin[introimagePC].enabled,false);			tween(plugin[introimagePC].alpha, 0.0, 0.5, default, removeplugin(introimagePC));		  );			</action>

    And then in the tour.xml file at the top I add a simple

    Code
    <include url="introimage.xml" />


    And it's off to the races!

    So now my goal is to have 2 things:
    1. Is to have a static box in a corner that has a little picture and a few lines of text. So I pull in scrollingtextfield.xml and after putting the textfield.swf in my folder, all the files associated, and then adding a little

    Code
    <include url="textfield/scrollingtextfield.xml" />


    The text field doesn't show up! However, in the tour.html if I add in a little xml:"scrollingtextfield.xml" in the embed, then I can see it, just like the example on the website! (So I know I've got everything in there.) What am I missing to put this text box on my tour?</include>


    2. I want to have a fly out hotspot and then it's the scrolling text box. So after copying all the assets and code over to my folder, I get the same thing! I can't integrate the two interfaces because I can't even get them to show up on my tour. What am I missing?

  • Hi,

    just taking codes or parts from other examples might be not be the right way...
    You might miss some dependences from some specific examples (e.g. events or other related elements), or the usage of the keep flag (which is very important!)...

    But you can post your example of course - then it would be easier to say what is wrong in the example and why it is not working that case.

    Best regards,
    Klaus

  • For getting the scrolling text box, here's what I did.

    I selected a bunch of panos and dragged them to the make tour. I added hotspots and renamed them like your video shows. Then I copied the scrollingtextfield.xml and saved it to a textfield folder in the vtour folder. I also added the 3 files that were on the example site: dirbutton, sliderbutton, and textfield. And just for good measure I got the textfield.swf file in there too. So this is all in the tour/textfield folder.

    Then I opened the scrollingtextfield.xml file and removed the two lines of code for the grid preview and the view (because my tour already provides those)
    [color=#000000][font=monospace]

    Code


    [/font][/color]

    Next, I went into my tour.xml file and added the code:

    Code


    I know it's probably a dependency, because in the tour.html if I switch the embeded from the tour.xml file to the scrollingtextfield.xml file, the example on the krpano site pops up no problem.

    I've tried different things, like putting it all in the root /tour folder, and even putting the code itself in the tour.xml file. I thought it would work because I was able to essentially copy the intro image example and the soundinterface example and got it working just fine.</include>


    </include>

    GOT IT!</include>


    </include>

    First, I'd like to apologize for not posting this in the correct sub topic. </include>

    All I needed to do was to add keep="true" and it showed up! Now I can start my tweaking!</include>

    Edited once, last by Tebasaki (September 5, 2012 at 3:14 AM).

Participate now!

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