Textfield on ipad / iphone

  • Hi

    Does textfield work on ipad / iphone? I've spent ages trying to find an example that works. My requirement is really simple, I need to display a couple of lines of text and a url, preferably I'd be like to style it but this is not essential.

    My understanding is that krpanoiphone.js can handle basic textfield plugin html. Is there any info out there to aid me in my quest?

    Any help would be massively appreciated if only to say it's not ready yet :)

    Thanks

    Will

  • Hi,

    at the moment the textfield in the krpanoJS is really simple,
    the '[' and ']' tags from the html setting will be replaced by '<' and '>' characters and
    then the result will be insert into the "innerHTML" of a <div> element,

    that means if you don't care about the flash textfield you could use the full html stuff there,
    like style and classes,

    e.g.

    Code
    <plugin name="text"
            url="textfield.swf"
            html="[div style='color:#FF0000;']test sfsdfsdfsdfsdf sdfsdfsdfsdfsdfsdf sdfsdfsdfsdfsdf[/div]"
            align="lefttop" x="10" y="10"
            width="200"
            height="100"
            />

    best regards,
    Klaus

  • I have to say that I prefer using a png. I have been trying to get the html text to work and you can get some basic thing working but for example a basic thing like margin does not excist even for flash. At least there is no code for it in the documentation.

    I got a workaround by using a border width of 20 in same color but it only worked in flash.
    Roundedges and shadow works in both flash and iPad but as the fontsize only works on iPad it is not of much use.
    And how do you align the text to center with the iPad coding.

    I would be much more interested in getting the showtext work on iPad.

    Showtext, scroll thumbs, and videoplayer are in my opinion the 3 missing options now in HTML5.

    Hans

  • Hi Hans,

    I found a solution for margin recently on the forum, a quick scan and I cant find the post, I think from Graydon. But here was his solution

    Code
    <data name="info_html">
    		<textformat leftmargin="30" rightmargin="30">
            <h2>Salvator Mundi</h2>
            <br/>  <img src="graphics/pic_image.jpg"  hspace="20"/>   
            <p>This is dummy example text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam feugiat metus, ut accumsan massa scelerisque eu. Ut facilisis cursus velit, eu hendrerit ipsum rutrum et. Pellentesque et ligula leo, in facilisis nisl. Sed vitae fringilla odio. Pellentesque congue nulla eu leo adipiscing sit amet congue tellus aliquet.
    </p> <br/>  <br/>  <br/>  <br/>  <br/> 
     <a href="http://www.google.co.uk" target='_blank'> Click here for more information </a> 
    </textformat>
        </data>

    <textformat leftmargin="30" rightmargin="30"> </textformat> being the margin code.

    A quick question if you dont mind, I have a commission for an Ipad tour coming up. I wondered if you had tried using an image map on ipad ? like the 'scenes with imagemap' example ? I dont have an ipad, so would be grateful to know if it is possible or not ?

    best wishes,

    tom

  • Not sure what you mean with imagepap. If it is just a png or jpg floorplan or map with hotspots on it it should not be a problem.
    I have not done any yet but I remember I have seen one.

    For the texfield this is what I have now working.
    http://360-foto.dk/testpano/

    Ypu can see on in Safari by using webagent iPad the difference.
    With flash this uses a white border simulating a margin but it does not work in HTML5.

    If I ad anything with external data it just gives me error on iPad.

    I assume that with the devices options it should be possible to make 2 versions

    Hans

  • Ok finally got something usable.
    http://360-foto.dk/testpano/

    Code:

    <plugin name="txt" devices="flash"
    url="plugins/textfield.swf"
    html="[br][p]Musikhuset og Congresshuset Aarhus [/p]"
    css="p{color:#000000; font-family:Arial; font-size:16; margin-left:5; margin-right:5; margin-top:15; text-align:center; }"
    children="false"

    width="300"
    height="50"
    backgroundcolor="0xFFFFFF"
    roundedge="35"
    shadow="5"
    borderwidth="2"
    bordercolor="0x000000"

    align="centretop"
    x="0" y="20"
    onloaded="wait(8);tween(alpha,0.0,2);"

    />

    <plugin name="texthtml" devices="html5" onloaded="wait(8);tween(alpha,0.0,2);"
    url="plugins/textfield.swf"
    html="[div style='color:#FF0000; font-family:Arial;font-style:italic; font-size:16; margin-left:5; margin-right:5; text-align:center'][br]Musikhuset og Congresshuset Aarhus [/div]"

    align="centretop" x="0" y="25"
    roundedge="20" shadow="5"
    borderwidth="2"
    bordercolor="0x000000"

    width="300"
    height="50"

    />

    I could not find anything for centering the text vertically. margin-top does not work so I had to ad a break.

    Hans

  • Hi there:

    OK, so following a bit of this thread I was able to get a fairly nice, formatted textfield showing up on both Flash and HTML5 (iPad) delivery... I found that trying NOT to style the inbuilt textfield so much was the key. I can only imagine the pain Klaus is going through, trying to account for all the differences; I sincerely hope he isn't going to parse all of HTML5 spec through his engine. *wink*

    One quick question though before my working example: how the heck do you put a (c) copyright symbol in the HTML5 version? Using "&copy;" breaks the XML. :(

    Note, I had to fudge the x/y values for the textfields a bit for HTML5 display; things wanted to hang off the edge of screen.

    Another quick question: My web link in the Flash version does not work. The example here at krpano's site does work. I copied and pasted the example, but no dice from my site. Ideas? (edit: trying event:openurl() brings no joy, either)

    OK, example:

    Edited once, last by bpc94609 (March 4, 2011 at 2:33 AM).

  • Hi bpc94609,

    Quote

    One quick question though before my working example: how the heck do you put a (c) copyright symbol in the HTML5 version? Using "&copy;" breaks the XML. :(

    try & # 1 6 9 ; (without the spaces)

    Quote

    Another quick question: My web link in the Flash version does not work. The example here at krpano's site does work. I copied and pasted the example, but no dice from my site. Ideas? (edit: trying event:openurl() brings no joy, either)

    This does not work localy Local / Offline Usage.

    Hope this help (better late than never *wink* )...

    SAlut.

  • Regarding the textfield on ipad has any one been able to set the opacity of the background to lets say 50% without changing the text as well. I've tried the following example where at the bottom it sets the background to transparent but it makes it white.

    I've also tried adding in the div without success. If anyone has any ideas it would be helpful.

    Code
    filter:alpha(opacity=60); 
       -moz-opacity: 0.6; 
       opacity: 0.6;
  • krpano.com/forum/wbb/core/index.php?attachment/477/I've attached an example of the problem with textfield used on the
    ipad. Just using the opacity: .5 you will see from the image that the
    right and bottom edge are transparent but there is always a gray box
    around the text. I've looked at the webkit sites to try to get this
    working but no setting that I could find does the trick. Is there a solution to have a transparent
    background without fading out the text and without the gray box? Any suggestions would be
    welcome.

  • Hey there:

    Here's what I use to display on HTML5 devices. THis shows the text w/o any background just fine. Haven't tried using a background PNG though. FWIW:

  • Robert, I notice in your DIV's style you have opacity set. This is setting opacity on the -entire- DIV. Try using CSS to style -separate- spans & DIVs, and put opacity on the appropriate ones. HTH. This would also allow you to, say, not inline style your individual SPANs font, etc.

  • Hi,

    I like to get it a bit further..

    with variables..

    here some code i tried..
    the xml with the style and variables is included <incude



    but i see the text: data:html_title

    as in the html tag of the plugin..

    anybody?

    Tuur *thumbsup*

  • mmm..

    klaus wrote:
    http://www.krpano.com/forum/wbb/inde…21272#post21272

    is there an other way to get that variable $tit_1 in the textfield? *confused*

    also tried html="showtext(get($tit__1));"

    Tuur *thumbsup*

Participate now!

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