Creación de un Panel de administración de operaciones en MQL5 (Parte X): Interfaz basada en recursos externos

Contenido:

• Introducción
• Resumen
• Diseño conceptual
• Implementación del código
• Pruebas
• Conclusión

Introducción

Encontrar un punto de partida siempre es un reto. Sin embargo, una vez que hayas creado un borrador inicial, será más fácil desarrollarlo y descubrir nuevas posibilidades. Muchos diseñadores y desarrolladores de éxito comienzan con bocetos sencillos y van desarrollando su trabajo hasta que resulta realmente llamativo. Incluso cuando crees haber alcanzado la versión definitiva de tu producto, siempre hay margen para seguir mejorándolo. Cada nueva iteración debe aportar algo diferente respecto a la anterior.

En esta serie de desarrollo, comenzamos con un programa de panel de administración monolítico que presentaba múltiples interfaces. Cuando el código se volvió demasiado extenso y difícil de mantener, introdujimos una mejor organización del código aprovechando la biblioteca estándar MQL5, la herencia de clases y los archivos de cabecera personalizados. Este enfoque nos permitió centrarnos en aspectos individuales del programa sin afectar a otras partes, reduciendo significativamente la posibilidad de errores y haciendo posible una futura expansión, limitada únicamente por la imaginación del desarrollador. Hoy comenzamos un nuevo ciclo, empezando por el panel principal. 

En mi opinión, los símbolos son una de las formas más eficaces de comunicación visual, capaces de transmitir información detallada al instante y con un espacio mínimo. A lo largo de la historia, los símbolos han desempeñado un papel vital en la comunicación humana; mucho antes de la invención del lenguaje escrito, las primeras civilizaciones utilizaban pictogramas y glifos para representar ideas, emociones e instrucciones. Desde los antiguos jeroglíficos egipcios hasta los actuales emojis, los símbolos han seguido siendo un lenguaje visual universal que trasciende las barreras lingüísticas.

En el mundo digital, esta tradición continúa. Tomemos, por ejemplo, la fuente Wingdings, una colección de símbolos integrados en el texto que transmiten significado sin necesidad de palabras. En el desarrollo con MQL5, los símbolos como estos resultan increíblemente útiles, ya que están bien documentados y son fáciles de implementar. Su uso puede reducir significativamente la cantidad de objetos visuales que se muestran en un gráfico, al tiempo que transmite información esencial con claridad y elegancia. Por ejemplo, una señal de "Compra" puede representarse mediante una simple flecha hacia arriba en lugar de una etiqueta de texto completa, lo que ahorra espacio en la pantalla y carga de procesamiento.

Mi enfoque aquí se centra en el diseño y la gestión de las áreas de interfaz. Al incorporar elementos simbólicos, podemos minimizar el desorden y maximizar la usabilidad. Wingdings es una herramienta, pero también quiero destacar el uso de imágenes de mapa de bits personalizadas. Estas imágenes pueden sustituir a botones grandes manteniendo la funcionalidad, ofreciendo una alternativa elegante y eficiente que mantiene la interfaz limpia y atractiva.

Aunque la interfaz de inicio de New_Admin_Panel ya me ha dado la satisfacción de funcionar correctamente, su aspecto visual aún puede mejorarse. Ahora que la estructura básica está establecida, es momento de refinar y mejorar el diseño de la interfaz. En la siguiente sección, ofreceré una visión general de los objetivos de desarrollo actuales y de cómo planeamos avanzar en esta evolución.

Resumen

El objetivo de hoy se centra en la interfaz principal, donde rediseñaremos y organizaremos los elementos para crear un panel más compacto y visualmente eficiente. Comenzaremos describiendo el diseño conceptual de la nueva interfaz de inicio y sus componentes, y luego procederemos a implementarla utilizando MQL5, donde integraremos nuevos recursos y compilaremos la versión mejorada del Panel de administración. A continuación se incluye una imagen de referencia para ayudar a visualizar la dirección que estamos tomando.

Anteriormente mencioné Wingdings como un gran ejemplo de comunicación simbólica, ya que ofrece señales visuales que transmiten significado de forma rápida y sencilla. Si bien sirven como referencia ideal para iconos minimalistas, no tengo previsto utilizarlos directamente. En cambio, estoy considerando imágenes de mapa de bits diseñadas a medida que se ajusten mejor a los objetivos estéticos y funcionales de nuestra nueva interfaz. Herramientas como GIMP, un editor de imágenes de código abierto, son excelentes para crear estos gráficos personalizados.

Una vez que las imágenes personalizadas estén listas, pasaremos a programar su funcionalidad e integrarlas con las características del programa existente. Estos elementos visuales nos permitirán sustituir los botones voluminosos por iconos ligeros, lo que ayudará a reducir el desorden visual sin comprometer la funcionalidad.

Como parte de este ciclo de desarrollo, también deshabilitaremos temporalmente la autenticación de usuarios para agilizar las pruebas y evitar las constantes solicitudes de inicio de sesión. Si bien la seguridad no es un requisito estricto para el panel en esta etapa, se vuelve importante si la herramienta se va a utilizar en entornos donde el acceso no autorizado podría comprometer operaciones confidenciales. Si bien las implementaciones anteriores utilizaban valores codificados para el cifrado de claves, se recomienda a los desarrolladores que den ese paso adicional hacia una gestión de acceso segura si es necesario.

Esta sesión le guiará en el trabajo con recursos visuales personalizados en MQL5, desde el concepto hasta la implementación. Nuestro objetivo final es crear una interfaz refinada, adaptable y escalable que no solo funcione bien, sino que además tenga un aspecto limpio y moderno.

Nuevo boceto de interfaz de inicio minimizada (56px x 400px)

Diseño conceptual

Con ese concepto en mente, y al no haber encontrado ninguna opción de símbolo satisfactoria entre los recursos disponibles, decidí crear la mía propia, aprovechando las herramientas de código abierto para obtener flexibilidad y personalización. Utilicé Inkscape para diseñar rápidamente mis bocetos, ya que es uno de los editores de gráficos vectoriales más potentes y eficientes disponibles. Sin embargo, Inkscape tiene limitaciones a la hora de exportar ciertos formatos de archivo.

Para solucionar esto, utilicé GIMP para refinar aún más las imágenes y exportarlas en el formato de mapa de bits deseado, adecuado para la integración con MQL5. A continuación, encontrará el diseño conceptual de la interfaz. Tras revisar el diseño, analizaremos la función de cada botón y, a continuación, pasaremos a la fase de implementación en el código.

Diseño conceptual de la interfaz AdminHome

Descripción de los botones de inicio y sus funciones

Botón de contraer y expandir:

Este botón tiene dos estados: uno para expandirse, que hace visibles todos los botones de la interfaz, y otro para contraerse, que oculta todos los botones.

 Expandir

Colapsar

Botón del panel de trading:

Utilizamos dos iconos de flecha para representar visualmente los conceptos de compra y venta. Esto facilita que el usuario comprenda intuitivamente la función del botón de un vistazo.

 Botón del panel de trading

 Botón del panel de trading pulsado

Botones del panel de comunicaciones:

Para este botón, diseñé un símbolo de sobre para representar el concepto de comunicación. Este icono familiar permite a los usuarios reconocer rápidamente su propósito y comprender su función de un vistazo.

 Botón del panel de comunicaciones

  Botón del panel de comunicación pulsado

Botón del panel de análisis:

Este botón, que incluye un símbolo gráfico, transmite eficazmente la idea de análisis. Dado que los gráficos son herramientas esenciales para realizar análisis de mercado, el icono indica instantáneamente su propósito al usuario.

 Botón del panel de análisis

 Botón del panel de análisis pulsado

Botón para mostrar y ocultar todos los paneles:

Este botón sirve como un práctico acceso directo para expandir o contraer instantáneamente todos los paneles. Su diseño presenta flechas divergentes que simbolizan una visión ampliada o general, lo que comunica visualmente su función al usuario.

  Botón Mostrar/Ocultar todo

  Botón Mostrar/Ocultar todo pulsado

Consejo:

Para que las imágenes funcionaran correctamente en MetaTrader 5, tuve que exportarlas en formato BMP usando GIMP, específicamente con una configuración de 24 bits. Cualquier otro formato no se mostraba correctamente en la terminal. Las imágenes que se muestran arriba están en formato PNG y tienen fines meramente ilustrativos. Encontrará los archivos BMP originales incluidos en la carpeta adjunta al final de este artículo.

Implementación del código

Ahora comenzamos a trabajar con nuestro código MQL5 para dar vida al concepto descrito anteriormente. Esto supone una transformación de la interfaz, pasando de la estructura anterior a un diseño más refinado e imaginativo, a medida que continuamos mejorando y desarrollando nuestro panel. Al final, crearemos una nueva interfaz de inicio como la que se muestra en la imagen a continuación.

La migración de la antigua interfaz de inicio a una nueva interfaz basada en recursos externos.

Como ya se mencionó, estamos desactivando temporalmente la función de autenticación para evitar interrupciones causadas por las solicitudes durante las pruebas. Esto no significa eliminar por completo la lógica de autenticación. En cambio, simplemente estamos comentando el código correspondiente. Recuerda que los comentarios en el código no se ejecutan; existen para ayudar a los desarrolladores a comunicarse y explicar la lógica en lenguaje sencillo.

En este paso, también demostraremos cómo se utilizarán las imágenes personalizadas que hemos preparado como recursos, mostrándose como botones flotantes en la interfaz principal. Esto representa un cambio con respecto al uso de la clase Dialog para la interfaz del panel de inicio. El nuevo diseño es más sencillo y minimalista.

Ahora vamos a desglosar la estructura de nuestro programa principal.

1. Descripción general

En esta sección, nuestro objetivo es transformar un panel de administración básico en una interfaz flotante moderna utilizando botones de imagen BMP. El objetivo es crear una interfaz donde los botones, mostrados como imágenes, cambien de estado (por ejemplo, entre "expandir" y "contraer"), proporcionando un diseño visualmente atractivo e interactivo. Estos botones flotan sobre otros elementos del gráfico, como las velas japonesas, lo que garantiza una interacción fluida con el usuario.

Hemos incluido módulos externos para la autenticación (junto con comunicaciones, Telegram, controles de diálogo, gestión de operaciones y análisis), aunque la lógica de autenticación en sí está actualmente desactivada al comentarla. Esta decisión es temporal, ya que la funcionalidad aún está en desarrollo, y nos permite centrarnos en desarrollar y probar la interfaz del botón flotante sin que se solicite la contraseña. Posteriormente, podremos reactivar el código de autenticación con ajustes mínimos, lo que permitirá una transición sin problemas a un sistema totalmente seguro.

//+------------------------------------------------------------------+
//|                                               New_Admin_Panel.mq5|
//|                                Copyright 2024, Clemence Benjamin |
//|             https://www.mql5.com/en/users/billionaire2024/seller |
//+------------------------------------------------------------------+
#property copyright "Copyright 2024, Clemence Benjamin"
#property link      "https://www.mql5.com/en/users/billionaire2024/seller"
#property version   "1.00"

// Authentication inputs (unused; authentication disabled).
input string AuthPassword = "2024";
input string TwoFactorChatID = "YOUR_CHAT_ID";
input string TwoFactorBotToken = "YOUR_BOT_TOKEN";

#include <Authentication.mqh>
#include <CommunicationsDialog.mqh>
#include <Telegram.mqh>
#include <Controls\Dialog.mqh>
#include <TradeManagementPanel.mqh>
#include <AnalyticsPanel.mqh>

2. Recursos de archivos en MQL5

MQL5 permite incrustar archivos externos, como imágenes y sonidos, directamente en el programa mediante directivas de recursos. Este proyecto utiliza archivos de imagen BMP como recursos para crear botones personalizados. Al incrustar estos archivos de imagen en las declaraciones de recursos, las imágenes se empaquetan con el archivo ejecutable, lo que garantiza que siempre estén disponibles cuando se ejecute el programa. Esta técnica es fundamental para crear una interfaz fiable y portátil, ya que garantiza un acceso constante a los recursos visuales necesarios, independientemente del sistema de archivos externo.

#resource "\\Images\\expand.bmp"
#resource "\\Images\\collapse.bmp"
#resource "\\Images\\TradeManagementPanelButton.bmp"
#resource "\\Images\\TradeManagementPanelButtonPressed.bmp"
#resource "\\Images\\CommunicationPanelButton.bmp"
#resource "\\Images\\CommunicationPanelButtonPressed.bmp"
#resource "\\Images\\AnalyticsPanelButton.bmp"
#resource "\\Images\\AnalyticsPanelButtonPressed.bmp"
#resource "\\Images\\ShowAllHideAllButton.bmp"
#resource "\\Images\\ShowAllHideAllButtonPressed.bmp"

3. Creación de interfaces y diseño de botones

La interfaz está construida utilizando objetos de imagen (bitmap) que muestran imágenes BMP. Cada botón de la interfaz está representado por uno de estos objetos de imagen, y sus posiciones en el gráfico están definidas por coordenadas predeterminadas. A estos objetos se les asigna un valor de orden Z alto para que se muestren encima de otros elementos del gráfico, lo que los hace altamente sensibles a los clics del usuario. Esta configuración garantiza que los botones sean claros visualmente y funcionen correctamente.

// Button names
string toggleButtonName    = "ToggleButton";
string tradeButtonName     = "TradeButton";
string commButtonName      = "CommButton";
string analyticsButtonName = "AnalyticsButton";
string showAllButtonName   = "ShowAllButton";

// Button original positions
const int BUTTON_TOGGLE_X    = 10;
const int BUTTON_TOGGLE_Y    = 30;
const int BUTTON_TRADE_X     = 10;
const int BUTTON_TRADE_Y     = 100;
const int BUTTON_COMM_X      = 10;
const int BUTTON_COMM_Y      = 170;
const int BUTTON_ANALYTICS_X = 10;
const int BUTTON_ANALYTICS_Y = 240;
const int BUTTON_SHOWALL_X   = 10;
const int BUTTON_SHOWALL_Y   = 310;

4. Técnica para ocultar y mostrar botones

Las funciones auxiliares se utilizan para mover los botones a una coordenada específica fuera de la pantalla, simulando un efecto de colapso. Al expandir la interfaz, otro conjunto de funciones auxiliares devuelve los botones a sus posiciones originales en la pantalla. Esta técnica permite gestionar la visibilidad de la interfaz de forma eficiente y fluida.

// Off-screen coordinate for hiding buttons
const int HIDDEN_X = -50;

// Hide a button by moving it off-screen.
void HideButton(string buttonName)
{
   ObjectSetInteger(0, buttonName, OBJPROP_XDISTANCE, HIDDEN_X);
}

// Restore a button to its original position.
void ShowButton(string buttonName, int X, int Y)
{
   ObjectSetInteger(0, buttonName, OBJPROP_XDISTANCE, X);
   ObjectSetInteger(0, buttonName, OBJPROP_YDISTANCE, Y);
}

5. Manejo de interacciones en subpaneles

Cada botón de la interfaz está vinculado a un subpanel (como gestión de operaciones, comunicaciones o análisis). Al hacer clic en un botón, se crea su subpanel asociado si no existe, o bien se alterna entre los estados visible y oculto. Esta creación bajo demanda minimiza el uso de recursos y mantiene la interfaz despejada. Cada subpanel se gestiona de forma independiente, lo que permite al usuario trabajar con una sección a la vez y, al mismo tiempo, acceder a las demás cuando sea necesario.

// Handle the Communications Panel button.
void HandleCommunications()
{
   if(g_commPanel != NULL && g_commPanel.IsVisible())
   {
      g_commPanel.Hide();
      ChartRedraw();
      return;
   }
   if(g_commPanel == NULL)
   {
      g_commPanel = new CCommunicationDialog(TwoFactorChatID, TwoFactorBotToken);
      if(!g_commPanel.Create(g_chart_id, "CommPanel", g_subwin, 80, 100, 380, 300))
      {
         delete g_commPanel;
         g_commPanel = NULL;
         return;
      }
      ObjectSetInteger(0, "CommPanel", OBJPROP_ZORDER, 10);
   }
   g_commPanel.Toggle();
   ChartRedraw();
}

// Handle the Trade Management Panel button.
void HandleTradeManagement()
{
   if(g_tradePanel != NULL && g_tradePanel.IsVisible())
   {
      g_tradePanel.Hide();
      ChartRedraw();
      return;
   }
   if(g_tradePanel == NULL)
   {
      g_tradePanel = new CTradeManagementPanel();
      if(!g_tradePanel.Create(g_chart_id, "TradeManagementPanel", g_subwin, 390, 20, 900, 530))
      {
         delete g_tradePanel;
         g_tradePanel = NULL;
         return;
      }
      ObjectSetInteger(0, "TradeManagementPanel", OBJPROP_ZORDER, 10);
   }
   g_tradePanel.Toggle();
   ChartRedraw();
}

// Handle the Analytics Panel button.
void HandleAnalytics()
{
   if(g_analyticsPanel != NULL && g_analyticsPanel.IsVisible())
   {
      g_analyticsPanel.Hide();
      ChartRedraw();
      return;
   }
   if(g_analyticsPanel == NULL)
   {
      g_analyticsPanel = new CAnalyticsPanel();
      if(!g_analyticsPanel.CreatePanel(g_chart_id, "AnalyticsPanel", g_subwin, 980, 20, 1480, 480))
      {
         delete g_analyticsPanel;
         g_analyticsPanel = NULL;
         return;
      }
      ObjectSetInteger(0, "AnalyticsPanel", OBJPROP_ZORDER, 10);
   }
   g_analyticsPanel.Toggle();
   ChartRedraw();
}

6. Encapsulación de la lógica de alternancia/contraer-expandir

Para simplificar la gestión de la interfaz de usuario, la lógica de contracción y expansión está encapsulada en una única función. Esta función lee el estado actual del botón principal de alternancia, invierte su estado y, a continuación, oculta o restaura la posición de los demás botones. Encapsular esta lógica en una sola función evita la redundancia en el código de gestión de eventos y hace que el diseño general sea más limpio y fácil de mantener.

// Toggle collapse/expand of interface buttons.
void ToggleInterface()
{
   // Toggle the state of the toggle button.
   bool currentState = ObjectGetInteger(0, toggleButtonName, OBJPROP_STATE);
   bool newState = !currentState;
   ObjectSetInteger(0, toggleButtonName, OBJPROP_STATE, newState);
   
   if(newState)
      UpdateButtonVisibility(false);  // Collapse: hide buttons and minimize sub-panels.
   else
      UpdateButtonVisibility(true);   // Expand: restore button positions.
   
   ChartRedraw();
}

7. Inicialización del programa

Es fundamental realizar pruebas exhaustivas para garantizar que la interfaz funcione como se espera. La función de inicialización configura los botones y garantiza que sean visibles desde el principio. Durante las pruebas, se debe verificar que los botones sigan respondiendo, que los subpaneles se activen y desactiven correctamente, y que los botones aparezcan siempre encima de los elementos del gráfico, gracias a los altos valores de orden Z. Además, si bien la autenticación está actualmente deshabilitada, el código relacionado se incluye como comentarios, lo que facilita volver a habilitar las restricciones de acceso cuando sea necesario. Las futuras mejoras podrían incluir la integración de sonidos o animaciones para enriquecer aún más la experiencia del usuario.

// Expert initialization function
int OnInit()
{
   g_chart_id = ChartID();
   g_subwin   = 0;

   // For potential future use, authentication can be re-enabled by uncommenting these:
   // if(!g_authManager.Initialize())
   //    return INIT_FAILED;

   // Create main toggle and sub-panel buttons using their original positions.
   CreateObjectBITMAP_LABEL(toggleButtonName, BUTTON_TOGGLE_X, BUTTON_TOGGLE_Y, "::Images\\expand.bmp", "::Images\\collapse.bmp");
   CreateObjectBITMAP_LABEL(tradeButtonName, BUTTON_TRADE_X, BUTTON_TRADE_Y, "::Images\\TradeManagementPanelButtonPressed.bmp", "::Images\\TradeManagementPanelButton.bmp");
   CreateObjectBITMAP_LABEL(commButtonName, BUTTON_COMM_X, BUTTON_COMM_Y, "::Images\\CommunicationPanelButtonPressed.bmp", "::Images\\CommunicationPanelButton.bmp");
   CreateObjectBITMAP_LABEL(analyticsButtonName, BUTTON_ANALYTICS_X, BUTTON_ANALYTICS_Y, "::Images\\AnalyticsPanelButtonPressed.bmp", "::Images\\AnalyticsPanelButton.bmp");
   CreateObjectBITMAP_LABEL(showAllButtonName, BUTTON_SHOWALL_X, BUTTON_SHOWALL_Y, "::Images\\ShowAllHideAllButtonPressed.bmp", "::Images\\ShowAllHideAllButton.bmp");

   // Always show the interface initially.
   UpdateButtonVisibility(true);
   ChartRedraw();
   return INIT_SUCCEEDED;
}

// Expert deinitialization function
void OnDeinit(const int reason)
{
   ObjectDelete(0, toggleButtonName);
   ObjectDelete(0, tradeButtonName);
   ObjectDelete(0, commButtonName);
   ObjectDelete(0, analyticsButtonName);
   ObjectDelete(0, showAllButtonName);

   if(g_commPanel != NULL)
   {
      g_commPanel.Destroy(reason);
      delete g_commPanel;
      g_commPanel = NULL;
   }
   if(g_tradePanel != NULL)
   {
      g_tradePanel.Destroy(reason);
      delete g_tradePanel;
      g_tradePanel = NULL;
   }
   if(g_analyticsPanel != NULL)
   {
      g_analyticsPanel.Destroy(reason);
      delete g_analyticsPanel;
      g_analyticsPanel = NULL;
   }
}

Pruebas

Como es habitual en MetaTrader 5, puede ejecutar su programa simplemente arrastrándolo desde la lista de Asesores Expertos a un gráfico. Para garantizar una compilación y ejecución sin problemas, es fundamental que todos los módulos externos estén correctamente ubicados en sus respectivas carpetas y que todos los recursos necesarios, como las imágenes, estén organizados correctamente.

A continuación, he incluido una imagen que muestra el resultado de nuestra interfaz rediseñada. A partir de estas imágenes, se puede apreciar claramente la dirección que estamos tomando e identificar áreas donde se pueden realizar mejoras adicionales.

Probando la interfaz New_Admin_Home

Consejo:

Al utilizar el nuevo botón por primera vez después de agregar el programa al gráfico, el clic inicial inicializa el panel correspondiente, pero el panel no aparece inmediatamente. Solo se hace visible después del segundo clic.

Conclusión

Hoy hemos explorado cómo aprovechar eficazmente los recursos externos para crear una interfaz de usuario potente y personalizable en MQL5. En este proyecto, evolucionamos desde una interfaz de inicio básica hasta un sistema de panel flotante más dinámico y visualmente atractivo, conservando la funcionalidad principal a la vez que introducimos nuevas características para mejorar la usabilidad y la accesibilidad.

Una de las principales conclusiones es cómo este desarrollo mejora nuestra comprensión de las capacidades de MQL5, en particular en lo que respecta a recursos gráficos como las imágenes BMP. El diseño de botones flotantes ofrece acceso centralizado a las funciones del panel de administración, manteniendo el gráfico despejado y preservando un mayor espacio visible (píxeles) para obtener información relevante sobre las operaciones.

Este diseño aún puede mejorarse en futuras iteraciones. Sin embargo, cada iteración nos acerca a una versión más eficiente. Las versiones anteriores siguen siendo muy importantes, ya que sirven como puntos de referencia para la innovación y la mejora.

Para facilitar que otros puedan seguir el proyecto sin problemas, he considerado la posibilidad de empaquetar el código fuente de hoy junto con los módulos anteriores en un archivo ZIP unificado. Esto garantiza que se incluyan todos los archivos necesarios, especialmente para aquellos que hayan omitido o no hayan realizado las configuraciones anteriores. La falta de archivos suele provocar errores de compilación, por lo que esto ayudará a los usuarios a empezar sin problemas.

Queremos expresar nuestro especial agradecimiento a MetaQuotes por su artículo informativo sobre el uso de recursos en MQL5, que nos ha servido de valiosa referencia. Implementar esas ideas en un proyecto real como este ha sido una experiencia enriquecedora y gratificante.

Nombre del archivo	Especificaciones
New_Admin_Panel.mq5	El nuevo programa principal con una imagen renovada.
New_Admin_Panel_BMP images.zip	Esta es una carpeta que contiene todas las imágenes de mapa de bits utilizadas. Por favor, añada estas imágenes al directorio MQL5\Images para garantizar que se carguen y muestren correctamente en la interfaz.
All Modules.zip	Una carpeta que contiene todos los archivos de encabezado utilizados en Parte (X). Extraiga estos archivos en el directorio MQL5\Include de su instalación de MetaTrader para garantizar una compilación y un funcionamiento correctos.