콘텐츠로 이동

cTrader UI에서의 플러그인 배치

플러그인은 활성 심벌 패널(ASP), 트레이드 워치(TW), 차트 및 사용자 정의 프레임, 사용자 정의 창 및 메인 메뉴 영역과 같은 cTrader UI의 영역에 사용자 정의 요소를 추가할 수 있습니다. 이 가이드는 이러한 각 옵션을 사용하는 방법을 보여주고 관련 사용 사례를 제안합니다.

1분 안에 플러그인 배치하기!

  • cTrader UI를 확장하여 트레이딩 터미널에 서드파티 서비스를 원활하게 통합할 수 있습니다.
  • 단일 플러그인이 UI의 다른 영역에서 다른 기능을 실행할 수 있으므로 cTrader의 외관과 느낌을 사용자 정의할 수 있습니다.
  • 플러그인이 생성한 사용자 정의 요소를 구성하여 cTrader UI의 원래 위치에서 분리하고 다시 부착할 수 있습니다.
  • 특정 아이디어는 UI의 특정 영역에 더 적합할 수 있습니다. 배치를 실험하여 가장 적합한 것을 찾을 수 있습니다.

ASP

ASP는 차트 디스플레이의 오른쪽에 위치합니다. 플러그인은 다음 옵션을 사용하여 하나 이상의 사용자 지정 요소를 추가할 수 있습니다:

  • AspTab으로. 이 옵션을 사용하면 플러그인은 심벌, DoM 및 기타 탭과 함께 별도의 탭에 사용자 지정 요소를 표시합니다.
  • AspBlock으로. 이 옵션을 사용하면 플러그인은 심벌 탭에서 사용자 지정 가능한 제목과 위치를 가진 새로운 접을 수 있는 섹션에 사용자 지정 요소를 표시합니다.

다음은 동일한 플러그인이 블록과 탭으로 표시되는 모습입니다.

사용 사례

다음은 ASP 블록에 사용자 지정 요소를 표시하는 플러그인에 대한 몇 가지 아이디어입니다:

  • 주어진 심벌에 대한 보호 수준을 계산하는 작은 계산기.
  • 현재 활성 심벌에 대한 추가 정보를 표시하는 그리드.

다음 아이디어는 ASP 탭으로 임베드될 때 가장 잘 작동합니다:

  • 현재 열린 모든 포지션에 대한 사용자 지정 분석을 포함하는 목록.
  • 금융 뉴스 아웃렛의 WebView.

ASP 블록으로 사용자 지정 요소를 추가하려면 Asp.SymbolTab.AddBlock(string title) 메서드를 사용하세요.

1
2
3
var child = ... // Insert the contents you want the block to have here
AspBlock aspBlock = Asp.SymbolTab.AddBlock("Cool Plugin");
aspBlock.Child = child;

ASP 탭으로 사용자 지정 요소를 추가하려면 Asp.AddTab(string title) 메서드를 사용하세요.

1
2
3
var child = ... // Insert the contents you want the tab to have here
AspTab pluginTab = Asp.AddTab("Another Cool Plugin");
pluginTab.Child = child;

블록 또는 탭이 ASP에 나타나는 순서를 결정하려면 각각 AspBlock과 AspTab의 Index 속성을 사용하세요.

경고

사용자 지정 탭은 심벌 탭 앞에 배치할 수 없습니다. 또한 심벌 탭의 새 주문 섹션보다 높이 블록을 임베드할 수 없습니다. 결과적으로 ASP에 임베드된 블록의 가능한 가장 작은 인덱스는 1입니다.

트레이드 워치

트레이드 워치는 차트 영역 바로 아래에 위치합니다. 여기에 사용자 지정 요소를 별도의 탭으로 추가할 수 있습니다.

다음은 디스플레이에 추가된 플러그인의 모습입니다.

사용 사례

다음 아이디어는 트레이드 워치 디스플레이에 표시하기에 적합합니다.

  • 사용자의 현재 계정에 대한 다양한 통계를 보여주는 사용자 지정 분석 도구.
  • 트레이딩 중심 웹 포럼의 WebView.

트레이드 워치 디스플레이에 새 탭으로 사용자 지정 요소를 추가하려면 Trade Watch.AddTab(string title) 메서드를 사용하세요.

1
2
3
var child = ... // Insert the contents you want the plugin to have here
Trade WatchTab Trade WatchTab = Trade Watch.AddTab("Yet Another Cool Plugin");
Trade WatchTab.Child = child;

ASP 블록 및 탭과 마찬가지로 Trade WatchTab의 Index 속성을 사용하여 트레이드 워치 디스플레이에서 다른 탭과의 상대적 위치를 정의할 수 있습니다.

참고

트레이드 워치 디스플레이에 배치된 모든 사용자 지정 탭은 터미널 첫 실행 시 cTrader UI에 포함된 기본 탭의 가장 오른쪽에만 나타납니다. 이후에는 이러한 탭의 Index가 1 이상이어야 하며, 인덱스는 플러그인 탭 간의 상대적 위치만 결정합니다.

차트 및 사용자 정의 프레임

사용자 지정 요소를 별도의 차트 프레임에 표시하도록 선택할 수도 있으며, 이는 현재 차트 보기에 새 차트로 추가하는 것과 같습니다. 또한 플러그인은 사용 가능한 심벌 및 차트 프레임에 대해 임의의 수의 차트를 열 수 있습니다.

다음은 일반 차트 옆에 WebView가 있는 사용자 지정 차트 프레임의 모습입니다.

사용 사례

다음 아이디어는 사용자 지정 프레임에 임베드될 때 가장 잘 보이고 작동합니다:

  • 다른 차트 서비스의 WebView.
  • 대규모 사용자 지정 트레이딩 패널.
  • 시장 움직임에 대한 반응을 결정할 때 트레이더가 상담할 수 있는 생성형 AI 서비스의 WebView.

새 사용자 지정 프레임을 추가하려면 ChartManager.AddCustomFrame(string title) 메서드를 사용하세요.

1
2
3
var child = ... // Insert the contents you want the plugin to have here
var newCustomFrame = ChartManager.AddCustomFrame("Best Plugin");
newCustomFrame.Child = child;

플러그인이 새 차트를 열도록 하려면 ChartManager.AddChartFrame(string symbolName, TimeFrame timeFrame) 메서드를 사용하세요.

1
var newChart = ChartManager.AddChartFrame("EURUSD", TimeFrame.Day2);

참고

플러그인이 새로운 사용자 정의 프레임 또는 차트를 추가하면, 이전에 단일 차트 모드 또는 자유형 차트 모드가 활성화되었더라도 cTrader는 다중 차트 모드로 전환됩니다.

기본 메뉴

플러그인은 기존의 Trade, Algo, Copy 및 Analyze와 같은 섹션 외에도 메인 메뉴 UI에 사용자 정의 섹션을 추가하도록 코딩할 수 있습니다. 추가된 사용자 정의 섹션은 웹사이트, 대시보드, 버튼, 도구 등을 포함할 수 있습니다.

다음은 메인 메뉴에 cTrader 스토어 웹사이트를 포함하는 cTrader 스토어 사용자 정의 섹션을 추가하는 간단한 플러그인의 코드입니다:

 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
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CTraderStorePlugin : Plugin
    {
        private MainMenuOwnCustomItem _storeItem;

        private const string StoreIconSvg = @"
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
          <path fill='white' d='M7 7V6a5 5 0 0 1 10 0v1h2a1 1 0 0 1 1 1l-1 11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 8a1 1 0 0 1 1-1h2zm2 0h6V6a3 3 0 0 0-6 0v1z' />
        </svg>";

        protected override void OnStart()
        {
            _storeItem = MainMenu.AddItem("cTrader Store", new SvgIcon(StoreIconSvg));

            var webView = new WebView();
            webView.Loaded += _ =>
            {
                webView.NavigateAsync("http://ctrader.com");
            };

            _storeItem.Child = webView;

            MainMenu.SelectedItemChanged += OnSelectedItemChanged;
        }

        private void OnSelectedItemChanged(MainMenuSelectedItemChangedEventArgs args)
        {
            if (args.NewItem == _storeItem)
            {
                MainMenu.IsExpanded = true;
            }
        }

        protected override void OnStop()
        {
            MainMenu.SelectedItemChanged -= OnSelectedItemChanged;

            if (_storeItem != null)
            {
                MainMenu.RemoveItem(_storeItem);
                _storeItem = null;
            }
        }
    }
}

cTrader 스토어를 선택하면 사용자 정의 섹션으로 이동하여 아래와 같이 콘텐츠를 확인할 수 있습니다.

다중 배치

다음 플러그인은 cTrader UI의 여러 위치에 사용자 정의 요소를 한 번에 추가합니다:

  • 플러그인은 ASP 블록에 현재 열린 모든 포지션의 수수료 합계를 표시합니다.
  • 트레이드 워치 디스플레이에서 플러그인은 모든 열린 포지션의 누적 거래량을 보여줍니다.
  • 플러그인은 또한 사용자 지정 차트 프레임에 ctrader.com의 WebView를 표시합니다.
 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class PluginPlacementTest : Plugin
    {

        private TextBlock _commissionsText;
        private TextBlock _volumeText;
        private WebView _cTraderWebView;

        protected override void OnStart()
        {
            _cTraderWebView = new WebView();
            _cTraderWebView.Loaded += ShowWebsite;

            _commissionsText = new TextBlock
            {
                Text = ShowCommissions(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            _volumeText = new TextBlock
            {
                Text = ShowVolume(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            ChartManager.AddCustomFrame("cTrader.com").Child = _cTraderWebView;
            Asp.SymbolTab.AddBlock("Commissions").Child = _commissionsText;
            TradeWatch.AddTab("Volume").Child = _volumeText;
            Timer.Start(TimeSpan.FromSeconds(0.5));

        }

        protected void ShowWebsite(WebViewLoadedEventArgs args)
        {
            _cTraderWebView.NavigateAsync("https://ctrader.com");
        }

        protected string ShowCommissions()
        {
            double commissionsCounter = 0;
            foreach (var position in Positions)
            {
                commissionsCounter += position.Commissions;
            }
            return commissionsCounter.ToString();
        }

        protected string ShowVolume() 
        {
            double volumeCounter = 0;
            foreach (var position in Positions) 
            {
                volumeCounter += position.VolumeInUnits;
            }
            return volumeCounter.ToString();
        }

        protected override void OnTimer()
        {
            _commissionsText.Text = ShowCommissions();
            _volumeText.Text = ShowVolume();
        }
    }
}

요약

cTrader는 플러그인을 통해 사용자 지정 요소를 배치하는 여러 옵션을 제공합니다. 이를 사용하여 cTrader UI를 사용자 정의하고 플랫폼을 진정으로 당신의 것으로 만들 수 있습니다.

Image title