วิธีเพิ่มปุ่มแถบเครื่องมือที่กำหนดเองด้วยปลั๊กอิน VIDEO
ปลั๊กอินช่วยให้คุณสามารถเพิ่มปุ่มสำหรับการดำเนินการ งาน หรือเนื้อหาเฉพาะลงในแถบเครื่องมือกราฟ ใน cTrader เมื่อคลิกปุ่มการดำเนินการ การดำเนินการที่ตั้งโปรแกรมไว้จะถูกดำเนินการ
ในบทความนี้และวิดีโอที่เกี่ยวข้อง เราจะแสดงวิธีเพิ่มปุ่มใหม่ลงในแถบเครื่องมือกราฟ โดยใช้ปลั๊กอิน
สร้างปลั๊กอิน ก่อนอื่น เราจะสร้างปลั๊กอินและเขียนโค้ดให้แสดงปุ่มที่เปิดโพสิชันเมื่อคลิก
เปิดแอป Algo และไปที่แท็บ ปลั๊กอิน คลิกปุ่ม ใหม่ เลือกเทมเพลต ว่างเปล่า พิมพ์ชื่อสำหรับปลั๊กอินของคุณ เช่น "ปุ่มแถบเครื่องมือที่กำหนดเอง" จากนั้นคลิก สร้าง
เพิ่มปุ่มแถบเครื่องมือ
Commands . Add ( CommandType . ChartContainerToolbar , OpenPositions );
สร้างเมธอดที่จะจัดการเหตุการณ์คลิกปุ่มและเปิดโพสิชันบางส่วน
private void OpenPositions ( CommandArgs args )
{
ExecuteMarketOrder ( TradeType . Buy , "EURUSD" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "USDJPY" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "EURGBP" , 1000 );
}
คุณสามารถคัดลอกโค้ดทั้งหมดด้านล่างนี้:
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 using System ;
using cAlgo.API ;
using cAlgo.API.Collections ;
using cAlgo.API.Indicators ;
using cAlgo.API.Internals ;
namespace cAlgo.Plugins
{
[Plugin(AccessRights = AccessRights.None)]
public class TestPlug : Plugin
{
protected override void OnStart ()
{
Commands . Add ( CommandType . ChartContainerToolbar , OpenPositions );
}
private void OpenPositions ( CommandArgs args )
{
ExecuteMarketOrder ( TradeType . Buy , "EURUSD" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "USDJPY" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "EURGBP" , 1000 );
}
protected override void OnStop ()
{
// Handle Plugin stop here
}
}
}
สร้างปลั๊กอินโดยใช้ปุ่มลัด Ctrl + B หรือคลิกปุ่ม สร้าง จากนั้น ไปที่แอป เทรด และยืนยันว่ามีการเพิ่มปุ่มใหม่ลงในแถบเครื่องมือกราฟ
เมื่อคุณคลิกปุ่มและให้สิทธิ์ คุณควรเห็นโพสิชันบางส่วนเปิดขึ้น
เพิ่มภาพที่กำหนดเองสำหรับปุ่ม หากคุณไม่ชอบไอคอนเริ่มต้น คุณสามารถตั้งค่าภาพที่คุณต้องการเป็นไอคอนสำหรับปลั๊กอินของคุณได้ ตามโค้ด XML ภาพ SVG เป็นวัตถุที่ใช้เป็นไอคอนบ่อยที่สุด cTrader Algo มีคำสั่งที่ช่วยให้คุณระบุและใช้ภาพ SVG ที่กำหนดเองเป็นไอคอนได้
รับโค้ดภาพ สร้างหรือดาวน์โหลดภาพ SVG ที่คุณต้องการใช้เป็นไอคอน เปิดไฟล์ SVG ในโหมด XML ใน Notepad, Visual Studio Code หรือ IDE อื่นๆ ใช้ฟังก์ชัน ค้นหาและแทนที่ ในโปรแกรมเพื่อแทนที่เครื่องหมายคำพูดคู่ " ทั้งหมดด้วยเครื่องหมายคำพูดเดี่ยว '
โค้ด XML ของคุณไม่ควรมีเครื่องหมายคำพูดคู่
คัดลอกโค้ด XML ที่ได้
<svg class= 'w-6 h-6 text-gray-800 dark:text-white' aria-hidden= 'true' xmlns= 'http://www.w3.org/2000/svg' fill= 'none' viewBox= '0 0 24 24' >
<path stroke= '#BFBFBF' stroke-linecap= 'round' stroke-linejoin= 'round' stroke-width= '2' d= 'M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z' />
</svg>
ตั้งค่าไอคอนใหม่ กลับไปที่แอป Algo และเปิดตัวแก้ไขโค้ดสำหรับปลั๊กอินของคุณ
เริ่มต้นไอคอน SVG ว่างเปล่า
var icon = new SvgIcon ();
เพิ่มโค้ด XML ที่คุณแยกออกมาก่อนหน้านี้
var icon = new SvgIcon ( @"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>" );
กำหนดไอคอนให้กับปุ่ม
Commands . Add ( CommandType . ChartContainerToolbar , OpenPositions , icon );
เพิ่มคำอธิบายเครื่องมือที่อธิบายฟังก์ชันของปุ่ม
var command = Commands . Add ( CommandType . ChartContainerToolbar , OpenPositions , icon );
command . ToolTip = "Open Positions" ;
คุณสามารถคัดลอกโค้ดทั้งหมดด้านล่างนี้:
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 using System ;
using cAlgo.API ;
using cAlgo.API.Collections ;
using cAlgo.API.Indicators ;
using cAlgo.API.Internals ;
namespace cAlgo.Plugins
{
[Plugin(AccessRights = AccessRights.None)]
public class CustomToolbarButton : Plugin
{
protected override void OnStart ()
{
var icon = new SvgIcon ( @"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>" );
var command = Commands . Add ( CommandType . ChartContainerToolbar , OpenPositions , icon );
command . ToolTip = "Open Positions" ;
}
private void OpenPositions ( CommandArgs args )
{
ExecuteMarketOrder ( TradeType . Buy , "EURUSD" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "USDJPY" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "EURGBP" , 1000 );
}
protected override void OnStop ()
{
// Handle Plugin stop here
}
}
}
สร้างปลั๊กอินอีกครั้ง
ไปที่แอป เทรด เพื่อยืนยันว่าไอคอนใหม่ปรากฏขึ้น
เพิ่มปุ่มที่มีเมนูป๊อปอัพ นอกเหนือจากปุ่มที่ดำเนินการเฉพาะเมื่อคลิกแล้ว คุณสามารถเพิ่มปุ่มที่แสดงเมนูป๊อปอัพได้ คุณสามารถปรับแต่งเมนูที่เกิดขึ้นให้แสดงปุ่มหลายปุ่มหรือเทอร์มินัลขนาดเล็กเดียว
กลับไปที่ตัวแก้ไขโค้ดในแอป Algo สร้างปุ่มที่เปิดเมนูป๊อปอัพ และเพิ่มปุ่มอื่นที่ให้ฟังก์ชัน ปิดโพสิชันทั้งหมด ภายในเมนูนั้น เมื่อคลิกปุ่มนี้ โพสิชันที่เปิดไว้ก่อนหน้าทั้งหมดจะถูกปิด
เพิ่มปุ่มแถบเครื่องมือใหม่
Commands . Add ( CommandType . ChartContainerToolbar , OnIconClicked , icon );
สร้างปุ่มใหม่และกำหนดสไตล์ให้กับปุ่ม
var buttonStyle = new Style ();
buttonStyle . Set ( ControlProperty . Margin , new Thickness ( 0 , 5 , 0 , 0 ));
buttonStyle . Set ( ControlProperty . Width , 150 );
var closePositionsButton = new Button
{
Text = "Close All Positions" , Style = buttonStyle
};
ประกาศแผงสแต็กและเพิ่มปุ่มเป็นลูก
var stackPanel = new StackPanel ();
stackPanel . AddChild ( closePositionsButton );
เพิ่มเหตุการณ์เพื่อจัดการการดำเนินการคลิกปุ่ม
closePositionsButton . Click += args =>
{
foreach ( var position in Positions )
{
position . Close ();
}
};
คุณสามารถคัดลอกโค้ดทั้งหมดด้านล่างนี้:
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 using System ;
using cAlgo.API ;
using cAlgo.API.Collections ;
using cAlgo.API.Indicators ;
using cAlgo.API.Internals ;
namespace cAlgo.Plugins
{
[Plugin(AccessRights = AccessRights.None)]
public class CustomToolbarButton : Plugin
{
protected override void OnStart ()
{
var icon = new SvgIcon ( @"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>" );
var command = Commands . Add ( CommandType . ChartContainerToolbar , OpenPositions , icon );
command . ToolTip = "Open Positions" ;
Commands . Add ( CommandType . ChartContainerToolbar , CloseAllPositions , icon );
}
private CommandResult CloseAllPositions ( CommandArgs args )
{
var buttonStyle = new Style ();
buttonStyle . Set ( ControlProperty . Margin , new Thickness ( 0 , 5 , 0 , 0 ));
buttonStyle . Set ( ControlProperty . Width , 150 );
var closePositionsButton = new Button
{
Text = "Close All Positions" ,
Style = buttonStyle
};
closePositionsButton . Click += args =>
{
foreach ( var position in Positions )
{
position . Close ();
}
};
var stackPanel = new StackPanel ();
stackPanel . AddChild ( closePositionsButton );
return new CommandResult ( stackPanel );
}
private void OpenPositions ( CommandArgs args )
{
ExecuteMarketOrder ( TradeType . Buy , "EURUSD" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "USDJPY" , 1000 );
ExecuteMarketOrder ( TradeType . Buy , "EURGBP" , 1000 );
}
protected override void OnStop ()
{
// Handle Plugin stop here
}
}
}
สร้างปลั๊กอิน
ไปที่แอป เทรด และใช้ปุ่ม ปิดโพสิชันทั้งหมด ครั้งนี้ โพสิชันที่เปิดไว้ก่อนหน้าควรปิด
สรุป เราหวังว่าวิดีโอและบทความนี้จะช่วยให้คุณเข้าใจวิธีเพิ่มปุ่มที่กำหนดเองสำหรับการดำเนินการ งาน และแม้แต่เมนูป๊อปอัพลงในแถบเครื่องมือกราฟ