Saltar a contenido

Cómo crear plugins para el Panel de símbolo activo

Los plugins facilitan la creación de nuevas secciones que contienen páginas de sitios web u otros componentes de WebView, calculadoras, análisis o tableros de datos, herramientas de IA, etc. en el Panel de símbolo activo (ASP).

En este artículo y su video correspondiente, le mostraremos cómo agregar una nueva sección en el Panel de símbolo activo usando un plugin.

Crear un plugin

Crear una sección de WebView

Vaya a la aplicación Algo y navegue a la pestaña Plugins. Haga clic en el botón Nuevo para crear un nuevo plugin. Marque la opción From the list y seleccione ASP Section Example. Asigne un nombre a su plugin, como "My ASP Example".

Haga clic en el botón Create.

Cuando aparezca el editor de código, reemplace la parte "My title" del código con el nombre que eligió para el plugin.

1
var block = Asp.SymbolTab.AddBlock("My ASP Example");

Puede copiar el código completo a continuación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
using cAlgo.API;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class MyASPExample : Plugin
    {
        protected override void OnStart()
        {
            var block = Asp.SymbolTab.AddBlock("My ASP Example");
            block.Index = 2;
            block.Height = 500;
            block.IsExpanded = true;

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

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

Haga clic en el botón Build o presione Ctrl+B para compilar el plugin.

Navegue nuevamente a la aplicación Trade para ver lo que el plugin está mostrando en el Panel de símbolo activo. En nuestro caso, ahora tenemos un componente WebView que muestra el foro de cTrader.

Crear un cuadro VWAP

Para este ejemplo, reemplazaremos el WebView con un cuadro que muestra el precio medio ponderado por volumen (VWAP) de las posiciones actualmente abiertas.

Vuelva al código del plugin y elimine la sección de WebView.

Establezca la altura del bloque en 100.

1
block.Height = 100;

Defina dos bloques de texto que mostrarán la información relevante.

1
2
TextBlock _txtBuyVWAP;
TextBlock _txtSellVWAP;

Agregue un panel para los cuadros de texto.

1
2
3
4
var panel = new StackPanel
{
    Orientation = Orientation.Vertical
};

Inicialice los dos bloques de texto.

1
2
3
4
5
6
7
8
9
_txtBuyVWAP = new TextBlock
{
    Text = "Buy Text Box"
};

_txtSellVWAP = new TextBlock
{
    Text = "Sell Text Box"
};

Agregue los cuadros de texto al panel y haga que el panel sea un control secundario del bloque del plugin.

1
2
3
4
panel.AddChild(_txtBuyVWAP);
panel.AddChild(_txtSellVWAP);

block.Child = panel;

Puede copiar el código completo a continuación:

 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
using cAlgo.API;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class MyASPExample : Plugin
    {
        TextBlock _txtBuyVWAP;
        TextBlock _txtSellVWAP;

        protected override void OnStart()
        {
            var block = Asp.SymbolTab.AddBlock("ASP Section Example");
            block.Index = 2;
            block.Height = 100;
            block.IsExpanded = true;

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical
            };

            _txtBuyVWAP = new TextBlock
            {
                Text = "Buy Text Box"
            };
            _txtSellVWAP = new TextBlock
            {
                Text = "Sell Text Box"
            };

            panel.AddChild(_txtBuyVWAP);
            panel.AddChild(_txtSellVWAP);

            block.Child = panel;
        }
    }  
}

Compile el plugin y luego vaya a la aplicación Trade.

Debería ver dos cuadros de texto en lugar del componente WebView.

Refinar el plugin

Agregar lógica para el plugin

Vaya al código del plugin y agregue los siguientes espacios de nombres:

1
2
using System;
using System.Linq;

Implemente la lógica que calcula el VWAP para las direcciones de compra y venta.

1
2
3
4
5
var buyPositions = Positions.Where(p => p.TradeType == TradeType.Buy);
_txtBuyVWAP.Text = "Buy Positions VWAF: " + Math.Round((buyPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  buyPositions.Sum(p => p.VolumeInUnits)),5);

var sellPositions = Positions.Where(p => p.TradeType == TradeType.Sell);
_txtSellVWAP.Text = "Sell Positions VWAF: " + Math.Round((sellPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  sellPositions.Sum(p => p.VolumeInUnits)),5);

Agregue un evento para manejar la apertura de posiciones, asegurando que las cifras de VWAP se actualicen automáticamente cuando se agrega una nueva posición.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
Positions.Opened += Positions_Opened;

private void Positions_Opened(PositionOpenedEventArgs obj)
{
    var buyPositions = Positions.Where(p => p.TradeType == TradeType.Buy);
    _txtBuyVWAP.Text = "Buy Positions VWAP: " + (buyPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  buyPositions.Sum(p => p.VolumeInUnits));

    var sellPositions = Positions.Where(p => p.TradeType == TradeType.Sell);
    _txtSellVWAP.Text = "Sell Positions VWAP: " + (sellPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  sellPositions.Sum(p => p.VolumeInUnits));        
}

Puede copiar el código completo a continuación:

 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
using System;
using System.Linq;
using cAlgo.API;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class MyASPExample : Plugin
    {
        TextBlock _txtBuyVWAP;
        TextBlock _txtSellVWAP;

        protected override void OnStart()
        {
            var block = Asp.SymbolTab.AddBlock("ASP Section Example");
            block.Index = 2;
            block.Height = 100;
            block.IsExpanded = true;

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical
            };

            _txtBuyVWAP = new TextBlock
            {
                Text = "Buy Text Box"
            };

            _txtSellVWAP = new TextBlock
            {
                Text = "Sell Text Box"
            };

            panel.AddChild(_txtBuyVWAP);
            panel.AddChild(_txtSellVWAP);

            block.Child = panel;

            var buyPositions = Positions.Where(p => p.TradeType == TradeType.Buy);
            _txtBuyVWAP.Text = "Buy Positions VWAF: " + Math.Round((buyPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  buyPositions.Sum(p => p.VolumeInUnits)),5);

            var sellPositions = Positions.Where(p => p.TradeType == TradeType.Sell);
            _txtSellVWAP.Text = "Sell Positions VWAF: " + Math.Round((sellPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  sellPositions.Sum(p => p.VolumeInUnits)),5);

            Positions.Opened += Positions_Opened;
        }


         private void Positions_Opened(PositionOpenedEventArgs obj)
        {             
            var buyPositions = Positions.Where(p => p.TradeType == TradeType.Buy);
            _txtBuyVWAP.Text = "Buy Positions VWAP: " + (buyPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  buyPositions.Sum(p => p.VolumeInUnits));

            var sellPositions = Positions.Where(p => p.TradeType == TradeType.Sell);
            _txtSellVWAP.Text = "Sell Positions VWAP: " + (sellPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  sellPositions.Sum(p => p.VolumeInUnits));        
        }
    }  
}

Compile el plugin nuevamente y vaya a la aplicación Trade. Ahora, a medida que agrega nuevas posiciones de compra y venta, debería ver que el VWAP se actualiza automáticamente.

Agregar estilos para el plugin

Podemos agregar algo de estilo al cuadro VWAP.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var textBoxStyle = new Style();

textBoxStyle.Set(ControlProperty.Margin, 5);
textBoxStyle.Set(ControlProperty.FontFamily, "Cambria");
textBoxStyle.Set(ControlProperty.FontSize, 16);
textBoxStyle.Set(ControlProperty.Width, 200);
textBoxStyle.Set(ControlProperty.ForegroundColor, Color.Yellow, ControlState.Hover);

_txtBuyVWAP = new TextBlock
{
    ForegroundColor = Color.Green,
    Text = "Buy Text Box ",
    Style = textBoxStyle
};

_txtSellVWAP = new TextBlock
{
    ForegroundColor = Color.Red,
    Text = "Sell Text Box",
    Style = textBoxStyle
};

Puede copiar el código completo a continuación:

 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
using System;
using System.Linq;
using cAlgo.API;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class MyASPExample : Plugin
    {
        TextBlock _txtBuyVWAP;
        TextBlock _txtSellVWAP;

        protected override void OnStart()
        {
            var block = Asp.SymbolTab.AddBlock("ASP Section Example");
            block.Index = 2;
            block.Height = 100;
            block.IsExpanded = true;

            var panel = new StackPanel
            {
                Orientation = Orientation.Vertical
            };

            var textBoxStyle = new Style();

            textBoxStyle.Set(ControlProperty.Margin, 5);
            textBoxStyle.Set(ControlProperty.FontFamily, "Cambria");
            textBoxStyle.Set(ControlProperty.FontSize, 16);
            textBoxStyle.Set(ControlProperty.Width, 200);
            textBoxStyle.Set(ControlProperty.ForegroundColor, Color.Yellow, ControlState.Hover);

            _txtBuyVWAP = new TextBlock
            {
                ForegroundColor = Color.Green,
                Text = "Buy Text Box ",
                Style = textBoxStyle
            };

            _txtSellVWAP = new TextBlock
            {
                ForegroundColor = Color.Red,
                Text = "Sell Text Box",
                Style = textBoxStyle
            };

            panel.AddChild(_txtBuyVWAP);
            panel.AddChild(_txtSellVWAP);

            block.Child = panel;

            var buyPositions = Positions.Where(p => p.TradeType == TradeType.Buy);
            _txtBuyVWAP.Text = "Buy Positions VWAF: " + Math.Round((buyPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  buyPositions.Sum(p => p.VolumeInUnits)),5);

            var sellPositions = Positions.Where(p => p.TradeType == TradeType.Sell);
            _txtSellVWAP.Text = "Sell Positions VWAF: " + Math.Round((sellPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  sellPositions.Sum(p => p.VolumeInUnits)),5);

            Positions.Opened += Positions_Opened;
        }

         private void Positions_Opened(PositionOpenedEventArgs obj)
        {             
            var buyPositions = Positions.Where(p => p.TradeType == TradeType.Buy);
            _txtBuyVWAP.Text = "Buy Positions VWAP: " + (buyPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  buyPositions.Sum(p => p.VolumeInUnits));

            var sellPositions = Positions.Where(p => p.TradeType == TradeType.Sell);
            _txtSellVWAP.Text = "Sell Positions VWAP: " + (sellPositions.Sum(p => p.EntryPrice * p.VolumeInUnits) /  sellPositions.Sum(p => p.VolumeInUnits));        
        }
    }  
}

Compile el plugin de nuevo.

Por último, vaya a la aplicación Trade para ver cómo los estilos han cambiado el cuadro VWAP.

Resumen

Esperamos que este artículo haya sido útil para mostrarle cómo agregar páginas web y componentes de WebView, bloques de texto y otros objetos útiles al Panel de símbolo activo.

Image title