HTML Editor

Tradesignal possesses a built-in HTML editor. With it, you can do the following:
  • Use HTML code to design a GUI or control elements like buttons, lists or entry fields
  • Use active elements written in JavaScript (JS), for example to list all active workspaces. This way you can write control elements that use program functions of Tradesignal.

Use the HTML Editor


HTML Editor
Click on the Insert tab on the toolbar then choose the entry HTML Page.

An editor window opens. In the toolbar, the Editor tab appears with the following buttons:

Show Browser - Interprets the HTML or JavaScript Code and displays the result in a browser.

Show Editor - Switch from the browser back to the editor.

Undo - Undo the last action (multiple undoes possible).

Redo - Repeat the last action (multiple repeats possible).

Select All (Ctrl+A) - Selects all code. You can use the standard Windows key commands to copy the code with "Ctrl+C" and then paste with "Ctrl+V", e.g. into a text editor.

To display HTML or JS code, simply enter it in the HTML editor and click on Show Browser.

Search and Replace

For editing the code, the Find group in the toolbar is available.
  • Click on Find to enter a search term in a search pane.
  • Click on Comment/Uncomment Selection to comment/uncomment selected lines using HTML comments.
  • With Replace you can replace one or all appearances of a code text with another text.
  • For very long scripts, you can use Goto Line to jump to a code line.

JavaScript in the HTML Editor

JavaScript offers you a connection to the inner workings of Tradesignal. With JS and a number of interface commands it is possible to control various functions of Tradesignal. Here a list of possible script commands:

// Global variable to access the TSEPublic object, e.g.:
//
// var selectedWorkspace = TradeSignal.GetSelectedWorkspace();
//
TradeSignal

// The Tradesignal script root element, reachable with JavaScript by either using window.external or the TradeSignal global variable
class TSEPublic
    // Returns a collection of all saved workspaces
    GetSavedWorkspaces() : TSEWorkspaceCollection

    // Returns a collection of all open workspaces
    GetOpenWorkspaces() : TSEWorkspaceCollection

    // Returns the currently selected workspaces
    GetSelectedWorkspace() : TSEWorkspace

    // Returns the last selected workspace, selected before the
    // current workspace was selected, this is useful for operating
    // on a target workspace from within an HTML page in another
    // desktop
    GetLastSelectedWorkspace() : TSEWorkspace

    // Returns the total RAM managed and used by Tradesignal
    GetTotalMemory() : int

    // Returns the current timezone set by the user in
    // Olsen format (e.g. Europe/Berlin)
    GetUserTimeZone() : string

    // Returns the current version number of Tradesignal (x.y.z)
    GetVersion() : string
    
    // Like the Bang! Command !new
    Create( whatToCreate : string, parameters : string ) : TSEDocument

    // Opens a new chart and returns it with an instrument
    CreateNewChart( symbol : string ) : TSEDocument

    // Opens a new chart with an instrument optionally allowing
    // the chart type and scale alignment to be set.
    // Use a parameter string of the form:
    //
    // "charttype=line(open); scale=left; subchart=false"
    //
    // valid values for scale are left|right|both
    // valid values for charttype are:
    // line(field), bar, candlestick, candlevolume,
    // equivolume, symbol(field), stepped(field),
    // area(field1, field2), forest(field), linkedforest(field),
    // renko(field), pointfigure, heikinashi, kagi, tlb
    // valid values for subchart are true|false
    // valid values for field are open|close|high|low|volume|openinterest
    CreateNewChartEx(symbol : string, parameters : string) : TSEDocument

    // Opens a new Market Profile and returns it with an instrument
    CreateNewMarketProfile( symbol : string ) : TSEDocument

    // Opens a new chart and returns it with an indicator
    CreateNewInstantIndicator( equillaCode : string ) : TSEDocument

    // Opens a new chart and returns it with an indicator series
    CreateNewInstantIndicatorSeries( equillaCode : string ) : TSEDocument

    // Opens and returns a new webbrowser containing the given url
    CreateNewBrowser( url : string ) : TSEDocument

    // Opens and returns a new scanner with an instrument
    CreateNewMarketScanner( symbol : string ) : TSEDocument

    // Opens and returns a new workspace
    CreateNewWorkspace() : TSEWorkspace

    // Passes the entered key string as the value of an additional
    // parameter called sessionkey that will be appended to all
    // TXML data requests to a server identified by the URL
    // parameter
    SetMixinDataSessionKey(url : string, key : string)

    // Shows the Tradesignal Help
    ShowHelp()

    // Shows the Equilla Help
    ShowEquillaHelp()

// A collection of workspaces. The collection is zero (0) based
class TSEWorkspaceCollection

    // Returns the workspace of a certain position in the collection
    ItemAt( index : int ) : TSEWorkspace
    
    // Returns the number of workspaces in the collection
    GetLength() : int
    
    // Returns the workspace with a certain name
    Find( workspaceName : string ) : TSEWorkspace

// An element representing a certain workspace in Tradesignal
class TSEWorkspace

    // Returns the workspace title
    GetTitle() : string

    // Returns true in case the workspace is open, otherwise false
    IsOpen() : bool

    // Returns true in case the workspace is included in the currently open file list, otherwise false
    IsRecent() : bool

    // Returns true if the workspace was open at the last shutdown of Tradesignal, otherwise false
    WasPreviouslyOpen() : bool

    // Opens the workspace or activates it, if it is already open
    Open() : bool

    // Closes the workspace; optionally other saving dialogs can be suppressed
    Close( suppressDialogs : bool ) : bool
    
    // Like the Bang Command !new except that it selects the workspace first
    Create( whatToCreate : string, parameters : string ) : bool

    // Selects the workspace if it is open
    Select() : bool

    // Returns a collection of all documents in the workspace
    GetDocuments() : TSEDocumentCollection

    // Returns the currently selected document in the workspace
    GetSelectedDocument() : TSEDocument

// A collection of workspace elements (documents), the collection is zero (0)
// based
class TSEDocumentCollection

    // Returns the document of a certain position in the collection
    ItemAt( index : int ) : TSEDocument

    // Returns the number of documents in the collection
    GetLength() : int

    // Returns the document with a certain name
    Find( wokspaceName : string ) : TSEDocument

// An object which represents an element in the workspace, this could be
// a Chart, Browser, Scanner, etc.
class TSEDocument

    // Returns the document name
    GetDocumentTitle() : string

    // Returns the name of the selected element in the document
    GetSelectedItemTitle() : string
    
    // Returns the document type: Chart, Browser, TextEditor, PriceEditor,
    //MarketProfile, MarketScanner, WorkspaceInterfaceScript, Statistics, Trades or Optimiser
    GetDocumentType() : string

    // Selects the document
    Select() : bool

    // Selects the document and executes !replace
    Replace( itemToReplaceSelectedItem : string ) : bool

    // Selects the document and executes !replaceall
    ReplaceAll( itemToReplaceAllCurrentItems : string ) : bool

    // Selects the document and executes !add
    Add( itemToAdd : string ) : bool

    // Selects the document and adds an item optionally allowing
    // the chart type, scale alignment and subchart to be set.
    // Use a parameter string of
    // the form:
    //
    // "charttype=line(open); scale=left; subchart=false"
    //
    // valid values for scale are left|right|both
    // valid values for charttype are:
    // line(field), bar, candlestick, candlevolume,
    // equivolume, symbol(field), stepped(field),
    // area(field1, field2), forest(field), linkedforest(field),
    // renko(field), pointfigure, heikinashi, kagi, tlb
    // valid values for subchart are true|false
    // valid values for field are open|close|high|low|volume|openinterest
    AddEx( itemToAdd : string, parameters : string) : bool

    // Selects the document and executes a setp property action,
    // valid property names and values are:
    //
    // "period" - period in seconds (0 for tick, 86400 for daily)
    // "dateaxismode" - normal|seasonal
    // "historylength" - number of bars of data to load
    Set( propertyName : string, value : string ) : bool

    // Selects the document and executes sets the value for all
    // instruments in all subcharts, see Set() for available
    // properties
    SetAll (propertyName : string, value : string) : bool

    // Evaluates the Equilla Code and adds it to the document
    Eval( equillaScript : string ) : bool

    // Evaluates the Equilla Code Series and adds it to the document
    EvalSeries( equillaScript : string ) : bool

    // Selects the document and executes !close document
    Close() : bool

Example: Listing all available workspaces with JavaScript

In this tutorial we will design a simple JavaScript that will display a list of all available workspaces.

Step 1: Start a HTML page and enter the page frame

Open a new, empty workspace. Then open the button menu Layout and select the entry Insert HTML Element. An empty HTML editor opens. For a correct page frame, please enter the following source code:

<html>
<head>
    <title>List Workspaces</title>
</head>
<body>

</body>
</html>

Step 2: Adding the list element and the scripting area

Now copy the following line between the Body Tags:

<select name="Workspaces" style="position:absolute; left:10px; top:20px; width:150px" >
</select>


The line includes the HTML code for the list with position and width values. When you now click on Show Browser in the toolbar, you can see the new page with an empty list. Click on Show Editor to edit the code again.

Now we can define the area for the JavaScript source code. Copy the following code into the line below the list. The code assigns the collection of all saved workspaces to a variable.

<script language="JavaScript" type="text/javascript">
    //Array with workspaces and number of elements
    var savedCollection = TradeSignal.GetSavedWorkspaces();
    var maxIter = savedCollection.GetLength();
</script>

Step 3: Designing and testing the JavaScript


Final script in the editor
In the upper part we have set up a HTML page and the basis for a JavaScript. The list of workspaces was copied into a variable. To be able to read out the list later, we need the number of included elements. This value is also saved as a variable.

In the following script, a reference to the list is set, so that we can add a list entry for every workspace in the collection. To read out the collection, we need a loop that runs over all workspaces. Add the following lines in the script area:

//Reference to the list
var listRef = document.getElementById("Workspaces");
//loop
for( iter = 0; iter < maxIter; iter++ )
{
    //Read the workspace names
    var wsName = savedCollection.ItemAt(iter).GetTitle();
    //Generate a list entry
    var listEntry = new Option(wsName, iter );
    //Add the list entry to the list
    listRef.options[listRef.options.length] = listEntry;
}

The complete script

Here you can see the complete code of the script.

<html>
<head>
    <title>List Workspaces</title>
</head>
<body>

<select name="Workspaces" style="position:absolute; left:10px; top:20px; width:150px" >

<script language="JavaScript" type="text/javascript">
//Array with workspaces and number of elements
var savedCollection = TradeSignal.GetSavedWorkspaces();
var maxIter = savedCollection.GetLength();
//Reference to the list
var listRef = document.getElementById("Workspaces");

//loop
for( iter = 0; iter < maxIter; iter++ )
{
    //Read the workspace names
    var wsName = savedCollection.ItemAt(iter).GetTitle();
    //Generate a list entry
    var listEntry = new Option(wsName, iter );
    //Add list entry to list
    listRef.options[listRef.options.length] = listEntry;
}
</script>

</select>
</body>
</html>


To view the result, click on Show Browser again. A list of all workspaces appears.

Note that you cannot save the HTML script itself, only the workspace in which it was created.