AlgoTraderAlgoTrader Documentation

Chapter 13. Client

13.1. HTML5
13.1.1. Header
13.1.2. Order Table
13.1.3. Transaction Table
13.1.4. Positions Table
13.1.5. Market Data Table
13.1.6. Column Selection and Grouping
13.1.7. Chart Widget
13.1.8. Technologies
13.1.9. HTML5 Custom Widgets
13.2. AlgoTrader Eclipse IDE
13.2.1. AlgoTrader Perspective
13.2.2. Strategy Wizard
13.2.3. AlgoTrader Configuration Editor
13.2.4. Esper Colorer

AlgoTrader provides different types of clients all of which are targeting a different audience and use case:

The AlgoTrader HTML 5 provides the following features.

When AlgoTrader server starts, it automatically opens the client.

To manually open the client, point the browser to one of the following URL.

http://localhost:9090

Alternatively the client can be configured to use a secure connection by setting the following property within conf-core.properties:

security.ssl = true

This will make the client available over a secure connection via:

https://localhost:9443

Using the strategy selection menu located at the top of the screen (to the right), one can select either an aggregated view over the entire system or a strategy specific view.

When a single strategy is selected the client will show orders, transactions, positions and market data subscriptions related to the selected strategy only. When ALL is selected the client will show orders, transactions, positions and market data subscriptions for all strategies.

The header tiles show general figures (like Net Liquidity, Unrealized P&L, Cash, etc.). To configure the tiles, use the settings form accessible from the menu at the top-right of the screen. Using the settings form, one can also configure the order default settings.


To open the general management form, click on the management menu on the top of the screen (to the left).


The management menu provides the following operations:


Notifications are displayed in the lower left hand side of the screen


In case of an Alert an icon will appear at the top right of the screen.


To open the list of all Alerts click on the bell icon. Alerts can be removed from the list by clicking on the close icon


It is possible to extend the HTML5 UI with custom widgets in order to visualize strategy specific data or let the user interact with strategy specific functionality (e.g. modify parameters or change the state of a strategy). the following screen shot shows an example of the custom widget in use by the Appendix B, Example Strategy "Box":


HTML5 custom widgets use websockets over STOMP to communicate with the strategy, for further details please see: Section 28.2, “STOPM messaging over WebSockets transport”.

To integrate the HTML5 custom widget into the main HTML5 front end the following items need to be created inside the strategy. The examples are based on the Appendix B, Example Strategy "Box".

/src/main/resources/html5/index.html

This file contains the layout of the main HTML5 screen including the HTML5 custom widget. The custom widget needs to be included similar to the following code snippet:


<head>
  <meta charset="utf-8">
  <title>AlgoTrader</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
</head>

...

<!-- strategy Column -->
<div class="col col-xs-2">
  <div class="row row-xs-12">
    <div class="col col-xs-12">
      <div id="box"></div>
    </div>
  </div>                                    
</div>
<!-- End of strategy column -->

Please not that the total of all columns and the total of all rows needs to equal 12 (e.g. col-xs-5, col-xs-5 and col-xs-2).

As the code snippet shows it is necessary to also include the jquery and stomp JavaScript libraries.

/src/main/resources/html5/box.html

This file contains the HTML code for the custom widget. Individual tags will be referenced by JavaScript code through tag ids.


<h3>Box Strategy</h3>
<table class="table table-striped ">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>            
    <tbody>
        <tr>
            <td>State</td>
            <td id="box_state"></td>
        </tr>                       
    </tbody>
</table>
<button id="box_terminate" class="btn btn-danger btn-xs" role="button">
  TERMINATE TRADE
</button>
/src/main/resources/html5/box.js

This file contains the JavaScript code for the custom widget:

$.get("box.html", function(result){1


    $("#box").html(result); 
2
    $.get(document.documentURI + "rest/broker/url/ws", function(wsURI){ 
3
        var ws = new WebSocket(wsURI, "stomp"); 
4
        var stompClient = Stomp.over(ws);
        stompClient.connect({}, function(frame) {
            stompClient.subscribe('/topic/strategy.box.metrics', function(message){
5
                var metrics = JSON.parse(message.body));
                $("#box_state").text(metrics.state);
6
            }, { "activemq.retroactive" : true});
    
            $('#box_terminate').on('click', function(event) { 
7
                stompClient.send("strategy.box.terminate", {})
            });
        });         
    });
});
1

Loads the html content

2

Populate the <div id="box"> tag inside index.html with the html content

3

Requests the websocket URI via REST call

4

Connects to stomp of websocket

5

Subscribes for metrics updates of the strategy which are sent to the topic strategy.box.metrics. Setting {"activemq.retroactive" : true} will allow the custom widget to get the last metrics event from the strategy.box.metrics topic upon subscription

6

Populates the content tags with the contents of the metrics events

7

Sets button actions. Clicking the terminate button will send an empty message to the strategy.box.terminate topic.

/src/main/java/ch/algotrader/strategy/box/BoxService.java

The strategy service class is responsible for sending events to the custom widget and for processing incoming events from the custom widget.

Strategy service classes can send events to the custom widget by using the JsonTemplate available inside the strategy service. The following code snippet will send a box event to the topic strategy.box.metrics:

getJsonTemplate().convertAndSend("strategy.box.metrics", box);

Strategy service class methods can be annotated with the JmsListener annotation in order to receive incoming events from the custom widget. The following code snippet will attache the terminateSeries method to the topic strategy.box.terminate:

@JmsListener(destination = "strategy.box.terminate")

public void terminateSeries() {
    ...
}

To see the full source code of above examples please see the corresponding source code of the Appendix B, Example Strategy "Box". Additional HTML5 custom widgets are available inside the example strategies Appendix D, Example Strategy "IPO" and Appendix C, Example Strategy "Pairs Trading".

The AlgoTrader Eclipse IDE provides a perspective (AlgoTrader perspective) which is ideal for quantitative / none technical users of AlgoTrader as it hides all code related artifacts. In addition the AlgoTrader Eclipse IDE contains the Strategy Wizard and the AlgoTrader Configuration Editor.

See section Section 2.1, “Development Environment Installation” for instructions on how to install the AlgoTrader Eclipse IDE.

Quantitative users can use this perspective to modify configurations of the system and trading strategies and start the system with different configurations. Code artifacts (java classes, config files etc.) are not visible in this perspective. However all log-files and reports are shown.

The perspective shows AlgoTrader projects only, i.e. projects that have the AlgoTrader nature (ch.algotrader.quant.ui.algotradernature) defined inside the .project file:


<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
    <name>...</name>
    <comment></comment>
    <projects>
    </projects>
    <buildSpec>
        <buildCommand>
            <name>org.eclipse.jdt.core.javabuilder</name>
            <arguments>
            </arguments>
        </buildCommand>
        <buildCommand>
            <name>org.eclipse.m2e.core.maven2Builder</name>
            <arguments>
            </arguments>
        </buildCommand>
    </buildSpec>
    <natures>
        <nature>org.eclipse.jdt.core.javanature</nature>
        <nature>org.eclipse.m2e.core.maven2Nature</nature>
        <nature>ch.algotrader.quant.ui.algotradernature</nature>
    </natures>
</projectDescription>

It offers the following main capabilities:

The AlgoTrader Configuration Editor provides an editor for AlgoTrader configuration files. For more information on the AlgoTrader configuration functionality please see: Chapter 29, Configuration and Preferences API and Section 5.4, “Strategy Groups”.

To open the AlgoTrader Configuration Editor, right click on an AlgoTrader project, then click the menu item AlgoTrader/Configuration. The AlgoTrader/Configuration menu will only be available if a file with the name applicationContext-client-xxx.xml exists in the project class path. If that file does not exits, the menu item will be disabled and the editor cannot be opened.

Furthermore, the AlgoTrader Configuration Editor behaves differently depending on the content of the applicationContext-client-xxx.xml file. If the configuration file contains strategy group definitions according to Section 5.4, “Strategy Groups” the editor will show three tabs.

The tab Strategy Group allows modification of strategy group definitions.


The image above shows a strategy group configuration file opened in the AlgoTrader Configuration Editor.

On the left hand side of the Strategy Group Tab all available configurations are list and grouped by their Config Class (e.g. Box for ch.algotrader.strategy.box.BoxConfig).

The buttons "New" and "Edit" (1) can be used to add and modify individual configuration items.


The "New" and "Edit" dialog contains the following elements (for details visit: Section 5.4, “Strategy Groups”):

  • Name: the name of the .properties file

  • Config Class: the name of the ConfigBean (see: Section 29.4, “Config Beans”) linked to the .properties file

  • Service Template: The Spring Service Template to use

  • Engine Template: The Spring Esper Template to use

  • Engine Name: The name of the Esper Engine (not editable)

In addition it is possible to rename, duplicate and delete individual items (2). When selecting a configuration the corresponding .properties file will open in the lower part of the Strategy Group Tab (4)

On the right hand side of the Strategy Group Tab individual configurations can be added (5) to different strategy groups where they can be back tested in parallel. Items from the left hand side can be added to multiple groups on the right hand side. When adding an item to a strategy group an allocation weight has to be assigned. When adding multiple items to a strategy group the total weight of the strategy group must be 100%.

The right hand side of the Strategy Group Tab contains buttons to "Create", "Edit", "Rename" and "Delete" strategy groups (3). The button "Run" will start a backtest of the selected strategy group (see Section 13.2.3.4, “Starting Back Tests”)

Both lists in the Strategy Group Tab have moving (6), collapsing/expanding (7), sorting (8) and full text filtering (9) of items. Also there is a function to filter by selected strategy item (10). In addition it is possible to change the orientation between horizontal and vertical (11).

The tab Properties shows a list of all .properties file in the class path which can be edited here


When a property file is selected, the content of that file is shown in a table viewer. The table viewer has two columns: key and value.

The AlgoTrader Configuration Editor supports in-place editing of cells under value column.

In addition to the standard key=value pairs, the AlgoTrader Configuration Editor interprets special comments. These comments provide the AlgoTrader Configuration Editor with the information needed to display the key=value data (i.e. the type of data, the widget class it should use for an in-place editor etc.).

Example:

#{"type":"String","label":"Last name:"}
lastName = Mustermann

#{"type":"String","label":"First name:"}
surName = Joe

#{"type":"Date","required":"false","label":"Date of birth:"}
dateOfBirth = 1980-01-01    

The AlgoTrader Configuration Editor remembers association of each key=value pair with it's special comment. When the editor saves properties back to the .properties, all key=value pairs are written with their special comments.

Each special comment is essentially a JSON object with three attributes: type, required and label. All three attributes are optional.

The AlgoTrader Configuration Editor also supports separators/subtitles. To add a separator, a special comment needs to be defined in the Source tab as follows:

#{"type":"String","label":"Strategy Name"}
strategyName=BOX

#{"type":"Separator"}

#{"type":"Integer","label":"Maximum Units"}
maxUnits=16

#{"type":"Integer","label":"Box Length (in Minutes)"}
boxLength=90

#{"type":"Separator", "label":"Time Settings"}

#{"type":"Integer","label":"Last Day of Trading (6=Friday)"}
endDay=6

#{"type":"Integer","label":"Latest Hour on last Day to enter a new position"}
endHour=16

#{"type":"Integer","label":"Hour on last Day to terminate the series"}
terminateHour=22  

The content of this properties file will be rendered in the Properties tab as follows:


As described in the Section 13.2.1, “AlgoTrader Perspective” section, it is possible to start a back test of a strategy by right clicking on the strategy and selecting AlgoTrader/Run Strategy (this option is only available for strategies that are not using strategy groups).

Back Tests can also be started from within the AlgoTrader Configuration Editor:

  • For strategies without strategy group definitions there is only one possible configuration that can be back tested. To start a back test please click the "Run" button at the top of the Properties tab.

  • For strategies with strategy group definitions multiple configurations exist which can be back tested separately. To start a back test please select the desired strategy group on the right hand side of the Strategy Group Tab and click the "Run" button.

AlgoTrader provides a custom Esper EPL Syntax Highlighter based on the Colorer Library.

Together with the Eclipse Colorer Plugin it provides the following features:

  • Automatic Code Outlining

  • Pairs/Brace Matching

  • Automatic Code Folding

  • Present different colors for:

    • Reserved Keywords

    • Symbols

    • Comments

    • Literals

    • Numbers


Note

The Syntax Highlighter does not provide Code Completion or Syntax Checking!