Cómo crear un panel interactivo MQL5 utilizando la clase Controls (Parte 1): Configuración del panel

Introducción

Este artículo se creará un panel interactivo utilizando la clase Controls de MetaQuotes Language 5 (MQL5). La estructura del diseño le dará al panel un aspecto y una funcionalidad básica que servirá como marco central para operaciones de panel más complejas. La esencia de este diseño es pensar y considerar qué haría que la experiencia comercial sea más limpia, más rápida y más intuitiva para el comerciante. Al final de este artículo, deberías tener un panel de control básico en tu gráfico de MetaTrader 5 con un título, botones de navegación y botones para las acciones correspondientes, lo que significa que podrás hacer que el panel de control se adapte a tus necesidades.

El panel de navegación principal tendrá tres botones: Operar, Cerrar e Información. Cada sección tendrá sus controles especializados para varios comandos. Por ejemplo, la sección «Operaciones» tendrá botones para el volumen de operaciones, el precio, el stop loss (SL), el take profit (TP) y órdenes como «Comprar», «Vender» y «Comprar stop» (Buy Stop). La sección Cerrar tendrá botones para enderezar el panel con opciones como "Cerrar todas las ganancias" y "Cerrar todas las órdenes pendientes", entre otras. La sección Información mostrará datos comerciales vitales y actualizaciones de estado. Dividiremos el artículo en tres partes claves:

1. Ilustración de elementos
2. Ensamblaje del panel GUI en MQL5
3. Conclusión

En este viaje, utilizaremos ampliamente MetaQuotes Language 5 (MQL5) como nuestro lenguaje de programación principal del entorno de desarrollo integrado (IDE) en MetaEditor, lo que nos permitirá crear sofisticadas aplicaciones e interfaces de trading. Ejecutaremos nuestro programa directamente dentro de la terminal comercial MetaTrader 5, donde podremos monitorear datos del mercado en tiempo real e interactuar sin problemas con nuestro programa comercial. Por lo tanto, tener instaladas las últimas versiones de MQL5 y MetaTrader 5 es crucial para garantizar la compatibilidad y el acceso a la gama completa de funciones disponibles. Con todo en su lugar, ¡comencemos a crear su panel comercial interactivo!

Ilustración de elementos

Aquí ilustraremos los componentes clave de nuestro panel/tablero de control GUI interactivo diseñado para comerciantes. El panel constará de varios elementos esenciales, cada uno de los cuales tendrá un propósito específico para mejorar la eficiencia comercial. Nos centraremos en tres botones de navegación principales: Operar, Cerrar e Información, cada uno equipado con sus respectivos botones de acción.

La sección de Operar contará con botones para el volumen de operaciones, Precio, Stop Loss (SL) y Take Profit (TP), así como botones de ejecución para Comprar, Vender y Buy Stop, entre muchos otros. La sección Cerrar incluirá funcionalidades como “Cerrar todas las ganancias” y “Cerrar todas las órdenes pendientes”, entre otras, garantizando un acceso rápido a herramientas esenciales de gestión comercial. Por último, la sección Información mostrará datos comerciales importantes, como el saldo de la cuenta, los niveles de margen y actualizaciones del mercado en tiempo real.

Para representar visualmente estos elementos, proporcionaremos un diagrama de diseño que muestra cómo se organizarán estos componentes dentro del panel. Esta ilustración servirá como hoja de ruta para construir nuestra GUI en las secciones posteriores del artículo, guiándonos en la integración de estos elementos en una interfaz cohesiva y fácil de usar. Aquí está la ilustración completa:

Ensamblaje del panel GUI en MQL5

Para crear el panel, nos basaremos en un asesor experto. Para crear un asesor experto (EA), en su terminal MetaTrader 5, haga clic en la pestaña Herramientas y active el Editor de idioma de MetaQuotes, o simplemente presione F4 en su teclado. Alternativamente, puede hacer clic en el icono IDE (entorno de desarrollo integrado) en la barra de herramientas. Esto abrirá el entorno del editor de lenguaje MetaQuotes, que permite escribir robots comerciales, indicadores técnicos, scripts y bibliotecas de funciones.

Una vez abierto MetaEditor, en la barra de herramientas, vaya a la pestaña Archivo y marque Nuevo archivo, o simplemente presione CTRL + N, para crear un nuevo documento. Alternativamente, puede hacer clic en el icono Nuevo en la pestaña de herramientas. Esto generará una ventana emergente del Asistente MQL (MQL Wizard).

En el asistente que aparece, marque Asesor experto (plantilla) y haga clic en Siguiente.

En las propiedades generales del Asesor Experto, en la sección de nombre, proporcione el nombre de archivo de su experto. Tenga en cuenta que para especificar o crear una carpeta si no existe, utilice la barra invertida antes del nombre del EA. Por ejemplo, aquí tenemos "Experts\" por defecto. Esto significa que nuestro EA se creará en la carpeta Experts y podremos encontrarlo allí. Las demás secciones son bastante sencillas, pero puedes seguir el enlace en la parte inferior del Asistente para saber cómo realizar el proceso con precisión.

Después de proporcionar el nombre de archivo del Asesor Experto deseado, haga clic en Siguiente, luego en Siguiente y, por último, en Finalizar. Después de hacer todo esto, estamos listos para codificar y programar nuestro panel GUI.

En el conjunto de datos del nuevo programa que aparece por defecto están los metadatos que muestran las propiedades necesarias vinculadas al archivo. Cuando se personaliza, tenemos los siguientes metadatos.

//+------------------------------------------------------------------+
//|                                         CONTROL PANEL PART 1.mq5 |
//|                           Copyright 2024, Allan Munene Mutiiria. |
//|                                     https://forexalgo-trader.com |
//+------------------------------------------------------------------+
#property copyright "Copyright 2024, Allan Munene Mutiiria." //--- Set copyright information
#property link      "https://forexalgo-trader.com"            //--- Link to the author's website
#property version   "1.00"                                    //--- Version of the script

Desde aquí, lo primero que debemos hacer es obtener acceso a la librería personalizada MQL5 por defecto, que nos permitirá crear el panel o dashboard. Ya está organizado en clases y facilitará la creación de nuestros paneles. Los archivos que utilizaremos están organizados en la carpeta “Include” y la subcarpeta “Controls”. Para acceder a ellos, simplemente navegue a las carpetas especificadas y ábralas. En concreto, se ilustran a continuación.

Después de ver los archivos, lo primero que debemos hacer es incluirlos en el programa para que podamos acceder a sus propiedades y otras utilidades. Lo primero que hacemos es incluir los archivos de los botones. Logramos esto mediante la siguiente lógica.

#include <Controls/Button.mqh>                                 //--- Include button control library

En esta sección, utilizamos la biblioteca "Button.mqh", que es parte de las bibliotecas estándar MQL5 para controles de interfaz gráfica de usuario (GUI). Con la biblioteca "Button.mqh", tenemos acceso a la clase "CButton", que podemos utilizar para crear, configurar y administrar los elementos de botón de nuestro panel de operaciones. Al emplear la biblioteca "Button.mqh", podemos implementar botones de panel que cumplen diversos propósitos de interacción, por ejemplo, botones de navegación, botones de acción comercial (como los que se usan para ejecutar órdenes de compra y venta) y otros componentes de panel que se benefician del uso de botones como elementos de GUI. Cuando compilamos el programa, deberíamos darnos cuenta de algunas extensiones de archivo adicionales en el programa que se llaman como se muestra a continuación.

Podemos confirmar que los archivos se agregaron correctamente. A partir de esto, ahora podemos crear un objeto que nos dará acceso a los miembros de la clase y crear el marco del contenedor de fondo principal del panel. Logramos esto mediante la siguiente lógica.

CButton obj_Btn_MAIN;                                       //--- Main button object

Aquí, declaramos la variable "obj_Btn_MAIN" como una instancia de la clase "CButton". Esto significa que "obj_Btn_MAIN" actuará como un objeto de botón en nuestro programa. Al crear este objeto de botón, esencialmente estamos reservando espacio en la memoria para representar y manipular un elemento de botón principal en nuestra interfaz. La clase "CButton" proporciona varios métodos y propiedades para crear, personalizar y administrar controles de botones, como configurar la etiqueta, el tamaño y el color del botón, y manejar eventos de clic. Con esto ya podemos proceder a crear el botón cuando se inicializa el experto, es decir en el controlador de eventos OnInit.

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit() {
   //--- Start of the initialization function

   //--- MAIN BUTTON
   obj_Btn_MAIN.Create(0, Btn_MAIN, 0, 30, 30, 0, 0); //--- Create the main button at specified coordinates
   

   //--- End of initialization function
   return(INIT_SUCCEEDED); //--- Return initialization success status
}

Aquí, en el controlador de eventos OnInit, una función que se llama automáticamente cuando el EA se adjunta por primera vez a un gráfico o se reinicializa, creamos el botón principal del tablero. Llamamos al objeto "obj_Btn_MAIN" y usamos el operador punto para obtener acceso a todos los miembros de la clase. Con el operador de punto, deberías lograr algo como esto:

Crear es la función miembro que elegimos y proporcionamos sus parámetros necesarios. Para entender claramente qué significa cada cosa, desglosemos los parámetros:

• El primer parámetro (0) especifica el ID del gráfico. Un valor de 0 se refiere al gráfico actual donde se ejecuta el EA.
• El segundo parámetro ("Btn_MAIN") es una constante de cadena predefinida que representa el nombre de este botón. Este nombre se utiliza para hacer referencia al botón en otras partes del programa. Para facilitar su referencia, lo definimos en el ámbito global de la siguiente manera:

//--- Define button names for easier reference
#define Btn_MAIN "Btn_MAIN"                                   //--- Button name for the main button

• El tercer parámetro (0) se refiere al índice de la subventana. Aquí, 0 indica que el botón debe colocarse en la ventana del gráfico principal.
• Los parámetros cuarto (30) y quinto (30) establecen las coordenadas X e Y del botón, respectivamente. Estos determinan la posición del botón en el gráfico.
• Los dos últimos parámetros (0 y 0) definen el ancho y la altura del botón. En este caso, un valor de 0 significa que el botón utilizará dimensiones predeterminadas. Esto se ilustra a continuación:

Cuando ejecutamos el programa, obtenemos la siguiente salida.

En la imagen, podemos ver que nuestras primeras coordenadas están configuradas como 30 y 30 píxeles, pero las segundas coordenadas se muestran como 0 ya que las dejamos como 0. Por lo tanto, nuestras segundas coordenadas están mapeadas en el origen, (0,0). Para establecer las segundas coordenadas, podemos utilizar varios métodos. El primero es definirlos directamente en la función miembro. 

   //--- MAIN BUTTON
   obj_Btn_MAIN.Create(0, Btn_MAIN, 0, 30, 30, 310, 300); //--- Create the main button at specified coordinates

Aquí definimos las segundas coordenadas del botón. Los tenemos como 310 y 300 píxeles para los ejes x e y respectivamente. También los tenemos resaltados en color amarillo para aumentar la claridad. Al ejecutarlo, obtenemos el siguiente resultado.

Tenemos los resultados esperados. Sin embargo, para utilizar este método, es necesario tener cuidado al definir los píxeles, ya que las segundas coordenadas no están relacionadas de ninguna manera con las primeras. Por lo tanto, es necesario realizar cálculos matemáticos profundos porque todos los píxeles tienen como referencia el origen. Por ejemplo, si nuestras segundas coordenadas definidas son 10 y 10, el botón tendrá segundas coordenadas en los ejes "y" y "x" a 10 píxeles del origen. De esta forma nuestro botón se mapeará hacia atrás, con un tamaño de (30-10 = 20) 20 píxeles. Aquí hay una ilustración.

Para evitar el estrés de las matemáticas implicadas en el primer método, podemos utilizar el segundo método, que implica definir la altura y el ancho del botón, que se calcula directamente a partir de las primeras coordenadas. Se utiliza la siguiente lógica:

   //--- MAIN BUTTON
   obj_Btn_MAIN.Create(0, Btn_MAIN, 0, 30, 30, 0, 0); //--- Create the main button at specified coordinates
   obj_Btn_MAIN.Width(20); //---  Set width of the main button
   obj_Btn_MAIN.Height(20); //---  Set height of the main button

Aquí, utilizamos las funciones miembro de ancho y alto para establecer el tamaño del botón. Hemos utilizado un tamaño uniforme de 20 píxeles para que podamos ver la diferencia. Tras compilar el programa, tenemos los siguientes resultados.

En la ilustración, podemos ver que tenemos el botón asignado en dirección hacia adelante, lo que significa que no tenemos que enfatizar las segundas coordenadas al definir nuestro punto de inicio. Existe una tercera forma de definir los puntos directamente, lo que ahorra espacio al combinar los parámetros de ancho y alto. Su fragmento de código es el siguiente:

   //--- MAIN BUTTON
   obj_Btn_MAIN.Create(0, Btn_MAIN, 0, 30, 30, 0, 0); //--- Create the main button at specified coordinates
   //obj_Btn_MAIN.Width(310); //--- (Commented out) Set width of the main button
   //obj_Btn_MAIN.Height(300); //--- (Commented out) Set height of the main button
   obj_Btn_MAIN.Size(310, 300); //--- Set size of the main button

Aquí configuramos directamente el tamaño del botón. Sin embargo, necesitamos establecer el color de fondo del botón y el color de su borde. 

   obj_Btn_MAIN.ColorBackground(C'070,070,070'); //--- Set background color of the main button
   obj_Btn_MAIN.ColorBorder(clrBlack); //--- Set border color of the main button

Aquí, configuramos la apariencia visual de nuestro botón "obj_Btn_MAIN" estableciendo sus colores de fondo y borde. Primero, llamamos al método "ColorBackground" en el objeto "obj_Btn_MAIN" y pasamos los valores RGB "C'070,070,070'" como parámetro. RGB significa rojo, verde y azul: los tres colores primarios utilizados para generar un amplio espectro de colores en las pantallas digitales.

El formato RGB toma tres valores que representan la intensidad del rojo, verde y azul en un rango de 0 a 255, donde "0" significa sin intensidad y "255" es la intensidad máxima. Por ejemplo, "C'070,070,070'" significa:

• Establecemos el componente rojo en "70" (de 255)
• Establecemos el componente verde en "70"
• Establecemos el componente azul en "70"

Cuando establecemos los tres valores RGB como iguales, el color resultante es un tono de gris. Como utilizamos valores moderados de 70 para los tres, el fondo del botón se vuelve gris medio oscuro. Este color es visualmente neutro, lo que garantiza que otros elementos de colores brillantes que crearemos se destaquen en el panel.

A continuación, llamamos al método "ColorBorder" y establecemos el color utilizando la constante "clrBlack", que representa el negro puro. Aquí, cada valor RGB es 0 ("C'000,000,000'"), lo que significa que no hay componentes rojos, verdes o azules presentes. Al usar el color negro para el borde, creamos un contorno visual fuerte que define claramente los límites del botón contra el fondo gris más oscuro, haciéndolo lucir más limpio y estructurado. Este enfoque garantiza que el botón sea fácil de distinguir y proporciona una apariencia elegante a la interfaz gráfica general. Tras la compilación, tenemos el siguiente resultado.

Allí tenemos nuestro botón principal. Finalmente necesitamos actualizar el gráfico para que los cambios surtan efecto automáticamente en lugar de tener que esperar un evento de gráfico manual que afecte la actualización. He aquí la lógica adoptada:

   ChartRedraw(0); //--- Redraw the chart to update the panel

Aquí llamamos a la función ChartRedraw para actualizar y refrescar visualmente la interfaz del gráfico. Hacemos esto para garantizar que todos los elementos gráficos recientemente agregados (botones, etiquetas o lo que sea) se muestren correctamente. La función ChartRedraw es indispensable cada vez que agregamos, modificamos o eliminamos elementos del gráfico, ya que obliga a la terminal a volver a renderizar el gráfico actual. Esto es especialmente crucial cuando creamos paneles interactivos y queremos asegurarnos de que el panel muestre al usuario el estado más reciente que puede mostrar.

El parámetro 0 se utiliza cuando se llama a la función. Es el identificador del gráfico. Cada gráfico en MetaTrader 5 tiene un ID único, y 0 se refiere al gráfico actual donde está adjunto el Asesor Experto. Para volver a dibujar un gráfico, debemos pasar el ID correcto. Nos aseguramos de que la operación de redibujado se aplique a este gráfico específico. Si no llamamos a la función ChartRedraw, podemos terminar con un problema gráfico. Es posible que los objetos gráficos recién creados no se muestren, o que los objetos gráficos modificados no muestren las modificaciones que les hemos realizado; seguirán mostrando sus propiedades obsoletas. De esta forma podemos garantizar que nuestro panel y su contenido se muestren correctamente llamando a la función ChartRedraw para ese panel. El código de inicialización final responsable de la creación del botón principal es el siguiente.

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit() {
   //--- Start of the initialization function

   //--- MAIN BUTTON
   obj_Btn_MAIN.Create(0, Btn_MAIN, 0, 30, 30, 0, 0); //--- Create the main button at specified coordinates
   //obj_Btn_MAIN.Width(310); //--- (Commented out) Set width of the main button
   //obj_Btn_MAIN.Height(300); //--- (Commented out) Set height of the main button
   obj_Btn_MAIN.Size(310, 300); //--- Set size of the main button
   obj_Btn_MAIN.ColorBackground(C'070,070,070'); //--- Set background color of the main button
   obj_Btn_MAIN.ColorBorder(clrBlack); //--- Set border color of the main button


   ChartRedraw(0); //--- Redraw the chart to update the panel

   //--- End of initialization function
   return(INIT_SUCCEEDED); //--- Return initialization success status
}

Hasta este punto, ya tenemos algunos conceptos básicos de lo que haremos y las cosas necesarias que debemos hacer. De esta forma podremos definir los objetos para todos los botones que necesitaremos para la interfaz inicial.

#include <Controls/Button.mqh>                                 //--- Include button control library
CButton obj_Btn_MAIN;                                       //--- Main button object
CButton obj_Btn_HEADER;                                     //--- Header button object
CButton obj_Btn_X;                                          //--- Close button (X) object
CButton obj_Btn_TRADE;                                     //--- Trade button object
CButton obj_Btn_CLOSE;                                      //--- Close button object
CButton obj_Btn_INFO;                                       //--- Information button object
CButton obj_Btn_RISK;                                       //--- Risk button object
CButton obj_Btn_POINTS;                                     //--- Points button object
CButton obj_Btn_SELL;                                       //--- Sell button object
CButton obj_Btn_ENTRY;                                      //--- Entry button object
CButton obj_Btn_BUY;                                        //--- Buy button object
CButton obj_Btn_SELLSTOP;                                   //--- Sell Stop button object
CButton obj_Btn_BUYSTOP;                                    //--- Buy Stop button object
CButton obj_Btn_SELLLIMIT;                                  //--- Sell Limit button object
CButton obj_Btn_BUYLIMIT;                                   //--- Buy Limit button object
CButton obj_Btn_FOOTER;                                     //--- Footer button object

Aquí, definimos varios de los objetos de botón de descanso utilizando la clase "CButton" para representar varios elementos interactivos del panel. Cada línea crea una instancia de un objeto de botón único, lo que configura una estructura fundamental para las diferentes secciones del tablero que necesitamos crear. Analicemos el propósito y la función de cada botón:

• "obj_Btn_HEADER": Este objeto representará el botón de encabezado del panel. Podríamos usarlo para mostrar un título, o un ícono, o servir como separador visual para la sección superior del panel.
• "obj_Btn_X": Este botón actuará como un botón de cierre (a menudo representado como 'X') para permitir a los usuarios salir u ocultar el panel.
• "obj_Btn_TRADE": Representa el botón "Trade" (Operar), que es un elemento de control central. Al presionarlo, este botón activará las funcionalidades comerciales, navegará a las opciones comerciales y abrirá submenús específicos para las acciones comerciales.
• "obj_Btn_CLOSE": El botón "Close" (Cerrar) aquí es un botón especializado que se utilizará para administrar el cierre de operaciones. Funcionará como un interruptor para hacer la transición entre la sección de negociación y una sección de cierre en el panel.
• "obj_Btn_INFO": Este botón se utilizará para presentar contenido informativo al usuario, como métricas comerciales, detalles de la cuenta y descripciones del panel.

Para los botones de funcionalidad comercial, los objetos cumplirán propósitos específicos dentro del contexto comercial:

• "obj_Btn_RISK": Actúa como un botón de control de riesgos. Permitirá al usuario configurar o ajustar parámetros de riesgo como el porcentaje arriesgado por operación.
• "obj_Btn_POINTS": Este botón se utilizará para establecer o cambiar a opciones de negociación basadas en puntos, donde ciertos niveles, como Stop Loss o Take Profit, se definen en puntos en lugar de niveles de precios.
• "obj_Btn_SELL", "obj_Btn_ENTRY" y "obj_Btn_BUY": Representan botones de acción comercial directa. "obj_Btn_SELL" activa una operación de venta, "obj_Btn_BUY" inicia una operación de compra y "obj_Btn_ENTRY" servirá como marcador de posición para las entradas al mercado.

Para órdenes pendientes, estos botones definen las acciones:

• "obj_Btn_SELLSTOP" y "obj_Btn_BUYSTOP": Controlan la colocación de órdenes pendientes de Sell Stop y Buy Stop, que se colocan por debajo o por encima del precio actual respectivamente.
• "obj_Btn_SELLLIMIT" y "obj_Btn_BUYLIMIT": Manejan órdenes pendientes de límite de venta y límite de compra, lo que permite a los usuarios colocar órdenes en niveles específicos anticipándose a retrocesos de precios.

Por último, tenemos el "obj_Btn_FOOTER", que usamos para definir el botón de pie de página del panel. Este botón podría actuar como un elemento decorativo, un control de reinicio o un botón de navegación para cambiar a una vista de resumen, pero en nuestro caso, solo lo usaremos para mostrar el resumen del tablero.

De manera similar, necesitaremos definir los campos de edición y etiqueta respectivamente. Se aplica la siguiente lógica:

#include <Controls/Edit.mqh>                                   //--- Include edit control library
CEdit obj_Edit_RISK;                                        //--- Risk edit field object
CEdit obj_Edit_PRICE;                                       //--- Price edit field object
CEdit obj_Edit_LOTS;                                        //--- Lots edit field object
CEdit obj_Edit_SL;                                          //--- Stop Loss edit field object
CEdit obj_Edit_TP;                                          //--- Take Profit edit field object

#include <Controls/Label.mqh>                                  //--- Include label control library
CLabel obj_Lbl_HEADER;                                      //--- Header label object
CLabel obj_Lbl_PRICE;                                       //--- Price label object
CLabel obj_Lbl_LOTS;                                        //--- Lots label object
CLabel obj_Lbl_SL;                                          //--- Stop Loss label object
CLabel obj_Lbl_TP;                                          //--- Take Profit label object

Aquí incluimos las bibliotecas de control esenciales para administrar la entrada del usuario y mostrar texto en el panel del tablero. En primer lugar, incluimos la biblioteca "Edit.mqh", que proporciona funcionalidades para campos de entrada editables. Se definen varios objetos de la clase "CEdit", incluido "obj_Edit_RISK" como campo de edición de riesgo. El objeto "obj_Edit_PRICE" representa el campo de edición de precio, donde el usuario puede indicar el precio al que desea ejecutar operaciones. Se designa un objeto llamado "obj_Edit_LOTS" para el tamaño del lote, que los usuarios pueden ajustar para indicar la cantidad de lotes que desean comercializar. "obj_Edit_SL" es el campo de edición de Stop Loss. Y por último, "obj_Edit_TP" sirve como campo de edición de Take Profit.

A continuación, integramos la biblioteca “Label.mqh”. Esta biblioteca simplifica el proceso de creación de etiquetas de texto estático en el panel, lo que resulta especialmente útil para proporcionar una interfaz fácil de usar. La biblioteca está diseñada específicamente para nuestro entorno de trabajo e incluye una clase, "CLabel", que hemos instanciado varias veces para crear las diferentes etiquetas que necesitamos en nuestro panel. La primera etiqueta que instanciamos se llama "obj_Lbl_HEADER" y se utiliza para mostrar el título o la información más importante en la parte superior del panel. La siguiente etiqueta se llama "obj_Lbl_PRICE" y se utiliza para indicar el precio actual del activo con el que estamos trabajando. Junto al campo de entrada del tamaño del lote, tenemos una etiqueta llamada "obj_Lbl_LOTS", que se utiliza para indicar el tamaño del lote. A continuación podemos definir los respectivos campos del panel así como a continuación:

//--- Define button names for easier reference
#define Btn_MAIN "Btn_MAIN"                                   //--- Button name for the main button
#define Btn_HEADER "Btn_HEADER"                               //--- Button name for the header button
#define Btn_X "Btn_X"                                        //--- Button name for the close button
#define Btn_TRADE "Btn_TRADE"                               //--- Button name for the trade button
#define Btn_CLOSE "Btn_CLOSE"                                //--- Button name for the close button
#define Btn_INFO "Btn_INFO"                                  //--- Button name for the info button

#define Btn_RISK "Btn_RISK"                                  //--- Button name for the risk button
#define Btn_POINTS "Btn_POINTS"                              //--- Button name for the points button
#define Btn_SELL "Btn_SELL"                                  //--- Button name for the sell button
#define Btn_ENTRY "Btn_ENTRY"                                //--- Button name for the entry button
#define Btn_BUY "Btn_BUY"                                    //--- Button name for the buy button
#define Btn_SELLSTOP "Btn_SELLSTOP"                          //--- Button name for the sell stop button
#define Btn_BUYSTOP "Btn_BUYSTOP"                            //--- Button name for the buy stop button
#define Btn_SELLLIMIT "Btn_SELLLIMIT"                        //--- Button name for the sell limit button
#define Btn_BUYLIMIT "Btn_BUYLIMIT"                          //--- Button name for the buy limit button
#define Btn_FOOTER "Btn_FOOTER"                              //--- Button name for the footer button

//---
//--- Define edit field names for easier reference
#define Edit_RISK "Edit_RISK"                                //--- Edit field name for risk input
#define Edit_PRICE "Edit_PRICE"                              //--- Edit field name for price input
#define Edit_LOTS "Edit_LOTS"                                //--- Edit field name for lots input
#define Edit_SL "Edit_SL"                                    //--- Edit field name for stop loss input
#define Edit_TP "Edit_TP"                                    //--- Edit field name for take profit input

//--- Define label names for easier reference
#define Lbl_HEADER "Lbl_HEADER"                              //--- Label name for the header
#define Lbl_PRICE "Lbl_PRICE"                                //--- Label name for the price
#define Lbl_LOTS "Lbl_LOTS"                                  //--- Label name for the lots
#define Lbl_SL "Lbl_SL"                                      //--- Label name for the stop loss
#define Lbl_TP "Lbl_TP"                                      //--- Label name for the take profit

Luego de definir los elementos clave que necesitamos en nuestra interfaz de inicialización, podemos proceder a darle un encabezado a nuestro panel, utilizando las utilidades ya definidas. La lógica de encabezado adoptada es la que se muestra en el fragmento de código a continuación:

   //--- HEADER BUTTON 
   obj_Btn_HEADER.Create(0, Btn_HEADER, 0, 30, 30, 0, 0); //--- Create the header button at specified coordinates
   obj_Btn_HEADER.Size(310, 25); //--- Set size of the header button
   obj_Btn_HEADER.ColorBackground(clrLightBlue); //--- Set background color of the header button
   obj_Btn_HEADER.ColorBorder(clrBlack); //--- Set border color of the header button

Aquí, creamos y personalizamos el botón de encabezado del panel del tablero. Comenzamos utilizando el método "Create" en el objeto "obj_Btn_HEADER" para inicializar el botón con parámetros que especifican su ID de gráfico, nombre ("Btn_HEADER") y primeras coordenadas (30, 30) junto con sus segundas coordenadas (0, 0). A continuación, establecemos el tamaño del botón en 310 píxeles de ancho y 25 píxeles de alto utilizando el método "Size", asegurándonos de que se ajuste bien al diseño del panel.

Luego personalizamos el color de fondo del botón de encabezado con el método "ColorBackground", configurándolo en "clrLightBlue" para mayor atractivo visual. Además, especificamos el color del borde utilizando el método "ColorBorder" y lo establecemos en "clrBlack", lo que mejora la visibilidad y la definición del botón frente al fondo del panel. Tras la compilación, tenemos el siguiente resultado.

Eso fue un éxito. Ahora podemos seguir dándole más vida al encabezado añadiéndole una etiqueta y un botón de cierre lateral. Primero agreguemos el botón de cierre. Su lógica es la que se muestra a continuación.

   //--- X BUTTON
   obj_Btn_X.Create(0, Btn_X, 0, 30 + 280, 30 + 1, 0, 0); //--- Create the close button (X) at specified coordinates
   obj_Btn_X.Size(30 - 1, 25 - 1 - 1); //--- Set size of the close button
   obj_Btn_X.ColorBackground(clrLightBlue); //--- Set background color of the close button
   obj_Btn_X.ColorBorder(clrLightBlue); //--- Set border color of the close button
   obj_Btn_X.Text(CharToString(255)); //--- Set the close button text to an "X" character
   obj_Btn_X.Color(clrBlack); //--- Set text color of the close button
   obj_Btn_X.Font("Wingdings"); //--- Set font of the close button to Wingdings
   obj_Btn_X.FontSize(17); //--- Set font size of the close button

Aquí, creamos y configuramos el botón de cierre (X) para el panel del tablero. Comenzamos inicializando el botón usando el método "Create" en el objeto "obj_Btn_X". Los parámetros que proporcionamos especifican su ID de gráfico, nombre ("Btn_X") y posición en el gráfico, calculados para colocarlo en (30 + 280) para la coordenada x y (30 + 1) para la coordenada y, lo que garantiza que esté alineado correctamente dentro del diseño del panel.

A continuación, establecemos el tamaño del botón de cierre en 29 (30 -1) píxeles de ancho y 23 (25 - 1 - 1) píxeles de alto utilizando el método "Size", reduciendo ligeramente el tamaño predeterminado para asegurarnos de que se ajuste bien a la interfaz de usuario. Jugamos con 1 píxel para cuidar el borde, de modo que no anule el borde del encabezado, sino que quede dentro del encabezado. Luego personalizamos el color de fondo del botón a azul claro usando el método "ColorBackground", creando una apariencia consistente con el botón del encabezado, que lo fusiona completamente con el encabezado. El color del borde también se establece en azul claro con el método "ColorBorder", lo que le da al botón una apariencia limpia sin un borde contrastante.

Procedemos a establecer el texto del botón como un carácter icono utilizando la función CharToString y 255 como parámetro, lo que permite que el botón indique visualmente su función como botón de cierre. En MQL5, el carácter representa un icono de Windows, pero podría ser cualquier otra cosa. El color del texto se establece en negro con el método «Color», lo que garantiza que destaque sobre el fondo claro. Finalmente, elegimos la fuente para el botón Cerrar como Wingdings utilizando el método «Font», que es adecuada para mostrar el símbolo de Windows, y establecimos el tamaño de fuente en 17 utilizando el método «FontSize» para mejorar la legibilidad. Aquí hay una representación de los posibles códigos de símbolos en MQL5.

Podemos ver que hay una gran cantidad de opciones para elegir, pero en nuestro caso nos quedaremos con el código inicial 255. Solo necesitamos establecer el título del encabezado y terminaremos con la sección del encabezado.

   //--- HEADER LABEL
   obj_Lbl_HEADER.Create(0, Lbl_HEADER, 0, 40, 30, 0, 0); //--- Create the header label at specified coordinates
   obj_Lbl_HEADER.Text("Control Panel"); //--- Set text of the header label
   obj_Lbl_HEADER.Color(clrRed); //--- Set text color of the header label
   obj_Lbl_HEADER.Font("Cooper black"); //--- Set font of the header label to Cooper Black
   obj_Lbl_HEADER.FontSize(14); //--- Set font size of the header label

Aquí, creamos y configuramos la etiqueta del encabezado para el panel de operaciones. Comenzamos inicializando la etiqueta utilizando el método «Create» del objeto «obj_Lbl_HEADER», proporcionando el ID del gráfico, el nombre de la etiqueta («Lbl_HEADER») y su posición en el gráfico en (40) para la coordenada x y (30) para la coordenada y. Esta posición garantiza que la etiqueta del encabezado aparezca adecuadamente dentro del diseño del panel.

A continuación, establecemos el texto de la etiqueta del encabezado como «Control Panel» utilizando el método «Text», indicando claramente la finalidad del panel de control. Por supuesto, esto podría ser cualquier otra cosa de su elección. Siéntete libre de cambiarlo. Luego personalizamos el color del texto a rojo con el método "Color", asegurándonos de que se destaque sobre el fondo para mejorar la visibilidad. La fuente de la etiqueta del encabezado se establece en "Cooper black" utilizando el método "Font", lo que le da al texto una apariencia distintiva y profesional. Finalmente, especificamos el tamaño de fuente como 14 con el método "FontSize", asegurando que el texto del encabezado sea fácilmente legible. Tras la compilación, obtenemos el siguiente resultado.

Eso fue un éxito. En un formato similar, podemos proceder a crear los botones de navegación. Primero crearemos el botón de vista de operaciones comerciales utilizando la siguiente lógica. 

   //--- TRADE BUTTON
   obj_Btn_TRADE.Create(0, Btn_TRADE, 0, 40, 60, 0, 0); //--- Create the trade button at specified coordinates
   obj_Btn_TRADE.Size(90, 30); //--- Set size of the trade button
   obj_Btn_TRADE.ColorBackground(clrYellow); //--- Set background color of the trade button
   obj_Btn_TRADE.ColorBorder(clrYellow); //--- Set border color of the trade button
   obj_Btn_TRADE.Text("Trade"); //--- Set text of the trade button
   obj_Btn_TRADE.Color(clrBlack); //--- Set text color of the trade button
   obj_Btn_TRADE.Font("Arial Black"); //--- Set font of the trade button to Arial Black
   obj_Btn_TRADE.FontSize(13); //--- Set font size of the trade button

Aquí, simplemente cambiamos el tamaño del botón y también cambiamos el color de fondo a amarillo. Tras la compilación, tenemos el siguiente resultado.

Eso fue un éxito. Establecemos el color del botón en amarillo para ilustrar que el botón está activo. Así, cuando estemos definiendo los demás botones de navegación, se mantendrá una lógica similar, pero se cambiará el color, a uno inactivo. Aquí está la lógica completa.

   //--- CLOSE BUTTON
   obj_Btn_CLOSE.Create(0, Btn_CLOSE, 0, 40 + obj_Btn_TRADE.Width() + 10, 60, 0, 0); //--- Create the close button at specified coordinates
   obj_Btn_CLOSE.Size(90, 30); //--- Set size of the close button
   obj_Btn_CLOSE.ColorBackground(clrSilver); //--- Set background color of the close button
   obj_Btn_CLOSE.ColorBorder(clrSilver); //--- Set border color of the close button
   obj_Btn_CLOSE.Text("Close"); //--- Set text of the close button
   obj_Btn_CLOSE.Color(clrBlack); //--- Set text color of the close button
   obj_Btn_CLOSE.Font("Arial Black"); //--- Set font of the close button to Arial Black
   obj_Btn_CLOSE.FontSize(13); //--- Set font size of the close button

   //--- INFO BUTTON
   obj_Btn_INFO.Create(0, Btn_INFO, 0, 40 + obj_Btn_TRADE.Width() + 10 + obj_Btn_CLOSE.Width() + 10, 60, 0, 0); //--- Create the info button at specified coordinates
   obj_Btn_INFO.Size(90, 30); //--- Set size of the info button
   obj_Btn_INFO.ColorBackground(clrSilver); //--- Set background color of the info button
   obj_Btn_INFO.ColorBorder(clrSilver); //--- Set border color of the info button
   obj_Btn_INFO.Text("Inform'n"); //--- Set text of the info button
   obj_Btn_INFO.Color(clrBlack); //--- Set text color of the info button
   obj_Btn_INFO.Font("Arial Black"); //--- Set font of the info button to Arial Black
   obj_Btn_INFO.FontSize(13); //--- Set font size of the info button

Aquí, creamos los botones de cierre e información y establecemos su color de fondo en plateado para que indique su estado inactivo inicial. Aquí están los resultados.

Luego de definir los botones de navegación, podemos definir la sección de pie de página antes de finalizar el cuerpo comercial de inicialización. Su lógica será la que se muestra en el fragmento de código a continuación.

   //--- FOOTER BUTTON
   obj_Btn_FOOTER.Create(0, Btn_FOOTER, 0, 30 + 1, 305 - 1, 0, 0); //--- Create the footer button at specified coordinates
   obj_Btn_FOOTER.Size(310 - 1 - 1, 25); //--- Set size of the footer button
   obj_Btn_FOOTER.ColorBackground(C'070,070,070'); //--- Set background color of the footer button
   obj_Btn_FOOTER.ColorBorder(C'070,070,070'); //--- Set border color of the footer button
   obj_Btn_FOOTER.Text(ShortToString(0x23F0) + "https://t.me/Forex_Algo_Trader"); //--- Set text of the footer button with a link
   obj_Btn_FOOTER.Color(clrWhite); //--- Set text color of the footer button
   obj_Btn_FOOTER.Font("Calibri bold italic"); //--- Set font of the footer button to Calibri bold italic
   obj_Btn_FOOTER.FontSize(12); //--- Set font size of the footer button

Aquí, creamos y configuramos el botón de pie de página para el panel de operaciones pasando los parámetros normales y colocándolo en la parte inferior del panel. A continuación, definimos el tamaño del botón de pie de página utilizando el método “Size”, estableciendo sus dimensiones en 310 - 1 - 1 para el ancho y 25 para el alto. Esto garantiza que el botón se ajuste bien dentro del área de pie de página del panel. A continuación, personalizamos el color de fondo del botón a un gris oscuro utilizando el método «ColorBackground» con los valores RGB «C'070,070,070'», asegurándonos de que resulte visualmente atractivo y coherente con el diseño general, básicamente integrándolo en el botón principal.

El color del borde también se establece en el mismo gris oscuro utilizando el método «ColorBorder», lo que le da al botón un aspecto uniforme. Para el texto del botón, utilizamos el método «Text» para establecerlo como una combinación de un icono (representado por el carácter Unicode 0x23F0, que aparece como un reloj) y el enlace «https://t.me/Forex_Algo_Trader», animando a los usuarios a acceder a recursos adicionales. Hemos convertido los caracteres Unicode en un icono mediante la función ShortToString. Los caracteres están en forma hexadecimal como se muestra a continuación, y esa es la razón por la que necesitamos la función.

Establecemos el color del texto en blanco utilizando el método "Color" para mejorar la visibilidad contra el fondo oscuro. Por último, configuramos la fuente del botón del pie de página como «Calibri negrita cursiva» utilizando el método «Font», lo que añade un toque de profesionalidad, y establecemos el tamaño de la fuente en 12 utilizando el método «FontSize», lo que garantiza que el texto siga siendo legible. Tras la compilación, tenemos el siguiente hito.

Eso fue un éxito. Ahora necesitamos finalizar la sección del cuerpo y todo estará bien. Dado que tendremos que cambiar constantemente la vista del cuerpo en cada activación del botón de navegación, podemos tener la lógica del cuerpo en una función y llamarla solo cuando sea necesario. 

   // BODY OF THE PANEL
   createSection_Trade(); //--- Call function to create the trade section

Aquí, creamos una función llamada «createSection_Trade» dentro del cuerpo del panel para configurar la sección «Trade» del panel de control. Normalmente, esto llama a la función si la hubiéramos definido. Esta función se utiliza para crear y configurar los elementos interactivos relacionados con las operaciones comerciales, como botones de compra, venta y tipo orden. Al utilizar esta función, garantizamos que el código sea modular y organizado, permitiendo que todos los elementos relacionados con el trading se manejen dentro de una función separada. Esto mantiene la configuración del panel principal más limpia, lo que facilita el mantenimiento y la expansión del sistema del tablero según sea necesario.

Luego necesitamos definir la función. Como es una función simple, la definimos como una función vacía y no le pasamos parámetros. 

void createSection_Trade(){

//---

}

Para crear las funcionalidades de la función, utilizamos una lógica de creación similar a la que hemos estado utilizando en todo el código. El fragmento de código de función completo será el siguiente.

//+------------------------------------------------------------------+
//|     FUNCTION TO CREATE THE TRADE SECTION                         |
//+------------------------------------------------------------------+
void createSection_Trade(){
   //--- RISK BUTTON
   obj_Btn_RISK.Create(0,Btn_RISK,0,40,100,0,0); //--- Create the risk button
   obj_Btn_RISK.Size(210,25); //--- Set the button size
   obj_Btn_RISK.ColorBackground(clrTurquoise); //--- Set the background color
   obj_Btn_RISK.ColorBorder(clrTurquoise); //--- Set the border color
   obj_Btn_RISK.Text("Risk based on Equity (%)"); //--- Set the button text
   obj_Btn_RISK.Color(clrBlack); //--- Set the text color
   obj_Btn_RISK.Font("Arial Black"); //--- Set the font style
   obj_Btn_RISK.FontSize(11); //--- Set the font size
   
   //--- RISK EDIT
   obj_Edit_RISK.Create(0,Edit_RISK,0,40+220,100,0,0); //--- Create the risk edit field
   obj_Edit_RISK.Size(70,25); //--- Set the edit field size
   obj_Edit_RISK.ColorBackground(clrWhite); //--- Set the background color
   obj_Edit_RISK.ColorBorder(clrBlack); //--- Set the border color
   obj_Edit_RISK.Text("78"); //--- Set the default text
   obj_Edit_RISK.Color(clrBlack); //--- Set the text color
   obj_Edit_RISK.Font("Times new roman bold"); //--- Set the font style
   obj_Edit_RISK.FontSize(15); //--- Set the font size
   
   //--- PRICE LABEL
   obj_Lbl_PRICE.Create(0,Lbl_PRICE,0,40,130,0,0); //--- Create the price label
   obj_Lbl_PRICE.Text("Price"); //--- Set the label text
   obj_Lbl_PRICE.Color(clrWhite); //--- Set the text color
   obj_Lbl_PRICE.Font("Arial black"); //--- Set the font style
   obj_Lbl_PRICE.FontSize(13); //--- Set the font size   
   
   //--- PRICE EDIT
   obj_Edit_PRICE.Create(0,Edit_PRICE,0,40+60,130,0,0); //--- Create the price edit field
   obj_Edit_PRICE.Size(90,25); //--- Set the edit field size
   obj_Edit_PRICE.ColorBackground(clrWhite); //--- Set the background color
   obj_Edit_PRICE.ColorBorder(clrBlack); //--- Set the border color
   obj_Edit_PRICE.Text(DoubleToString(SymbolInfoDouble(_Symbol,SYMBOL_ASK),_Digits)); //--- Set the default text to current ask price
   obj_Edit_PRICE.Color(clrBlack); //--- Set the text color
   obj_Edit_PRICE.Font("Times new roman bold"); //--- Set the font style
   obj_Edit_PRICE.FontSize(13); //--- Set the font size
   
   //--- LOTS LABEL
   obj_Lbl_LOTS.Create(0,Lbl_LOTS,0,40+160,130,0,0); //--- Create the lot size label
   obj_Lbl_LOTS.Text("Lot size"); //--- Set the label text
   obj_Lbl_LOTS.Color(clrWhite); //--- Set the text color
   obj_Lbl_LOTS.Font("Arial black"); //--- Set the font style
   obj_Lbl_LOTS.FontSize(13); //--- Set the font size   
   
   //--- LOTS EDIT
   obj_Edit_LOTS.Create(0,Edit_LOTS,0,40+60+180,130,0,0); //--- Create the lot size edit field
   obj_Edit_LOTS.Size(50,25); //--- Set the edit field size
   obj_Edit_LOTS.ColorBackground(clrWhite); //--- Set the background color
   obj_Edit_LOTS.ColorBorder(clrBlack); //--- Set the border color
   obj_Edit_LOTS.Text("0.01"); //--- Set the default text
   obj_Edit_LOTS.Color(clrBlack); //--- Set the text color
   obj_Edit_LOTS.Font("Times new roman bold"); //--- Set the font style
   obj_Edit_LOTS.FontSize(13); //--- Set the font size
   
   //--- SL LABEL
   obj_Lbl_SL.Create(0,Lbl_SL,0,40,160,0,0); //--- Create the stop loss label
   obj_Lbl_SL.Text("SL"); //--- Set the label text
   obj_Lbl_SL.Color(clrWhite); //--- Set the text color
   obj_Lbl_SL.Font("Arial black"); //--- Set the font style
   obj_Lbl_SL.FontSize(13); //--- Set the font size   
   
   //--- SL EDIT
   obj_Edit_SL.Create(0,Edit_SL,0,40+30,160,0,0); //--- Create the stop loss edit field
   obj_Edit_SL.Size(70,25); //--- Set the edit field size
   obj_Edit_SL.ColorBackground(clrWhite); //--- Set the background color
   obj_Edit_SL.ColorBorder(clrBlack); //--- Set the border color
   obj_Edit_SL.Text("300"); //--- Set the default text
   obj_Edit_SL.Color(clrBlack); //--- Set the text color
   obj_Edit_SL.Font("Times new roman bold"); //--- Set the font style
   obj_Edit_SL.FontSize(13); //--- Set the font size
   
   //--- TP LABEL
   obj_Lbl_TP.Create(0,Lbl_TP,0,40+190,160,0,0); //--- Create the take profit label
   obj_Lbl_TP.Text("TP"); //--- Set the label text
   obj_Lbl_TP.Color(clrWhite); //--- Set the text color
   obj_Lbl_TP.Font("Arial black"); //--- Set the font style
   obj_Lbl_TP.FontSize(13); //--- Set the font size   
   
   //--- TP EDIT
   obj_Edit_TP.Create(0,Edit_TP,0,40+30+190,160,0,0); //--- Create the take profit edit field
   obj_Edit_TP.Size(70,25); //--- Set the edit field size
   obj_Edit_TP.ColorBackground(clrWhite); //--- Set the background color
   obj_Edit_TP.ColorBorder(clrBlack); //--- Set the border color
   obj_Edit_TP.Text("750"); //--- Set the default text
   obj_Edit_TP.Color(clrBlack); //--- Set the text color
   obj_Edit_TP.Font("Times new roman bold"); //--- Set the font style
   obj_Edit_TP.FontSize(13); //--- Set the font size
    
   //--- POINTS BUTTON
   obj_Btn_POINTS.Create(0,Btn_POINTS,0,40+110,160,0,0); //--- Create the points button
   obj_Btn_POINTS.Size(70,25); //--- Set the button size
   obj_Btn_POINTS.ColorBackground(clrGoldenrod); //--- Set the background color
   obj_Btn_POINTS.ColorBorder(clrGoldenrod); //--- Set the border color
   obj_Btn_POINTS.Text("Points"); //--- Set the button text
   obj_Btn_POINTS.Color(clrBlack); //--- Set the text color
   obj_Btn_POINTS.Font("Calibri bold"); //--- Set the font style
   obj_Btn_POINTS.FontSize(14); //--- Set the font size
   
   //--- SELL BUTTON
   obj_Btn_SELL.Create(0,Btn_SELL,0,40,210,0,0); //--- Create the sell button
   obj_Btn_SELL.Size(100,25); //--- Set the button size
   obj_Btn_SELL.ColorBackground(clrOrangeRed); //--- Set the background color
   obj_Btn_SELL.ColorBorder(clrOrangeRed); //--- Set the border color
   obj_Btn_SELL.Text("Sell"); //--- Set the button text
   obj_Btn_SELL.Color(clrWhite); //--- Set the text color
   obj_Btn_SELL.Font("Calibri bold"); //--- Set the font style
   obj_Btn_SELL.FontSize(14); //--- Set the font size
   
   //--- ENTRY BUTTON
   obj_Btn_ENTRY.Create(0,Btn_ENTRY,0,150,210,0,0); //--- Create the entry button
   obj_Btn_ENTRY.Size(70,25); //--- Set the button size
   obj_Btn_ENTRY.ColorBackground(clrGoldenrod); //--- Set the background color
   obj_Btn_ENTRY.ColorBorder(clrGoldenrod); //--- Set the border color
   obj_Btn_ENTRY.Text("Entry"); //--- Set the button text
   obj_Btn_ENTRY.Color(clrBlack); //--- Set the text color
   obj_Btn_ENTRY.Font("Calibri bold"); //--- Set the font style
   obj_Btn_ENTRY.FontSize(14); //--- Set the font size
   
   //--- BUY BUTTON
   obj_Btn_BUY.Create(0,Btn_BUY,0,40+190,210,0,0); //--- Create the buy button
   obj_Btn_BUY.Size(100,25); //--- Set the button size
   obj_Btn_BUY.ColorBackground(clrLimeGreen); //--- Set the background color
   obj_Btn_BUY.ColorBorder(clrLimeGreen); //--- Set the border color
   obj_Btn_BUY.Text("Buy"); //--- Set the button text
   obj_Btn_BUY.Color(clrWhite); //--- Set the text color
   obj_Btn_BUY.Font("Calibri bold"); //--- Set the font style
   obj_Btn_BUY.FontSize(14); //--- Set the font size
   
   //--- SELL STOP BUTTON
   obj_Btn_SELLSTOP.Create(0,Btn_SELLSTOP,0,40,240,0,0); //--- Create the sell stop button
   obj_Btn_SELLSTOP.Size(140,25); //--- Set the button size
   obj_Btn_SELLSTOP.ColorBackground(clrOrangeRed); //--- Set the background color
   obj_Btn_SELLSTOP.ColorBorder(clrOrangeRed); //--- Set the border color
   obj_Btn_SELLSTOP.Text("Sell Stop"); //--- Set the button text
   obj_Btn_SELLSTOP.Color(clrWhite); //--- Set the text color
   obj_Btn_SELLSTOP.Font("Calibri bold"); //--- Set the font style
   obj_Btn_SELLSTOP.FontSize(14); //--- Set the font size
   
   //--- BUY STOP BUTTON
   obj_Btn_BUYSTOP.Create(0,Btn_BUYSTOP,0,40+190-40,240,0,0); //--- Create the buy stop button
   obj_Btn_BUYSTOP.Size(140,25); //--- Set the button size
   obj_Btn_BUYSTOP.ColorBackground(clrLimeGreen); //--- Set the background color
   obj_Btn_BUYSTOP.ColorBorder(clrLimeGreen); //--- Set the border color
   obj_Btn_BUYSTOP.Text("Buy Stop"); //--- Set the button text
   obj_Btn_BUYSTOP.Color(clrWhite); //--- Set the text color
   obj_Btn_BUYSTOP.Font("Calibri bold"); //--- Set the font style
   obj_Btn_BUYSTOP.FontSize(14); //--- Set the font size
   
   //--- SELL LIMIT BUTTON
   obj_Btn_SELLLIMIT.Create(0,Btn_SELLLIMIT,0,40,270,0,0); //--- Create the sell limit button
   obj_Btn_SELLLIMIT.Size(140,25); //--- Set the button size
   obj_Btn_SELLLIMIT.ColorBackground(clrOrangeRed); //--- Set the background color
   obj_Btn_SELLLIMIT.ColorBorder(clrOrangeRed); //--- Set the border color
   obj_Btn_SELLLIMIT.Text("Sell Limit"); //--- Set the button text
   obj_Btn_SELLLIMIT.Color(clrWhite); //--- Set the text color
   obj_Btn_SELLLIMIT.Font("Calibri bold"); //--- Set the font style
   obj_Btn_SELLLIMIT.FontSize(14); //--- Set the font size
   
   //--- BUY LIMIT BUTTON
   obj_Btn_BUYLIMIT.Create(0,Btn_BUYLIMIT,0,40+190-40,270,0,0); //--- Create the buy limit button
   obj_Btn_BUYLIMIT.Size(140,25); //--- Set the button size
   obj_Btn_BUYLIMIT.ColorBackground(clrLimeGreen); //--- Set the background color
   obj_Btn_BUYLIMIT.ColorBorder(clrLimeGreen); //--- Set the border color
   obj_Btn_BUYLIMIT.Text("Buy Limit"); //--- Set the button text
   obj_Btn_BUYLIMIT.Color(clrWhite); //--- Set the text color
   obj_Btn_BUYLIMIT.Font("Calibri bold"); //--- Set the font style
   obj_Btn_BUYLIMIT.FontSize(14); //--- Set the font size
}

Tras la compilación, tenemos el siguiente resultado.

Eso fue un éxito. Ahora contamos con la interfaz comercial de reventa que necesitábamos. Solo nos queda proceder a elaborar las demás vistas de la sección de navegación y eso será todo. Primero, crearemos la interfaz de cierre y también organizaremos su lógica en una función. Sin embargo, antes de definir las utilidades de la función, necesitaremos definir los nombres respectivos de los botones junto con sus declaraciones de objeto. Aquí está la lógica de declaración de objetos.

CButton obj_Btn_CLOSE_ALL;                                  //--- Close All button object
CButton obj_Btn_CLOSE_ALL_SELL;                             //--- Close All Sell button object
CButton obj_Btn_CLOSE_ALL_BUY;                              //--- Close All Buy button object
CButton obj_Btn_CLOSE_LOSS_SELL;                            //--- Close Loss Sell button object
CButton obj_Btn_CLOSE_LOSS_BUY;                             //--- Close Loss Buy button object
CButton obj_Btn_CLOSE_PROFIT_SELL;                          //--- Close Profit Sell button object
CButton obj_Btn_CLOSE_PROFIT_BUY;                           //--- Close Profit Buy button object
CButton obj_Btn_CLOSE_ALL_LOSS;                             //--- Close All Loss button object
CButton obj_Btn_CLOSE_ALL_PROFIT;                           //--- Close All Profit button object
CButton obj_Btn_CLOSE_PENDING;                              //--- Close Pending button object

//--- 

CButton obj_Btn_ACC_NUMBER;                                 //--- Account Number button object
CButton obj_Btn_ACC_NAME;                                   //--- Account Name button object
CButton obj_Btn_ACC_TYPE;                                   //--- Account Type button object
CButton obj_Btn_ACC_LEVERAGE;                               //--- Account Leverage button object

CButton obj_Btn_ACC_EQUITY;                                 //--- Account Equity button object
CButton obj_Btn_ACC_BALANCE;                                //--- Account Balance button object
CButton obj_Btn_TIME;                                       //--- Time button object


//---
CLabel obj_Lbl_ACC_NUMBER;                                  //--- Account Number label object
CLabel obj_Lbl_ACC_NAME;                                    //--- Account Name label object
CLabel obj_Lbl_ACC_TYPE;                                    //--- Account Type label object
CLabel obj_Lbl_ACC_LEVERAGE;                                //--- Account Leverage label object

CLabel obj_Lbl_ACC_EQUITY;                                  //--- Account Equity label object
CLabel obj_Lbl_ACC_BALANCE;                                 //--- Account Balance label object
CLabel obj_Lbl_TIME;                                        //--- Time label object

Aquí está la lógica de definición del objeto.

#define Btn_CLOSE_ALL "Btn_CLOSE_ALL"                        //--- Button name for closing all trades
#define Btn_CLOSE_ALL_SELL "Btn_CLOSE_ALL_SELL"              //--- Button name for closing all sell trades
#define Btn_CLOSE_ALL_BUY "Btn_CLOSE_ALL_BUY"                //--- Button name for closing all buy trades
#define Btn_CLOSE_LOSS_SELL "Btn_CLOSE_LOSS_SELL"            //--- Button name for closing all loss sell trades
#define Btn_CLOSE_LOSS_BUY "Btn_CLOSE_LOSS_BUY"              //--- Button name for closing all loss buy trades
#define Btn_CLOSE_PROFIT_SELL "Btn_CLOSE_PROFIT_SELL"        //--- Button name for closing all profit sell trades
#define Btn_CLOSE_PROFIT_BUY "Btn_CLOSE_PROFIT_BUY"          //--- Button name for closing all profit buy trades
#define Btn_CLOSE_ALL_LOSS "Btn_CLOSE_ALL_LOSS"              //--- Button name for closing all loss trades
#define Btn_CLOSE_ALL_PROFIT "Btn_CLOSE_ALL_PROFIT"          //--- Button name for closing all profit trades
#define Btn_CLOSE_PENDING "Btn_CLOSE_PENDING"                //--- Button name for closing all pending trades

#define Btn_ACC_NUMBER "Btn_ACC_NUMBER"                      //--- Button name for the account number
#define Btn_ACC_NAME "Btn_ACC_NAME"                          //--- Button name for the account name
#define Btn_ACC_TYPE "Btn_ACC_TYPE"                          //--- Button name for the account type
#define Btn_ACC_LEVERAGE "Btn_ACC_LEVERAGE"                  //--- Button name for the account leverage

#define Btn_ACC_EQUITY "Btn_ACC_EQUITY"                      //--- Button name for the account equity
#define Btn_ACC_BALANCE "Btn_ACC_BALANCE"                    //--- Button name for the account balance
#define Btn_TIME "Btn_TIME"                                  //--- Button name for the time

//---
#define Lbl_ACC_NUMBER "Lbl_ACC_NUMBER"                      //--- Label name for the account number
#define Lbl_ACC_NAME "Lbl_ACC_NAME"                          //--- Label name for the account name
#define Lbl_ACC_TYPE "Lbl_ACC_TYPE"                          //--- Label name for the account type
#define Lbl_ACC_LEVERAGE "Lbl_ACC_LEVERAGE"                  //--- Label name for the account leverage

#define Lbl_ACC_EQUITY "Lbl_ACC_EQUITY"                      //--- Label name for the account equity
#define Lbl_ACC_BALANCE "Lbl_ACC_BALANCE"                    //--- Label name for the account balance
#define Lbl_TIME "Lbl_TIME"                                  //--- Label name for the time

Luego de definir todos los parámetros necesarios, procedemos a crear la función de cierre de la siguiente manera.

//+------------------------------------------------------------------+
//|      FUNCTION TO CREATE THE CLOSE SECTION                        |
//+------------------------------------------------------------------+
void createSection_Close(){
   //--- CLOSE ALL BUTTON
   obj_Btn_CLOSE_ALL.Create(0, Btn_CLOSE_ALL, 0, 80, 120, 0, 0); //--- Create the close all button
   obj_Btn_CLOSE_ALL.Size(210, 25); //--- Set the button size
   obj_Btn_CLOSE_ALL.ColorBackground(clrPeru); //--- Set the background color
   obj_Btn_CLOSE_ALL.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_ALL.Text("Close All"); //--- Set the button text
   obj_Btn_CLOSE_ALL.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_ALL.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_ALL.FontSize(14); //--- Set the font size
   
   //--- CLOSE ALL SELL BUTTON
   obj_Btn_CLOSE_ALL_SELL.Create(0, Btn_CLOSE_ALL_SELL, 0, 40, 150, 0, 0); //--- Create the close all sell button
   obj_Btn_CLOSE_ALL_SELL.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_ALL_SELL.ColorBackground(clrSalmon); //--- Set the background color
   obj_Btn_CLOSE_ALL_SELL.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_ALL_SELL.Text("Close All Sell"); //--- Set the button text
   obj_Btn_CLOSE_ALL_SELL.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_ALL_SELL.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_ALL_SELL.FontSize(14); //--- Set the font size
   
   //--- CLOSE ALL BUY BUTTON
   obj_Btn_CLOSE_ALL_BUY.Create(0, Btn_CLOSE_ALL_BUY, 0, 190, 150, 0, 0); //--- Create the close all buy button
   obj_Btn_CLOSE_ALL_BUY.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_ALL_BUY.ColorBackground(clrMediumSeaGreen); //--- Set the background color
   obj_Btn_CLOSE_ALL_BUY.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_ALL_BUY.Text("Close All Buy"); //--- Set the button text
   obj_Btn_CLOSE_ALL_BUY.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_ALL_BUY.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_ALL_BUY.FontSize(14); //--- Set the font size
   
   //--- CLOSE LOSS SELL BUTTON
   obj_Btn_CLOSE_LOSS_SELL.Create(0, Btn_CLOSE_LOSS_SELL, 0, 40, 180, 0, 0); //--- Create the close loss sell button
   obj_Btn_CLOSE_LOSS_SELL.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_LOSS_SELL.ColorBackground(clrSalmon); //--- Set the background color
   obj_Btn_CLOSE_LOSS_SELL.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_LOSS_SELL.Text("Close Loss Sell"); //--- Set the button text
   obj_Btn_CLOSE_LOSS_SELL.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_LOSS_SELL.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_LOSS_SELL.FontSize(14); //--- Set the font size
   
   //--- CLOSE LOSS BUY BUTTON
   obj_Btn_CLOSE_LOSS_BUY.Create(0, Btn_CLOSE_LOSS_BUY, 0, 190, 180, 0, 0); //--- Create the close loss buy button
   obj_Btn_CLOSE_LOSS_BUY.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_LOSS_BUY.ColorBackground(clrMediumSeaGreen); //--- Set the background color
   obj_Btn_CLOSE_LOSS_BUY.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_LOSS_BUY.Text("Close Loss Buy"); //--- Set the button text
   obj_Btn_CLOSE_LOSS_BUY.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_LOSS_BUY.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_LOSS_BUY.FontSize(14); //--- Set the font size
   
   //--- CLOSE PROFIT SELL BUTTON
   obj_Btn_CLOSE_PROFIT_SELL.Create(0, Btn_CLOSE_PROFIT_SELL, 0, 40, 210, 0, 0); //--- Create the close profit sell button
   obj_Btn_CLOSE_PROFIT_SELL.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_PROFIT_SELL.ColorBackground(clrSalmon); //--- Set the background color
   obj_Btn_CLOSE_PROFIT_SELL.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_PROFIT_SELL.Text("Close Profit Sell"); //--- Set the button text
   obj_Btn_CLOSE_PROFIT_SELL.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_PROFIT_SELL.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_PROFIT_SELL.FontSize(14); //--- Set the font size
   
   //--- CLOSE PROFIT BUY BUTTON
   obj_Btn_CLOSE_PROFIT_BUY.Create(0, Btn_CLOSE_PROFIT_BUY, 0, 190, 210, 0, 0); //--- Create the close profit buy button
   obj_Btn_CLOSE_PROFIT_BUY.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_PROFIT_BUY.ColorBackground(clrMediumSeaGreen); //--- Set the background color
   obj_Btn_CLOSE_PROFIT_BUY.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_PROFIT_BUY.Text("Close Profit Buy"); //--- Set the button text
   obj_Btn_CLOSE_PROFIT_BUY.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_PROFIT_BUY.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_PROFIT_BUY.FontSize(14); //--- Set the font size
   
   //--- CLOSE ALL LOSS BUTTON
   obj_Btn_CLOSE_ALL_LOSS.Create(0, Btn_CLOSE_ALL_LOSS, 0, 40, 240, 0, 0); //--- Create the close all loss button
   obj_Btn_CLOSE_ALL_LOSS.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_ALL_LOSS.ColorBackground(clrSalmon); //--- Set the background color
   obj_Btn_CLOSE_ALL_LOSS.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_ALL_LOSS.Text("CLOSE LOSS"); //--- Set the button text
   obj_Btn_CLOSE_ALL_LOSS.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_ALL_LOSS.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_ALL_LOSS.FontSize(14); //--- Set the font size
   
   //--- CLOSE ALL PROFIT BUTTON
   obj_Btn_CLOSE_ALL_PROFIT.Create(0, Btn_CLOSE_ALL_PROFIT, 0, 190, 240, 0, 0); //--- Create the close all profit button
   obj_Btn_CLOSE_ALL_PROFIT.Size(140, 25); //--- Set the button size
   obj_Btn_CLOSE_ALL_PROFIT.ColorBackground(clrMediumSeaGreen); //--- Set the background color
   obj_Btn_CLOSE_ALL_PROFIT.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_ALL_PROFIT.Text("CLOSE PROFIT"); //--- Set the button text
   obj_Btn_CLOSE_ALL_PROFIT.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_ALL_PROFIT.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_ALL_PROFIT.FontSize(14); //--- Set the font size
   
   //--- CLOSE ALL PENDING BUTTON
   obj_Btn_CLOSE_PENDING.Create(0, Btn_CLOSE_PENDING, 0, 80, 270, 0, 0); //--- Create the close all pending button
   obj_Btn_CLOSE_PENDING.Size(210, 25); //--- Set the button size
   obj_Btn_CLOSE_PENDING.ColorBackground(clrPeru); //--- Set the background color
   obj_Btn_CLOSE_PENDING.ColorBorder(clrWhite); //--- Set the border color
   obj_Btn_CLOSE_PENDING.Text("Close All Pending"); //--- Set the button text
   obj_Btn_CLOSE_PENDING.Color(clrBlack); //--- Set the text color
   obj_Btn_CLOSE_PENDING.Font("Calibri bold"); //--- Set the font style
   obj_Btn_CLOSE_PENDING.FontSize(14); //--- Set the font size
}

En el controlador de eventos de inicialización, podemos comentar la lógica de llamada de función para la sección comercial y efectuar la sección de cierre a través de la llamada de función. Logramos esto comentando la función en lugar de eliminarla, ya que tendremos que reutilizarla más tarde.

   // BODY OF THE PANEL
   //createSection_Trade(); //--- Call function to create the trade section
   createSection_Close(); //--- Call function to create the close section

Al ejecutar el programa, tenemos el siguiente resultado.

Eso fue un éxito. Ahora podemos proceder a crear la última sección que mostrará la información relacionada con la cuenta de trading. Para esto también utilizamos una función. 

//+------------------------------------------------------------------+
//|        FUNCTION TO CREATE THE INFO SECTION                       |
//+------------------------------------------------------------------+
void createSection_Information() {
   //--- Create Account Number Label
   obj_Lbl_ACC_NUMBER.Create(0, Lbl_ACC_NUMBER, 0, 40, 100, 0, 0); //--- Initialize label for Account Number
   obj_Lbl_ACC_NUMBER.Text("Account Number"); //--- Set label text to "Account Number"
   obj_Lbl_ACC_NUMBER.Color(clrWhite); //--- Set label color to white
   obj_Lbl_ACC_NUMBER.Font("Calibri bold"); //--- Set label font to Calibri bold
   obj_Lbl_ACC_NUMBER.FontSize(14); //--- Set label font size to 14

   //--- Create Account Number Button
   obj_Btn_ACC_NUMBER.Create(0, Btn_ACC_NUMBER, 0, 40 + 140, 100 + 2, 0, 0); //--- Initialize button for Account Number
   obj_Btn_ACC_NUMBER.Size(150, 20); //--- Set button size to 150x20
   obj_Btn_ACC_NUMBER.ColorBackground(clrGainsboro); //--- Set button background color to Gainsboro
   obj_Btn_ACC_NUMBER.ColorBorder(clrWhite); //--- Set button border color to white
   obj_Btn_ACC_NUMBER.Text(IntegerToString(AccountInfoInteger(ACCOUNT_LOGIN))); //--- Set button text with account number
   obj_Btn_ACC_NUMBER.Color(clrBlack); //--- Set button text color to black
   obj_Btn_ACC_NUMBER.Font("Calibri bold"); //--- Set button font to Calibri bold
   obj_Btn_ACC_NUMBER.FontSize(13); //--- Set button font size to 13

}

Nuevamente utilizamos un formato similar en la creación de la sección de información. Sin embargo, al configurar el texto, utilizamos algunas funciones adicionales cuya esencia nos gustaría explicar. La línea está resaltada en color amarillo para aumentar la claridad. Utilizamos una combinación de las funciones AccountInfoInteger e IntegerToString para establecer el texto del botón «obj_Btn_ACC_NUMBER» y mostrar el número de cuenta.

Usamos la función AccountInfoInteger para recuperar la información de la cuenta específica en función del parámetro dado. En este caso, el parámetro es «ACCOUNT_LOGIN», que indica a la función que obtenga el número de inicio de sesión de la cuenta desde el terminal MetaTrader. Este número de inicio de sesión se devuelve como un valor entero.

A continuación, se aplica la función IntegerToString para convertir este valor entero en una cadena. Esto es necesario porque el método "Texto" del botón requiere que el valor esté en formato de cadena para una visualización correcta. Sin esta conversión, el botón no podría mostrar correctamente el número de cuenta. En un formato similar, configuramos el nombre de la cuenta y los botones de tipo.

   //--- Create Account Name Label
   obj_Lbl_ACC_NAME.Create(0, Lbl_ACC_NAME, 0, 40, 125, 0, 0); //--- Initialize label for Account Name
   obj_Lbl_ACC_NAME.Text("Account Name"); //--- Set label text to "Account Name"
   obj_Lbl_ACC_NAME.Color(clrWhite); //--- Set label color to white
   obj_Lbl_ACC_NAME.Font("Calibri bold"); //--- Set label font to Calibri bold
   obj_Lbl_ACC_NAME.FontSize(14); //--- Set label font size to 14

   //--- Create Account Name Button
   obj_Btn_ACC_NAME.Create(0, Btn_ACC_NAME, 0, 40 + 120, 125 + 2, 0, 0); //--- Initialize button for Account Name
   obj_Btn_ACC_NAME.Size(170, 20); //--- Set button size to 170x20
   obj_Btn_ACC_NAME.ColorBackground(clrGainsboro); //--- Set button background color to Gainsboro
   obj_Btn_ACC_NAME.ColorBorder(clrWhite); //--- Set button border color to white
   obj_Btn_ACC_NAME.Text(AccountInfoString(ACCOUNT_SERVER)); //--- Set button text with account server name
   obj_Btn_ACC_NAME.Color(clrBlack); //--- Set button text color to black
   obj_Btn_ACC_NAME.Font("Calibri bold"); //--- Set button font to Calibri bold
   obj_Btn_ACC_NAME.FontSize(13); //--- Set button font size to 13

   //--- Create Account Type Label
   obj_Lbl_ACC_TYPE.Create(0, Lbl_ACC_TYPE, 0, 40, 150, 0, 0); //--- Initialize label for Account Type
   obj_Lbl_ACC_TYPE.Text("Account Type"); //--- Set label text to "Account Type"
   obj_Lbl_ACC_TYPE.Color(clrWhite); //--- Set label color to white
   obj_Lbl_ACC_TYPE.Font("Calibri bold"); //--- Set label font to Calibri bold
   obj_Lbl_ACC_TYPE.FontSize(14); //--- Set label font size to 14

   //--- Create Account Type Button
   obj_Btn_ACC_TYPE.Create(0, Btn_ACC_TYPE, 0, 40 + 110, 150 + 2, 0, 0); //--- Initialize button for Account Type
   obj_Btn_ACC_TYPE.Size(180, 20); //--- Set button size to 180x20
   obj_Btn_ACC_TYPE.ColorBackground(clrGainsboro); //--- Set button background color to Gainsboro
   obj_Btn_ACC_TYPE.ColorBorder(clrWhite); //--- Set button border color to white
   ENUM_ACCOUNT_TRADE_MODE account_type = (ENUM_ACCOUNT_TRADE_MODE)AccountInfoInteger(ACCOUNT_TRADE_MODE); //--- Retrieve account type
   string trade_mode; //--- Initialize variable for trade mode description
   switch (account_type) { //--- Determine account type
      case ACCOUNT_TRADE_MODE_DEMO: trade_mode = "Demo Account"; break; //--- Set trade_mode for Demo account
      case ACCOUNT_TRADE_MODE_CONTEST: trade_mode = "Contest Account"; break; //--- Set trade_mode for Contest account
      default: trade_mode = "Real Account"; break; //--- Set trade_mode for Real account
   }
   obj_Btn_ACC_TYPE.Text(trade_mode); //--- Set button text to account type description
   obj_Btn_ACC_TYPE.Color(clrBlack); //--- Set button text color to black
   obj_Btn_ACC_TYPE.Font("Calibri bold"); //--- Set button font to Calibri bold
   obj_Btn_ACC_TYPE.FontSize(13); //--- Set button font size to 13

Aquí configuramos el nombre de la cuenta y los botones de tipo. Sin embargo, utilizamos una lógica más compleja para adquirir el tipo de cuenta, ya que no existe un método directo para adquirir el tipo de cuenta directamente. La lógica se resalta nuevamente en color amarillo para enfatizarla. Comenzamos definiendo una variable llamada «account_type» del tipo de enumeración ENUM_ACCOUNT_TRADE_MODE. Este es un tipo de datos enumerado diseñado específicamente para almacenar diversos modos de negociación de cuentas, tales como cuentas demo, de concurso o reales. A continuación, le asignamos un valor utilizando la función «AccountInfoInteger», con el parámetro ACCOUNT_TRADE_MODE. Esta función recupera el modo comercial actual de la cuenta como un entero enumerado.

A continuación, declaramos una variable de cadena llamada «trade_mode» para almacenar una etiqueta descriptiva basada en el tipo de cuenta. A continuación, utilizamos una instrucción switch para determinar el tipo de cuenta comprobando el valor de «account_type». Esta declaración switch tiene tres casos:

• «ACCOUNT_TRADE_MODE_DEMO»: Si la cuenta es una cuenta demo, «trade_mode» se establece en «Demo Account».
• «ACCOUNT_TRADE_MODE_CONTEST»: Si la cuenta se utiliza en un concurso, «trade_mode» se establece en «Contest Account».
• Caso predeterminado: Para cualquier otro tipo (normalmente una cuenta real), «trade_mode» se establece en «Real Account».

Por último, llamamos al método «Text» del botón «obj_Btn_ACC_TYPE» y le pasamos la cadena «trade_mode». Esto actualiza el texto del botón para mostrar el tipo de cuenta descriptivo. A partir de aquí, el resto de utilidades se definen en un formato similar al siguiente.

   //--- Create Account Leverage Label
   obj_Lbl_ACC_LEVERAGE.Create(0, Lbl_ACC_LEVERAGE, 0, 40, 175, 0, 0); //--- Initialize label for Account Leverage
   obj_Lbl_ACC_LEVERAGE.Text("Account Leverage"); //--- Set label text to "Account Leverage"
   obj_Lbl_ACC_LEVERAGE.Color(clrWhite); //--- Set label color to white
   obj_Lbl_ACC_LEVERAGE.Font("Calibri bold"); //--- Set label font to Calibri bold
   obj_Lbl_ACC_LEVERAGE.FontSize(14); //--- Set label font size to 14

   //--- Create Account Leverage Button
   obj_Btn_ACC_LEVERAGE.Create(0, Btn_ACC_LEVERAGE, 0, 40 + 150, 175 + 2, 0, 0); //--- Initialize button for Account Leverage
   obj_Btn_ACC_LEVERAGE.Size(140, 20); //--- Set button size to 140x20
   obj_Btn_ACC_LEVERAGE.ColorBackground(clrGainsboro); //--- Set button background color to Gainsboro
   obj_Btn_ACC_LEVERAGE.ColorBorder(clrWhite); //--- Set button border color to white
   obj_Btn_ACC_LEVERAGE.Text(IntegerToString(AccountInfoInteger(ACCOUNT_LEVERAGE))); //--- Set button text with account leverage
   obj_Btn_ACC_LEVERAGE.Color(clrBlack); //--- Set button text color to black
   obj_Btn_ACC_LEVERAGE.Font("Calibri bold"); //--- Set button font to Calibri bold
   obj_Btn_ACC_LEVERAGE.FontSize(13); //--- Set button font size to 13

   //--- Create Account Equity Label
   obj_Lbl_ACC_EQUITY.Create(0, Lbl_ACC_EQUITY, 0, 40, 220, 0, 0); //--- Initialize label for Account Equity
   obj_Lbl_ACC_EQUITY.Text("Account Equity"); //--- Set label text to "Account Equity"
   obj_Lbl_ACC_EQUITY.Color(clrAqua); //--- Set label color to Aqua
   obj_Lbl_ACC_EQUITY.Font("Cooper Black"); //--- Set label font to Cooper Black
   obj_Lbl_ACC_EQUITY.FontSize(14); //--- Set label font size to 14

   //--- Create Account Equity Button
   obj_Btn_ACC_EQUITY.Create(0, Btn_ACC_EQUITY, 0, 40 + 170, 220 + 2, 0, 0); //--- Initialize button for Account Equity
   obj_Btn_ACC_EQUITY.Size(120, 20); //--- Set button size to 120x20
   obj_Btn_ACC_EQUITY.ColorBackground(clrBlack); //--- Set button background color to black
   obj_Btn_ACC_EQUITY.ColorBorder(clrBlanchedAlmond); //--- Set button border color to Blanched Almond
   obj_Btn_ACC_EQUITY.Text(DoubleToString(AccountInfoDouble(ACCOUNT_EQUITY), 2)); //--- Set button text with account equity
   obj_Btn_ACC_EQUITY.Color(clrWhite); //--- Set button text color to white
   obj_Btn_ACC_EQUITY.Font("Times new roman bold"); //--- Set button font to Times New Roman bold
   obj_Btn_ACC_EQUITY.FontSize(13); //--- Set button font size to 13

   //--- Create Account Balance Label
   obj_Lbl_ACC_BALANCE.Create(0, Lbl_ACC_BALANCE, 0, 40, 245, 0, 0); //--- Initialize label for Account Balance
   obj_Lbl_ACC_BALANCE.Text("Account Balance"); //--- Set label text to "Account Balance"
   obj_Lbl_ACC_BALANCE.Color(clrAqua); //--- Set label color to Aqua
   obj_Lbl_ACC_BALANCE.Font("Cooper Black"); //--- Set label font to Cooper Black
   obj_Lbl_ACC_BALANCE.FontSize(14); //--- Set label font size to 14

   //--- Create Account Balance Button
   obj_Btn_ACC_BALANCE.Create(0, Btn_ACC_BALANCE, 0, 40 + 170, 245 + 2, 0, 0); //--- Initialize button for Account Balance
   obj_Btn_ACC_BALANCE.Size(120, 20); //--- Set button size to 120x20
   obj_Btn_ACC_BALANCE.ColorBackground(clrBlack); //--- Set button background color to black
   obj_Btn_ACC_BALANCE.ColorBorder(clrBlanchedAlmond); //--- Set button border color to Blanched Almond
   obj_Btn_ACC_BALANCE.Text(DoubleToString(AccountInfoDouble(ACCOUNT_BALANCE), 2)); //--- Set button text with account balance
   obj_Btn_ACC_BALANCE.Color(clrWhite); //--- Set button text color to white
   obj_Btn_ACC_BALANCE.Font("Times new roman bold"); //--- Set button font to Times New Roman bold
   obj_Btn_ACC_BALANCE.FontSize(13); //--- Set button font size to 13

   //--- Create Server Time Label
   obj_Lbl_TIME.Create(0, Lbl_TIME, 0, 40, 270, 0, 0); //--- Initialize label for Server Time
   obj_Lbl_TIME.Text("Server Time"); //--- Set label text to "Server Time"
   obj_Lbl_TIME.Color(clrLime); //--- Set label color to Lime
   obj_Lbl_TIME.Font("Cooper Black"); //--- Set label font to Cooper Black
   obj_Lbl_TIME.FontSize(14); //--- Set label font size to 14

   //--- Create Server Time Button
   obj_Btn_TIME.Create(0, Btn_TIME, 0, 40 + 120, 270 + 2, 0, 0); //--- Initialize button for Server Time
   obj_Btn_TIME.Size(170, 20); //--- Set button size to 170x20
   obj_Btn_TIME.ColorBackground(clrBlack); //--- Set button background color to black
   obj_Btn_TIME.ColorBorder(clrBlanchedAlmond); //--- Set button border color to Blanched Almond
   obj_Btn_TIME.Text(TimeToString(TimeTradeServer(), TIME_DATE | TIME_SECONDS)); //--- Set button text with server time
   obj_Btn_TIME.Color(clrWhite); //--- Set button text color to white
   obj_Btn_TIME.Font("Times new roman bold"); //--- Set button font to Times New Roman bold
   obj_Btn_TIME.FontSize(13); //--- Set button font size to 13

Eso es todo. Para comprobar el efecto del cambio, necesitaremos llamar a la función en la etapa de inicialización y comentar las otras llamadas a la función de navegación. Esto es como se muestra a continuación.

   // BODY OF THE PANEL
   //createSection_Trade(); //--- Call function to create the trade section
   //createSection_Close(); //--- Call function to create the close section
   createSection_Information(); //--- Call function to create the information section

Tras compilar y ejecutar el programa, obtenemos el siguiente resultado.

Ahora tenemos los componentes de utilidad del panel completo que queríamos. Ahora podemos volver a la interfaz original para las actividades comerciales, ya que es aquella cuyo botón está activo. De esta forma, comentaremos las funciones de las secciones de cierre e información, pero las necesitaremos más adelante cuando sea necesario, es decir, cuando se necesiten sus respectivos campos de visualización. Así, el código de inicialización final responsable de la creación de la interfaz del panel es el siguiente:

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit() {
   //--- Start of the initialization function

   //--- MAIN BUTTON
   obj_Btn_MAIN.Create(0, Btn_MAIN, 0, 30, 30, 0, 0); //--- Create the main button at specified coordinates
   //obj_Btn_MAIN.Width(310); //--- (Commented out) Set width of the main button
   //obj_Btn_MAIN.Height(300); //--- (Commented out) Set height of the main button
   obj_Btn_MAIN.Size(310, 300); //--- Set size of the main button
   obj_Btn_MAIN.ColorBackground(C'070,070,070'); //--- Set background color of the main button
   obj_Btn_MAIN.ColorBorder(clrBlack); //--- Set border color of the main button

   //--- HEADER BUTTON 
   obj_Btn_HEADER.Create(0, Btn_HEADER, 0, 30, 30, 0, 0); //--- Create the header button at specified coordinates
   obj_Btn_HEADER.Size(310, 25); //--- Set size of the header button
   obj_Btn_HEADER.ColorBackground(clrLightBlue); //--- Set background color of the header button
   obj_Btn_HEADER.ColorBorder(clrBlack); //--- Set border color of the header button

   //--- X BUTTON
   obj_Btn_X.Create(0, Btn_X, 0, 30 + 280, 30 + 1, 0, 0); //--- Create the close button (X) at specified coordinates
   obj_Btn_X.Size(30 - 1, 25 - 1 - 1); //--- Set size of the close button
   obj_Btn_X.ColorBackground(clrLightBlue); //--- Set background color of the close button
   obj_Btn_X.ColorBorder(clrLightBlue); //--- Set border color of the close button
   obj_Btn_X.Text(CharToString(255)); //--- Set the close button text to an "X" character
   obj_Btn_X.Color(clrBlack); //--- Set text color of the close button
   obj_Btn_X.Font("Wingdings"); //--- Set font of the close button to Wingdings
   obj_Btn_X.FontSize(17); //--- Set font size of the close button

   //--- HEADER LABEL
   obj_Lbl_HEADER.Create(0, Lbl_HEADER, 0, 40, 30, 0, 0); //--- Create the header label at specified coordinates
   obj_Lbl_HEADER.Text("Control Panel"); //--- Set text of the header label
   obj_Lbl_HEADER.Color(clrRed); //--- Set text color of the header label
   obj_Lbl_HEADER.Font("Cooper black"); //--- Set font of the header label to Cooper Black
   obj_Lbl_HEADER.FontSize(14); //--- Set font size of the header label
   
   //--- TRADE BUTTON
   obj_Btn_TRADE.Create(0, Btn_TRADE, 0, 40, 60, 0, 0); //--- Create the trade button at specified coordinates
   obj_Btn_TRADE.Size(90, 30); //--- Set size of the trade button
   obj_Btn_TRADE.ColorBackground(clrYellow); //--- Set background color of the trade button
   obj_Btn_TRADE.ColorBorder(clrYellow); //--- Set border color of the trade button
   obj_Btn_TRADE.Text("Trade"); //--- Set text of the trade button
   obj_Btn_TRADE.Color(clrBlack); //--- Set text color of the trade button
   obj_Btn_TRADE.Font("Arial Black"); //--- Set font of the trade button to Arial Black
   obj_Btn_TRADE.FontSize(13); //--- Set font size of the trade button
   
   //--- CLOSE BUTTON
   obj_Btn_CLOSE.Create(0, Btn_CLOSE, 0, 40 + obj_Btn_TRADE.Width() + 10, 60, 0, 0); //--- Create the close button at specified coordinates
   obj_Btn_CLOSE.Size(90, 30); //--- Set size of the close button
   obj_Btn_CLOSE.ColorBackground(clrSilver); //--- Set background color of the close button
   obj_Btn_CLOSE.ColorBorder(clrSilver); //--- Set border color of the close button
   obj_Btn_CLOSE.Text("Close"); //--- Set text of the close button
   obj_Btn_CLOSE.Color(clrBlack); //--- Set text color of the close button
   obj_Btn_CLOSE.Font("Arial Black"); //--- Set font of the close button to Arial Black
   obj_Btn_CLOSE.FontSize(13); //--- Set font size of the close button

   //--- INFO BUTTON
   obj_Btn_INFO.Create(0, Btn_INFO, 0, 40 + obj_Btn_TRADE.Width() + 10 + obj_Btn_CLOSE.Width() + 10, 60, 0, 0); //--- Create the info button at specified coordinates
   obj_Btn_INFO.Size(90, 30); //--- Set size of the info button
   obj_Btn_INFO.ColorBackground(clrSilver); //--- Set background color of the info button
   obj_Btn_INFO.ColorBorder(clrSilver); //--- Set border color of the info button
   obj_Btn_INFO.Text("Inform'n"); //--- Set text of the info button
   obj_Btn_INFO.Color(clrBlack); //--- Set text color of the info button
   obj_Btn_INFO.Font("Arial Black"); //--- Set font of the info button to Arial Black
   obj_Btn_INFO.FontSize(13); //--- Set font size of the info button
   
   // BODY OF THE PANEL
   createSection_Trade(); //--- Call function to create the trade section
   //createSection_Close(); //--- (Commented out) Call function to create the close section
   //createSection_Information(); //--- (Commented out) Call function to create the information section

   //--- FOOTER BUTTON
   obj_Btn_FOOTER.Create(0, Btn_FOOTER, 0, 30 + 1, 305 - 1, 0, 0); //--- Create the footer button at specified coordinates
   obj_Btn_FOOTER.Size(310 - 1 - 1, 25); //--- Set size of the footer button
   obj_Btn_FOOTER.ColorBackground(C'070,070,070'); //--- Set background color of the footer button
   obj_Btn_FOOTER.ColorBorder(C'070,070,070'); //--- Set border color of the footer button
   obj_Btn_FOOTER.Text(ShortToString(0x23F0) + "https://t.me/Forex_Algo_Trader"); //--- Set text of the footer button with a link
   obj_Btn_FOOTER.Color(clrWhite); //--- Set text color of the footer button
   obj_Btn_FOOTER.Font("Calibri bold italic"); //--- Set font of the footer button to Calibri bold italic
   obj_Btn_FOOTER.FontSize(12); //--- Set font size of the footer button

   ChartRedraw(0); //--- Redraw the chart to update the panel

   //--- End of initialization function
   return(INIT_SUCCEEDED); //--- Return initialization success status
}

El resultado final del hito es el siguiente:

Aunque hayamos creado los componentes necesarios, debemos deshacernos de todos los componentes que hayamos creado una vez que eliminemos el programa del gráfico. La mejor forma de lograr esto es creando funciones para cada sección que hayamos creado, de modo que se puedan usar para eliminar las secciones simultáneamente y reutilizarlas. Queremos ser ordenados. Si tomamos el ejemplo de la demolición de un edificio, tiene sentido quitar primero el revestimiento, luego los tabiques y después las plantas superiores antes de pasar a los cimientos. Sí, cualquiera puede empezar, pero es más profesional hacer las cosas profesionalmente. Apostamos a que estás de acuerdo. Las funciones son las siguientes:

//--- Function to destroy main panel objects
void destroySection_Main_Panel() {
   obj_Btn_MAIN.Destroy(); //--- Destroy the main button
   obj_Btn_HEADER.Destroy(); //--- Destroy the header button
   obj_Btn_X.Destroy(); //--- Destroy the close (X) button
   obj_Lbl_HEADER.Destroy(); //--- Destroy the header label
   obj_Btn_TRADE.Destroy(); //--- Destroy the trade section button
   obj_Btn_CLOSE.Destroy(); //--- Destroy the close section button
   obj_Btn_INFO.Destroy(); //--- Destroy the information section button
   obj_Btn_FOOTER.Destroy(); //--- Destroy the footer button
}

//--- Function to destroy trade section objects
void destroySection_Trade() {
   obj_Btn_RISK.Destroy(); //--- Destroy the risk button
   obj_Edit_RISK.Destroy(); //--- Destroy the risk input field
   obj_Lbl_PRICE.Destroy(); //--- Destroy the price label
   obj_Edit_PRICE.Destroy(); //--- Destroy the price input field
   obj_Lbl_LOTS.Destroy(); //--- Destroy the lot size label
   obj_Edit_LOTS.Destroy(); //--- Destroy the lot size input field
   obj_Lbl_SL.Destroy(); //--- Destroy the stop loss label
   obj_Edit_SL.Destroy(); //--- Destroy the stop loss input field
   obj_Lbl_TP.Destroy(); //--- Destroy the take profit label
   obj_Edit_TP.Destroy(); //--- Destroy the take profit input field
   obj_Btn_POINTS.Destroy(); //--- Destroy the points button
   obj_Btn_SELL.Destroy(); //--- Destroy the sell button
   obj_Btn_ENTRY.Destroy(); //--- Destroy the entry button
   obj_Btn_BUY.Destroy(); //--- Destroy the buy button
   obj_Btn_SELLSTOP.Destroy(); //--- Destroy the sell stop button
   obj_Btn_BUYSTOP.Destroy(); //--- Destroy the buy stop button
   obj_Btn_SELLLIMIT.Destroy(); //--- Destroy the sell limit button
   obj_Btn_BUYLIMIT.Destroy(); //--- Destroy the buy limit button
}

//--- Function to destroy close section objects
void destroySection_Close() {
   obj_Btn_CLOSE_ALL.Destroy(); //--- Destroy the button to close all positions
   obj_Btn_CLOSE_ALL_SELL.Destroy(); //--- Destroy the button to close all sell positions
   obj_Btn_CLOSE_ALL_BUY.Destroy(); //--- Destroy the button to close all buy positions
   obj_Btn_CLOSE_LOSS_SELL.Destroy(); //--- Destroy the button to close losing sell positions
   obj_Btn_CLOSE_LOSS_BUY.Destroy(); //--- Destroy the button to close losing buy positions
   obj_Btn_CLOSE_PROFIT_SELL.Destroy(); //--- Destroy the button to close profitable sell positions
   obj_Btn_CLOSE_PROFIT_BUY.Destroy(); //--- Destroy the button to close profitable buy positions
   obj_Btn_CLOSE_ALL_LOSS.Destroy(); //--- Destroy the button to close all losing positions
   obj_Btn_CLOSE_ALL_PROFIT.Destroy(); //--- Destroy the button to close all profitable positions
   obj_Btn_CLOSE_PENDING.Destroy(); //--- Destroy the button to close pending orders
}

//--- Function to destroy information section objects
void destroySection_Information() {
   obj_Lbl_ACC_NUMBER.Destroy(); //--- Destroy the account number label
   obj_Btn_ACC_NUMBER.Destroy(); //--- Destroy the account number button
   obj_Lbl_ACC_NAME.Destroy(); //--- Destroy the account name label
   obj_Btn_ACC_NAME.Destroy(); //--- Destroy the account name button
   obj_Lbl_ACC_TYPE.Destroy(); //--- Destroy the account type label
   obj_Btn_ACC_TYPE.Destroy(); //--- Destroy the account type button
   obj_Lbl_ACC_LEVERAGE.Destroy(); //--- Destroy the account leverage label
   obj_Btn_ACC_LEVERAGE.Destroy(); //--- Destroy the account leverage button
   obj_Lbl_ACC_EQUITY.Destroy(); //--- Destroy the account equity label
   obj_Btn_ACC_EQUITY.Destroy(); //--- Destroy the account equity button
   obj_Lbl_ACC_BALANCE.Destroy(); //--- Destroy the account balance label
   obj_Btn_ACC_BALANCE.Destroy(); //--- Destroy the account balance button
   obj_Lbl_TIME.Destroy(); //--- Destroy the server time label
   obj_Btn_TIME.Destroy(); //--- Destroy the server time button
}

Aquí, simplemente utilizamos los objetos correspondientes y llamamos al método «Destroy» para eliminar los elementos específicos. A continuación, llamamos a las funciones en el controlador de eventos OnDeinit.

//+------------------------------------------------------------------+
//| Expert deinitialization function                                 |
//+------------------------------------------------------------------+
void OnDeinit(const int reason) {
   //--- Start of the deinitialization function

   destroySection_Main_Panel(); //--- Call function to destroy the main panel section
   destroySection_Trade(); //--- Call function to destroy the trade section
   destroySection_Close(); //--- Call function to destroy the close section
   destroySection_Information(); //--- Call function to destroy the information section
   
   ChartRedraw(0);
   
   //--- End of deinitialization function
}

Eso fue un éxito. Hemos creado el panel que queríamos con los respectivos botones de navegación y componentes del cuerpo. De esta forma, nuestro objetivo de esta primera entrega de la serie de artículos está completo. Ahora necesitamos hacer que los botones estén activos y respondan a los clics y a las actualizaciones automáticas cuando sea necesario, algo que nos ocuparemos en las siguientes entregas.

Conclusión

En este artículo, nos hemos centrado en configurar la estructura básica para crear un panel interactivo de MetaQuotes Language 5 (MQL5) utilizando la clase «Controls». Hemos cubierto la creación paso a paso de componentes esenciales como botones, etiquetas y campos de edición, asegurándonos de que cada elemento esté claramente definido y tenga un estilo visual definido. Además, hemos destacado cómo personalizar el texto, los colores y los tamaños para crear un aspecto profesional y coherente para el panel. A través de este enfoque estructurado, hemos creado la base de una interfaz totalmente funcional que se puede ampliar y adaptar en función de los requisitos comerciales específicos.

En la siguiente parte, mejoraremos este panel añadiéndole capacidad de respuesta e interactividad, de modo que sea capaz de reaccionar dinámicamente a las entradas del usuario y a las acciones de trading en MetaTrader 5. Exploraremos cómo programar eventos de clic en botones, gestionar actualizaciones de datos en tiempo real e implementar mecanismos de retroalimentación para mejorar la usabilidad del panel. Esta actualización transformará la interfaz estática actual en un potente asistente de trading en tiempo real que ofrece una experiencia de trading fluida. Estén atentos.