ข้ามไปที่เนื้อหา

วิธีเพิ่มปุ่มแถบเครื่องมือที่กำหนดเองด้วยปลั๊กอิน

ปลั๊กอินช่วยให้คุณสามารถเพิ่มปุ่มสำหรับการดำเนินการ งาน หรือเนื้อหาเฉพาะลงในแถบเครื่องมือกราฟใน cTrader เมื่อคลิกปุ่มการดำเนินการ การดำเนินการที่ตั้งโปรแกรมไว้จะถูกดำเนินการ

ในบทความนี้และวิดีโอที่เกี่ยวข้อง เราจะแสดงวิธีเพิ่มปุ่มใหม่ลงในแถบเครื่องมือกราฟโดยใช้ปลั๊กอิน

สร้างปลั๊กอิน

ก่อนอื่น เราจะสร้างปลั๊กอินและเขียนโค้ดให้แสดงปุ่มที่เปิดโพสิชันเมื่อคลิก

เปิดแอป Algo และไปที่แท็บ ปลั๊กอิน คลิกปุ่ม ใหม่ เลือกเทมเพลต ว่างเปล่า พิมพ์ชื่อสำหรับปลั๊กอินของคุณ เช่น "ปุ่มแถบเครื่องมือที่กำหนดเอง" จากนั้นคลิก สร้าง

เพิ่มปุ่มแถบเครื่องมือ

1
Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);

สร้างเมธอดที่จะจัดการเหตุการณ์คลิกปุ่มและเปิดโพสิชันบางส่วน

1
2
3
4
5
6
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 ว่างเปล่า

1
var icon = new SvgIcon();

เพิ่มโค้ด XML ที่คุณแยกออกมาก่อนหน้านี้

1
2
3
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>");

กำหนดไอคอนให้กับปุ่ม

1
Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);

เพิ่มคำอธิบายเครื่องมือที่อธิบายฟังก์ชันของปุ่ม

1
2
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 สร้างปุ่มที่เปิดเมนูป๊อปอัพ และเพิ่มปุ่มอื่นที่ให้ฟังก์ชัน ปิดโพสิชันทั้งหมด ภายในเมนูนั้น เมื่อคลิกปุ่มนี้ โพสิชันที่เปิดไว้ก่อนหน้าทั้งหมดจะถูกปิด

เพิ่มปุ่มแถบเครื่องมือใหม่

1
Commands.Add(CommandType.ChartContainerToolbar, OnIconClicked, icon);

สร้างปุ่มใหม่และกำหนดสไตล์ให้กับปุ่ม

1
2
3
4
5
6
7
8
9
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 
};

ประกาศแผงสแต็กและเพิ่มปุ่มเป็นลูก

1
2
var stackPanel = new StackPanel();
stackPanel.AddChild(closePositionsButton);

เพิ่มเหตุการณ์เพื่อจัดการการดำเนินการคลิกปุ่ม

1
2
3
4
5
6
7
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
        }
    }        
}

สร้างปลั๊กอิน

ไปที่แอป เทรด และใช้ปุ่ม ปิดโพสิชันทั้งหมด ครั้งนี้ โพสิชันที่เปิดไว้ก่อนหน้าควรปิด

สรุป

เราหวังว่าวิดีโอและบทความนี้จะช่วยให้คุณเข้าใจวิธีเพิ่มปุ่มที่กำหนดเองสำหรับการดำเนินการ งาน และแม้แต่เมนูป๊อปอัพลงในแถบเครื่องมือกราฟ