Discussing the article: "Creating an Interactive Graphical User Interface in MQL5 (Part 1): Making the Panel"

New comment
 

Check out the new article: Creating an Interactive Graphical User Interface in MQL5 (Part 1): Making the Panel.

This article explores the fundamental steps in crafting and implementing a Graphical User Interface (GUI) panel using MetaQuotes Language 5 (MQL5). Custom utility panels enhance user interaction in trading by simplifying common tasks and visualizing essential trading information. By creating custom panels, traders can streamline their workflow and save time during trading operations.

We will create a GUI panel that features the most common utility tools that any trader may need, and thus we want to outline and cover everything in this series. Thus the number of elements that need to be covered is extensive but we will confine them together for easy understanding. We will use 4 elements for our GUI development and it is through this that we will create it. The panel will feature the creation of trading buttons, sharp rectangles, live updates, the use of emojis, different font styles, labels, movable panel parts, and hover effects. To illustrate the whole of this, we have used an example below.

EXAMPLE GUI

Author: Allan Munene Mutiiria

 
Great tutorials...Good job
 
Isaac Amo #:
Great tutorials...Good job

@Isaac Amo I appreciate the feedback and recognition. Am flattered. Thank you.

 
MetaQuotes:

Check out the new article: Creating an Interactive Graphical User Interface in MQL5 (Part 1): Making the Panel.

Author: Allan Munene Mutiiria

Wow very nice of you to share this article. Lucky find

 
Malcolm Campbell #:

Wow very nice of you to share this article. Lucky find

Thank you @Malcolm Campbell for the kind review and feedback. 

 
Some byte. On the cover is a beautiful coloured interface, and here is a window from Windows XP)
The article is useful, thanks.
 
Petr Zharuk #:
Some byte. On the cover is a beautiful coloured interface, and here is a window from Windows XP)
The article is useful, thanks.
Hello. Thanks for your kind feedback. Really appreciate that. Thanks too and welcome. 
 
So far I have read it diagonally from my phone....
I will read more thoroughly on my computer and will also make a trading interface based on your article. So far I have only made working buy and sell buttons. I have an idea how it works. I will read more and make a graphical interface on my computer too! I have long wanted to use a very useful utility for optimising trade orders.
 

As a beginner in MQL5, I liked the article very much. Thank you for the article. But I thought that the deinitialisation function can be significantly reduced if ObjectDelete is executed in a loop through all created and saved names of graphical objects. To do this, you need to add an array of strings, a counter of graphical objects and operators for passing names to the array in the functions of creating and initialising parameters of graphical objects. I have done it this way:

#define  ADDOBJ ArrayResize(objectsArray, objectCount+1);\
   objectsArray[objectCount] = objName;\
   objectCount++;

string objectsArray[];
int objectCount = 0;

//+------------------------------------------------------------------+
//| Expert deinitialization function                                 |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
  {
// Удаляем созданные графические объекты
   for(int i = 0; i < objectCount; i++)
     {
      if(ObjectFind(0, objectsArray[i]) >= 0)
        {
         ObjectDelete(0, objectsArray[i]);
         //           Print("Объект удален: ", objectsArray[i]);
        }
     }
  }

I also added:

input int base_x = 300;  // Left indent
input int base_y = 100;  // Top indent
input bool Include_DropDown = false; // Show DropDown
//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit()
  {
   CreatPanel();
   return(INIT_SUCCEEDED);
  }
//+------------------------------------------------------------------+
//|    Function to create Panel                                      |
//+------------------------------------------------------------------+
void CreatPanel()
  {
   createRecLabel("MAIN_REC",10,30,250,400,clrWhite,1,clrBlack);
   createRecLabel("MAIN_SUB_REC",15,35,240,390,C'245,245,245',1,clrNONE);
   createRecLabel("MAIN_LINE_UP",15,35,240,1,C'245,245,245',1,clrNONE,BORDER_RAISED);
...

   if(Include_DropDown)
     {
      createDropDown();
     }
   ChartRedraw(0);
  }
And in the create function I refined it like this:

 

And I changed the functions of creating graphic objects a little bit:

//+------------------------------------------------------------------+
//|     Function to create text label                                |
//+------------------------------------------------------------------+
bool createLabel(string objName, int xD, int yD,
                 string txt, color clrTxt = clrBlack, int fontSize = 12,
                 string font = "Arial Rounded MT Bold")
  {
   ResetLastError();

   if(!ObjectCreate(0, objName, OBJ_LABEL, 0, 0, 0))
     {
      Print(__FUNCTION__, ": failed to create the label! Error code = ", _LastError);
      return (false);
     }

   ObjectSetInteger(0, objName, OBJPROP_XDISTANCE, base_x + xD); // Add base_x +
   ObjectSetInteger(0, objName, OBJPROP_YDISTANCE, base_y + yD); // Add base_y +
   ObjectSetInteger(0, objName, OBJPROP_CORNER, CORNER_LEFT_UPPER); 
   ObjectSetString(0, objName, OBJPROP_TEXT, txt);
   ObjectSetInteger(0, objName, OBJPROP_COLOR, clrTxt);
   ObjectSetInteger(0, objName, OBJPROP_FONTSIZE, fontSize);
   ObjectSetString(0, objName, OBJPROP_FONT, font);
   ObjectSetInteger(0, objName, OBJPROP_BACK, false);
   ObjectSetInteger(0, objName, OBJPROP_STATE, false);
   ObjectSetInteger(0, objName, OBJPROP_SELECTABLE, false);
   ObjectSetInteger(0, objName, OBJPROP_SELECTED, false);

   ADDOBJ 

   return (true);
  }
 
Roman Shiredchenko #:
So far I have read it diagonally from my phone....
I will read more thoroughly on my computer and will also make a trading interface based on your article. So far I have only made working buy and sell buttons. I have an idea how it works. I will read more and make a graphical interface on my computer too! I have long wanted to use a very useful utility for optimising trade orders.

Wow. Thanks for the kind comment and review. Greatly appreciated.

12
New comment