콘텐츠로 이동

플러그인으로 사용자 지정 도구 모음 버튼을 추가하는 방법

플러그인을 사용하면 cTrader의 차트 도구 모음에 특정 작업, 태스크 또는 콘텐츠에 대한 버튼을 추가할 수 있습니다. 액션 버튼을 클릭하면 프로그래밍된 작업이 실행됩니다.

이 문서와 관련 동영상에서는 플러그인을 사용하여 차트 도구 모음에 새 버튼을 추가하는 방법을 보여드리겠습니다.

플러그인 만들기

먼저 플러그인을 만들고 클릭 시 포지션을 오픈하는 버튼을 표시하도록 코딩하겠습니다.

Algo 앱을 열고 플러그인 탭으로 이동합니다. 새로 만들기 버튼을 클릭합니다. 빈 양식 템플릿을 선택합니다. Custom Toolbar Button과 같은 플러그인 이름을 입력한 다음 만들기를 클릭합니다.

도구 모음 버튼을 추가합니다.

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 이미지를 만들거나 다운로드합니다. 메모장, Visual Studio Code 또는 IDE에서 XML 모드로 SVG 파일을 엽니다. 프로그램의 찾기 및 바꾸기 기능을 사용하여 모든 큰따옴표 "를 작은따옴표 '로 바꿉니다.

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

플러그인을 빌드합니다.

트레이드 앱으로 이동하여 모든 포지션 청산 버튼을 사용합니다. 이번에는 이전에 오픈한 포지션이 청산되어야 합니다.

요약

이 동영상과 문서가 차트 도구 모음에 작업, 태스크 및 팝업 메뉴에 대한 사용자 지정 버튼을 추가하는 방법을 이해하는 데 도움이 되었기를 바랍니다.