How to Create Plugins for Active Symbol Panel¶

Plugins make it easy for everyone to create new sections containing website pages or other WebView components, calculators, analytics or data boards, AI tools, etc. in the Active Symbol Panel (ASP).

In this article and its corresponding video, we will show you how to add a new section in the Active Symbol Panel using a plugin.

Creating a Plugin¶

Creating a WebView Section¶

Go to the 'Algo' app and navigate to the 'Plugins' tab. Click the 'New' button to create a new plugin.

Now, tick the 'From the list' option and select 'ASP Section Example'.

Give your plugin a name, such as 'My ASP Example'.

Click the 'Create' button.

When the code editor appears, replace the "My title" part of the code with the name you chose earlier for the plugin.

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

You can copy the full code below:

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

Click the 'Build' button or press Ctrl+B to build the plugin.

It is time to go to the 'Trade' app again to see what the plugin is showing in the 'Active Symbol Panel'. In our case, we now have a WebView component displaying the cTrader forum.

Creating a VWAP Box¶

Let's replace the WebView with a box that displays the Volume-Weighted Average Price (VWAP) of the currently open positions.

Go back to the plugin code and delete the WebView part of the code.

Set the block height to 100.

block.Height = 100;

Define two text blocks that will display the relevant information.

TextBlock _txtBuyVWAP;
TextBlock _txtSellVWAP;

Add a panel for the text boxes.

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

Initialise the two text blocks.

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

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

Add the text boxes to the panel and make the panel a child control of the plugin block.

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

block.Child = panel;

You can copy the full code below:

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

Build the plugin and then go to the 'Trade' app.

This time, you should see two text boxes in place of the WebView component.

Refining the Plugin¶

Adding Logic for the Plugin¶

Go to the plugin code and add the following namespaces:

using System;
using System.Linq;

Implement the logic that calculates the VWAP for buy and sell directions.

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

We also need to add an event to handle the opening of positions so that the VMAP figures are updated automatically when a new position is added.

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

You can copy the full code below:

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

Build the plugin again and go to the 'Trade' app. Now, as you add new buy and sell positions, you should see the VMAP update itself automatically.

Adding Styles for the Plugin¶

We can add some style to the VMAP box.

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

You can copy the full code below:

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

Build the plugin again.

Finally, head to the 'Trade' app to see how the styles have changed the VMAP box.

Summary¶

We hope this article has been helpful in showing you how to add webpages and WebView components, text blocks, and other useful objects to the Active Symbol Panel. To learn more, consult our documentation or post a question on our forums.

Subscribe to our YouTube channel