You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

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

Location: Osijek, Croatia, EU

  • Send private message

2

Friday, September 4th 2015, 10:18am

Explore here: Link

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