Bỏ qua

Cách thêm các nút thanh công cụ tùy chỉnh bằng plugin

Các plugin cho phép bạn thêm các nút cho các hành động, tác vụ hoặc nội dung cụ thể vào Thanh công cụ Biểu đồ trong cTrader. Khi nhấp vào nút hành động, thao tác được lập trình sẽ được thực thi.

Trong bài viết này và video tương ứng, chúng tôi sẽ hướng dẫn bạn cách thêm các nút mới vào Thanh công cụ Biểu đồ bằng cách sử dụng plugin.

Tạo một plugin

Đầu tiên, chúng ta sẽ tạo một plugin và lập trình nó để hiển thị một nút mở các vị thế khi được nhấp vào.

Mở ứng dụng Algo và điều hướng đến tab Plugin. Nhấp vào nút Mới. Chọn mẫu Trống. Nhập tên cho plugin của bạn, chẳng hạn như "Nút Thanh công cụ Tùy chỉnh", sau đó nhấp vào Tạo.

Thêm nút thanh công cụ.

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

Tạo một phương thức sẽ xử lý sự kiện nhấp nút và mở một số vị thế.

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);
}

Bạn có thể sao chép toàn bộ mã bên dưới:

 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
        }
    }        
}

Xây dựng plugin bằng cách sử dụng phím tắt Ctrl+B hoặc nhấp vào nút Xây dựng. Sau đó, chuyển đến ứng dụng Giao dịch và xác nhận rằng một nút mới đã được thêm vào Thanh công cụ Biểu đồ.

Khi bạn nhấp vào nút và cấp quyền, bạn sẽ thấy một số vị thế được mở.

Thêm hình ảnh tùy chỉnh cho nút

Nếu bạn không thích biểu tượng mặc định, bạn có thể đặt hình ảnh ưa thích của mình làm biểu tượng cho plugin của bạn. Dựa trên mã XML, hình ảnh SVG là các đối tượng được sử dụng phổ biến nhất làm biểu tượng. cTrader Algo cung cấp các lệnh cho phép bạn chỉ định và sử dụng hình ảnh SVG tùy chỉnh làm biểu tượng.

Lấy mã hình ảnh

Tạo hoặc tải xuống hình ảnh SVG bạn muốn sử dụng làm biểu tượng. Mở tệp SVG ở chế độ XML trong Notepad, Visual Studio Code hoặc bất kỳ IDE nào. Sử dụng chức năng Tìm và thay thế trong chương trình để thay thế tất cả dấu ngoặc kép " bằng dấu ngoặc đơn '.

Mã XML của bạn không nên chứa dấu ngoặc kép.

Sao chép mã XML kết quả.

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

Đặt biểu tượng mới

Quay lại ứng dụng Algo và mở trình chỉnh sửa mã cho plugin của bạn.

Khởi tạo một biểu tượng SVG trống.

1
var icon = new SvgIcon();

Thêm mã XML bạn đã trích xuất trước đó.

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>");

Gán biểu tượng cho nút.

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

Thêm chú thích mô tả chức năng của nút.

1
2
var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
command.ToolTip = "Open Positions";

Bạn có thể sao chép toàn bộ mã bên dưới:

 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
        }
    }        
}

Xây dựng lại plugin.

Chuyển đến ứng dụng Giao dịch để xác nhận rằng biểu tượng mới đã xuất hiện.

Thêm một nút có menu bật lên

Ngoài các nút thực hiện các thao tác cụ thể khi được nhấp, bạn có thể thêm các nút hiển thị menu bật lên. Bạn có thể tùy chỉnh menu kết quả để hiển thị một số nút hoặc một terminal mini duy nhất.

Quay lại trình soạn thảo mã trong ứng dụng Algo, tạo một nút mở menu bật lên và thêm một nút khác cung cấp chức năng Đóng tất cả vị thế bên trong menu đó. Khi nhấp vào nút này, tất cả các vị thế đã mở trước đó sẽ được đóng lại.

Thêm một nút thanh công cụ mới.

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

Tạo nút mới và gán kiểu cho nó.

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 
};

Khai báo một bảng xếp chồng và thêm nút làm phần tử con.

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

Thêm một sự kiện để xử lý hành động nhấp chuột vào nút.

1
2
3
4
5
6
7
closePositionsButton.Click += args => 
{
    foreach (var position in Positions)
    {
        position.Close();
    }
};

Bạn có thể sao chép toàn bộ mã bên dưới:

 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
        }
    }        
}

Xây dựng plugin.

Chuyển đến ứng dụng Trade và sử dụng nút Đóng tất cả vị thế. Lần này, các vị thế đã mở trước đó sẽ được đóng lại.

Tổng quan

Chúng tôi hy vọng video và bài viết này đã giúp bạn hiểu cách thêm các nút tùy chỉnh cho các thao tác, tác vụ và thậm chí cả menu bật lên vào Thanh công cụ biểu đồ.