Erstellen eines Administrator-Panels für den Handel in MQL5 (Teil III): Verbesserung der grafischen Nutzeroberfläche mit visuellem Styling (I)

Inhalt:

1. Einführung
2. Bedeutung einer visuell ansprechenden GUI
3. Anwendung der MQL5-GUI-Styling-Funktionen
4. Farben und Schriftarten anpassen
5. Logik der Farbmodusverwaltung
6. Anpassen des Layouts neuer Schaltflächen
7. Erweiterte Erweiterung der GUI
8. Schlussfolgerung

Einführung

Können wir mit Blick auf die in unserem vorigen Artikel genannten Ziele getrost sagen, dass wir genug getan haben? Was ich sehe, beflügelt meiner Meinung nach den Drang nach Weiterentwicklung über unser derzeitiges Angebot hinaus. Stellen Sie sich vor, wie vorteilhaft es wäre, einen Wechsel zwischen dunklen und hellen Farbmodi für unser Admin Panel zu implementieren. Außerdem könnten wir die Nutzerfreundlichkeit verbessern, indem wir stilvolle Schaltflächen hinzufügen, eine vielfältige Auswahl an Schriftarten anbieten und die Sprachumschaltung zwischen den wichtigsten Sprachen ermöglichen. Dies würde unser Panel für alle nutzerfreundlicher machen.

Unser Ziel ist es, Handelsadministratoren eine umfassende, in die Handelsplattform integrierte Kommunikationslösung anzubieten. Die von uns angestrebten Konzepte sind von einflussreichen Forschungen und Entwicklungen im Bereich der grafischen Nutzeroberflächen (GUI) seit den 1970er Jahren inspiriert. Zu den namhaften Mitwirkenden gehören Kay, Xerox PARC, (macOS), (Windows), (Cascading Style Sheets= und Design von Google. Auf der Grundlage dieser Erkenntnisse können wir ein Admin-Panel erstellen, das den Bedürfnissen der Nutzer entspricht und ihr Gesamterlebnis verbessert.

Das Basic Admin Panel, das wir bis jetzt entwickelt haben.

Zusammenfassung dessen, was wir bis jetzt erreicht haben:

•  Erstellen des Admin-Panels mit einer Messaging-Schnittstelle und Telegram-Integration.
•  Hinzufügen wichtiger Schaltflächen zur Nutzeroberfläche, z. B. zum Minimieren, Maximieren, Schließen und die Kurznachrichten.

Am Ende dieses Artikels werden wir ein vollständig angepasstes und visuell gestyltes Verwaltungspanel für den Handel MQL5 haben. Sie lernen, wie Sie verschiedene Styling-Techniken implementieren, die sowohl das Aussehen als auch die Funktionalität der Nutzeroberfläche verbessern und eine professionelle und nutzerfreundliche Umgebung für Händler schaffen.

Dies sind die Hauptziele dieses Artikels:

• Anwendung grundlegender Stylingtechniken mit MQL5
• Schriftarten, Farben und Layouts anpassen
• Verbesserung der Nutzerinteraktion durch visuelle Elemente
• Einbindung der Anpassbarkeit zwischen weißem und dunklem Farbmodusmodus (theme).
• Hinzufügen dynamischer Funktionen wie Animationen und Übergänge

Anwendung der MQL5-GUI-Styling-Funktionen

MQL5 bietet verschiedene Funktionen und Eigenschaften, um die GUI Ihrer Handelsanwendung zu gestalten. Dazu gehören Optionen zur Anpassung von Farben, Schriftarten und Layouts an die Bedürfnisse Ihrer Nutzer und die von Ihnen angestrebte Gesamtästhetik.

Bei der Gestaltung der grafischen Nutzeroberfläche in MQL5 kommen mehrere wichtige Funktionen und Techniken zum Einsatz.  Wir werden die Funktionen besprechen, mit denen wir die Eigenschaften von grafischen Objekten wie Schaltflächen, Beschriftungen und Tafeln ändern können. Mit diesen können wir die Hintergrundfarbe, den Rahmenstil, die Schriftgröße und andere visuelle Aspekte anpassen, um ein einheitliches Erscheinungsbild zu schaffen.

1. Farben und Schriftarten anpassen
2. Logik der Farbmodusverwaltung
3. Anpassen des Layouts neuer Schaltflächen

Farben und Schriftarten anpassen:

Schriftart Array und Index:

Wir beginnen mit der Definition des Arrays availableFonts und von currentFontIndex für die Auswahl der Schriftarten für das Admin-Panel. Das Array availableFonts enthält Schriftartennamen wie „Arial“, „Courier New“, „Verdana“ und „Times New Roman“, sodass der Nutzer eine Reihe von Optionen hat, um das Erscheinungsbild des Bedienfelds anzupassen. currentFontIndex verfolgt die ausgewählte Schriftart durch Indizierung in diesem Array. Auf diese Weise können wir die Schriftarten problemlos durchlaufen und auf die UI-Komponenten anwenden, sobald der Nutzer die Schriftart wechselt, um sicherzustellen, dass das Nutzererlebnis dynamisch und kohärent bleibt.

// Array of available fonts
string availableFonts[] = {"Arial", "Courier New", "Verdana", "Times New Roman"};
// Index of the current font in use
int currentFontIndex = 0;

Erstellen der Schaltfläche für die Schriftart ändern:

Wir erstellen eine Schaltfläche mit der Bezeichnung „Font<>“, die wir strategisch im Verwaltungsbereich positionieren. Diese Schaltfläche ist nicht irgendeine Schaltfläche, sondern eine wichtige Funktion zum Ändern von Schriftarten. Wir sorgen dafür, dass es sich gut in das Layout des Panels einfügt, und kümmern uns um etwaige Probleme bei seiner Erstellung. Durch das Hinzufügen dieser Schaltfläche bieten wir den Nutzern eine intuitive Möglichkeit, zwischen verschiedenen Schriftarten zu wechseln, was die Nutzerfreundlichkeit und die ästhetische Flexibilität des Panels verbessert. Wenn bei der Erstellung der Schaltfläche ein „Schluckauf“ auftritt, drucken wir eine Fehlermeldung aus, um eventuelle Probleme im Auge zu behalten.

// Create a button for changing the font
CButton changeFontButton;
changeFontButton.Create(panel, "ChangeFontButton", 0, 10, 10, 100, 30);
changeFontButton.Text("Font<>");

// Verify button creation and handle errors
if(!changeFontButton.IsCreated())
{
    Print("Error creating Font<> button.");
}

Handhaben der Klicks auf der Schaltfläche zum Ändern der Schriftart:

Wenn wir die Funktion OnChangeFontButtonClick implementieren, ist es unser Ziel, den Prozess des Schriftwechsels reibungslos zu gestalten. Diese Funktion aktualisiert currentFontIndex, um die nächste Schriftart im Array availableFonts auszuwählen, wobei bei Bedarf zum Anfang zurückgesprungen wird. Nach der Aktualisierung des Indexes wird die neue Schriftart auf alle relevanten Komponenten der Nutzeroberfläche angewendet, z. B. auf das Eingabefeld, die Schaltfläche zum Löschen und die Schaltfläche für das Senden, um ein einheitliches Erscheinungsbild des gesamten Bereichs zu gewährleisten. Um die Änderungen abzuschließen, verwenden wir ChartRedraw, um die Anzeige zu aktualisieren und eine Bestätigungsmeldung zu drucken, die die Nutzer darüber informiert, dass die Schriftartänderung erfolgreich war.

// Function to handle the font change button click
void OnChangeFontButtonClick()
{
    // Update the font index, wrapping around if necessary
    currentFontIndex = (currentFontIndex + 1) % ArraySize(availableFonts);
    string newFont = availableFonts[currentFontIndex];
    
    // Apply the new font to UI components
    inputBox.Font(newFont);
    clearButton.Font(newFont);
    sendButton.Font(newFont);

    // Refresh the display to apply the changes
    ChartRedraw();

    // Print confirmation of the font change
    Print("Font changed to ", newFont);
}

OnChartEvent zur Behandlung von Schaltflächenklicks:

In der Funktion OnChartEvent werden Nutzerinteraktionen mit verschiedenen Diagrammobjekten verarbeitet, darunter auch die Schaltfläche zum Ändern der Schriftart. Diese Funktion lauscht auf Schaltflächenklick-Ereignisse und prüft, welche Schaltfläche angeklickt wurde, indem sie die Zeichenkette „sparam“ untersucht. Wenn „ChangeFontButton“ angeklickt wird, rufen wir die Funktion „OnChangeFontButtonClick“ auf, um den Schriftwechsel zu verwalten. Dieser ereignisgesteuerte Ansatz sorgt dafür, dass unsere Nutzeroberfläche reaktionsschnell und interaktiv ist. So wird sichergestellt, dass Nutzeraktionen die richtigen Reaktionen auslösen und eine ansprechende Oberfläche erhalten bleibt.

// Function to handle chart events
void OnChartEvent(const int id, const int sub_id, const int type, const int x, const int y, const int state)
{
    // Handle button clicks
    if(type == CHARTEVENT_OBJECT_CLICK)
    {
        string buttonName = ObjectGetString(0, "ChangeFontButton", OBJPROP_TEXT);
        if(buttonName == "Font<>")
        {
            OnChangeFontButtonClick();
        }
    }
}

Der Schriftartwechsel funktioniert einwandfrei

Verwalten des Farbmodus:

Logik der Farbmodusverwaltung:
Wir beginnen mit der Einrichtung des Farbmodusverwaltungssystems mit zwei verschiedenen Farbmodi: hell und dunkel. Um die Umschaltung zu verwalten, verwenden wir eine boolesche Variable, isDarkMode, die festhält, welcher Farbmodus gerade aktiv ist. Die Umschaltung ist ganz einfach: Wenn der Nutzer auf die Farbmodus-Schaltfläche klickt, ändert sich der Wert von isDarkMode, wodurch sich das gesamte Erscheinungsbild des Verwaltungsbereichs ändert. Indem wir die Farben für jeden Farbmodus separat definieren, rationalisieren wir den Prozess und machen es einfach, neue Stile zu pflegen und anzuwenden, wann immer es nötig ist.

bool isDarkMode = false; // Tracks the current theme mode (light or dark)
color lightBackgroundColor = clrWhite;  // Background color for light mode
color darkBackgroundColor = clrBlack;   // Background color for dark mode
color lightTextColor = clrBlack;        // Text color for light mode
color darkTextColor = clrWhite;         // Text color for dark mode

Erstellen der Schaltfläche für den Farbmoduswechsel:
Diese Schaltfläche wird in der Verwaltungskonsole platziert und bietet den Nutzern eine einfache Möglichkeit, um zwischen Hell- und Dunkelmodus zu wechseln. Wenn bei der Erstellung etwas schief geht, sorgen wir dafür, dass der Fehler mit einer gedruckten Meldung behandelt wird. Dies erleichtert die Fehlersuche und sorgt dafür, dass die Schnittstelle intuitiv und reaktionsschnell bleibt. 

//Creating the theme switch button
if(!CreateButton("ToggleThemeButton", "Theme<>", 50, 220, 100, 30)) 
{
   Print("Error: Failed to create theme toggle button"); // Error handling if button creation fails
}

Umschalten des Farbmodus durch einen Klick:
Als Nächstes behandeln wir den eigentlichen Farbmoduswechsel, indem wir die Funktion OnToggleModeButtonClick implementieren. Diese Funktion kehrt die Variable isDarkMode um und schaltet zwischen Hell- und Dunkelmodus um. Sobald wir wissen, welcher Farbmodus aktiv ist, wenden wir die entsprechenden Hintergrund- und Textfarben auf alle Elemente der Nutzeroberfläche an, z. B. auf das Bedienfeld, die Schaltflächen und den Text. Der Wechsel des Farbmodus erfolgt dank einer schnellen Aktualisierung in Echtzeit, sodass sich die Schnittstelle reibungslos und reaktionsschnell anfühlt. Wir drucken auch eine Bestätigungsmeldung für die Nutzer, damit sie wissen, wann der Modus geändert wurde.

//Theme switching handler
void OnToggleModeButtonClick()
{
    isDarkMode = !isDarkMode; // Toggle the theme mode
    if(isDarkMode)
    {
        ApplyTheme(darkBackgroundColor, darkTextColor); // Apply dark mode colors
    }
    else
    {
        ApplyTheme(lightBackgroundColor, lightTextColor); // Apply light mode colors
    }
    Print("Theme has been switched"); // Inform the user that the theme has changed
}

OnChartEvent, um Klicks auf die Schaltfläche zum Umschalten des Farbmodus zu behandeln:
In der Funktion OnChartEvent erkennen wir, wenn ein Nutzer auf die Schaltfläche zum Umschalten des Farbmodus klickt, und lösen die Funktion OnToggleModeButtonClick aus. Dieser ereignisgesteuerte Ansatz gewährleistet, dass das Panel sofort auf Nutzeraktionen reagiert. Indem wir auf Klick-Ereignisse der Schaltflächen achten, stellen wir sicher, dass das Admin-Panel interaktiv und ansprechend bleibt und die Nutzer bei Bedarf einfach zwischen hellen und dunklen Designs wechseln können.

//The OneChartEvent for  the theme
void OnChartEvent(const int id, const long &lparam, const double &dparam, const string &sparam)
{
    if(id == CHARTEVENT_OBJECT_CLICK) // Check if the event is a button click
    {
        if(sparam == "ToggleThemeButton") // Check if the clicked button is the theme toggle button
        {
            OnToggleModeButtonClick(); // Call the function to handle the theme change
        }
    }
}

Anwenden des Farbmodus, ohne die Objekte neu zu erstellen:
Eine unserer wichtigsten Design-Entscheidungen besteht darin, den Farbmodus zu aktualisieren, ohne eines der Objekte des Panels neu zu erstellen. Anstatt die Komponenten der Nutzeroberfläche abzureißen und neu zu erstellen, wenden wir das neue Farbschema einfach auf die vorhandenen Elemente an. Dadurch bleibt das System effizient, die Verzögerung wird reduziert und die Nutzerfreundlichkeit bleibt erhalten. Außerdem wird dadurch sichergestellt, dass das Panel bei der dynamischen Anwendung der neuen Farben reaktionsfähig bleibt.

//Applying theme
void ApplyTheme(color backgroundColor, color textColor)
{
    // Update background and text colors of existing objects
    ObjectSetInteger(0, "AdminPanelBackground", OBJPROP_COLOR, backgroundColor); // Change background color
    ObjectSetInteger(0, "ClearButton", OBJPROP_COLOR, textColor);                // Change text color of clear button
    ObjectSetInteger(0, "SendButton", OBJPROP_COLOR, textColor);                 // Change text color of send button
    ObjectSetInteger(0, "InputBox", OBJPROP_COLOR, textColor);                   // Change text color of input box
    ChartRedraw(); // Redraw the chart to reflect the changes
}

Anpassen des Layouts neuer Schaltflächen.

Schaltfläche Schriftart ändern:

 Die Schaltfläche, um die Schriftart zu ändern, haben wir im Verwaltungsbereich so positioniert, dass sich ihre obere linke Ecke bei (95, 95) und ihre untere rechte Ecke bei (230, 115) befindet. Damit befindet sie sich links neben den Schaltflächen für das Senden und Löschen. Sie ist breit genug für die Beschriftung „Font<>“ und eine nutzerfreundliche Interaktion. Mit dieser Schaltfläche können die Nutzer zwischen verschiedenen Schriftarten für alle Textelemente im Bedienfeld wechseln.

if (!changeFontButton.Create(chart_id, "ChangeFontButton", 0, 95, 95, 230, 115))

Schaltfläche zum wechseln des Farbmodus:

Die Schaltfläche für den Farbmoduswechsel haben wir an den Koordinaten (5, 95) für die linke obere Ecke und (90, 115) für die rechte untere Ecke platziert. Dadurch wird die Schaltfläche ganz links im Bedienfeld positioniert, etwas oberhalb der Schaltfläche, um die Schriftart zu ändern, sodass eine klare Trennung gegeben ist. Dank der kompakten Größe und der Nähe zu anderen Tasten können die Nutzer leicht zwischen Hell- und Dunkelmodus wechseln., ohne die Nutzeroberfläche zu überladen.

if (!toggleThemeButton.Create(chart_id, "ToggleThemeButton", 0, 5, 95, 90, 115))

Hier ist unser komplettes Programm mit allen neuen Funktionen perfekt integriert.

//+------------------------------------------------------------------+
//|                                             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 description "A responsive Admin Panel. Send messages to your telegram clients without leaving MT5"
#property version   "1.11"

#include <Trade\Trade.mqh>
#include <Controls\Dialog.mqh>
#include <Controls\Button.mqh>
#include <Controls\Edit.mqh>
#include <Controls\Label.mqh>

// Input parameters
input string QuickMessage1 = "Updates";
input string QuickMessage2 = "Close all";
input string QuickMessage3 = "In deep profits";
input string QuickMessage4 = "Hold position";
input string QuickMessage5 = "Swing Entry";
input string QuickMessage6 = "Scalp Entry";
input string QuickMessage7 = "Book profit";
input string QuickMessage8 = "Invalid Signal";
input string InputChatId = "Enter Chat ID from Telegram bot API";
input string InputBotToken = "Enter BOT TOKEN from your Telegram bot";

// Global variables
CDialog adminPanel;
CButton sendButton, clearButton, changeFontButton, toggleThemeButton;
CButton quickMessageButtons[8], minimizeButton, maximizeButton, closeButton;
CEdit inputBox;
CLabel charCounter;
#define BG_RECT_NAME "BackgroundRect"
bool minimized = false;
bool darkTheme = false;
int MAX_MESSAGE_LENGTH = 4096;
string availableFonts[] = { "Arial", "Courier New", "Verdana", "Times New Roman" };
int currentFontIndex = 0;

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit()
{
    // Initialize the Dialog
    if (!adminPanel.Create(ChartID(), "Admin Panel", 0, 30, 30, 500, 500))
    {
        Print("Failed to create dialog");
        return INIT_FAILED;
    }

    // Create controls
    if (!CreateControls())
    {
        Print("Control creation failed");
        return INIT_FAILED;
    }

    adminPanel.Show();
    // Initialize with the default theme
    CreateOrUpdateBackground(ChartID(), darkTheme ? clrBlack : clrWhite);

    Print("Initialization complete");
    return INIT_SUCCEEDED;
}

//+------------------------------------------------------------------+
//| Create necessary UI controls                                    |
//+------------------------------------------------------------------+
bool CreateControls()
{
    long chart_id = ChartID();

    // Create the input box
    if (!inputBox.Create(chart_id, "InputBox", 0, 5, 25, 460, 95))
    {
        Print("Failed to create input box");
        return false;
    }
    adminPanel.Add(inputBox);

    // Character counter
    if (!charCounter.Create(chart_id, "CharCounter", 0, 380, 5, 460, 25))
    {
        Print("Failed to create character counter");
        return false;
    }
    charCounter.Text("0/" + IntegerToString(MAX_MESSAGE_LENGTH));
    adminPanel.Add(charCounter);

    // Clear button
    if (!clearButton.Create(chart_id, "ClearButton", 0, 235, 95, 345, 125))
    {
        Print("Failed to create clear button");
        return false;
    }
    clearButton.Text("Clear");
    adminPanel.Add(clearButton);

    // Send button
    if (!sendButton.Create(chart_id, "SendButton", 0, 350, 95, 460, 125))
    {
        Print("Failed to create send button");
        return false;
    }
    sendButton.Text("Send");
    adminPanel.Add(sendButton);

    // Change font button
    if (!changeFontButton.Create(chart_id, "ChangeFontButton", 0, 95, 95, 230, 115))
    {
        Print("Failed to create change font button");
        return false;
    }
    changeFontButton.Text("Font<>");
    adminPanel.Add(changeFontButton);

    // Toggle theme button
    if (!toggleThemeButton.Create(chart_id, "ToggleThemeButton", 0, 5, 95, 90, 115))
    {
        Print("Failed to create toggle theme button");
        return false;
    }
    toggleThemeButton.Text("Theme<>");
    adminPanel.Add(toggleThemeButton);

    // Minimize button
    if (!minimizeButton.Create(chart_id, "MinimizeButton", 0, 375, -22, 405, 0))
    {
        Print("Failed to create minimize button");
        return false;
    }
    minimizeButton.Text("_");
    adminPanel.Add(minimizeButton);

    // Maximize button
    if (!maximizeButton.Create(chart_id, "MaximizeButton", 0, 405, -22, 435, 0))
    {
        Print("Failed to create maximize button");
        return false;
    }
    maximizeButton.Text("[ ]");
    adminPanel.Add(maximizeButton);

    // Close button
    if (!closeButton.Create(chart_id, "CloseButton", 0, 435, -22, 465, 0))
    {
        Print("Failed to create close button");
        return false;
    }
    closeButton.Text("X");
    adminPanel.Add(closeButton);

    // Quick messages
    return CreateQuickMessageButtons();
}

//+------------------------------------------------------------------+
//| Create quick message buttons                                     |
//+------------------------------------------------------------------+
bool CreateQuickMessageButtons()
{
    string quickMessages[8] = { QuickMessage1, QuickMessage2, QuickMessage3, QuickMessage4, QuickMessage5, QuickMessage6, QuickMessage7, QuickMessage8 };
    int startX = 5, startY = 160, width = 222, height = 65, spacing = 5;

    for (int i = 0; i < 8; i++)
    {
        if (!quickMessageButtons[i].Create(ChartID(), "QuickMessageButton" + IntegerToString(i + 1), 0, startX + (i % 2) * (width + spacing), startY + (i / 2) * (height + spacing), startX + (i % 2) * (width + spacing) + width, startY + (i / 2) * (height + spacing) + height))
        {
            Print("Failed to create quick message button ", i + 1);
            return false;
        }
        quickMessageButtons[i].Text(quickMessages[i]);
        adminPanel.Add(quickMessageButtons[i]);
    }
    return true;
}

//+------------------------------------------------------------------+
//| Expert deinitialization function                                 |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
{
    adminPanel.Destroy();
    ObjectDelete(ChartID(), BG_RECT_NAME);
    Print("Deinitialization complete");
}

//+------------------------------------------------------------------+
//| Handle chart events                                              |
//+------------------------------------------------------------------+
void OnChartEvent(const int id, const long &lparam, const double &dparam, const string &sparam)
{
    switch (id)
    {
        case CHARTEVENT_OBJECT_CLICK:
            if (sparam == "SendButton") OnSendButtonClick();
            else if (sparam == "ClearButton") OnClearButtonClick();
            else if (sparam == "ChangeFontButton") OnChangeFontButtonClick();
            else if (sparam == "ToggleThemeButton") OnToggleThemeButtonClick();
            else if (sparam == "MinimizeButton") OnMinimizeButtonClick();
            else if (sparam == "MaximizeButton") OnMaximizeButtonClick();
            else if (sparam == "CloseButton") OnCloseButtonClick();
            else if (StringFind(sparam, "QuickMessageButton") != -1)
            {
                int index = StringToInteger(StringSubstr(sparam, 18));
                OnQuickMessageButtonClick(index - 1);
            }
            break;

        case CHARTEVENT_OBJECT_ENDEDIT:
            if (sparam == "InputBox") OnInputChange();
            break;
    }
}

//+------------------------------------------------------------------+
//| Handle custom message send button click                          |
//+------------------------------------------------------------------+
void OnSendButtonClick()
{
    string message = inputBox.Text();
    if (message != "")
    {
        if (SendMessageToTelegram(message))
            Print("Custom message sent: ", message);
        else
            Print("Failed to send custom message.");
    }
    else
    {
        Print("No message entered.");
    }
}

//+------------------------------------------------------------------+
//| Handle clear button click                                        |
//+------------------------------------------------------------------+
void OnClearButtonClick()
{
    inputBox.Text(""); // Clear the text in the input box
    OnInputChange();   // Update the character counter
    Print("Input box cleared.");
}

//+------------------------------------------------------------------+
//| Handle quick message button click                                |
//+------------------------------------------------------------------+
void OnQuickMessageButtonClick(int index)
{
    string quickMessages[8] = { QuickMessage1, QuickMessage2, QuickMessage3, QuickMessage4, QuickMessage5, QuickMessage6, QuickMessage7, QuickMessage8 };
    string message = quickMessages[index];

    if (SendMessageToTelegram(message))
        Print("Quick message sent: ", message);
    else
        Print("Failed to send quick message.");
}

//+------------------------------------------------------------------+
//| Update character counter                                         |
//+------------------------------------------------------------------+
void OnInputChange()
{
    int currentLength = StringLen(inputBox.Text());
    charCounter.Text(IntegerToString(currentLength) + "/" + IntegerToString(MAX_MESSAGE_LENGTH));
    ChartRedraw();
}

//+------------------------------------------------------------------+
//| Handle toggle theme button click                                 |
//+------------------------------------------------------------------+
void OnToggleThemeButtonClick()
{
    darkTheme = !darkTheme;
    color bgColor = darkTheme ? clrBlack : clrWhite;
    color textColor = darkTheme ? clrWhite : clrBlack;

    // Set text color appropriate to the theme
    inputBox.Color(textColor);
    clearButton.Color(textColor);
    sendButton.Color(textColor);
    toggleThemeButton.Color(textColor);
    changeFontButton.Color(textColor);

    for(int i = 0; i < ArraySize(quickMessageButtons); i++)
    {
        quickMessageButtons[i].Color(textColor);
    }

    charCounter.Color(textColor);

    CreateOrUpdateBackground(ChartID(), bgColor);

    ChartRedraw();
}

//+------------------------------------------------------------------+
//| Create and update background rectangle                           |
//+------------------------------------------------------------------+
void CreateOrUpdateBackground(long chart_id, color bgColor)
{
    if (!ObjectFind(chart_id, BG_RECT_NAME))
    {
        if (!ObjectCreate(chart_id, BG_RECT_NAME, OBJ_RECTANGLE, 0, 0, 0))
            Print("Failed to create background rectangle");
    }

    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_COLOR, bgColor);
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_BACK, true);
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_SELECTABLE, false);
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_SELECTED, false);
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_HIDDEN, false);
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_CORNER, CORNER_LEFT_UPPER);
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_XOFFSET, 25); 
    ObjectSetInteger(chart_id, BG_RECT_NAME, OBJPROP_YOFFSET, 25);
}

//+------------------------------------------------------------------+
//| Handle change font button click                                  |
//+------------------------------------------------------------------+
void OnChangeFontButtonClick()
{
    currentFontIndex = (currentFontIndex + 1) % ArraySize(availableFonts);
    
    inputBox.Font(availableFonts[currentFontIndex]);
    clearButton.Font(availableFonts[currentFontIndex]);
    sendButton.Font(availableFonts[currentFontIndex]);
    toggleThemeButton.Font(availableFonts[currentFontIndex]);
    changeFontButton.Font(availableFonts[currentFontIndex]);
    
    for(int i = 0; i < ArraySize(quickMessageButtons); i++)
    {
        quickMessageButtons[i].Font(availableFonts[currentFontIndex]);
    }

    Print("Font changed to: ", availableFonts[currentFontIndex]);
    ChartRedraw();
}

//+------------------------------------------------------------------+
//| Handle minimize button click                                     |
//+------------------------------------------------------------------+
void OnMinimizeButtonClick()
{
    minimized = true;
    adminPanel.Hide();
    minimizeButton.Hide();
    maximizeButton.Show();
    closeButton.Show();
    Print("Panel minimized.");
}

//+------------------------------------------------------------------+
//| Handle maximize button click                                     |
//+------------------------------------------------------------------+
void OnMaximizeButtonClick()
{
    if (minimized)
    {
        adminPanel.Show();
        minimizeButton.Show();
        maximizeButton.Hide();
        closeButton.Hide();
        Print("Panel maximized.");
    }
}

//+------------------------------------------------------------------+
//| Handle close button click                                        |
//+------------------------------------------------------------------+
void OnCloseButtonClick()
{
    ExpertRemove(); // Completely remove the EA
    Print("Admin Panel closed.");
}

//+------------------------------------------------------------------+
//| Send the message to Telegram                                     |
//+------------------------------------------------------------------+
bool SendMessageToTelegram(string message)
{
    string url = "https://api.telegram.org/bot" + InputBotToken + "/sendMessage";
    string jsonMessage = "{\"chat_id\":\"" + InputChatId + "\", \"text\":\"" + message + "\"}";
    char post_data[];
    ArrayResize(post_data, StringToCharArray(jsonMessage, post_data, 0, WHOLE_ARRAY) - 1);

    int timeout = 5000;
    char result[];
    string responseHeaders;

    int res = WebRequest("POST", url, "Content-Type: application/json\r\n", timeout, post_data, result, responseHeaders);

    if (res == 200) // HTTP 200 OK
    {
        Print("Message sent successfully: ", message);
        return true;
    }
    else
    {
        Print("Failed to send message. HTTP code: ", res, " Error code: ", GetLastError());
        Print("Response: ", CharArrayToString(result));
        return false;
    }
}

Testen der neuen Funktionen auf XAUUSD

Mit diesen grundlegenden Styling-Techniken können wir nun fortgeschrittenere Anpassungsoptionen erkunden, die der Nutzeroberfläche noch mehr Interaktivität und visuelle Attraktivität verleihen können. Aus dem obigen Bild können wir ersehen, dass unser Farbmodus nur auf den Text im Vordergrund wirkt, aber wir wollen, dass es auch den Hintergrund des Panels beeinflusst. Im nächsten Abschnitt werden wir uns damit befassen, wie dieses Problem gelöst werden kann.

Erweiterte Erweiterung der GUI

Erweitern der Dialogklasse für die Farbmodusverwaltung:

Um den Dialog für die Farbmodusverwaltung zu erweitern, können wir die vorhandene Dialogklasse so anpassen, dass sie dynamische Farbmodusänderungen unterstützt, ähnlich wie bei der Verwaltung von Farbmodi im Admin Panel. Dazu müsste die Klasse CDialog modifiziert oder unterklassifiziert werden, um Eigenschaften für Hintergrund- und Textfarben sowie Methoden für die Anwendung verschiedener Farbmodi (hell oder dunkel) aufzunehmen. Indem wir den Konstruktor überschreiben oder Methoden wie ApplyTheme hinzufügen, können wir sicherstellen, dass Dialogfelder, die mit dieser Klasse erstellt wurden, auf Änderungen des Farbmoduss reagieren, ohne die Dialogobjekte neu zu erstellen.

Anpassen der Farben in der Klasse Dialog

Warum ist das wichtig? 

Die Erweiterung der Dialogklasse für die Farbmodusverwaltung ermöglicht eine nahtlosere und kohärentere Nutzererfahrung in allen UI-Elementen, nicht nur in der Administrationsoberfläche. Damit wird sichergestellt, dass alle Teile der Anwendung - einschließlich der Dialogfelder - dem gewählten Farbmodus entsprechen, was sowohl die Nutzerfreundlichkeit als auch die visuelle Konsistenz verbessert. Diese Funktion ist besonders wichtig für Handelsanwendungen, bei denen die Nutzer längere Zeit mit der Nutzeroberfläche interagieren, und anpassbare Farbmodi können die Belastung der Augen verringern und die allgemeine Nutzerzufriedenheit verbessern.

Verwaltungsbereich: Farbmodus des Hintergrunds nach Änderung der Klasse Dialog

Andere Optionen:

Während die Erweiterung der Klasse Dialog ein direkter und flexibler Ansatz ist, besteht eine andere Möglichkeit darin, die Farbmodusverwaltung auf einer höheren Ebene anzuwenden. Wir könnten zum Beispiel ein globales System für die Farbmodusverwaltung schaffen, das die Eigenschaften aller UI-Elemente, einschließlich der Dialoge, automatisch aktualisiert, ohne dass Änderungen an einzelnen Komponenten erforderlich sind. Darüber hinaus kann die Nutzung externer Bibliotheken oder die Entwicklung eines nutzerdefinierten Dialog-Frameworks eine detailliertere Kontrolle über die Oberflächenelemente bieten, wenn spezielle Styling-Anforderungen auftreten.

Die Klasse CEdit

Laut einer Google-Recherche darf eine Telegram-Nachricht maximal 4096 Zeichen lang sein und muss in UTF-8 kodiert sein. Beim Versuch, den Wert in diesem Projekt zu implementieren, waren wir auf maximal 63 Zeichen beschränkt, und das Problem muss in der Beschränkung der CEdit-Klasse liegen, die wir im nächsten Artikel behandeln werden.

Bei der Bearbeitung von MQL5-Bibliotheksdateien ist Vorsicht geboten, da unsachgemäße Änderungen aufgrund der strengen Syntax und Struktur der objektorientierten Sprache zu Kompilierungsfehlern oder Laufzeitproblemen führen können. Sichern Sie immer die Originaldateien, bevor Sie Änderungen vornehmen, und vergewissern Sie sich, dass Sie die betroffenen Klassenbeziehungen verstehen, um Funktionsstörungen zu vermeiden. Kompilieren Sie Ihren Code nach der Bearbeitung, um ihn auf Fehler zu prüfen, und testen Sie die Änderungen gründlich in einer Demoumgebung, um die Stabilität zu überprüfen. Wenn Sie auf erhebliche Probleme stoßen, die Sie nicht lösen können, sollten Sie eine Neuinstallation der MetaTrader 5-Plattform in Betracht ziehen, um die Standardeinstellungen und -dateien wiederherzustellen.

Schlussfolgerung

Zusammenfassend lässt sich sagen, dass unsere Implementierung der Schriftarten- und Farbmodusverwaltung in das Admin-Panel-Programm vielversprechende Ergebnisse gezeigt hat. Während wir mit dem statischen Hintergrund der Dialogklasse an Grenzen stießen, passte sich der Textvordergrund erfolgreich an Änderungen des Farbmodus an und sorgte so für eine verbesserte Nutzererfahrung. Auch die dynamische Schriftartenverwaltung funktionierte gut, sodass die Nutzer problemlos zwischen verschiedenen Schriftarten wechseln konnten.

Unser nächstes Ziel ist es, die Dialogklasse so zu erweitern, dass sie Farbmodusänderungen, einschließlich dynamischer Hintergrundaktualisierungen, vollständig unterstützt. Diese Verbesserung zielt darauf ab, die derzeitigen Einschränkungen zu überwinden und eine kohärentere und optisch ansprechendere Schnittstelle zu schaffen. Bleiben Sie dran, wenn wir diese Herausforderungen in unseren nächsten Artikeln angehen!
Probieren Sie diese Styling-Techniken an Ihren eigenen Trading-Panels aus und erkunden Sie weitere Anpassungsmöglichkeiten in MQL5. Ich würde mich freuen, von Ihren Erfahrungen und Erkenntnissen zu hören. Teilen Sie sie in den Kommentaren unten mit, wenn wir uns mit fortgeschrittenen GUI-Design-Herausforderungen beschäftigen. Die Quelldatei für dieses Projekt ist beigefügt - Sie können sie gerne überprüfen.

Inhalt