HTML Editor

Help > 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 Layout button in the Workspace group to open the menu. Then choose the entry Insert HTML Element.

An editor window opens. In the toolbar, the HTML Editor group 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.
Click on Find Again to jump to the next appearance of the search term.
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 (available in
    // Tradesignal 5.6). 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
    // (available in Tradesignal 5.6). 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.

Social Bookmarking