You are not logged in.

360 cities virtual tour..how to do something like it.

milotimbol

Intermediate

  • "milotimbol" started this thread

Posts: 242

Location: Philippines

Occupation: Software Developer

  • Send private message

1

Friday, June 11th 2010, 2:34pm

360 cities virtual tour..how to do something like it.

hello everybody!

I've seen this before and quite it find neat that there is a map overlay in google maps and there is a sliding menu.

http://www.centronitra.sk/svk/uvod/virtualna_prehliadka/

I'm about to create a mall virtual tour and I would like to implement something like this. I'm quite familiar with google maps and I understand most parts like
-how to put the overlay
-how to open krpano in a thickbox or similar box
-how to put markers

what I dont know how to do is to make that sliding box. The closest I got is this

http://www.jordivila.net/jquery-google-maps.html

I'm still going to study it but its a lead. Anyone here implemented something like this before? any tips, tricks, hints will be appreciated.

Thanks,
Milo
Krpano YouTube Tutorials
exsight360.com

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

2

Friday, June 11th 2010, 9:52pm

Milo it looks like the slide outs are html that sit on top of the map not part of it. You could probably recreate taht effect with just krpano and set plugins on top of your gmap.

milotimbol

Intermediate

  • "milotimbol" started this thread

Posts: 242

Location: Philippines

Occupation: Software Developer

  • Send private message

3

Tuesday, June 15th 2010, 9:04am

Yup it seems so.

For those interested in something like this.. here's some links

http://code.google.com/p/googleio2009-map/wiki/HowTo

And this one you have to see.

http://www.laudontech.com/officeplans/

Combine it with markers and thick box and you have a virtual office.
Krpano YouTube Tutorials
exsight360.com

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

4

Tuesday, June 15th 2010, 11:51am

Hi Milo *smile* ,

Quoted from "Milo"

what I dont know how to do is to make that sliding box.
I am playing about this, trying to get a way to do only with Krpano stuffs...
Here is the code that I got at this moment:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<krpano version="1.0.8" onstart="showlog(); copy(area.x,plugin[map].width); set(area.width,70%);"> 

	<view fov="120" fovtype="DFOV" />

	<preview type="grid(cube, 20, 20, 200, 0xCCCCCC, 0xFFFFFF, 0x000000)" details="12" />

	<textstyle name="FOVTEXT" origin="top" edge="top" yoffset="35" textalign="left" background="false" border="false" fontsize="20" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);" showtime="4.0" fadetime="1.0" />
	
	<events onviewchange="showfovtext();"	/>	
	
	<plugin name="map"
	    	url="%SWFPATH%/plugins/googlemaps.swf"
	    	align="left" 
			width="30%"
	    	height="100%"
	    	parent="STAGE"
	    	key="ABQIAAAA2c--4Vth66ePXVcVzlhLyBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQser8zYS3pHFBZtNof1k5XKvSUmw"
			>
	</plugin>
	
	<plugin name="tab_left" url="%SWFPATH%/plugins/textfield.swf"
			width="48" height="38" align="left"
			selectable="false" children="false"
			css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
			backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
	    	html="[p]Drag[br]me[/p]"
			ondown="set(is_tab_ondown,true);
					copy(tab_mouse_offset,mouse.x); 
					sub(current_mouse_stagex,	mouse.stagex,	mouse.x);
					copy(current_area_pixelwidth,	area.pixelwidth);
					do_tab_left_ondown();"
			onup="	set(is_tab_ondown,false);
					do_percent()"
	    	/>
	
	<action name="do_tab_left_ondown">
	if(is_tab_ondown ,
		trace(mouse.stagex,' - ',mouse.x);
		trace('tab_mouse_offset = ',tab_mouse_offset);
		sub(temp1,	mouse.stagex,	tab_mouse_offset);	trace('temp1 = ',temp1);
		if(temp1 LE 0 ,
				set(area.x	,	0%);
				sub(temp2,	0,	current_mouse_stagex);	trace('temp2 = ',temp2);
				sub(temp3,	current_area_pixelwidth,	temp2);	trace('temp3 = ',temp3);
				copy(area.width	,	temp3);
				set(plugin[map].width	,	1);
				,
				copy(area.x	,	temp1);
				sub(temp2,	temp1,	current_mouse_stagex);	trace('temp2 = ',temp2);
				sub(temp3,	current_area_pixelwidth,	temp2);	trace('temp3 = ',temp3);
				copy(area.width	,	temp3);
				sub(temp4,	stagewidth,	temp3);	trace('temp4 = ',temp4);
				if(temp4 LE 0,set(temp4,1););
				copy(plugin[map].width	,	temp4);
				);
		delayedcall(0.01,do_tab_left_ondown(););
		);
	</action>
	
	<action name="do_percent">		
		div(percent,	stagewidth,	100);
			div(temp,	area.pixelx,	percent);
			txtadd(temp,	get(temp),	%);
			copy(area.x,	temp);
			
			div(temp,	area.pixelwidth,	percent);
			txtadd(temp,	get(temp),	%);
			copy(area.width,	temp);
			
			div(temp,	plugin[map].width,	percent);
			txtadd(temp,	get(temp),	%);
			copy(plugin[map].width,	temp);
	</action>
	
	<action name="showfovtext">
		copy(fov,view.fov);
		roundval(fov,2);
		txtadd(msg,get(view.fovtype),'=',get(fov),'°');
		txtadd(msg,get(msg),[br],'stage = ',get(stagewidth),' x ',get(stageheight),[br]);
		txtadd(msg,get(msg),'area.width_height = ',get(area.width),' x ',get(area.height),[br]);
		txtadd(msg,get(msg),'area.pixelwidth_height = ',get(area.pixelwidth),' x ',get(area.pixelheight),[br]);
		txtadd(msg,get(msg),'area.x_y = ',get(area.x),' x ',get(area.y),[br]);
		txtadd(msg,get(msg),'area.pixelx_y = ',get(area.pixelx),' x ',get(area.pixely),[br]);
		txtadd(msg,get(msg),'plugin[map].width = ',get(plugin[map].width),[br]);
		showtext(get(msg),FOVTEXT);
	</action>
	

</krpano>

This demonstrate that it can be done with Krpano only...
Only the "drag/slide" cursor seems to need be done outside of Krpano.... Surely in Flash... Perhaps this way: Creating A Custom Cursor Using AS3
Perhaps KLAUS could implement a new feature to give the possibility to customise the arrow cursor when onover a plugin *love* ....

Hope this can help and I am waiting to see your resulting code ;-) ...

SAlut.

This post has been edited 1 times, last edit by "michel" (Jun 15th 2010, 1:36pm)

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

5

Tuesday, June 15th 2010, 10:22pm

Hi Milo,

There is a big mistake in the code above *wacko* ... If you try to drag and up quickly you will notice that the area.x does not match with the plugin.with...
After some more scratching the head, I realized that the problem was the do_percent action was called in the wrong place...
So, I changed the code like this:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<krpano version="1.0.8" onstart="showlog(); copy(area.x,plugin[map].width); set(area.width,70%);"> 

	<view fov="120" fovtype="DFOV" />

	<preview type="grid(cube, 20, 20, 200, 0xCCCCCC, 0xFFFFFF, 0x000000)" details="12" />

	<textstyle name="FOVTEXT" origin="top" edge="top" yoffset="35" textalign="left" background="false" border="false" fontsize="20" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);" showtime="4.0" fadetime="1.0" />
	
	<events onviewchange="showfovtext();"	/>	
	
	<plugin name="map"
			url="%SWFPATH%/plugins/googlemaps.swf"
			align="left" 
			width="30%"
			height="100%"
			parent="STAGE"
			key="ABQIAAAA2c--4Vth66ePXVcVzlhLyBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQser8zYS3pHFBZtNof1k5XKvSUmw"
			>
	</plugin>
	
	<plugin name="tab_left" url="%SWFPATH%/plugins/textfield.swf"
			width="48" height="38" align="left"
			selectable="false" children="false"
			visible="true" enabled="true" handcursor="false" capture="true" children="true"
			css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
			backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
			html="[p]Drag[br]me[/p]"
			ondown="set(is_tab_ondown,true);
					copy(tab_mouse_offset,mouse.x); 
					sub(current_mouse_stagex,	mouse.stagex,	mouse.x);
					copy(current_area_pixelwidth,	area.pixelwidth);
					do_tab_left_ondown();"
			onup="	set(is_tab_ondown,false);"
			/>
	
	<action name="do_tab_left_ondown">
	if(is_tab_ondown ,
		trace(mouse.stagex,' - ',mouse.x);
		trace('tab_mouse_offset = ',tab_mouse_offset);
		trace('current_mouse_stagex = ',current_mouse_stagex);
		sub(temp1,	mouse.stagex,	tab_mouse_offset);	trace('temp1 = ',temp1);
		if(temp1 LE 0 ,
				set(area.x	,	0%);
				sub(temp2,	0,	current_mouse_stagex);	trace('temp2 = ',temp2);
				sub(temp3,	current_area_pixelwidth,	temp2);	trace('temp3 = ',temp3);
				copy(area.width	,	temp3);
				set(plugin[map].width	,	1);
				,
				copy(area.x	,	temp1);
				sub(temp2,	temp1,	current_mouse_stagex);	trace('temp2 = ',temp2);
				sub(temp3,	current_area_pixelwidth,	temp2);	trace('temp3 = ',temp3);
				copy(area.width	,	temp3);
				sub(temp4,	stagewidth,	temp3);	trace('temp4 = ',temp4);
				if(temp4 LE 0,	set(temp4,1););
				copy(plugin[map].width	,	temp4);
				);
		delayedcall(0.01,do_tab_left_ondown(););
		,
		do_percent();
		);
	</action>
	
	<action name="do_percent">		
		div(percent,	stagewidth,	100);
			div(temp,	area.pixelx,	percent);
			txtadd(temp,	get(temp),	%);
			copy(area.x,	temp);
			
			div(temp,	area.pixelwidth,	percent);
			txtadd(temp,	get(temp),	%);
			copy(area.width,	temp);
			
			div(temp,	plugin[map].width,	percent);
			txtadd(temp,	get(temp),	%);
			copy(plugin[map].width,	temp);
	</action>
	
	<action name="showfovtext">
		copy(fov,view.fov);
		roundval(fov,2);
		txtadd(msg,get(view.fovtype),'=',get(fov),'°');
		txtadd(msg,get(msg),[br],'stage = ',get(stagewidth),' x ',get(stageheight),[br]);
		txtadd(msg,get(msg),'area.width_height = ',get(area.width),' x ',get(area.height),[br]);
		txtadd(msg,get(msg),'area.pixelwidth_height = ',get(area.pixelwidth),' x ',get(area.pixelheight),[br]);
		txtadd(msg,get(msg),'area.x_y = ',get(area.x),' x ',get(area.y),[br]);
		txtadd(msg,get(msg),'area.pixelx_y = ',get(area.pixelx),' x ',get(area.pixely),[br]);
		txtadd(msg,get(msg),'plugin[map].width = ',get(plugin[map].width),[br]);
		showtext(get(msg),FOVTEXT);
	</action>
	
</krpano>

Now, it seems to work correctly... Let me know *smile* ...

SAlut.

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

6

Tuesday, June 15th 2010, 11:27pm

michel you and pinsane amaze me with the code you can output. I have a rather large project coming up and may need to subcontract some of your expertise if you are available when the time comes.

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

7

Wednesday, June 16th 2010, 10:27am

Hi VN2009,

At least as far as my concerns, I am not the expert you think I am .... Only an amateur ;-) ..
Pinsane's another thing *thumbsup* ...
Anyway, thank you for kind words *thumbup* ...

Hi Milo,
The code above has many problems *sad* ... Mainly due to how pixel values are rounded from the percent values .
For example, let say that the stagewidth is 1024, if the map width is 30% and the area width is 70%, the pixel value for the map width would be 307 and for the stagewidth 716...
30% + 70% = 100% so 1024 but
307 + 716 = 1023 !!! so 1 lost pixel !!!
The above goes incremented when resizing and changing the area and map width.... Just tries many times resizing the browser and dragging the tab to see it... the pixels lost will be noticeable in the right with a black hole that goes incrementing...

Another problem is that the map width can reach a value of 0 pixels when resizing the window in a short width value... try it... the map width goes suddenly inside the area...

Another problem is that, when dragging near the left side, the drag tab seems to not become draggable... But it is not a true problem.... (after a lot of scratching head *g* ) It is due to the "krpano.com" logo that catchs the mouse and makes the drag tab becomes unreachable...

So, the code needs some improvement *g* *g* *tongue* !!!! Sure, there is a way to do .... If I can reach a working code I will post it...

SAlut.

milotimbol

Intermediate

  • "milotimbol" started this thread

Posts: 242

Location: Philippines

Occupation: Software Developer

  • Send private message

8

Wednesday, June 16th 2010, 10:48am

I haven't given it a try yet. but based on vn2009s reaction seems like good code. Thanks for sharing i'll try it out later.
Krpano YouTube Tutorials
exsight360.com

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

9

Wednesday, June 16th 2010, 2:52pm

Hi Milo,

Quoted

but based on vn2009s reaction seems like good code...
I must admit that I misunderstood the response of VN2009 *huh* ...
edited: *g* *g* *g* now I understand what you mean about vn2009 reaction *smile* ... At first I was thinking it was about his first answer *rolleyes* ... Many times it costs me a lot to get the meaning of a phrase in English ;-) ... Sorry VN2009 *squint* ...

One note: I am pretty sure that the example you gave from 360cities.net it is all made fully with Krpano.... Just try to right-click inside the slider region and you will notice that it is inside Krpano...

About my not working code above... I think I have reached a code that works pretty well...

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
76
77
78
79
80
81
82
83

<krpano version="1.0.8" onstart="showlog(); copy(area.x,plugin[map].width); "> 

	<view fov="120" fovtype="DFOV" />

	<preview type="grid(cube, 20, 20, 200, 0xCCCCCC, 0xFFFFFF, 0x000000)" details="12" />

	<textstyle name="FOVTEXT" origin="top" edge="top" yoffset="35" textalign="left" background="false" border="false" fontsize="20" textcolor="0xFFFFFF" bold="false" effect="glow(0xFFFFFF,0.7,4,2);glow(0x000000,1,4,2);dropshadow(3,45,0x000000,2,0.6);" showtime="4.0" fadetime="1.0" />
	
	<events onresize="maths_onresize();" onviewchange="showfovtext();"	/>	
	
	<plugin name="map"
			url="%SWFPATH%/plugins/googlemaps.swf"
			align="left" 
			width="30%"
			height="100%"
			parent="STAGE"
			key="ABQIAAAA2c--4Vth66ePXVcVzlhLyBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQser8zYS3pHFBZtNof1k5XKvSUmw"
			>
	</plugin>
	
	<plugin name="tab_left" url="%SWFPATH%/plugins/textfield.swf"
			width="48" height="38" align="left" y="-35"
			selectable="false" children="false"
			visible="true" enabled="true" handcursor="false" capture="true" children="true"
			css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }" 
			backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" 
			html="[p]Drag[br]me[/p]"
			ondown="set(is_tab_ondown,true);
					copy(tab_mouse_offset,mouse.x); 
					do_tab_left_ondown();"
			onup="	set(is_tab_ondown,false);"
			/>
	
	<action name="do_tab_left_ondown">
	if(is_tab_ondown ,
		trace(mouse.stagex,' - ',mouse.x);
		trace('tab_mouse_offset = ',tab_mouse_offset);
		sub(temp1,	mouse.stagex,	tab_mouse_offset);	trace('temp1 = ',temp1);
		if(temp1 LE 0 ,
				set(area.x	,	0);
				copy(area.width	,	stagewidth);
				set(plugin[map].width	,	1);  <!-- to avoid widht=0 ( bad results if so) -->
				,
				copy(area.x	,	temp1);
				copy(plugin[map].width	,	temp1);
				sub(area.width	,	stagewidth,	temp1);
				);
		delayedcall(0.01,do_tab_left_ondown(););
		);
	</action>
	
	<action name="maths_onresize">	
	ifnot(is_tab_ondown ,
		trace('--- onresize ---');
		add(temp1,	area.pixelx, 	area.pixelwidth); trace('temp1 = ',temp1);
		div(temp1,	stagewidth,	temp1); trace('temp1 = ',temp1);
		mul(temp2,	area.pixelx,	temp1); trace('temp2 = ',temp2);
		roundval(temp2); trace('temp2 = ',temp2);
		if(temp2 GT 0,	
				copy(plugin[map].width,	temp2);
				,
				set(plugin[map].width,	1);  <!-- to avoid widht=0 ( bad results if so) -->
				trace('plugin[map].width = ',plugin[map].width);
				);
		copy(area.x,	temp2);	 trace('area.x = ',area.x);
		sub(area.width,	stagewidth,	area.x); trace('area.width = ',area.width);
		);
	</action>
	
	<action name="showfovtext">
		copy(fov,view.fov);
		roundval(fov,2);
		txtadd(msg,get(view.fovtype),'=',get(fov),'°');
		txtadd(msg,get(msg),[br],'stage = ',get(stagewidth),' x ',get(stageheight),[br]);
		txtadd(msg,get(msg),'area.width_height = ',get(area.width),' x ',get(area.height),[br]);
		txtadd(msg,get(msg),'area.pixelwidth_height = ',get(area.pixelwidth),' x ',get(area.pixelheight),[br]);
		txtadd(msg,get(msg),'area.x_y = ',get(area.x),' x ',get(area.y),[br]);
		txtadd(msg,get(msg),'area.pixelx_y = ',get(area.pixelx),' x ',get(area.pixely),[br]);
		txtadd(msg,get(msg),'plugin[map].width_height = ',get(plugin[map].width),' x ',get(plugin[map].height));
		showtext(get(msg),FOVTEXT);
	</action>

</krpano>


As I said before, only the "drag/slide" cursor seems to need be done outside of Krpano.... Surely in Flash... Perhaps this way: Creating A Custom Cursor Using AS3
Perhaps KLAUS could implement a new feature to give the possibility to customise the arrow cursor when onover a plugin *love* ....

At least, the dragging tab function seems to work... Let me know *smile* ...

SAlut.

This post has been edited 1 times, last edit by "michel" (Jun 17th 2010, 8:06pm)

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

10

Friday, June 18th 2010, 12:55am

Hi,

First, I have near zero idea about AS3 *thumbdown* ...

About the "drag/slide" cursor, I have tried this code:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

My_DragSlide_mc.visible=false;
BG_mc.addEventListener(MouseEvent.MOUSE_OVER, func_OVER);

function func_OVER  (e:MouseEvent):void{
	Mouse.hide();
	My_DragSlide_mc.visible=true;
	My_DragSlide_mc.startDrag(true);
	}

BG_mc.addEventListener(MouseEvent.MOUSE_OUT, func_OUT);

	function func_OUT  (e:MouseEvent):void{
	Mouse.show();
	My_DragSlide_mc.stopDrag();
	My_DragSlide_mc.visible=false;
	}

It near works but with problems... My custom "drag/slide" cursor appears but flashing with the default arrow *sad* ... I am out of ideas ... Some one can help here? Zephyr *thumbsup* ?

SAlut.

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

11

Friday, June 18th 2010, 2:24pm

I don't know what you exaclty want, but I made a slider plugin on which you can stick your own action to it.

I can't attach the fla in the zip (would make it too big to attach :S) But basicly it's this script + you add the slider component to the library

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<action="doSomething>
trace(%1);
</action>

<plugin name="slider" 
url="../plugins/slider.swf" 
keep="true" 
align="center"
direction="horizontal"
sliderwidth="100"
sliderheight="20"
maximum="100"
interval="10"
startvalue="0"
actiontocall="doSomething"
/>


This creates a horizontal/vertical slider that goes from 0 - 100 in steps of 10. You then pass those values to the action doSomething. You can use those values for whatever function you wish (alter hfov, details or whatever you put in the action, you probally need some code to zoom in on googlemaps. I don't know the zoomfunction name of googlemaps).

the as code:

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

import fl.controls.Slider; 
import fl.events.SliderEvent; 
import fl.controls.Label; 
import krpano_as3_interface;

var krpano : krpano_as3_interface = null;
var pluginpath : String = null;
var pluginobj  : Object = null;
var ActionToCall:String;

//slider in library
var aSlider:Slider = new Slider(); 
aSlider.liveDragging = true;
aSlider.move(0, 0); 

//add handcursor on the handler
var Bar_Target:Object = aSlider.getChildAt(0);
var Scrubber_Target:Object = aSlider.getChildAt(1);
Bar_Target.useHandCursor=true;
Scrubber_Target.useHandCursor=true;

if (stage)
{
	stage.scaleMode = StageScaleMode.NO_SCALE;// no automatic scaling
	stage.align     = StageAlign.TOP_LEFT;// align on top left corne	
	
	//demo mode in flash
	addChild(aSlider); 
	aSlider.addEventListener(SliderEvent.CHANGE, changeHandler); 
	aSlider.width = 200; 
	aSlider.snapInterval = 10; 
	aSlider.tickInterval = 10; 
	aSlider.maximum = 100; 
	aSlider.value = 100; 
}
else
{
	this.addEventListener(Event.ADDED_TO_STAGE, startplugin);
	//this.addEventListener(Event.REMOVED_FROM_STAGE, stopplugin);
}
function startplugin(event:Event)
{
	krpano = krpano_as3_interface.getInstance();
	krpano.addPluginEventListener(this, krpano_as3_interface.PLUGINEVENT_REGISTER, registerEvent);

	addChild(aSlider); 
	aSlider.addEventListener(SliderEvent.CHANGE, changeHandler); 
}
function registerEvent(evt:DataEvent):void
{
	// register event - "data" is the name of the plugin
	pluginpath = evt.data;	
	pluginobj  = krpano.get(pluginpath);
	
	var param:* = null

	param = krpano.get(pluginpath + ".direction");
	if (param != undefined && param != "")
	aSlider.direction = String( param ).toLowerCase();
	
	param = krpano.get(pluginpath + ".sliderheight");
	if (param != undefined && param != "")
	{aSlider.height = parseInt(param);}
	else {aSlider.height = 10;}
	
	param = krpano.get(pluginpath + ".sliderwidth");
	if (param != undefined && param != "")
	{aSlider.width = int(param);}
	else {aSlider.width = 200;}
	
	param = krpano.get(pluginpath + ".interval");
	if (param != undefined && param != "")
	{aSlider.snapInterval =  aSlider.tickInterval = parseInt(param);}
	else{aSlider.snapInterval =  aSlider.tickInterval = 10}
	
	param = krpano.get(pluginpath + ".maximum");
	if (param != undefined && param != "")
	{aSlider.maximum = int(param);}
	else {aSlider.maximum = 100;}
	
	param = krpano.get(pluginpath + ".startvalue");
	if (param != undefined && param != "")
	{aSlider.value = int(param);}
	else {aSlider.value = 0;}
	
	param = krpano.get(pluginpath + ".actiontocall");
	if (param != undefined && param != "")
	{ActionToCall = String(param);}
}

function changeHandler(event:SliderEvent):void { 
	krpano.call("ActionToCall(" + event.value + ")");  
	krpano.trace(0, "ActionToCall(" + event.value + ")");
}
Zephyr has attached the following file:

Tuur

Sage

Posts: 3,839

Location: Netherlands

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

  • Send private message

12

Friday, June 18th 2010, 3:06pm

Hi,

i was wondering if we are talking about the thing at top (first post by Milo first link) the blue things? or about the zoom slider...

or something else..

Zephyr? could we use that 1-100 thing to built a personal loader? like a beer glass that fills up slowly ;-)

Cheers

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

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

13

Friday, June 18th 2010, 3:36pm

Quoted from "Tuur"

Hi,

i was wondering if we are talking about the thing at top (first post by Milo first link) the blue things? or about the zoom slider...

or something else..

Zephyr? could we use that 1-100 thing to built a personal loader? like a beer glass that fills up slowly ;-)

Cheers

Tuur *thumbsup*


No sorry,

the sliders is ment to be used as a way to input stuff to krpano. Like slide for better details or quality or slide to zoom, or slide to zoom the googlemaps etc.

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

14

Friday, June 18th 2010, 3:40pm

Hi Zephyr *smile* ,

Thank you very much for your code above *thumbup* ... I have to admit that I have some dificulties to understand *g* ... I particaly like the thing about how to pass variables values from the xml to the swf plugin... Have to study that *rolleyes* ...

Quoted

I don't know what you exaclty want, but I made a slider plugin on which you can stick your own action to it.
At this moment I can not test your code ... But I have the impression that this aSlider:Slider = new Slider(); thing is not really what I am (and Milo) looking for... It is more a try to substitute the default flash arrow when the mouse is onover a plugin by a customized one (as a slider/drag arrow)... Have a look at the first post from Milo ... and look at the 360cities.com... You will see that the pano has 2 part, a google map and the pano separated by a dragable region... this is what I try to do... I already have the code to do the dragable region but I do not know how to do the custom cursor when onover this dragable region...

Anyway, Zephyr, thank you very much to share this code *smile* ... A lot of things to learn inside it *whistling* ...

It would be great if such custom onover cursor could be set direct from xml ... Perhaps a new feature for KLAUS *love* ...

SAlut.

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

15

Friday, June 18th 2010, 4:14pm

what you could do is make a 20x20 swf movie that listens to the stage MouseEvent.MOUSE_MOVE and MOUSE_PRESS

onover the plugin -> mouseplugin.hidemouse() -> mouseplugin.x/y = mousecursor.x/y -> showgrabbyhand

I dont have the time to create this plugin now (maybe after the weekend) but you should look at the mousefollow plugin of klaus. which basicly alsoo listens to what happens to the mouse on the stage. but instead of listening to where the mouse is and alter the movevectorx, you just listen (or execute a function) when the mouse is over the plugin. when that happens, you hide the mouse with Mouse.Hide().and use the startdrag function you noted there.

http://asgamer.com/2009/quick-tips-as3-h…owing-the-mouse
just remember that if you want the mouse have click/drag etc actions you need to add

myCursor.mouseEnabled = false;
myCursor.mouseChildren = false;

where myCursor is your custom cursor movieclip

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

16

Friday, June 18th 2010, 4:18pm

Ok... I am going to try if I can reach a working code *wacko* *squint* ..

Thank you Zephyr *thumbup* ...

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

17

Friday, June 18th 2010, 8:28pm

Hi Milo,

*wacko* I think I totally misunderstood your request *huh* (the post from Tuur has made that I realize it).... You are talking about the three boxes on top of the google map, right ?
So, sorry, I had thought it was about the draggable google map box inside Krpano *unsure* , all the above is refering to this *whistling* ...

At least, I have learned some things... I hope it can be useful anyway...

SAlut.

milotimbol

Intermediate

  • "milotimbol" started this thread

Posts: 242

Location: Philippines

Occupation: Software Developer

  • Send private message

18

Sunday, September 12th 2010, 4:49am

Hi Zephyr,

Sorry forgot to follow this thread. Yes I was asking about those tabs at the top *g* . But its ok participation and active exchanges is what keeps the ideas going. so thanks!
Krpano YouTube Tutorials
exsight360.com

360Media

Beginner

Posts: 28

  • Send private message

19

Tuesday, November 16th 2010, 4:48am

Google Maps Overlay

Hi Everyone,



Has someone been able to do something like this?
http://www.ic-virtual.com/InterContinent…ort_Tahiti.html I'm
trying to have a graphic overlayed on the google maps plugin, 360 cities uses krpano so it should be possible, most likely tweaking the googlemaps plugin.



Any help will be appreciated.

Zephyr

Professional

Posts: 1,003

Location: Netherlands

Occupation: Web developer

  • Send private message

20

Thursday, November 18th 2010, 11:45pm

What you are reffering is called a an image overlay and is done with Javascript and the Google maps API

example; http://code.google.com/intl/nl/apis/maps…lay-simple.html

documentation: http://code.google.com/intl/nl/apis/maps…#CustomOverlays

or with the old v2 Js api
http://code.google.com/intl/nl/apis/maps…2/overlays.html

Similar threads