Lewati ke isi

Cara menambahkan tombol bilah alat kustom dengan plugin

Plugin memungkinkan Anda untuk menambahkan tombol untuk tindakan, tugas atau konten tertentu ke Bilah alat Grafik di cTrader. Ketika tombol aksi diklik, operasi yang diprogram akan dijalankan.

Dalam artikel ini dan video yang menyertainya, kami akan menunjukkan kepada Anda cara menambahkan tombol baru ke Bilah alat Grafik menggunakan plugin.

Buat plugin

Pertama, kita akan membuat plugin dan mengodenya untuk menampilkan tombol yang membuka posisi ketika diklik.

Buka aplikasi Algo dan navigasikan ke tab Plugin. Klik tombol Baru. Pilih template Kosong. Ketikkan nama untuk plugin Anda, seperti "Tombol Bilah Alat Kustom", lalu klik Buat.

Tambahkan tombol bilah alat.

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

Buat metode yang akan menangani event klik tombol dan membuka beberapa posisi.

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

Anda dapat menyalin kode lengkapnya di bawah ini:

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

Bangun plugin dengan menggunakan hotkey Ctrl+B atau mengklik tombol Bangun. Kemudian, buka aplikasi Trade dan konfirmasi bahwa tombol baru telah ditambahkan ke Bilah alat Grafik.

Ketika Anda mengklik tombol dan memberikan izin, Anda seharusnya melihat beberapa posisi terbuka.

Tambahkan gambar kustom untuk tombol

Jika Anda tidak menyukai ikon default, Anda dapat mengatur gambar pilihan Anda sebagai ikon untuk plugin Anda. Berdasarkan kode XML, gambar SVG adalah objek yang paling umum digunakan sebagai ikon. cTrader Algo menyediakan perintah yang memungkinkan Anda untuk menentukan dan menggunakan gambar SVG kustom sebagai ikon.

Dapatkan kode gambar

Buat atau unduh gambar SVG yang ingin Anda gunakan sebagai ikon. Buka file SVG dalam mode XML di Notepad, Visual Studio Code atau IDE apa pun. Gunakan fungsionalitas Cari dan ganti di program untuk mengganti semua tanda kutip ganda " dengan tanda kutip tunggal '.

Kode XML Anda tidak boleh mengandung tanda kutip ganda.

Salin kode XML yang dihasilkan.

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

Atur ikon baru

Kembali ke aplikasi Algo dan buka editor kode untuk plugin Anda.

Inisialisasi ikon SVG kosong.

1
var icon = new SvgIcon();

Tambahkan kode XML yang Anda ekstrak sebelumnya.

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

Tetapkan ikon ke tombol.

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

Tambahkan tooltip yang menjelaskan fungsionalitas tombol.

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

Anda dapat menyalin kode lengkapnya di bawah ini:

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

Bangun plugin lagi.

Buka aplikasi Trade untuk mengonfirmasi bahwa ikon baru telah muncul.

Tambahkan tombol dengan menu pop-up

Selain tombol yang menjalankan operasi tertentu saat diklik, Anda dapat menambahkan tombol yang menampilkan menu pop-up. Anda dapat menyesuaikan menu yang dihasilkan agar menampilkan beberapa tombol atau satu terminal mini.

Kembali ke editor kode di aplikasi Algo, buat tombol yang membuka menu pop-up dan tambahkan tombol lain yang menyediakan fungsionalitas Tutup semua posisi di dalam menu tersebut. Saat tombol ini diklik, semua posisi yang sebelumnya dibuka akan ditutup.

Tambahkan tombol toolbar baru.

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

Buat tombol baru dan tetapkan gaya untuknya.

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

Deklarasikan panel tumpukan dan tambahkan tombol sebagai turunannya.

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

Tambahkan event untuk menangani tindakan klik tombol.

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

Anda dapat menyalin kode lengkapnya di bawah ini:

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

Bangun plugin.

Buka aplikasi Trade dan gunakan tombol Tutup semua posisi. Kali ini, posisi yang sebelumnya dibuka seharusnya tertutup.

Ringkasan

Kami berharap video dan artikel ini telah membantu Anda memahami cara menambahkan tombol kustom untuk operasi, tugas, dan bahkan menu pop-up ke Toolbar Grafik.