how to....:?

Anfänger

Montag, 8. November 2010, 16:50

hi all,

I want to achieve something similar to this in the below example - specifically, when clicking on a hotspot, a still image (ie photograph) appears in screen centre, and clicking it, then closes. Not too bothered about the screen tint behind, but would be nice.........

www.360imagery.co.uk/VT/paignton_zoo/

How easy is it? I have only one image a client wants to insert into an existing KRPano aerial.

thanks

Stu

Zum Seitenanfang

Phil

Schüler

Beiträge: 97

Wohnort: Texas

2

Montag, 8. November 2010, 17:36

Hi Stu,

I think I've done what your looking to do. Click the last scene in this tour to see the pop up image.

http://www.360photopro.com/media/lbj/

Here's the code.

Quellcode

<!-- moon walk image -->
	<data name="moon-walk_html">
		<html> 
			<img src="images/moon-walk.jpg" width="1000" height="632"/>
		</html>
	</data>

	<action name="show_moon-walk_html">
		set(plugin[moon_menu8].enabled,false);
		set(plugin[moon-walk_html].alpha,0);
		set(plugin[moon-walk_html].textblur,15);
		set(plugin[moon-walk_html].blur,15);
		set(plugin[moon-walk_html].visible,true);
		set(plugin[moon-walk_html].enabled,true);
		tween(plugin[moon-walk_html].alpha,1,0.3);
		tween(plugin[moon-walk_html].textblur,0,0.3);
		tween(plugin[moon-walk_html].blur,0,0.3);
	</action>

	<action name="hide_moon-walk_html">
		set(plugin[moon-walk_html].enabled,false);
		set(plugin[moon_menu8].enabled,true);
		tween(plugin[moon-walk_html].alpha,0,0.3,null,set(plugin[moon-walk_html].visible,false));
		tween(plugin[moon-walk_html].textblur,20,0.3);
		tween(plugin[moon-walk_html].blur,20,0.3);
	</action>

	<plugin name="moon-walk_html"
 	    	url="%SWFPATH%/plugins/textfield.swf"
	    	keep="true"
 	    	visible="false" enabled="false" handcursor="true" capture="true" children="false"
 	    	zorder="0"
 	    	alpha="0.00" blendmode="normal"
 	    	smoothing="true"
 	    	origin="center" edge=""
 	    	x="0" y="0"
 	    	width="1000" height="632"
	    	scale="1"
	    	onloaded=""
	    	onover=""
	    	onhover="showtext(Click to Close);"
	    	onout=""
	    	ondown=""
	    	onup=""
	    	onclick="action(hide_moon-walk_html);"
	    	autosize="center"
	    	background="true"
	    	backgroundcolor="0x000000"
	    	blur="20"
	    	bordercolor="0"
	    	borderwidth="0"
	    	css="p{color:#FFFFFF; font-family:Arial; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
	    	glow="0"
	    	glowcolor="16777215"
	    	html="data:moon-walk_html"
	    	roundedge="0"
	    	selectable="true"
	    	shadow="1"
	    	textblur="20"
	    	textglow="0"
	    	textglowcolor="16777215"
	    	textshadow="0"
	    	/>

I can help you though email or Skype if you have any trouble getting it to work.

Phil

Zum Seitenanfang

VN2009

Profi

Beiträge: 1 336

Wohnort: Duluth MN

3

Montag, 8. November 2010, 17:39

create a plugin for the photo itself.

<plugin name="centerphoto"
url="centerphoto.jpg"
align="center"
edge="center"
alpha="0"
scale="0"
onclick="tween(plugin[centerphoto].alpha,0,1); tween(plugin[centerphoto].scale, 0,1);>
/>

create a hotspot for the camera icon

<plugin name="centerphoto"
url="camera.jpg"
align="center"
edge="center"
ath="0" atv="0"
onclick="tween(plugin[centerphoto].alpha,1,1); tween(plugin[centerphoto].scale, 1,1);>

this will fade the photo in and scale it from 0 to full dead center in the screen. clicking the photo will close it. this does not provide the text that says click photo to close though.

Zum Seitenanfang

stalwart

Anfänger

Beiträge: 13

4

Montag, 15. November 2010, 12:13

Zitat von »Phil«

Hi Stu,

I think I've done what your looking to do. Click the last scene in this tour to see the pop up image.

http://www.360photopro.com/media/lbj/

Here's the code.

Quellcode

<!-- moon walk image -->
<data name="moon-walk_html">
<html> 
<img src="images/moon-walk.jpg" width="1000" height="632"/>
</html>
</data>

<action name="show_moon-walk_html">
set(plugin[moon_menu8].enabled,false);
set(plugin[moon-walk_html].alpha,0);
set(plugin[moon-walk_html].textblur,15);
set(plugin[moon-walk_html].blur,15);
set(plugin[moon-walk_html].visible,true);
set(plugin[moon-walk_html].enabled,true);
tween(plugin[moon-walk_html].alpha,1,0.3);
tween(plugin[moon-walk_html].textblur,0,0.3);
tween(plugin[moon-walk_html].blur,0,0.3);
</action>

<action name="hide_moon-walk_html">
set(plugin[moon-walk_html].enabled,false);
set(plugin[moon_menu8].enabled,true);
tween(plugin[moon-walk_html].alpha,0,0.3,null,set(plugin[moon-walk_html].visible,false));
tween(plugin[moon-walk_html].textblur,20,0.3);
tween(plugin[moon-walk_html].blur,20,0.3);
</action>

<plugin name="moon-walk_html"
     url="%SWFPATH%/plugins/textfield.swf"
    keep="true"
     visible="false" enabled="false" handcursor="true" capture="true" children="false"
     zorder="0"
     alpha="0.00" blendmode="normal"
     smoothing="true"
     origin="center" edge=""
     x="0" y="0"
     width="1000" height="632"
    scale="1"
    onloaded=""
    onover=""
    onhover="showtext(Click to Close);"
    onout=""
    ondown=""
    onup=""
    onclick="action(hide_moon-walk_html);"
    autosize="center"
    background="true"
    backgroundcolor="0x000000"
    blur="20"
    bordercolor="0"
    borderwidth="0"
    css="p{color:#FFFFFF; font-family:Arial; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
    glow="0"
    glowcolor="16777215"
    html="data:moon-walk_html"
    roundedge="0"
    selectable="true"
    shadow="1"
    textblur="20"
    textglow="0"
    textglowcolor="16777215"
    textshadow="0"
    />

I can help you though email or Skype if you have any trouble getting it to work.

Phil

hi Phil, et al,

I've got this far with Phil's code:

www.360imagery.co.uk/VT/aerial/nottingham_high_school/v.2/

2 questions:

1. The border is missing on the right-hand edge of the photo when it pops up - as though the box is the wrong dimensions (image itself is 940x445 pixels) - how do I amend this? This is the original:

2. How do I convert the camera button, as per Phil's code example, into a floating hotspot within the panorama itself?

Here's the Hotspot code:


<data name="valley_road_html">
<html>
<img src="images/valley_road.jpg" width="940" height="455"/>
</html>
</data>

<action name="show_valley_road_html">
set(plugin[valley_road_hotspot].enabled,false);
set(plugin[valley_road_html].alpha,0);
set(plugin[valley_road_html].textblur,15);
set(plugin[valley_road_html].blur,15);
set(plugin[valley_road_html].visible,true);
set(plugin[valley_road_html].enabled,true);
tween(plugin[valley_road_html].alpha,1,0.3);
tween(plugin[valley_road_html].textblur,0,0.3);
tween(plugin[valley_road_html].blur,0,0.3);
</action>

<action name="hide_valley_road_html">
set(plugin[valley_road_html].enabled,false);
set(plugin[valley_road_hotspot].enabled,true);
tween(plugin[valley_road_html].alpha,0,0.3,null,set(plugin[valley_road_html].visible,false));
tween(plugin[valley_road_html].textblur,20,0.3);
tween(plugin[valley_road_html].blur,20,0.3);
</action>

<plugin name="valley_road_html"
url="%SWFPATH%/plugins/textfield.swf"
keep="true"
visible="false" enabled="false" handcursor="true" capture="true" children="false"
zorder="0"
alpha="0.00" blendmode="normal"
smoothing="true"
origin="center" edge=""
x="0" y="0"
width="940" height="445"
scale="1"
onloaded=""
onover=""
onhover="showtext(click to close,STYLE3);"
onout=""
ondown=""
onup=""
onclick="action(hide_valley_road_html);"
autosize="center"
background="false"
backgroundcolor="0x000000"
blur="20"
bordercolor="0"
borderwidth="0"
css="p{color:#FFFFFF; font-family:Arial; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
glow="0"
glowcolor="16777215"
html="data:valley_road_html"
roundedge="0"
selectable="true"
shadow="1"
textblur="20"
textglow="0"
textglowcolor="16777215"
textshadow="0"
/>




<plugin name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align="rightbottom"
zorder="1"
x="+50" y="80"
ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="action(show_valley_road_html);"
/>


thanks

Stu

Zum Seitenanfang

VN2009

Profi

Beiträge: 1 336

Wohnort: Duluth MN

5

Montag, 15. November 2010, 15:59

why use a textfield to hold a photo? there is no need for that. use the code i provided earlier in this thread and your photo will not be cut off. To may things to pay attention to using a textfield and alot of extra unneeded coding.

to make the camera inside the pano change it from a plugin to a hotspot. set a value for ath="0" and atv="0" add distorted="true" if you want the camera to bendwith the view. give me 5 min ill provide some code.

use this for the center photo.

<plugin name="centerphoto"
url="images/moon-walk.jpg" width="1000" height="632"
align="center"
edge="center"
alpha="0"
scale="0"
onclick="tween(plugin[centerphoto].alpha,0,1); tween(plugin[centerphoto].scale, 0,1);">
/>

use this for your camera icon. adjust ath and atv to get it where you want it.

<hotspot name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align=""
zorder="1"
atv="0" ath="0" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="tween(plugin[centerphoto].alpha,1,1); tween(plugin[centerphoto].scale, 1,1);">
/>

thats it that is all you need. it should work

if you want to make it work for other photos you can use this. the action will set the url and the width and height so you can use anysize photo and multiple camera icons to pop them. use the same plugin for the center image that does not change.

<action name="showcenterpic">

set(plugin[centerphoto].url, %1);
set(plugin[centerphoto].width, %2);
set(plugin[centerphoto].height, %3);
tween(plugin[centerphoto].alpha,1,1);
tween(plugin[centerphoto].scale, 1,1);

</action>

<hotspot name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align=""
zorder="1"
atv="0" ath="0" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="showcenterpic(images/moon-walk.jpg,1000,632)"
/>

<hotspot name="second photo"
parent=""
url="images/secondphoto.png"
align=""
zorder="1"
atv="0" ath="25" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Second Photo,STYLE3);"
onclick="showcenterpic(images/secondphoto.jpg,500,300)"
/>

you dont need a close action because when you click the photo it scales down and can't be seen.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »VN2009« (15. November 2010, 16:19)

Zum Seitenanfang

stalwart

Anfänger

Beiträge: 13

6

Montag, 15. November 2010, 22:37

Zitat von »VN2009«

why use a textfield to hold a photo? there is no need for that. use the code i provided earlier in this thread and your photo will not be cut off. To may things to pay attention to using a textfield and alot of extra unneeded coding.

to make the camera inside the pano change it from a plugin to a hotspot. set a value for ath="0" and atv="0" add distorted="true" if you want the camera to bendwith the view. give me 5 min ill provide some code.

use this for the center photo.

<plugin name="centerphoto"
url="images/moon-walk.jpg" width="1000" height="632"
align="center"
edge="center"
alpha="0"
scale="0"
onclick="tween(plugin[centerphoto].alpha,0,1); tween(plugin[centerphoto].scale, 0,1);">
/>

use this for your camera icon. adjust ath and atv to get it where you want it.

<hotspot name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align=""
zorder="1"
atv="0" ath="0" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="tween(plugin[centerphoto].alpha,1,1); tween(plugin[centerphoto].scale, 1,1);">
/>

thats it that is all you need. it should work

struggling with this version - can't get it to work. Here's the XML file:
www.360imagery.co.uk/temp/defaultskin.xml
any help would be great - am hoping to get this across to the Client tomorrow (Tuesday)...
thanks
Stu

Zum Seitenanfang

VN2009

Profi

Beiträge: 1 336

Wohnort: Duluth MN

7

Montag, 15. November 2010, 22:44

your xml has errors and can't be read from a brouser. or paste your full xml here. i tested the code it works.

Zum Seitenanfang

mindlessboss

Profi

Beiträge: 1 082

Wohnort: Russia, Kaliningrad

8

Dienstag, 16. November 2010, 02:41

Look at this tour http://webpokaz.ru/724003113/html/ click scene three, you can see camera hotspot on the window. Click on camera icon and image apear with frame border.
If you would like this, i can show the xml...

Regards!

VRAP - desktop VR content player based on krpano.
Common tasks in one place in one click! Discussion thread
DOWNLOAD for MAC
DOWNLOAD for WIN

Zum Seitenanfang

stalwart

Anfänger

Beiträge: 13

9

Dienstag, 16. November 2010, 09:04

Zitat von »VN2009«

your xml has errors and can't be read from a brouser. or paste your full xml here. i tested the code it works.

here's the code - where are the errors??:

Quellcode

<!-- START hotspot image pop up -->
<plugin name="valley_road"
url="images/valley_road.jpg" width="940" height="445"
align="center"
edge="center"
alpha="0"
scale="0"
onclick="tween(plugin[valley_road].alpha,0,1); tween(plugin[valley_road].scale, 0,1);>"
/>
<!-- END hotspot image pop up -->

<!-- START hotspot image pop up BUTTON -->
<plugin name="valley_road_button"
parent=""
url="images/valley_road_HS.png"
align=""
zorder="1"
atv="0" ath="0" ox="" oy=""
width="48" height="49"
scale="1.00"
onover=""
onout=""
onhover="showtext(Valley Road Playing Fields photograph,STYLE3);"
onclick="tween(plugin[valley_road].alpha,1,1); tween(plugin[valley_road].scale, 1,1);>"
/>
<!-- END hotspot image pop up BUTTON -->

thanks

Stu

Zum Seitenanfang

VN2009

Profi

Beiträge: 1 336

Wohnort: Duluth MN

10

Dienstag, 16. November 2010, 15:39

click that same link you posted to your xml earlier. you will see the error. something to do with whitespace.

that code should work. does it? if you want the camera icon to be inside the pano change this line from
<plugin name="valley_road_button" - to
<hotspot name="valley_road_button"
once that is done you can position the hotspot via the ath and atv values. ath and atv had no effect on plugins only hotspots. you would use X and Y coordinates for plugins. otherwise that code should pop your image already just as a plugin not a hotspot.

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

11

Dienstag, 16. November 2010, 15:46

Hi,

Zitat von »VN2009«

your xml has errors and can't be read from a brouser.

Zitat von »stalwart«

here's the code - where are the errors??:

As VN2009 says, your xml www.360imagery.co.uk/temp/defaultskin.xml has an error.... to be able to see it, just open it directly on your browser (as Klaus explains here)...
The error is in line 131 colone 59:

	Quellcode
131	onhover="showtext(Senior School Dining Hall & Sixth Form Centre,STYLE3);"

It is the & character that's makes the error !!! Change it by & (as Klaus explains here)

Also, your xml is not complete (the end part is missing):

Quellcode

<!-- Senior School Dining Hall & Sixth Form Centre -->
	<hotspot name="hs0"
	     	keep="false"
	     	visible="true" enabled="true" handcursor="true" capture="true" children="true"
 	     	zorder="0"
	     	fillcolor 	="0xbedbeb" fillalpha 	="0.30" borderwidth 	="2.0" bordercolor 	="0xbedbeb" borderalpha 	="1.00"
	     	fillcolorhover="0x000000" fillalphahover="0.00" borderwidthhover="0.0" bordercolorhover="0x000000" borderalphahover="0.00"
	     	fadeintime="0.150" fadeouttime="0.300" fadeincurve="1.100" fadeoutcurve="0.700"
	     	onover=""
	     	onhover="showtext(Senior School Dining Hall & Sixth Form Centre,STYLE3);"
	     	onout=""
	     	ondown=""
	     	onup=""
	     	onclick="looktohotspot(hs0,auto,smooth(150,25,100));"
	     	details="8"
	     	flying="0"
	     	inverserotation="false"
	     	usecontentsize="false"
		>
		<point ath="230.9364" atv=" 34.2627" />
		<point ath="245.723" atv=" 35.8063" />
		<point ath="242.7941" atv=" 48.0713" />
		<point ath="227.9651" atv=" 45.9270" />
		<point ath="227.9503" atv=" 45.2489" />
		<point ath="227.085" atv=" 45.0455" />
		<point ath= ........ ?????????????

Hope this help....

SAlut.

Zum Seitenanfang

stalwart

Anfänger

Beiträge: 13

12

Dienstag, 16. November 2010, 16:09

Zitat von »VN2009«

click that same link you posted to your xml earlier. you will see the error. something to do with whitespace.

that code should work. does it? if you want the camera icon to be inside the pano change this line from
<plugin name="valley_road_button" - to
<hotspot name="valley_road_button"
once that is done you can position the hotspot via the ath and atv values. ath and atv had no effect on plugins only hotspots. you would use X and Y coordinates for plugins. otherwise that code should pop your image already just as a plugin not a hotspot.

Thanks everyone - think I finally got it sorted:

www.360imagery.co.uk/VT/aerial/nottingham_high_school/v.2

cheers!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! *smile*

Stu

Zum Seitenanfang