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.

publicitarios360

Intermediate

  • "publicitarios360" started this thread

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

1

Saturday, February 21st 2015, 10:03pm

Which is the simplest solution for popup windows dragable with text and exit button?

Hi, there is any example for learning of this topic?

This post has been edited 1 times, last edit by "publicitarios360" (Feb 22nd 2015, 1:42am)


publicitarios360

Intermediate

  • "publicitarios360" started this thread

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

2

Monday, February 23rd 2015, 1:04am

I'am researching inside the example "xml-usage> dragable=layers-plugins..." that does not seem very complicated, But it is a little more than what I need only to do a simple popup with exit button.

Steps would be:

1) Create a layer1 (dragable text or image)
2) Create other layer2 for exit (child exit button) and make it child's layer1
3) Create code to drag the layer1
4)Create code to close both layer.

Are these steps correct?

Thanks very much, and please be patient with me that am learning *g*

Regards,

Fernando.

3

Monday, February 23rd 2015, 8:44am

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
<action name="draglayer_text">
      <!-- 控制文字层在特定区域中垂直方向上滚动 -->
		if(%1 != dragging,
			copy(drag_currenty, y);
			copy(drag_stagey, mouse.stagey);
			draglayer_text(dragging,%2);
		  ,
			if(pressed,
				sub(dy, mouse.stagey, drag_stagey);
				add(y1, drag_currenty, dy);
				add(y2, y1, pixelheight);
				sub(y2, %2);
				if(y1 GT 0, set(y1,0));
				if(y2 LT 0, sub(y1,y2));
				copy(y,y1);
				delayedcall(0, draglayer_text(dragging,%2) );
			  );
		  );
	</action>

	<action name="picture_resize">
       <!-- 使用父元素宽度或高度的百分之九十 -->	
	div(aspect, layer[%1].imagewidth, layer[%1].imageheight);
	mul(new_width, layer[get(layer[%1].parent)].width, 1);
	div(new_height, new_width, aspect);
	mul(max_height, layer[get(layer[%1].parent)].height, 1);
	if(new_height GT max_height,
		copy(new_height, max_height);
		mul(new_width, new_height, aspect);
	  );
	roundval(new_width);
	roundval(new_height);
	copy(layer[%1].width, new_width);
	copy(layer[%1].height, new_height);
      </action>

     <action name="picture_resize_stage">
	<!-- 使用屏幕宽度或高度的百分之九十 -->	
	div(aspect, layer[%1].imagewidth, layer[%1].imageheight);
	mul(new_width, stagewidth, 0.90);
	div(new_height, new_width, aspect);
	mul(max_height, stageheight, 0.90);
	if(new_height GT max_height,
		copy(new_height, max_height);
		mul(new_width, new_height, aspect);
	  );
	roundval(new_width);
	roundval(new_height);
	copy(layer[%1].width, new_width);
	copy(layer[%1].height, new_height);
     </action>

  <textstyle name="DEFAULT"        
          textcolor="0xFFFFFF"
          background="false"
          border="fasle"
          />


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
<!-- testbox为图文框的父元素,控制其隐藏则全部元素隐藏 -->
    <layer name="textbox"  type="container" align="center" x="0" y="0" width="400" height="600"  bgroundedge="3" bgcolor="0x333333" bgalpha="0.8" bgcapture="true" bgborder="3 0xFFFFFF 1"  >
         <!-- 顶部标题 -->
		<layer name="title" url="%SWFPATH%/plugins/textfield.swf" children="false" enabled="false" align="top" y="5" width="100%" autoheight="true"
		           border="false" background="false"
			       css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:18px;"
			       html="标题栏"
			       />
        <!-- 右上角按钮背景及X型图片 -->
       <layer name="button_close_mask"  type="container" align="righttop" edge="center"  y="5" x="5" width="30" height="30" bgroundedge="30" bgcolor="0x000000" bgalpha="1" bgcapture="true" bgborder="3 0xFFFFFF 1"  >

       	<layer name="button_close" url="close.png" children="false" enabled="true" align="center"   width="22" height="22" onclick="set(layer[textbox].visible,false);"
			       />

		</layer>	      
       <!-- 图片层-->
       <layer name="pic_mask" type="container" align="lefttop" x="10" y="40" width="380" height="250" bgcolor="0xFFFFFF" bgalpha="0" maskchildren="true">

           <layer name="pic" url="test.jpg" align="center"  onloaded="picture_resize(get(name));" onhover="showtext(点击放大)" state="small"
           	onclick="
           	if(state == small,
           	set(parent,stage);picture_resize_stage(get(name));set(onhover,showtext(点击关闭));set(state,big),
           	set(parent,pic_mask);picture_resize(get(name));set(onhover,showtext(点击放大));set(state,small));"  />

       </layer>
 <!-- 文字层-->
		<layer name="textmask" type="container" align="lefttop" x="10" y="300" width="380" height="250" bgcolor="0xFFFFFF" bgalpha="0" maskchildren="true">
			<layer name="text" url="%SWFPATH%/plugins/textfield.swf" children="false" align="lefttop" x="0" y="0" width="100%" autoheight="true"
			       border="false" background="false"
			       css="text-align:left; color:#FFFFFF; font-family:Arial; font-size:15px;"
			       html="data:testtext"
			       ondown="draglayer_text(start,260);"
			       />
		</layer>
 <!-- 底部两个按钮 -->
		<layer name="button_1" url="%SWFPATH%/plugins/textfield.swf" children="false" enabled="true" align="bottom" y="12" x="-80" width="80"  autoheight="true"
		           border="false" background="true"  backgroundcolor="0xFFFFFF" backgroundalpha="1.0" roundedge="10"
			       css="text-align:center; color:#666666; font-family:Arial; font-weight:bold; font-size:16px;"
			       html="购买" onover="set(shadow,2);" onout="set(shadow,0);"
			       />

		<layer name="button_2" url="%SWFPATH%/plugins/textfield.swf" children="false" enabled="true" align="bottom" y="12" x="80" width="80" autoheight="true"
		           border="false" background="true"  backgroundcolor="0xFFFFFF" backgroundalpha="1.0" roundedge="10"
			       css="text-align:center; color:#666666; font-family:Arial; font-weight:bold; font-size:16px;"
			       html="租借" onover="set(shadow,2);" onout="set(shadow,0);"
			       />
	</layer>
	 <!-- 文字数据,实际上可以单独放在其它xml文件,
然后用include语法将xml文件嵌入 -->
	<data name="testtext">
       現段階で、我が国の映画産業の発展の勢いが現われて。一方、中国式の大作生産量や社会効果の両方はますます良くなって、新たに国内客の信頼を獲得します;一方、海外市場の開拓が上昇傾向に続いて、我が国の文化価値体係とその普及に積極的な役割を果たすの柔らかい実力。[br/]
		[br/]
		中国の広大な国際的な影響力の増強は、外国の観衆の歓迎を受けて、国際市場が新たに開拓、商業価値を高める傾向も。しかし私たちは中国の映画を見て、国際貿易の中では赤字状態で、映画の海外偏弱競争力は、中国との貿易大国と文化大国の地位は似合わない。このために私達は簡単にまとめた近年中国式の映画の成功の経験から見て創作に、中国の映画は模索して1本の主旋律の切れ、芸術片や商業映画3型互滲みの映画の美学の道路で、特に主旋律は、鑑賞性と芸術性の面で取得しました。観客から中の社会効果を初歩的に形成され、中国の映画は通俗物語では意味深長民族主流やコア価値の理念の美学伝統。[br/]
		[br/]
	</data>

publicitarios360

Intermediate

  • "publicitarios360" started this thread

Posts: 205

Location: Habana, Cuba

Occupation: Architect, Photographer, Programmer.

  • Send private message

4

Monday, February 23rd 2015, 4:21pm

Thanks very much Tmhok, Your code is great, it inspirate new ideas in my project... Only a details: the window cannot be dragged.

The mimimal popup wold be:

1) Cosmetic image or title image or fix banner (solved)
2) Scrolling text (solved)
3) Exit button (solved)
4) The window dragable inside stage area



I will continue researching, but almost solved, thanks.

Greets,

Fernando

This post has been edited 1 times, last edit by "publicitarios360" (Feb 23rd 2015, 4:46pm) with the following reason: the image linked is not visible


5

Tuesday, February 24th 2015, 12:39am

Source code

1
<action name="draglayer">		if(%1 != dragging,			copy(drag_currentx, x);			copy(drag_currenty, y);			copy(drag_stagex, mouse.stagex);			copy(drag_stagey, mouse.stagey);			set(drag_sx, +1);			set(drag_sy, +1);			if(align == righttop,    set(drag_sx,-1); );			if(align == right,       set(drag_sx,-1); );			if(align == rightbottom, set(drag_sx,-1); set(drag_sy,-1); );			if(align == bottom,      set(drag_sy,-1); );			if(align == leftbottom,  set(drag_sy,-1); );			draglayer(dragging);		  ,			if(pressed,				sub(dx, mouse.stagex, drag_stagex);				sub(dy, mouse.stagey, drag_stagey);				mul(dx, drag_sx);				mul(dy, drag_sy);				add(x, drag_currentx, dx);				add(y, drag_currenty, dy);				delayedcall(0, draglayer(dragging) );			  );		  );	</action>


and insert ondown="draglayer();" into your windows parent layer