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

วิธีสร้างปลั๊กอินสำหรับ Trade Watch

ความสามารถในการเพิ่มแท็บใหม่ใน Trade Watch ทำให้ UI ของ cTrader สามารถปรับแต่งได้อย่างแท้จริงและปรับตัวให้เข้ากับความต้องการในการเทรดที่หลากหลาย

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

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

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

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

เพิ่มแท็บใหม่ในแผง Trade Watch และตั้งชื่อว่า Previous Bar Info

1
2
var tradeWatchTab = TradeWatch.AddTab("Previous Bar Info");
tradeWatchTab.IsSelected = true;

เพิ่มคอมโพเนนต์ WebView อย่างง่าย

1
2
3
4
var webView = new WebView();                        
tradeWatchTab.Child = webView;

webView.NavigateAsync("https://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
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 PreviousBarInfo : Plugin
    {
        protected override void OnStart()
        {
            var tradeWatchTab = TradeWatch.AddTab("Previous Bar Info");
            tradeWatchTab.IsSelected = true;

            var webView = new WebView();                        
            tradeWatchTab.Child = webView;

            webView.NavigateAsync("https://ctrader.com/");

        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

เพื่อสร้างปลั๊กอิน ให้คลิกปุ่ม สร้าง หรือใช้ปุ่มลัด Ctrl+B

ไปที่แอป Trade เพื่อดูว่าปลั๊กอินของคุณกำลังแสดงอะไร

การใช้คอมโพเนนต์ WebView คุณสามารถแสดงเว็บไซต์ใดๆ ภายในปลั๊กอินโดยการตั้งค่า URL ของเว็บไซต์ในโค้ดปลั๊กอิน นอกจากนี้ คุณยังสามารถสร้างปลั๊กอินที่แตกต่างกันสำหรับเว็บไซต์ที่คุณใช้ในการเทรดประจำวันและเปิดหรือปิดใน การตั้งค่า ของ cTrader

เพิ่มตารางและกล่องข้อความลงในปลั๊กอิน

กลับไปที่แอป Algo และแก้ไขโค้ดปลั๊กอิน

เราต้องแทนที่คอมโพเนนต์ WebView ด้วยวัตถุตารางและทำให้แต่ละตารางเป็นลูกของปลั๊กอิน Trade Watch

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var grid = new Grid(2, 2) 
{
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
    ShowGridLines = true,
    Height = 150,
    Width = 150,
};

tradeWatchTab.Child = grid;

จัดตารางให้อยู่ตรงกลางของปลั๊กอินและแสดงเส้นตาราง

คุณสามารถคัดลอกโค้ดทั้งหมดด้านล่างนี้:

 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
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 PreviousBarInfo : Plugin
    {
        protected override void OnStart()
        {
            var tradeWatchTab = TradeWatch.AddTab("Previous Bar Info");
            tradeWatchTab.IsSelected = true;

            var grid = new Grid(2, 2) 
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                ShowGridLines = true,
                Height = 150,
                Width = 150,
            };

            tradeWatchTab.Child = grid;

        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

สร้างปลั๊กอิน จากนั้นไปที่แอป Trade เพื่อดูผลลัพธ์

เราจะปรับปรุงโค้ดปลั๊กอินต่อไปในแอป Algo

ประกาศกล่องข้อความสำคัญสี่กล่อง (สำหรับค่าเปิด สูง ต่ำ และปิด) และตัวแปรแท่งเทียน

1
2
3
4
5
TextBlock _lowBlock;
TextBlock _highBlock;
TextBlock _closeBlock;
TextBlock _openBlock;
Bars _bars;

เพิ่มตัวแปรแท่งเทียนที่ดึงข้อมูลแท่งเทียนรายนาทีสำหรับสัญลักษณ์ USDJPY

1
_bars = MarketData.GetBars(TimeFrame.Minute, "USDJPY");

เริ่มต้นกล่องข้อความและจัดให้อยู่ตรงกลางของเซลล์

 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
_lowBlock = new TextBlock 
{
    Text = "Low:" + _bars.LowPrices.LastValue,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
};

_highBlock = new TextBlock 
{
    Text = "High:" + _bars.HighPrices.LastValue,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
};

_closeBlock = new TextBlock 
{
    Text = "Close:" +_bars.ClosePrices.LastValue,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
};

_openBlock = new TextBlock 
{
    Text = "Open:" + _bars.OpenPrices.LastValue,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
};

หลังจากเริ่มต้นกล่องข้อความแล้ว เราสามารถเพิ่มลงในเซลล์ตารางของเราได้

1
2
3
4
grid.AddChild(_lowBlock, 0, 0);
grid.AddChild(_highBlock, 0, 1);
grid.AddChild(_openBlock, 1, 0);
grid.AddChild(_closeBlock, 1, 1);

คุณสามารถคัดลอกโค้ดทั้งหมดด้านล่างนี้:

 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
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 PreviousBarInfo : Plugin
    {

        TextBlock _lowBlock;
        TextBlock _highBlock;
        TextBlock _closeBlock;
        TextBlock _openBlock;
        Bars _bars;

        protected override void OnStart()
        {
            var tradeWatchTab = TradeWatch.AddTab("Previous Bar Info");
            tradeWatchTab.IsSelected = true;

            var grid = new Grid(2, 2) 
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                ShowGridLines = true,
                Height = 150,
                Width = 150,
            };

            tradeWatchTab.Child = grid;

            _bars = MarketData.GetBars(TimeFrame.Minute, "USDJPY");

            _lowBlock = new TextBlock 
            {
                Text = "Low:" + _bars.LowPrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            _highBlock = new TextBlock 
            {
                Text = "High:" + _bars.HighPrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            _closeBlock = new TextBlock 
            {
                Text = "Close:" +_bars.ClosePrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            _openBlock = new TextBlock 
            {
                Text = "Open:" + _bars.OpenPrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            grid.AddChild(_lowBlock, 0, 0);
            grid.AddChild(_highBlock, 0, 1);
            grid.AddChild(_openBlock, 1, 0);
            grid.AddChild(_closeBlock, 1, 1);

        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

สร้างปลั๊กอินแล้วไปที่แอป Trade เพื่อดูการเปลี่ยนแปลง

สมัครรับอีเวนต์

นำทางกลับไปยังโค้ดต้นฉบับของปลั๊กอินในแอป Algo เพิ่มบรรทัดโค้ดต่อไปนี้เพื่อสมัครรับอีเวนต์ tick และทำให้ค่าอัปเดตในทุก tick:

1
2
3
4
5
6
7
8
9
_bars.Tick += _bars_Tick;

private void _bars_Tick(BarsTickEventArgs obj)
{
    _lowBlock.Text = "Low: " +_bars.LowPrices.LastValue.ToString();
    _highBlock.Text = "High: " +_bars.HighPrices.LastValue.ToString();
    _openBlock.Text = "Open: " +_bars.HighPrices.LastValue.ToString();
    _closeBlock.Text = "Close: " +_bars.HighPrices.LastValue.ToString();
}

คุณสามารถคัดลอกโค้ดทั้งหมดด้านล่างนี้:

 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
80
81
82
83
84
85
86
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 PreviousBarInfo : Plugin
    {
        TextBlock _lowBlock;
        TextBlock _highBlock;
        TextBlock _closeBlock;
        TextBlock _openBlock;
        Bars _bars;

        protected override void OnStart()
        {
            var tradeWatchTab = TradeWatch.AddTab("Previous Bar Info");
            tradeWatchTab.IsSelected = true;

            var grid = new Grid(2, 2) 
            {
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                ShowGridLines = true,
                Height = 150,
                Width = 150,
            };

            tradeWatchTab.Child = grid;

            _bars = MarketData.GetBars(TimeFrame.Minute, "USDJPY");

            _lowBlock = new TextBlock 
            {
                Text = "Low:" + _bars.LowPrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            _highBlock = new TextBlock 
            {
                Text = "High:" + _bars.HighPrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            _closeBlock = new TextBlock 
            {
                Text = "Close:" +_bars.ClosePrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            _openBlock = new TextBlock 
            {
                Text = "Open:" + _bars.OpenPrices.LastValue,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
            };

            grid.AddChild(_lowBlock, 0, 0);
            grid.AddChild(_highBlock, 0, 1);
            grid.AddChild(_openBlock, 1, 0);
            grid.AddChild(_closeBlock, 1, 1);

            _bars.Tick += _bars_Tick;            

        }

        private void _bars_Tick(BarsTickEventArgs obj)
        {
            _lowBlock.Text = "Low: " +_bars.LowPrices.LastValue.ToString();
            _highBlock.Text = "High: " +_bars.HighPrices.LastValue.ToString();
            _openBlock.Text = "Open: " +_bars.HighPrices.LastValue.ToString();
            _closeBlock.Text = "Close: " +_bars.HighPrices.LastValue.ToString();
        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

สร้างปลั๊กอินและไปที่แอป Trade

สรุป

หลังจากอ่านบทความนี้ เราเชื่อว่าตอนนี้คุณสามารถเพิ่มเว็บไซต์ ตาราง กล่องข้อความ และวัตถุที่มีประโยชน์อื่นๆ ลงในแผง Trade Watch ได้แล้ว