You are not logged in.

Is It Possible to create a Draggable Layer

psrussell59

Beginner

  • "psrussell59" started this thread

Posts: 5

  • Send private message

1

Thursday, September 3rd 2015, 7:16pm

Is It Possible to create a Draggable Layer

krpano 1.18
working from standard vTourSkin.xml

I would like to move the map layer out of the scroll_layer into its own layer so ive moved it to its own map_layer under the scroll_layer.

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

<!-- skin_scroll_layer simplified -->	
	<layer name="skin_scroll_window" type="container" keep="true" align="leftbottom" width="100%" height="100%" x="0" y="60" y_opened="60" y_closed="-2" maskchildren="true">
		<layer name="skin_scroll_layer" type="container" align="leftbottom" width="100%" height="100%" x="0" y="-100%">
			<layer name="skin_topborder" style="skin_base" crop="2|0|60|12" align="topleft" edge="bottomleft" width="100%" height="12" x="0" y="0" enabled="false" />
			<layer name="skin_title" url="%SWFPATH%/plugins/textfield.swf" align="lefttop" edge="leftbottom" width="95%" height="32" autoheight="true" x="5" y="-3" zorder="4" enabled="false" background="false" border="false" css="text-align:left; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:16px;" textshadow="1" visible="false" />
			<layer name="skin_scroll_container" type="container" bgcolor="0x000000" bgalpha="0.5" align="lefttop" width="100%" height="100%" x="0" y="0" maskchildren="true">
				<layer name="skin_thumbs_container" type="container" align="lefttop" width="100%" height="100%" visible="false">
					<layer name="skin_thumbs_scrollleft"  style="skin_base|skin_glow" crop="0|64|64|64"  align="lefttop"  edge="left"  x="5" y="50" scale="0.5" zorder="2" alpha="1.0" ondown2="asyncloop(pressed, layer[skin_thumbs].scrollby(+2,0));" visible="false" />
					<layer name="skin_thumbs_scrollright" style="skin_base|skin_glow" crop="64|64|64|64" align="righttop" edge="right" x="5" y="50" scale="0.5" zorder="2" alpha="1.0" ondown2="asyncloop(pressed, layer[skin_thumbs].scrollby(-2,0));" visible="false" />
					<layer name="skin_thumbs_scrollindicator" type="container" bgcolor="0xFFFFFF" bgalpha="0.25" align="lefttop" width="0" y="100" height="4" visible="false" enabled="false" />
					<layer name="skin_thumbs" state="closed" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" direction="h" align="top" width="100%" height="100" zorder="1" onloaded="skin_updatescroll();" onscroll="skin_updatethumbscroll();" />
				</layer>

			</layer>
		</layer>
		<layer name="skin_map_layer" type="container" align="rightbottom" width="100%" height="100%" x="0" y="-100%" bgcapture="true" >
			<layer name="skin_map" state="closed" url="" visible="false" align="righttop" width="50%" height="50%" x="0" y="100" zorder="1" lat="0" lng="0" zoom="10" bgalpha="0" bgcapture="true" draggable="true" maptype="satellite" onmapready="skin_addmapspots();">
				<layer name="skin_move_map" style="skin_base" visible="true" crop="9|512|46|64"  align="lefttop" width="32" height="32" alpha="1" x="0" y="0" zorder="2" ondown="" onup="" />
				<maptypecontrol visible="true" align="righttop" x="5" y="5" buttonalign="v" />
				<radar visible="false" headingoffset="0" />
				<spotstyle name="DEFAULT" url="vtourskin_mapspot.png" activeurl="vtourskin_mapspotactive.png" edge="bottom" x="-5" y="-8" scale="0.5" />
				<layer name="skin_map_zoom_in"  style="skin_base" visible="true" crop="9|512|46|64"  align="right" x="0" y="-40" zorder="2" ondown="layer[skin_map2].zoomin();  skin_buttonglow(get(name));" onup="skin_buttonglow(null);" />
				<layer name="skin_map_zoom_out" style="skin_base" visible="true" crop="73|512|46|64" align="right" x="0" y="+40" zorder="2" ondown="layer[skin_map2].zoomout(); skin_buttonglow(get(name));" onup="skin_buttonglow(null);" />
			</layer>
		</layer>


	</layer>

I've also added a small button image as the first layer inside the map_layer. I would like to be able to have the user mousedown on the button and drag the layer around the screen.

Is it possible to do this? Any example xml markup available?

Thanks

Umalo

Professional

Posts: 1,051

Location: Osijek, Croatia, EU

  • Send private message

2

Friday, September 4th 2015, 10:18am

Explore here: Link

psrussell59

Beginner

  • "psrussell59" started this thread

Posts: 5

  • Send private message

3

Friday, September 4th 2015, 11:45am

RESOLVED

Thank you for the link Umalo. I had seen another example like this and it was a conformation that it was possible, however it offered no markup example.

I was able to hobble some markup code that seems to work:

The Action

Source code

 
1
2
3
4
5
6
7

<action name="draglayer">
  if(dragging, 
	set(layer[your_layername].x,get(mouse.stagex));
	set(layer[your_layername].y,get(mouse.stagey));
	delayedcall(0,draglayer());
	);
</action>


Calling the Action

Source code

 
1

ondown="set(dragging,true); draglayer();" onup="set(dragging,false);"


I wanted the image, and the control bar to still be available, and had to make sure bgcapture='false'. This allowed the rest of the UI to remain active.


Thanks again

Similar threads