Textfield on ipad / iphone

Anfänger

Freitag, 11. Februar 2011, 20:39

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

Zum Seitenanfang

VN2011

Profi

Beiträge: 1 336

Wohnort: Duluth MN

2

Freitag, 11. Februar 2011, 22:35

see your other post again. for my comment.

Zum Seitenanfang

iamwill

Anfänger

Beiträge: 23

3

Samstag, 12. Februar 2011, 10:39

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?

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Montag, 14. Februar 2011, 15:29

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.

Quellcode

<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

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

5

Dienstag, 15. Februar 2011, 14:09

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

Zum Seitenanfang

tommo77funk

Fortgeschrittener

Beiträge: 159

Wohnort: London

Beruf: Photographer

6

Dienstag, 15. Februar 2011, 15:29

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

Quellcode

<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

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

7

Dienstag, 15. Februar 2011, 16:23

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

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

8

Dienstag, 15. Februar 2011, 18:01

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

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

9

Freitag, 4. März 2011, 00:36

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 "©" 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:

Quellcode

<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>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »bpc94609« (4. März 2011, 02:33)

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

10

Freitag, 25. März 2011, 04:56

Hi bpc94609,

Zitat

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

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

Zitat

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.

Zum Seitenanfang

rbudnikas

Fortgeschrittener

Beiträge: 148

11

Freitag, 25. März 2011, 18:58

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.

Quellcode

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

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

Zum Seitenanfang

rbudnikas

Fortgeschrittener

Beiträge: 148

12

Samstag, 26. März 2011, 18:47

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.

Quellcode

<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« hat folgende Datei angehängt:

background.png (39,18 kB - 118 mal heruntergeladen - zuletzt: Heute, 05:34)

Zum Seitenanfang

rbudnikas

Fortgeschrittener

Beiträge: 148

13

Dienstag, 29. März 2011, 00:26

Any chance to get some help on this?

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

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

14

Dienstag, 29. März 2011, 18:41

Zitat von »michel«

Hi bpc94609,

Zitat

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

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

Zitat

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

). :-)

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

15

Dienstag, 29. März 2011, 18:46

Zitat von »rbudnikas«

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:

Quellcode

<!-- 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"
    />

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

16

Dienstag, 29. März 2011, 18:48

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.

Zum Seitenanfang

rbudnikas

Fortgeschrittener

Beiträge: 148

17

Dienstag, 29. März 2011, 19:15

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.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »rbudnikas« (29. März 2011, 19:36)

Zum Seitenanfang

bpc94609

Anfänger

Beiträge: 25

18

Mittwoch, 30. März 2011, 00:00

Zitat von »rbudnikas«

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! :-)

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

19

Mittwoch, 30. März 2011, 01:36

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

Quellcode

<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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

20

Mittwoch, 30. März 2011, 02:04

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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang