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

ตำแหน่งปลั๊กอินใน UI ของ cTrader

ปลั๊กอินสามารถเพิ่มองค์ประกอบที่กำหนดเองไปยังพื้นที่ต่าง ๆ ของ UI cTrader เช่น แผงสัญลักษณ์ที่ใช้งานอยู่ (ASP), Trade Watch (TW), กราฟและเฟรมที่กำหนดเอง, หน้าต่างที่กำหนดเองและพื้นที่เมนูหลัก คู่มือนี้แสดงวิธีการใช้แต่ละตัวเลือกเหล่านี้และแนะนำกรณีการใช้งานที่เกี่ยวข้อง

ตำแหน่งปลั๊กอินภายในหนึ่งนาที!

  • ด้วยการขยาย UI ของ cTrader คุณสามารถผสานรวมบริการของบุคคลที่สามเข้ากับเทอร์มินัลการเทรดได้อย่างราบรื่น
  • ปลั๊กอินเดียวสามารถทำงานได้หลายอย่างในพื้นที่ต่าง ๆ ของ UI ช่วยให้คุณปรับแต่งรูปลักษณ์และความรู้สึกของ cTrader ได้
  • คุณสามารถกำหนดค่าองค์ประกอบที่กำหนดเองที่สร้างโดยปลั๊กอินเพื่อให้สามารถถอดออกและติดตั้งกลับไปยังตำแหน่งเดิมใน UI ของ cTrader ได้
  • ไอเดียบางอย่างอาจเหมาะกับพื้นที่เฉพาะของ 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 ให้ใช้คุณสมบัติ Index ของ AspBlock และ AspTab ตามลำดับ

คำเตือน

โปรดทราบว่าไม่สามารถวางแท็บที่กำหนดเองก่อนแท็บ สัญลักษณ์ ได้ คุณยังไม่สามารถฝังบล็อกของคุณสูงกว่าส่วน คำสั่งใหม่ ในแท็บ สัญลักษณ์ ได้ ดังนั้น ดัชนีที่เล็กที่สุดที่เป็นไปได้สำหรับบล็อกที่ฝังใน ASP คือ 1

Trade Watch

Trade Watch ตั้งอยู่ใต้พื้นที่กราฟ คุณสามารถเพิ่มองค์ประกอบที่กำหนดเองที่นั่นเป็นแท็บแยกต่างหาก

นี่คือวิธีที่ปลั๊กอินอาจดูเหมือนเมื่อเพิ

กรณีการใช้งาน

แนวคิดต่อไปนี้เหมาะสำหรับการแสดงใน Trade Watch

  • ชุดการวิเคราะห์แบบกำหนดเองที่แสดงสถิติต่างๆ เกี่ยวกับบัญชีปัจจุบันของผู้ใช้
  • WebView ของฟอรัมเว็บที่เน้นการเทรด

ในการเพิ่มองค์ประกอบที่กำหนดเองเป็นแท็บใหม่ใน Trade Watch ให้ใช้เมธอด 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 คุณสามารถใช้คุณสมบัติ Index ของ Trade WatchTab เพื่อกำหนดตำแหน่งของมันเทียบกับแท็บอื่นๆ ใน Trade Watch

หมายเหตุ

แท็บที่กำหนดเองทั้งหมดที่วางใน Trade Watch จะปรากฏเฉพาะทางด้านขวาสุดของแท็บเริ่มต้นที่รวมอยู่ใน UI ของ cTrader เมื่อเปิดใช้งานเทอร์มินัลครั้งแรก ดังนั้น Index ของแท็บเหล่านี้จะต้องเป็น 1 หรือมากกว่า ดัชนีจะกำหนดเฉพาะตำแหน่งสัมพัทธ์ของแท็บปลั๊กอินเมื่อเทียบกับแท็บปลั๊กอินอื่นๆ

กราฟและ Custom Frame

คุณยังสามารถเลือกที่จะแสดงองค์ประกอบที่กำหนดเองในเฟรมกราฟแยกต่างหาก ซึ่งเป็นการเพิ่มเป็นกราฟใหม่ในมุมมองกราฟปัจจุบันของคุณ นอกจากนี้ ปลั๊กอินยังสามารถเปิดกราฟได้จำนวนเท่าใดก็ได้สำหรับสัญลักษณ์และเฟรมกราฟที่มีอยู่

นี่คือวิธีที่เฟรมกราฟที่กำหนดเองพร้อม WebView จะมีลักษณะอย่างไรเมื่ออยู่ติดกับกราฟปกติ

กรณีการใช้งาน

แนวคิดต่อไปนี้จะดูดีและทำงานได้ดีที่สุดเมื่อฝังอยู่ในเฟรมที่กำหนดเอง:

  • WebView ของบริการสร้างกราฟอื่น
  • แผงการเทรดที่กำหนดเองขนาดใหญ่
  • WebView ของบริการ AI แบบสร้างสรรค์ที่นักเทรดอาจปรึกษาเมื่อตัดสินใจว่าจะตอบสนองต่อการเคลื่อนไหวของตลาดอย่างไร

ในการเพิ่มเฟรมที่กำหนดเองใหม่ ให้ใช้เมธอด 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 จะเปลี่ยนเป็นโหมดหลายกราฟ แม้ว่าโหมดกราฟเดียวหรือโหมดกราฟอิสระจะถูกเปิดใช้งานก่อนหน้านี้ก็ตาม

เมนูหลัก

ปลั๊กอินสามารถถูกเขียนโค้ดเพื่อเพิ่มส่วนที่กำหนดเองเข้าไปใน UI เมนูหลัก นอกเหนือจากส่วนที่มีอยู่ เช่น Trade, Algo, Copy และ Analyze ส่วนที่กำหนดเองที่เพิ่มเข้ามาสามารถบรรจุเว็บไซต์, แดชบอร์ด, ปุ่ม, เครื่องมือ และอื่นๆ ได้

นี่คือโค้ดสำหรับปลั๊กอินง่ายๆ ที่เพิ่มส่วนที่กำหนดเอง cTrader Store ซึ่งบรรจุเว็บไซต์ cTrader Store เข้าไปในเมนูหลัก:

 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 Store จะนำทางไปยังส่วนที่กำหนดเอง ซึ่งจะแสดงเนื้อหาดังที่เห็นด้านล่าง

ตำแหน่งหลายที่

ปลั๊กอินต่อไปนี้เพิ่มองค์ประกอบที่กำหนดเองเข้าไปในหลายตำแหน่งของ UI cTrader พร้อมกัน:

  • ปลั๊กอินแสดงผลรวมของค่าคอมมิชชันสำหรับโพสิชันที่เปิดอยู่ทั้งหมดในบล็อก ASP
  • ใน Trade Watch ปลั๊กอินแสดงปริมาณสะสมของโพสิชันที่เปิดอยู่ทั้งหมด
  • ปลั๊กอินยังแสดง WebView ของ ctrader.com ในเฟรมกราฟที่กำหนดเอง
 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 มีตัวเลือกหลายอย่างสำหรับการวางองค์ประกอบที่กำหนดเองผ่านปลั๊กอิน คุณสามารถใช้ปลั๊กอินเหล่านี้เพื่อปรับแต่ง UI ของ cTrader และทำให้แพลตฟอร์มเป็นของคุณอย่างแท้จริง

Image title