Alternative Log File with the Use of HTML and CSS

Antoniuk Oleg | 14 May, 2007

Why Should I Use It or Where the Problem Lies?

Any Expert Advisor is supplied with the features that allow the data output about its functioning, current status, unforeseen situations and other events. Using the data generated by the Expert Advisor, you can trace the chronology of all events detected even without launching the Meta Trader. We can easily find the necessary day and try to find the information. But the problem is that EAs can generate a huge amount of messages, which cannot be sorted out easily even by the developer of the Expert Advisor, not mentioning the users who are not aware of creating EAs. If we open a typical log file, we will see a lot of homogeneous information presented in hundreds and thousands of lines.

Now imagine how much easier the work would be, if the log file was organized in the following way: the errors and unexpected situations would be marked with the font of the larger size in red color, alerts would be in peach color of the smaller size, the service information would be in bright green color, all trading transactions in blue, and so on. In other words when you look at this log file you can easily understand what has happened and what the EA wants to tell you without reading it and going into details. You are looking fluently at the tens of the lines and do not see any red or peach line – it means that there are no errors and alerts, and everything is fine. You are looking through the messages in blue color for a few seconds and make sure that the orders have been placed correctly. Just a dream? Not at all – we are going to write a library for realizing this contrivance.

So in this present article, we will describe the process of writing a simple but a very powerful library for making the html files, will learn to adjust their displaying and will see how they can be easily implemented and used in your Expert Advisor or the script

What Will be Used?

We will use HyperText Markup Language (HTML) for making the files and Cascading Style Sheets (CSS) for adjusting the external view in the way you like. What is HTML? It is a language that describes the webpages. Thanks to it you can read this text now. We will not study the HTML code – you should just believe my words and to take the things as they are. We will watch the logs with Internet Explorer, Opera, or some other browsers – it is no much difference.

Making the generateHTML Library

Now you should launch MetaEditor and start the procedure. We are making a new library and insert this code:

//+------------------------------------------------------------------+
//|                                                 generateHTML.mq4 |
//|                                               banderassa@ukr.net |
//+------------------------------------------------------------------+
#property copyright "Copyright © 2006, Antonio Banderass. All rights reserved" 
#property link      "banderassa@ukr.net"
#property library
//---- 
int htmlFileHandle=-1;
//+------------------------------------------------------------------+
//| CreateHtmlFile                                                   |
//+------------------------------------------------------------------+
int CreateHtmlFile(string fileName, string title, string style = 
                   "styles/default.css")
  {
   int handle = FileOpen(fileName, FILE_CSV|FILE_WRITE, " ");
   if(handle > 0)
     {
       htmlFileHandle = handle;
       FileWrite(handle,
                "<html><head><title>", title,
                "</title><link rel=stylesheet href=", style, " type=text/css>",
                "</head><body id=body><div align-center><h3 id=title>", title,
                "</h3></div><hr noshade id=hr>");   
     }
   else
       Print("generateHTML library: error while creating html file");
   return (handle);
  }
//+------------------------------------------------------------------+
//| CloseHtmlFile                                                    |
//+------------------------------------------------------------------+
void CloseHtmlFile()
  {
   if(htmlFileHandle > 0)
     {
       FileWrite(htmlFileHandle, "</body></html>");
       FileClose(htmlFileHandle);   
     }
  }
//+------------------------------------------------------------------+
//| WriteMsg                                                         |
//+------------------------------------------------------------------+
void WriteMsg(string text, string style = "text")
  {
   FileWrite(htmlFileHandle, "<font id=", style, ">", text, "</font>");
  }
//+------------------------------------------------------------------+
//| WriteMsgLn                                                       |
//+------------------------------------------------------------------+
void WriteMsgLn(string text, string style = "text")
  {
   FileWrite(htmlFileHandle, "<font id=", style, ">", text, "</font><br>");
  }
//+------------------------------------------------------------------+
//| WriteMsgTime                                                     |
//+------------------------------------------------------------------+
void WriteMsgTime(string text, string style = "text")
  {
   FileWrite(htmlFileHandle, "<font id=", style, ">" + TimeToStr(CurTime()) + 
             ": ", text, "</font>");
  }
//+------------------------------------------------------------------+
//| WriteMsgTimeLn                                                   |
//+------------------------------------------------------------------+
void WriteMsgTimeLn(string text, string style = "text")
  {
   FileWrite(htmlFileHandle, "<font id=", style, ">" + TimeToStr(CurTime()) + 
             ": ", text, "</font><br>");
  }
//+------------------------------------------------------------------+

Save this file with “generateHTML.mq4” name in “libraries” folder. The library uses only the embedded functions of the mql4 language, so we don’t need to add anything. Press F5. I should mention that the library simply creates the text files and fills it with HTML code using the functions FileOpen(), FileClose() и FileWrite(). There is no sense in explaining the each tag, just believe my words.

Preparing for Work

For normal work we should configure the library. Go to the “...MetaTrader/experts/files”, create the ”logs” folder, open it and create one more folder "styles". Then go to the last folder, create the file "default.css" there and insert this text:

#body
  { 
   background-color: dimgray;
  }
 
#title
  {
   font-size:200%;
   color: greenyellow;
  }
 
#text
  {
   font-size: 150%;
   color: greenyellow;
  }
 
#error
  {
   font-size: 180%;
   color: orangered;
  }
 
#warning
  {
   font-size: 120%;
   color: gold;
  }

We will discuss this in details later, now save the file and close the pad. The preparing of the library is finished. Let us see what features it has.

Creating our First Html File.

Create a blank text script. At the beginning of the source add the library using the “#include” directive:

#include "..\libraries\generateHTML.mq4"

Then we will put some code to the start() function:

CreateHtmlFile("logs\log1.html","testing library generateHTML "+TimeToStr(CurTime()));

This function creates a html file with the “log1.html’ name in the “logs” folder. The second parameter is a heading which will be placed at the beginning of the file. We will discuss the last parameter later, it is missing at this stage because the default value is used.

Now everything is ready for the messages output. Here we go:

WriteMsgLn("WriteMsgLn(). Test message");

This function displays a simple text message. As you can see everything is very easy. The only parameter is the text of the message. The simplicity results into some limitations: we cannot open and work with the severl files simultaneously. Soon I will tell you how to solve this small problem. The next message will be displayed in a new line. The name of the function tells us about the actions it performs: Ln takes from Line New, which means a new line. Going further:

WriteMsgLn("WriteMsgLn(). Warning message","warning");

We have just defined the second parameter. It says that this message should be displayed in "warning" style. It means that the text will be in peach color and will be a little bit bigger than the common text. these parameters of displaying are set in the "default.css" file, which will be described later. We set the “text” style by default, e.g. the two following calls will be identical:

WriteMsgLn("WriteMsgLn(). Message");
WriteMsgLn("WriteMsgLn(). Message","text");

We are testing the different styles:

WriteMsgLn("WriteMsgLn(). Error message","error");

Actually the same, but in the “error” style. The text will be red and bigger than the previous one. Now let us describe the functions for simultaneous displaying of messages and time:

WriteMsgTimeLn("WriteMsgTimeLn(). Message with time");

In addition to the message the current time will be displayed. It will be placed in the beginning of the line. You can also define the style of the message, in the same way as it was before:

WriteMsgTimeLn("WriteMsgTimeLn(). Warning message with time","warning");
WriteMsgTimeLn("WriteMsgTimeLn(). Error message with time","error");

If you want to display a couple of messages in a single line, use the WriteMsg() and WriteMsgTime() functions. They are identical to the previous ones, but display the messages in a single line:

WriteMsg("WriteMsg(). Text");
WriteMsgTime("WriteMsgTime(). Text with time");
WriteMsg("WriteMsg(). Warning","warning");
WriteMsgTime("WriteMsgTime(). Error","error");

After all the messages have been displayed, close the HTML file:

CloseHtmlFile();

Now compile the script "html-file creation" and run it in Meta Trader. Go to the logs folder, ...MetaTrader\experts\files\logs\ and open a new log with your browser. As you can see, this method of displaying of data is more vivid and easy to understand. The problem may appear if your taste is different from mine. Let us see how we can adjust the colors and the font size using the Cascading Style Sheets(CSS).

Adjusting the View.

As you can see everything is easy. After you have learned how to use the library, let us adjust the displaying of logs in the way you like. Go to the “...MetaTrader/experts/files/logs/styles” folder. Open the single file there. It contains the setting of displaying - CSS. Take a look at the first lines:

#body

It is the name of the style, the displaying of which we will adjust. The # symbol comes first, and then goes the name. In this case it is the the body of the document. This style should be added in any CSS file.

{ 
    background-color: dimgray;
}

Now we set the color of the font. We write the parameters and their values in the squiggle brackets in the following way:

the name of the parameter: its value;

In this case we have: the name of the parameter – background color (the color of the log file) and the value—dimgray. Further:

#title
  {
    font - size:200%;
    color: greenyellow;
  }

This style is assigned to the heading which is placed in the beginning of the file. We set the font size and its color. The first parameter goes in percent. Further:

#text
{
   font-size: 150%;
   color: greenyellow;
}
 
#error
{
   font-size: 180%;
   color: orangered;
}
 
#warning
{
   font-size: 120%;
   color: gold;
}

These are the three familiar styles which correspond to common text, an error and an alert. You can also set an additional parameter "background-color", which sets the background color of the text. To make your own style and to use it you have to write it in the file and to save it. For example in this way:

#order
{
   font-size: 160%;
   color: Dodgerblue;
}

In order to use this style, set it as an argument while the message output:

WriteMsgTimeLn("WriteMsgTimeLn(). Order message with time","order");

Now you can create new styles and use them.

Colors.

Using the following links you can find the tables of colors. I don't think that everyone will like my color scheme.

http://www.computerhope.com/htmcolor.htm
http://www.immigration-usa.com/html_colors.html
http://html-color-codes.com/
https://it.utexas.edu/

In order to use the colors from the tables which have the 16-bit view (e.g. C34A2C), you have to use the # symbol in front of it, e.g.:

#body
{
   background-color: #C34A2C;
}

Creating Your Own Files of Styles.

To create a new file of style open the “default.css” file, modify it and save under a new name. While creating the file define the last parameter which indicates the path to the file of style which you want to use, e.g.:

CreateHtmlFile("logs\log1.html","testing library generateHTML","logs\styles\myStyle.css ");

Creating and Using Several Log Files Simultaneously.

We never select the file we will use while working with the library, and it results in simplicity. But here a question comes: how we should write the message in the several log files simultaneously? Everything is very simple. The function for creating html files returns the “int” value. This is the file identifier. Also we have a global variable “int htmlFileHandle”, which shows what file is in use at the moment. All we need is to remember the identifiers of all log files and then to assign their values to the “htmlFileHandle” variable when necessary.

This is all that I wanted to tell you. Now we have a simple means of creating and effective displaying of data. I hope it will be useful for many traders and will make their work easier.