Posts by Marco Lanciani

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 12, 2013 at 7:52 PM

I give up for the moment: maybe it's a bug/limitation of Textfield and HTML5... I'll wait next KRPano release to check.
Now, I have to update the online code with something working, so if someone still wants to play with this issue here's the code:
(it works in Flash, DOESN'T work in HTML5)

Code

<layer	name="img_bg1"
					url="plugins/textfield.swf"
					keep="true" type="container" visible="false"
					align="center"
					width="720" height="605" x="0" y="0" zorder="10"
					background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.7"
					roundedge="20">
				<layer	name="title1"
						url="plugins/textfield.swf"
						enabled="false"
						align="top" edge="top"
						width="700" x="0" y="10"
						autoheight="true"
						background="false"
						border="false"
						roundedge="10"
						css="text-align:left; color:#444444; font-family:Arial; font-size:20px;"
						html="[b]TITOLO[/b]"
						/>
				<layer	name="close_img_bg1"
						url="plugins/textfield.swf"
						enabled="true"
						align="topright" edge="topright"
						width="30" x="10" y="10"
						autoheight="true"
						background="true" backgroundcolor="0x000000" backgroundalpha="0.9"
						border="false"
						roundedge="10"
						css="text-align:center; color:#888888; font-family:Arial; font-size:20px;"
						html="[b]X[/b]"
						onclick="switch(layer[img_bg1].visible); set(layer[info_data1].visible,false);"
						/>
				<layer	name="image1"
						url="img/IMG0001.jpg"
						enabled="true" type="container"
						align="center" edge="center"
						x="0" y="0"
						background="false"
						border="false"
						onclick="set(layer[img_bg1].visible,false); set(layer[info_data1].visible,false);">
					<layer	name="info_data1"
							url="plugins/textfield.swf"
							type="container" visible="false"
							align="bottom" edge="bottom"
							width="700" height="110" x="0" y="0"
							vcenter="true"
							background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.7"
							border="true" bordercolor="0xffffff" borderalpha="1.0"
							css="text-align:left; color:#444444; font-family:Arial; font-size:16px;"
							html="data:text1"
							onclick="set(layer[info_data1].visible,false);">
						<layer	name="close_info1"
								url="plugins/textfield.swf"
								align="bottomright" edge="bottomright"
								width="20" x="10" y="90"
								autoheight="true"
								background="true" backgroundcolor="0x000000" backgroundalpha="0.9"
								border="true"
								roundedge="10"
								css="text-align:center; color:#888888; font-family:Arial; font-size:10px;"
								html="[b]X[/b]"
								onclick="set(layer[info_data1].visible,false);"
								/>
							</layer>
						</layer>	
				<layer	name="info_btn1"
						url="plugins/textfield.swf"
						enabled="true"
						align="bottomleft" edge="bottomleft"
						width="65" x="10" y="10"
						autoheight="true"
						background="true" backgroundcolor="0x000000" backgroundalpha="0.9"
						border="false"
						roundedge="10"
						css="text-align:center; color:#888888; font-family:Arial; font-size:20px;"
						html="[b]Info...[/b]"
						onclick="switch(layer[info_data1].visible);"
						/>
					</layer>


			
			<data name="text1">
			<b>DIMENSIONI: </b><i>20x30cm</i>
			<br/>
			<br/>
			<b>ANNO: </b><i>2010</i>
			<br/>
			<br/>
			<b> TIPO: </b><i>Pittura</i>
			</data>

Display More

Regards,

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 10, 2013 at 6:44 PM

Hi,

removing "url=..." doesn't work.
Removing all "type=container" it works partially.
Here it is:

http://www.marcolanciani.com/projects/bruna…ml?html5=always

Going on the second pano, click the image-hotspot on the right to check: also, you might not be able to see the image-hotspot... try reloading the Virtual Tour
(in Firefox you might still not be able to see them either. But they are there just not visible... you'll notice the cursore to change)

Everything works fine in flash. The problem is only in HTML5.
Maybe the problem is related to "textfield" usage in HTML5: any chance to build an info box using mostly textfield, on next release?

The old HTML5 version is still active, just for comparison if needed:

http://www.marcolanciani.com/projects/bruna…ml?html5=always

Removing the "?html5=always" part, on both links, you'll get access to the Flash version where everything is working.

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 9, 2013 at 1:26 PM

I still don't see the error. The code looks ok...

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 8, 2013 at 8:53 PM

I erased all those " " but this didn't help either.
Please, have a look again:

http://www.marcolanciani.com/projects/brunamilani/studio/

This works fine and at normal speed.
Now, click on the arrow on the floor to go to the second pano: as you can see there are three (of 4) hotspot to magnify the pictures on the wall. Click to open... everything is working

Now:

http://www.marcolanciani.com/projects/bruna…ml?html5=always

Everything goes slower. Going to the second pano is even slower and... those three hotspot on the wall are gone (apparently) away: they're there, just not visible. And, obviously clicking on them nothing happens.

Any idea, how to solve this?

Regards,

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 8, 2013 at 8:04 PM

Yes, I use them to make a blank space... doing so with spacebar doesn't work. Any alternative?

Thanks,

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 8, 2013 at 7:43 PM

No one? Any idea?

Regards,

Marco Lanciani · Problem on HTML5 [NEED HELP!] Marco Lanciani January 8, 2013 at 2:40 PM

http://www.marcolanciani.com/projects/bruna…ml?html5=always

It doesn't work and don't understand why... any idea?
Also, try to remove "index.html?html5=always" from the url: then everything works fine!

Thanks in advance,
Regards,

Marco Lanciani · Using Non Standard Fonts... Marco Lanciani January 3, 2013 at 6:50 PM

I've found this:

http://fortawesome.github.com/Font-Awesome/

1- Is it possible to use those fonts in KRPano?

2- Would it be lighter (and possibly quicker) a Virtual Tour made only of Fonts, instead of PNG Icons?

3- What about PROs and CONTs on PNGs vs Fonts?

Regards,

Marco Lanciani

Do you mean...

... if this is what I want:

Code

<layer	name="img_bg1"
					url="plugins/textfield.swf"
					keep="true" type="container" visible="false"
					align="center"
					width="720" height="605" x="0" y="0" zorder="10"
					background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.7"
					roundedge="20">
				<layer	name="title1"
						url="plugins/textfield.swf"
						enabled="false"
						align="top" edge="top"
						width="700" x="0" y="10"
						autoheight="true"
						background="false"
						border="false"
						roundedge="10"
						css="text-align:left; color:#444444; font-family:Arial; font-size:20px;"
						html="[b]TITOLO[/b]"
						/>
				<layer	name="close_img_bg1"
						url="plugins/textfield.swf"
						enabled="true"
						align="topright" edge="topright"
						width="30" x="10" y="10"
						autoheight="true"
						background="true" backgroundcolor="0x000000" backgroundalpha="0.9"
						border="false"
						roundedge="10"
						css="text-align:center; color:#888888; font-family:Arial; font-size:20px;"
						html="[b]X[/b]"
						onclick="switch(layer[img_bg1].visible); set(layer[info_data1].visible,false);"
						/>


                                        ...


					</layer>

Display More

...and this is the action to build the above stucture:

Code

<layer name="button" visible="true" url="skin/zoominhotspot.png" orientation="portrait" keep="true" align="righttop" x="50" y="50" onclick="checkoriantation();" />




		
<action		name="checkoriantation">
			if(layer[%1].orientation == 'landscape', build_hbox(), build_vbox());
			</action>
			
			
<action		name="build_hbox">			


			</action>




<action		name="build_vbox">			


				set(layer[img_bg1].'url,plugins/textfield.swf');
				set(layer[img_bg1].keep,true);
				set(layer[img_bg1].visible,false);
				set(layer[img_bg1].align,center);
				set(layer[img_bg1].width,720);
				set(layer[img_bg1].height,605);
				set(layer[img_bg1].x,0);
				set(layer[img_bg1].y,0);
				set(layer[img_bg1].zorder,10);
				set(layer[img_bg1].background,true);
				set(layer[img_bg1].backgroundcolor,'0xFFFFFF');
				set(layer[img_bg1].backgroundalpha, 0.7);
				set(layer[img_bg1].roundedge,20);


					set(layer[title1].parent,layer[img_bg1]);
					set(layer[title1].url,'plugins/textfield.swf');
					set(layer[title1].enabled,false);
					set(layer[title1].align,top);
					set(layer[title1].edge,top);
					set(layer[title1].width,700);
					set(layer[title1].x,0);
					set(layer[title1].y,10);
					set(layer[title1].autoheight,true);
					set(layer[title1].background,false);
					set(layer[title1].border,false);
					set(layer[title1].roundedge,10);
					set(layer[title1].css,'text-align:left; color:#444444; font-family:Arial; font-size:20px;');
					set(layer[title1].html,'[b]TITOLO[/b]');
					set(layer[title1].height);
					set(layer[title1].height);


					set(layer[close_img_bg1].parent,layer[img_bg1]);
					set(layer[close_img_bg1].url,'plugins/textfield.swf');
					set(layer[close_img_bg1].enabled,true);
					set(layer[close_img_bg1].align,topright);
					set(layer[close_img_bg1].edge,topright);
					set(layer[close_img_bg1].width,30);
					set(layer[close_img_bg1].x,10);
					set(layer[close_img_bg1].y,10);
					set(layer[close_img_bg1].autoheight,true);
					set(layer[close_img_bg1].background,true);
					set(layer[close_img_bg1].backgroundcolor,'0x000000');
					set(layer[close_img_bg1].backgroundalpha,0.9);
					set(layer[close_img_bg1].border,false);
					set(layer[close_img_bg1].roundedge,10);
					set(layer[close_img_bg1].css,'text-align:center; color:#888888; font-family:Arial; font-size:20px;');
					set(layer[close_img_bg1].html,'[b]X[/b]');
					set(layer[close_img_bg1].onclick,'switch(layer[img_bg1].visible); set(layer[info_data1].visible,false);');


                        ...


			</action>

Display More

Am I doing well?

As you can see, my intension is to click on a button(hotspot) to open an image inside a box(textfield) and show some info.
Also, images can be portrait or landscape: how can I check orientation of the photo without giving the parameter "orientation" to the button?
Thanks.
Regards,

Marco Lanciani

I'm trying to create an action to create a layer and sub-layers, and even sub-layers of a sublayer.
Is this possible? Any hint on how to do this?
Thanks,

Marco Lanciani · "Onclick" doesn't work [SOLVED] Marco Lanciani December 30, 2012 at 2:39 AM

I don't know why but "onclick" (line 9 of the code) doesn't work. Exactly, nothing happens.
Is there some limitation, bug...?

Any solution?

Code

<layer name="skin_btn_7181" visible="true" url="skin/zoominhotspot.png" keep="true" align="righttop" x="50" y="50" onclick="set(layer[img_bg].visible,true);" />
				
		
			<layer name="img_bg" url="plugins/textfield.swf" keep="true" type="container" background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.7" roundedge="20" align="center" width="525" height="800" x="0" y="0" zorder="10" visible="false">
				<layer name="title"	url="plugins/textfield.swf" align="top" edge="top" width="505" autoheight="true" x="0" y="10" zorder="11" enabled="false" background="false" border="false" roundedge="10" css="text-align:left; color:#444444; font-family:Arial; font-size:20px;" html="[b]TITOLO[/b]"/>
				<layer name="close_img_bg"	url="plugins/textfield.swf" align="topright" edge="topright" width="30" autoheight="true" x="10" y="10" zorder="12" enabled="true" background="true" backgroundcolor="0x000000" backgroundalpha="0.9" border="false" roundedge="10" css="text-align:center; color:#888888; font-family:Arial; font-size:20px;" html="[b]X[/b]" onclick="switch(layer[img_bg].visible); set(layer[info_data].visible,false);" />
				<layer name="image"	url="img/IMG0002.jpg" align="top" edge="top" type="container" x="0" y="50" zorder="11" enabled="false" background="false" border="false" onclick="set(layer[img_bg].visible,false);">
					<layer name="info_data"	url="plugins/textfield.swf" align="bottom" edge="bottom" type="container"  width="505" height="110" vcenter="true" x="0" y="0"  zorder="12" enabled="false" background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.7" border="true" bordercolor="0xffffff" borderalpha="1.0" css="text-align:left; color:#444444; font-family:Arial; font-size:16px;" html="data:text" visible="false">
						<layer name="close_info" url="plugins/textfield.swf" align="bottomright" edge="bottomright" width="20" autoheight="true" x="10" y="90" zorder="13" enabled="true" background="true" backgroundcolor="0x000000" backgroundalpha="0.9" border="true" roundedge="10" css="text-align:center; color:#888888; font-family:Arial; font-size:10px;" html="[b]X[/b]" onclick="set(layer[info_data].visible,false);" />
					</layer>
				</layer>	
				<layer name="info_btn" url="plugins/textfield.swf" align="bottomleft" edge="bottomleft" width="60" autoheight="true" x="10" y="10" zorder="11" enabled="true" background="true" backgroundcolor="0x000000" backgroundalpha="0.9" border="false" roundedge="10" css="text-align:left; color:#888888; font-family:Arial; font-size:20px;" html="[b]Info...[/b]" onclick="switch(layer[info_data].visible);" />
			</layer>


			
			<data name="text">
			<b>DIMENSIONI: </b><i>20x30cm</i>
			<br/>
			<br/>
			<b>ANNO:       </b><i>2010</i>
			<br/>
			<br/>
			<b>TIPO:       </b><i>Pittura</i>
			</data>

Display More

Marco Lanciani

... also, I've noticed that "autoheight" doesn't work with images, but only with text.

Is this a bug?

EDIT:
On the other end, using the same code with a vertical image, it works!

So, where's the error?
Or, might be a bug in "textfield"?

Thanks,

Marco Lanciani

I have the same problem.

I even tried to raise the "height" value of the "layer name=textfield7181" from 720 to 920: the result is the same.

What's wrong?
Also, here's the code:

Code

<layer name="skin_btn_7181" visible="true" url="skin/zoominhotspot.png" keep="true" align="righttop" x="50" y="50" onclick="set(layer[textfield7181].visible,true);"/>
		
			<layer	name="textfield7181"
			url="%SWFPATH%/plugins/textfield.swf" keep="true" visible="false"
			align="center" x="0" y="0" width="720" height="720"
			children="false"
			html="data:html7181"
			css=""
			autoheight="false" vcenter="false"
			background="true" backgroundcolor="0xFFFFFF" backgroundalpha="0.7"
			border="false" bordercolor="0x000000" borderalpha="1.0" borderwidth="1.0"
			roundedge="20"
			shadow="10.0" shadowrange="5.0" shadowangle="45" shadowcolor="0x000000" shadowalpha="0.8"
			textshadow="1.0" textshadowrange="5.0" textshadowangle="0" textshadowcolor="0x000000" textshadowalpha="0.8"
			onautosized=""
			onclick="set(layer[textfield7181].visible,false);"
			/>
			
			<data name="html7181">
			<p align="center">
			<img src="img/IMG0001.jpg" style="float:left; padding:10px;"/></p>
			<br/>
			<p align="center">
			<font face="arial" size="14px" color="#444444">
			<b>TITOLO:</b><br/>
			<i>Titolo</i>
			<br/>
			<br/>
			<b>DIMENSIONI:</b><br/>
			<i>20x30cm</i>
			<br/>
			<br/>
			<b>ANNO:</b><br/>
			<i>2010</i>
			<br/>
			<br/>
			<b>TIPO:</b><br/>
			<i>Pittura</i><br/></font></p>
			</data>

Display More

Marco Lanciani

Stefan, do you suggest adding a background to the textfield?

Marco Lanciani

I tried all the three browsers... doesn't work.

Marco Lanciani

Hi Tuur,

do you mean using "plugin" instead of "layer"?
Do they behaves differently?

Thanks,

Marco Lanciani

Yes I tried with an image and... yes, it works, obviously.
My bet is to make it work with textfield... let's see if someone has the solution.

Thanks again for your support Stefan!

Marco Lanciani

I do tried and in HTML5 works with all the browsers!
Thanks!

I hope someone can help so to make it work also in Flash... my idea is to use fonts instead of PNG files. They should be lighter and faster to load, shouldn't them?
But this also brings another question:

- Is is possible to embed fonts, non commonly installed in computers, in the VT?

Marco Lanciani

It's there, on vtourskin.xml... check the line with:

layer name="skin_tf_info...

Marco Lanciani

Hi Stefan,

thanks for your comment.

handcursor="true" is already there. I thought about it but it doesn't seem to work.
Thanks,

Posts by Marco Lanciani

Problem on HTML5 [NEED HELP!]

Problem on HTML5 [NEED HELP!]

Problem on HTML5 [NEED HELP!]

Problem on HTML5 [NEED HELP!]

Problem on HTML5 [NEED HELP!]

Problem on HTML5 [NEED HELP!]

Problem on HTML5 [NEED HELP!]

Using Non Standard Fonts...

Set a layer dynamically as a child

Set a layer dynamically as a child

"Onclick" doesn't work [SOLVED]

Text below image with lots of <br/>´s

Text below image with lots of <br/>´s

Handcursor Again... Also On Textfield

Handcursor Again... Also On Textfield

Handcursor Again... Also On Textfield

Handcursor Again... Also On Textfield

Handcursor Again... Also On Textfield

Handcursor Again... Also On Textfield

Handcursor Again... Also On Textfield