Skip to content

How to create custom frame plugins

Traders often strive to keep websites with important trading and technical analysis information as close as possible to the charts. Plugins empower them to achieve this through custom frames.

In this article and its corresponding video, we will show you how to create custom frames that can house websites and textboxes using a plugin.

Create a custom frame showing a website

We will create a custom frame in the charts area to house a website.

Go to the Algo app and switch to the Plugins tab. Click the New button to create a new plugin. Tick the Blank option. Give your plugin a name, such as "My Custom Frame Example", and click the Create button.

When the code editor appears, initialise a WebView object.

1
_cTraderWebView = new WebView();

Subscribe to the WebView loaded event.

1
_cTraderWebView.Loaded += _cTraderWebView_Loaded;

Set the cTrader Forum as the website in the WebView when it loads.

1
2
3
4
private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args) 
{
    _cTraderWebView.NavigateAsync("https://ctrader.com/forum");
}

Initialise a custom chart frame.

1
var webViewFrame = ChartManager.AddCustomFrame("Forum");

Assign the WebView as a child to the custom chart frame.

1
webViewFrame.Child = _cTraderWebView;

Set the custom chart frame to multi-chart mode.

1
webViewFrame.ChartContainer.Mode = ChartMode.Multi;

Attach it to the charts.

1
webViewFrame.Attach();

You can copy the full code below:

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

        WebView _cTraderWebView = new WebView();

        protected override void OnStart()
        {
            _cTraderWebView.Loaded += _cTraderWebView_Loaded;
            var webViewFrame = ChartManager.AddCustomFrame("Forum");
            webViewFrame.Child = _cTraderWebView;
            webViewFrame.ChartContainer.Mode = ChartMode.Multi;
            webViewFrame.Attach();
        }

        private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
        {
            _cTraderWebView.NavigateAsync("https://ctrader.com/forum");
        }

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

To build our plugin, use the Ctrl+B hotkeys or click the Build button.

To view the results, go to the Trade app. In our case, the cTrader Forum webpage is now displayed in our custom frame in the charts area.

Manage the custom frame

The custom frame housing the cTrader Forum website can be managed like any chart frame in cTrader. It can be detached and reattached to the chart area, resized, swapped or replaced with other charts.

Change the website URL

We will replace the cTrader Forum website with another webpage.

Return to the Algo app and edit the plugin code. Replace cTrader Forum URL (https://ctrader.com/forum) with Spotware URL (https://www.spotware.com).

This should be the resulting line of code:

1
_cTraderWebView.NavigateAsync("https://www.spotware.com");

Build the plugin again and go to the Trade app to view the changes. The Spotware website is now displayed on the custom frame.

Add multiple frames

We will update the plugin code to add two custom frames, each displaying a website. Add a new WebView object and repeat the code steps and lines from the previous example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
WebView _cTraderWebView = new WebView();
WebView _cTraderWebViewSite = new WebView();

_cTraderWebViewSite.Loaded += _cTraderWebViewSite_Loaded;
var webViewFrameSite = ChartManager.AddCustomFrame("Site");
webViewFrameSite.Child = _cTraderWebViewSite;
webViewFrameSite.ChartContainer.Mode = ChartMode.Multi;
webViewFrameSite.Attach();

private void _cTraderWebViewSite_Loaded(WebViewLoadedEventArgs args)
{
    _cTraderWebViewSite.NavigateAsync("https://www.spotware.com");
}

You can copy the full code below:

 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
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 MyCustomFrameExample : Plugin
    {
        WebView _cTraderWebView = new WebView();
        WebView _cTraderWebViewSite = new WebView();

        protected override void OnStart()
        {
            _cTraderWebView.Loaded += _cTraderWebView_Loaded;
            var webViewFrame = ChartManager.AddCustomFrame("Forum");
            webViewFrame.Child = _cTraderWebView;
            webViewFrame.ChartContainer.Mode = ChartMode.Multi;
            webViewFrame.Attach();

            _cTraderWebViewSite.Loaded += _cTraderWebViewSite_Loaded;
            var webViewFrameSite = ChartManager.AddCustomFrame("Site");
            webViewFrameSite.Child = _cTraderWebViewSite;
            webViewFrameSite.ChartContainer.Mode = ChartMode.Multi;
            webViewFrameSite.Attach();
        }

        private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
        {
           _cTraderWebView.NavigateAsync("https://www.ctrader.com/forum");
        }

        private void _cTraderWebViewSite_Loaded(WebViewLoadedEventArgs args)
        {
           _cTraderWebViewSite.NavigateAsync("https://www.spotware.com");
        }

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

Build the plugin. When you return to the Algo app, you should see two websites (cTrader Forum and Spotware) in individual frames.

Create a text box

In addition to chart frames housing webpages, plugins allow you to add custom frames containing other objects. For example, you can add a frame that houses a text box.

Remove all the WebView code lines and add the following lines for a text box instead:

1
2
3
4
5
6
7
8
9
var webViewFrame = ChartManager.AddCustomFrame("Hello World");

var txtHelloWorld = new TextBlock
{
    Text = "Hello World"
};
webViewFrame.Child = txtHelloWorld;
webViewFrame.ChartContainer.Mode = ChartMode.Single;
webViewFrame.Attach();

You can copy the full code below.

 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
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 MyCustomFrameExample : Plugin
    {
        protected override void OnStart()
        {
            var webViewFrame = ChartManager.AddCustomFrame("Hello World");

            var txtHelloWorld = new TextBlock
            {
                Text = "Hello World"
            };

            webViewFrame.Child = txtHelloWorld;
            webViewFrame.ChartContainer.Mode = ChartMode.Single;
            webViewFrame.Attach();
        }

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

Build the plugin and view the results in the Trade app. This time, you should see a box with the Hello World text in the charts area.

Summary

You should now be adept at using plugins to incorporate webpages, text boxes and other useful elements into the chart area.

Subscribe to our YouTube channel