Создание торговой панели администратора на MQL5 (Часть X): Интерфейс из внешних ресурсов

Содержание:

• Введение
• Общая информация
• Концептуальный дизайн
• Реализация кода
• Тестирование
• Заключение

Введение

Я уверен, что поиск отправной точки — это всегда сложно. Однако, как только сделан первый набросок, становится значительно проще развивать его дальше и находить новые возможности. Многие успешные дизайнеры и разработчики начинают с простых эскизов и постепенно дорабатывают их, пока результат не становится по-настоящему достойным. Даже когда кажется, что вы достигли финальной версии продукта, всегда есть место дальнейшим улучшениям. Эволюция — это непрерывный процесс, и каждая новая итерация должна привносить нечто уникальное по сравнению с предыдущей.

В рамках этой серии разработок мы начали с монолитной программы панели администратора, включающей несколько интерфейсов. Когда код стал слишком объемным и сложным для сопровождения, мы перешли к более грамотной организации, используя стандартную библиотеку MQL5, наследование классов и пользовательские заголовочные файлы. Такой подход позволил сосредоточиться на конкретных аспектах программы, не затрагивая остальные части, существенно снизил вероятность ошибок и открыл возможности для дальнейшего расширения — ограниченные лишь воображением. Сегодня мы начинаем новый цикл, вновь стартуя с главной панели. 

На мой взгляд, символы являются одной из самых эффективных форм визуальной коммуникации: они способны мгновенно передавать детальную информацию, занимая минимальное пространство. На протяжении всей истории человечества символы играли ключевую роль в общении — задолго до появления письменности древние цивилизации использовали пиктограммы и глифы для передачи идей, эмоций и инструкций. От древнеегипетских иероглифов до современных эмодзи — символы остаются универсальным визуальным языком, преодолевающим языковые барьеры.

В цифровом мире эта традиция продолжается. В качестве примера можно привести шрифт Wingdings — набор символов, встроенных в текст и передающих смысл без использования слов. В MQL5 такие символы чрезвычайно полезны, они хорошо документированы и просты в реализации. Их применение позволяет значительно сократить количество визуальных объектов на графике, при этом четко передавая важную информацию. Например, сигнал на покупку можно представить в виде простой стрелки вверх вместо текстовой надписи, что экономит как экранное пространство, так и вычислительные ресурсы.

В данной статье мы поговорим о дизайне и управлении областями интерфейса. Используя символы, мы сможем минимизировать визуальный шум и повысить удобство использования. Wingdings — лишь один из инструментов, но я также хочу обратить внимание на применение пользовательских bitmap-изображений. Они могут заменить крупные кнопки, сохраняя функциональность и предлагая более элегантное и эффективное решение, а интерфейс при этом будет чистым.

Хотя интерфейс главной панели New_Admin_Panel уже достаточно хорош в плане функциональности, его визуальную составляющую все еще можно улучшить. У нас уже есть готовая базовая структура. Теперь пришло время доработать и усовершенствовать дизайн интерфейса. В следующем разделе я представлю цели текущей разработки и расскажу, как мы планируем двигаться дальше.

Общая информация

Цель сегодняшнего этапа — работа с главным интерфейсом, в рамках которой мы переработаем и упорядочим элементы, чтобы создать более компактную и визуально эффективную панель. Сначала опишем концептуальный дизайн нового домашнего экрана панели и его компонентов, после чего перейдем к реализации на MQL5. Мы добавим новые ресурсы и скомпилируем улучшенную версию панели администратора. Ниже представлена визуализация намеченных изменений.

Ранее я упоминал Wingdings как отличный пример символов. Они дают быструю и простую передачу смысла. И хотя это хорошая отправная точка для минималистичных иконок, я не планирую использовать их напрямую. Я думаю о пользовательских bitmap-изображения[, которые лучше подходят для целей нового интерфейса. Для создания таких графических элементов отлично подходят инструменты вроде GIMP — это бесплатный редактор изображений.

После подготовки пользовательских изображений мы перейдем к программированию их логики и интеграции с функциональностью существующей программы. Новые визуальные ресурсы позволят заменить громоздкие кнопки легкими иконками, сократив визуальную перегруженность при сохранении полной функциональности.

В рамках данного цикла разработки мы также временно отключим аутентификацию пользователя, чтобы упростить тестирование и избежать постоянных запросов на вход. На текущем этапе безопасность не является строго необходимой, однако это важно, если инструмент используется в среде, где нельзя давать несанкционированный доступ к операциям. Несмотря на то что в предыдущих реализациях использовались жестко заданные значения для шифрования ключей, рекомендуется при необходимости сделать дополнительный шаг в сторону безопасного управления доступом.

Здесь мы по шагам пройдем по всем этапам работы с пользовательскими визуальными ресурсами в MQL5 — от концепции до реализации. В итоге получим доработанный, отзывчивый и масштабируемый интерфейс, который будет не только функциональным, но и современным и аккуратным внешне.

Новый минималистичный эскиз главного интерфейса (56px by400px)

Концептуальный дизайн

Не найдя подходящих символов среди доступных ресурсов для выбранной концепции, я решил создать собственные, используя доступные инструменты для максимальной кастомизации. Для быстрого создания макета я использовал Inkscape — один из самых удобных редакторов векторной графики. Однако Inkscape имеет ограничения при экспорте некоторых форматов файлов.

Чтобы обойти эти ограничения, я использовал GIMP для дальнейшей доработки изображений и экспорта их в нужный формат bitmap, подходящий для интеграции в MQL5. Ниже представлен концептуальный макет интерфейса. Мы разберем назначение каждой кнопки и затем перейдем к реализации в коде.

Концептуальная структура интерфейса AdminHome

Описание кнопок главной панели и их функций

Кнопка сворачивания и разворачивания:

Эта кнопка имеет два состояния: одно для развернутого, при котором отображаются все элементы интерфейса, и второе для свернутого, при котором все кнопки скрываются.

 Развернуть

Свернуть

Кнопка панели управления торговлей:

Для визуального представления операций покупки и продажи используются две стрелки. Это позволяет пользователю интуитивно понять назначение кнопки с первого взгляда.

 Кнопка панели управления торговлей

 Кнопка панели управления торговлей нажата

Кнопки на панели коммуникации:

Для этой кнопки я разработал символ конверта, отражающий концепцию общения. Знакомая иконка позволяет пользователю быстро распознать ее назначение.

 Кнопка панели коммуникации

  Кнопка панели коммуникации нажата

Кнопка панели аналитики:

Кнопка с изображением графика, на мой взгляд, хорошо передает идею анализа. Поскольку графики являются ключевым инструментом рыночного анализа, иконка мгновенно сигнализирует о своем назначении.

 Кнопка панели аналитики

 Кнопка панели аналитики нажата

Кнопка "Показать все / Скрыть все":

Кнопка позволяет быстро развернуть или свернуть все панели. Я выбрал расходящиеся стрелки, символизирующие расширенный обзор.

  Кнопка "Показать все / Скрыть все"

  Кнопка "Показать все / Скрыть все" нажата

Совет:

Чтобы изображения корректно отображались в MetaTrader 5, мне пришлось экспортировать их в формате BMP с использованием 24-битной глубины цвета через GIMP. Любые другие форматы не отображались нормально в терминале. Изображения выше приведены в формате PNG исключительно для иллюстрации. Фактически использованные BMP-файлы приложены к статье.

Реализация кода

Переходим к работе с кодом MQL5, чтобы воплотить описанную выше концепцию в жизнь. Это означает трансформацию интерфейса, от предыдущей структуры к более продуманному и креативному дизайну, по мере развития панели администрирования. В результате мы получим новый домашний интерфейс, показанный на изображении ниже.

Переход от старого интерфейса главной страницы к новому интерфейсу на основе внешних ресурсов

Как я уже говорил, мы временно отключаем функцию аутентификации, чтобы избежать прерываний тестирования из-за запросов на вход. Важно подчеркнуть, что логика аутентификации не удаляется. Просто соответствующий код закомментирован. Напомню, что комментарии в коде не исполняются; они служат для пояснения логики и обмена информацией между разработчиками.

На этом этапе мы также увидим, как подготовленные пользовательские изображения будут использоваться в качестве ресурсов и отображаться в виде плавающих кнопок в основном интерфейсе. Это означает отказ от использования класса Dialog для главной панели. Новый дизайн станет более простым и минималистичным.

Теперь подробно рассмотрим структуру основной программы.

1. Обзор

Итак, мы трансформируем базовую панель администратора в современный плавающий интерфейс с использованием кнопок на основе BMP-изображений. Цель — создать интерфейс, в котором кнопки, представленные в виде изображений, меняют свое состояние (например, развернуть / свернуть), формируя визуально привлекательный и интерактивный дизайн. Эти кнопки располагаются поверх других элементов графика.

Мы подключили внешние модули аутентификации (а также коммуникаций, Telegram, диалоговых элементов управления, управления торговлей и аналитики), несмотря на то что сама логика аутентификации в данный момент отключена (точнее, закомментирована). Это временное решение, позволяющее сосредоточиться на разработке и тестировании плавающего интерфейса без ввода пароля. В дальнейшем код аутентификации можно будет легко вернуть.

//+------------------------------------------------------------------+
//|                                               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. Файлы в виде ресурсов в MQL5

MQL5 позволяет встраивать внешние файлы, включая картинки и звуки, непосредственно в программу с помощью директив ресурсов. В нашем проекте в качестве ресурсов для создания пользовательских кнопок используются файлы изображений в формате BMP. Так как мы встраиваем файлы с помощью директив resource, изображения будут упакованы вместе с исполняемым файлом и всегда будут доступны при запуске программы. Так у программы будет постоянный доступ к визуальным ресурсам независимо от внешней файловой системы.

#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. Создание интерфейса и дизайн кнопок

Интерфейс построен с использованием объектов "Графическая метка" (bitmap label), отображающих BMP-изображения. Каждая кнопка представлена отдельным графическим объектом, ее позиция на графике определяется заданными координатами. Объектам присваивается высокое значение Z-order, благодаря чему они отображаются поверх остальных элементов графика и реагируют на клики пользователя. Помимо внешней визуальной привлекательности, это дает и функциональность кнопок.

// 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. Техника скрытия и отображения кнопок

Для имитации эффекта сворачивания используются вспомогательные функции, перемещающие кнопки за пределы видимой области экрана. При разворачивании интерфейса другой набор функций возвращает кнопки на их исходные позиции. Именно он отвечает за управление видимостью элементов пользовательского интерфейса.

// 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. Обработка взаимодействий с подпанелями

Каждая кнопка интерфейса связана с соответствующей подпанелью (управление торговлей, коммуникации, аналитика и т. д.). При нажатии кнопки связанная панель либо создается (если она ещё не существует), либо переключается между видимым и скрытым состоянием. Создание по требованию снижает потребление ресурсов и сохраняет интерфейс компактным. Каждая подпанель управляется независимо, что позволяет работать с одним разделом, не затрагивая остальные.

// 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. Инкапсуляция логики сворачивания / разворачивания

Для упрощения управления интерфейсом логика сворачивания и разворачивания инкапсулирована в одной функции. Эта функция считывает текущее состояние главной кнопки-переключателя, изменяет его и затем либо скрывает, либо восстанавливает позиции остальных кнопок. Такой подход устраняет дублирование кода обработки событий и делает архитектуру более чистой и удобной для сопровождения.

// 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. Инициализация программы

Для проверки работы интерфейса нужно провести тщательное тестирование. Функция инициализации настраивает кнопки и гарантирует их видимость при запуске. При тестировании нужно проверить, что кнопки работают, подпанели корректно переключаются, элементы интерфейса всегда отображаются поверх графика благодаря. Такжке, не забываем, что мы временно отключили авторизацию, спрятав код под комментарии. При необходимости его можно в любой момент быстро вернуть. Из возможных дальнейших улучшений, можно отметить добавление звуков или анимаций.

// 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;
   }
}

Тестирование

В MetaTrader 5 можно запустить программу, просто перетащив ее из списка советников на график. Все внешние модули должны быть размещены в соответствующих каталогах, как и все ресурсы, в данном случае изображения.

Ниже приведена демонстрация результата переработки интерфейса. На картинке можно ясно увидеть выбранное направление и определить области для дальнейших улучшений.

Тестирование интерфейса New_Admin_Home

Совет:

При первом использовании новой кнопки после добавления программы на график первое нажатие инициализирует соответствующую панель, но она не отображается сразу. Панель становится видимой только после второго нажатия.

Заключение

Сегодня мы рассмотрели, как эффективно использовать внешние ресурсы для создания настраиваемого пользовательского интерфейса в MQL5. В рамках этого проекта мы эволюционировали от базового интерфейса главной панели к более динамичной и визуально привлекательной системе плавающих панелей, сохранив ключевую функциональность и добавив новые возможности для повышения удобства.

Надеюсь, статья дала понимание возможностей MQL5, особенно в части работы с графическими ресурсами, такими как BMP-изображения. Дизайн с плавающими кнопками обеспечивает централизованный доступ к функциям панели администрирования, не загромождая график и сохраняя больше полезного экранного пространства (пикселей) для анализа торговли.

Следует помнить, что идеальных решений не существует. Однако каждая итерация, каждый шаг вперед приближает нас к более качественной и эффективной версии. Предыдущие версии по-прежнему важны, так как именно они послужили отправной точкой для улучшений.

Весь используемый сегодня код упакован вместе с предыдущими модулями в единый ZIP-архив. Так у вас есть все необходимые файлы, особенно для тех, кто пропустил ранние этапы. Не надо искать недостающие файлы по предыдущим публикациям и можно сразу все скомпилировать.

Отдельная благодарность MetaQuotes за информативную статью по использованию ресурсов в MQL5, которая послужила ценным справочным материалом. Реализация этих идей в реальном проекте оказалась интересной.

Название файла	Технические параметры
New_Admin_Panel.mq5	Новая основная программа с обновленным дизайном.
New_Admin_Panel_BMP images.zip	Папка, содержащая все использованные растровые изображения. Сохраните изображения в каталог MQL5\Images, чтобы они корректно загружались и отображались в интерфейсе.
All Modules.zip	Папка с файлами из Части X. Распакуйте эти файлы в каталог MQL5\Include в папке установки MetaTrader для правильной компиляции.