You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Friday, February 11th 2011, 8:39pm

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

VN2011

Professional

Posts: 1,334

Location: Duluth MN

  • Send private message

2

Friday, February 11th 2011, 10:35pm

see your other post again. for my comment.

3

Saturday, February 12th 2011, 10:39am

Thanks VN201, you've managed to display a couple of words, this is promising, do you know why it stops working if there are more words?

4

Monday, February 14th 2011, 3:29pm

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.

Source code

1
2
3
4
5
6
7
<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

HansNyb

Professional

Posts: 848

Location: Denmark

Occupation: Photographer

  • Send private message

5

Tuesday, February 15th 2011, 2:09pm

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

Posts: 147

Location: London

Occupation: Photographer

  • Send private message

6

Tuesday, February 15th 2011, 3:29pm

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

Source code

1
2
3
4
5
6
7
8
9
<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

HansNyb

Professional

Posts: 848

Location: Denmark

Occupation: Photographer

  • Send private message

7

Tuesday, February 15th 2011, 4:23pm

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

HansNyb

Professional

Posts: 848

Location: Denmark

Occupation: Photographer

  • Send private message

8

Tuesday, February 15th 2011, 6:01pm

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

9

Friday, March 4th 2011, 12:36am

Info re textfield and HTML5 stuffs

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. ;-)

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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style name="projectcredittext"
        url="%CURRENTXML%/../_common/plugins/textfield.swf"
    	css="data:css1"
        keep="true"
        children="false"
        visible="false"
        width="180"
        height="70"
        backgroundcolor="0x00000033"
        roundedge="5"
        shadow="1"
        borderwidth="2"
        glow="4"
        onloaded="set(alpha,0);set(textblur,15);set(blur,15); set(visible,true); tween(alpha,1.0,0.3); tween(textblur,0,0.3); tween(blur,0,0.3);"
/>
    
   <plugin name="project_credit_text_flash"
    	devices="flash"
        style="projectcredittext"
        selectable="false"
        html="data:html1"
        align="rightbottom"
        x="10"
        y="10"
/>

<plugin name="project_credit_text_html5" 
        devices="html5" 
        keep="true"
        url="%CURRENTXML%/../_common/plugins/textfield.swf"

        html="[div style='width:100%;height:100%;
                background-color: #000;
                border: 2px solid #fff;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                padding: 7px 3px 2px 7px;
                font:bold 14px sans-serif;']
        BLAH BLAH BLAH:
        [br]
        [span style='font:bold 12px sans-serif;']
        MORE BLAH BLAH BLAH
        [/span]
        [p]
        [span style='font:normal 12px sans-serif;']
        Photography (c) John Doe
        [/span]
        [/p]
        [/div]"

        align="rightbottom" x="30" y="30"
        roundedge="5" shadow="2"
        borderwidth="2"
        bordercolor="0xFFFFFF"
	backgroundcolor="transparent"
        width="200"
        height="70"
/>

<data name="html1">
	<p>
		BLAH BLAH BLAH,<br/><a href="http://www.krpano.com" target="_blank">MORE BLAH BLAH</a>
	</p><br/>
	<p class="copyrightcredit">
		Photography © (works) John Doe
	</p>
</data>	        

<data name="css1">
	p{color:#FFFFFF; font-family:Arial; font-size:14; font-weight:bold; margin-left:7; text-align:left; }
	a       { font-size:12; text-decoration:underline;  color:#cccccc;  font-weight:bold; }
	a:hover { color:#ff6500; text-decoration:none;}
	.copyrightcredit{ font-size:11; font-weight:normal;}
</data>

This post has been edited 1 times, last edit by "bpc94609" (Mar 4th 2011, 2:33am)


michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

10

Friday, March 25th 2011, 4:56am

Hi bpc94609,

Quoted

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)

Quoted

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 ;-) )...

SAlut.

11

Friday, March 25th 2011, 6:58pm

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.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<plugin name="project_credit_text_html5" 
        devices="html5" 
        keep="true"
        url="%CURRENTXML%/../_common/plugins/textfield.swf"

        html="[div style='width:100%;height:100%;
                background-color: #000;
                border: 2px solid #fff;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                padding: 7px 3px 2px 7px;
                font:bold 14px sans-serif;']
        BLAH BLAH BLAH:
        [br]
        [span style='font:bold 12px sans-serif;']
        MORE BLAH BLAH BLAH
        [/span]
        [p]
        [span style='font:normal 12px sans-serif;']
        Photography (c) John Doe
        [/span]
        [/p]
        [/div]"

        align="rightbottom" x="30" y="30"
        roundedge="5" shadow="2"
        borderwidth="2"
        bordercolor="0xFFFFFF"
	backgroundcolor="transparent"
        width="200"
        height="70"


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

Source code

1
2
3
filter:alpha(opacity=60); 
   -moz-opacity: 0.6; 
   opacity: 0.6;

12

Saturday, March 26th 2011, 6:47pm

index.php?page=Attachment&attachmentID=477I'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.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<plugin name="tp_info_01" devices="html5" enabled="true" zorder="10001" url="plugins/textfield.swf" keep="true"
		html="[div style='width:100%;height:100%;
            	background-color:#000;
            	opacity:0.5;
            	-moz-opacity:0.5; 
            	padding: 7px 3px 2px 7px;
            	font:bold 14px sans-serif;']
    	Company Intro Goes Here!
    	[br]
    	[span style='font:bold 12px sans-serif;']
    	Company Intro Goes Here!
    	[/span]
    	[p]
    	[span style='font:normal 12px sans-serif;']
    	Company Intro Goes Here!
    	[/span]
    	[/p]
    	[/div]"

    	align="center" width="300" height="100" x="0" y="0" visible="true"
		ondown="action(close,tp_info_01);"
 	/>
rbudnikas has attached the following file:
  • background.png (39.18 kB - 40 times downloaded - latest: Feb 9th 2014, 5:24pm)

13

Tuesday, March 29th 2011, 12:26am

Any chance to get some help on this?

Could really use someones help.. Please help!!!

14

Tuesday, March 29th 2011, 6:41pm

Hi bpc94609,

Quoted

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)

Quoted

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 ;-) )...

SAlut.


Hi Michel:

Turns out I had a file corruption issue; Started from scratch with a proper UTF8 text file, and now the (c) symbol shows up fine AND Web links work (and locally, even ;-) ). :-)

15

Tuesday, March 29th 2011, 6:46pm

index.php?page=Attachment&attachmentID=477I'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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- URL FOR CREDITTEXT -->
    <style name="credittextstyle" url="plugins/textfield.swf" />
    <plugin name="project_credit_text_html5" devices="html5" 
		style="credittextstyle"
		keep="true"
        html="[div style='width:100%;height:100%;
		padding: 0px 10px 10px 10px;
		font:bold 12px sans-serif;text-align:right;']SOME TEXT HERE[span][br /]© PSOME NAME HERE[/span][/div]"
        align="rightbottom" x="90" y="5"
		backgroundcolor="transparent"
        width="300"
        height="30"
    />

16

Tuesday, March 29th 2011, 6:48pm

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.

17

Tuesday, March 29th 2011, 7:15pm

Thanks, I'll give it a try!

Robert

---Update---

Worked like a charm. I have to learn to read between the lines.

Thanks again for the help.

This post has been edited 1 times, last edit by "rbudnikas" (Mar 29th 2011, 7:36pm)


18

Wednesday, March 30th 2011, 12:00am

Thanks, I'll give it a try!

Robert

---Update---

Worked like a charm. I have to learn to read between the lines.

Thanks again for the help.


Good news! :-)

Tuur

Master

Posts: 2,342

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

19

Wednesday, March 30th 2011, 1:36am

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


Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<krpano version="1.0.8" logkey="false"  onstart="style_var();text_title();">


<action name="style_var">
		set(taal_color,"#333366");
		set(taal_weight,"");
		set(taal_family,"Verdana,Arial,Helvetica");


	</action>	

<action name="text_titel">
	
	
		set($tit_1, I LOVE KRPANO.);
		
		
    </action>



 <style name="credittextstyle" url="../plugins/textfield.swf" />
  
<data name="html_title" >	</data>

 <plugin name="title_text" 
		style="credittextstyle"
		keep="false"
		alpha="1"
	        html="data:html_title"
        align="lefttop" x="120" y="1"
		backgroundcolor="transparent"
        width="100%"
        height="38"
				zorder="100"
				onloaded="html_title();"
		 
	/>		
				
				


<action name="html_title">
	
		txtadd(data[css].content,"body { color:",get(taal_color),"; font-weight:",get(taal_weight),"; font-family:",get(taal_family),";}");
		txtadd(data[html_thumb1].content,"<p>",get(tit_1),"</p>");
		
		set(update,view);
	
	</action>
				

    />



but i see the text: data:html_title

as in the html tag of the plugin..

anybody?

Tuur *thumbsup*

Tuur

Master

Posts: 2,342

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

20

Wednesday, March 30th 2011, 2:04am

mmm..

klaus wrote:
http://www.krpano.com/forum/wbb/index.ph…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*