Crafting a Trade Panel Cosmic Console with MQL5 🌌

Introduction

Imagine standing at the helm of a starship, your control panel glowing with buttons, screens, and dials, all designed to navigate the forex galaxy with pinpoint accuracy. That’s the vision behind the GUI-Button-Trade Panel EA, an MQL5 Expert Advisor that creates a graphical user interface (GUI) to make manual trading feel effortless and professional. This EA doesn’t place trades on its own but sets up a dashboard with buttons (like “Buy” and “Sell”), labels (showing prices or text), an editable text field, and decorative icons, giving you a centralized hub to monitor and control your trades. Think of it as your trading cockpit, where you can see real-time bid and ask prices, adjust settings, and prepare to execute trades with a click. In this article, I’ll guide you through the code with a continuous, engaging narrative, explaining each part as if you’re a new crew member learning the ropes. We’ll explore how the panel comes to life, why it’s designed this way, and how you can customize it, using examples like managing trades on EURUSD. My goal is to make this feel like a thrilling mission, with every section flowing into the next, keeping you captivated and informed. Ready to power up your cosmic console? Let’s dive in!

Strategy Blueprint

Before we explore the code, let’s map out what this EA does, like charting a course through the stars:

• Panel Creation: The EA builds a GUI with a main button as the backdrop, a title (“Trade Panel”), real-time bid/ask price labels, buy/sell buttons, a plus/minus button pair for adjustments, an editable text field, and decorative icons, like assembling a starship’s dashboard.

• User Interaction: The panel is a static interface for now, but buttons like “Buy” and “Sell” are placeholders for future trade execution, and the plus/minus buttons could adjust settings (e.g., lot size) with added logic.

• Market Monitoring: Labels display the current bid and ask prices, updating statically at initialization, like a market scanner on your control panel.

• Customization Potential: The panel’s layout is fixed but can be extended with event handling (e.g., button clicks) to execute trades or modify inputs, like upgrading your ship’s controls. This strategy is like designing a trading cockpit, offering a professional, user-friendly interface to monitor markets and prepare for manual trades with ease.

Code Implementation

Now, let’s step into the starship’s engineering bay and unpack the MQL5 code that powers this trading console. I’ll guide you through each section like we’re touring the ship, explaining every component in a professional yet engaging way, ensuring the narrative flows seamlessly from one part to the next. We’ll cover setting up the panel, creating its elements, and planning for future upgrades, using clear examples and a polished tone to keep you captivated. Think of this as a mission to build your dream trading dashboard—let’s get started!

Step 1: Powering Up the Console—Initializing the EA

Our journey begins by activating the starship’s control systems, setting up the foundation for our GUI panel.

//+------------------------------------------------------------------+
//|                                       GUI-BUTTON-TRADE PANEL.mq5 |
//|      Copyright 2024, ALLAN MUNENE MUTIIRIA. #@Forex Algo-Trader. |
//|                           https://youtube.com/@ForexAlgo-Trader? |
//+------------------------------------------------------------------+
#property copyright "Copyright 2024, ALLAN MUNENE MUTIIRIA. #@Forex Algo-Trader"
#property link      "https://youtube.com/@ForexAlgo-Trader?"
#property description "======= IMPORTANT =======\n"
#property description "1. This is a FREE EA."
#property description "2. To get the source code of the EA, follow the Copyright link."
#property description "3. Incase of anything, contact developer via the link provided."
#property description "Hope you will enjoy the EA Logic.\n"
#property description "*** HAPPY TRADING! ***"
#property version   "1.00"

int OnInit(){
   createButton("B1","",300,100,200,300,clrBlack,clrWhite,clrWhite,12);
   createLabel("L1","TRADE PANEL",330,110,0,0,clrBlack,16);
   createLabel("L2","______________",317,112,0,0,clrRed,16);
   createEdit("E1","Edit Me",375,150,100,100,clrWhite,11);
   createButton("B3","+",330,146,40,25,clrBlue,clrDarkGray,clrDarkGray,21);
   createButton("B4","-",430,146,40,25,clrBlue,clrDarkGray,clrDarkGray,21);
   createButton("B5","BUY",310,180,85,40,clrBlack,clrLightGreen,clrGreen,12);
   createButton("B6","SELL",405,180,85,40,clrBlack,clrLightSalmon,clrRed,12);
   createLabel("L3",(string)SymbolInfoDouble(_Symbol,SYMBOL_ASK),325,230,0,0,clrGreen,12);
   createLabel("L4",(string)SymbolInfoDouble(_Symbol,SYMBOL_BID),420,230,0,0,clrRed,12);
   createIcon("I1",330,260,40,77,clrBlack);
   createIcon("I2",420,260,40,40,clrBlack);
   createIcon("I3",310,300,30,64,clrBlue);
   createLabel("L5","By: Forex Algo-Trader",345,322,0,0,clrBlack,10);
   
   ChartRedraw();
   return(INIT_SUCCEEDED);
}

The mission kicks off with the #property header, proudly declaring the EA as a free offering by Allan in 2024, complete with a YouTube link for support, like engraving your starship’s nameplate. The "OnInit()" function is where the magic begins, acting as the power switch for your control panel. It calls a series of functions to create the GUI elements, each carefully positioned to form a cohesive dashboard.

We start with "createButton("B1",...)", which builds a large white button as the panel’s backdrop, like laying the foundation of your cockpit. Next, "createLabel("L1",...)" and "createLabel("L2",...)" add a bold “TRADE PANEL” title and a red underline, giving the panel a professional header. The "createEdit("E1",...)" function adds an editable text field labeled “Edit Me,” like a touchscreen for inputting trade settings. Two small buttons, "createButton("B3",...)" (plus) and "createButton("B4",...)" (minus), flank the text field, ready to adjust values like lot sizes in future upgrades.

The heart of the panel comes with "createButton("B5",...)" and "createButton("B6",...)", creating vibrant “BUY” (green) and “SELL” (red) buttons, like your ship’s main controls for launching trades. Below them, "createLabel("L3",...)" and "createLabel("L4",...)" display the current ask (green) and bid (red) prices for the chart’s symbol (e.g., EURUSD’s ask at 1.2002, bid at 1.2000), acting as your market scanner. Three icons—"createIcon("I1",...)", "createIcon("I2",...)", and "createIcon("I3",...)"—add visual flair with Wingdings symbols, like decorative lights on your dashboard. Finally, "createLabel("L5",...)" credits “By: Forex Algo-Trader,” like a signature on your ship’s hull.

The "ChartRedraw()" function refreshes the chart to display everything, and INIT_SUCCEEDED confirms, “Console powered up, ready for action!” This sets the stage for a professional trading interface, like a cockpit prepped for a galactic mission.

Step 2: Building the Control Panel—Crafting GUI Elements

With the console powered up, let’s dive into the engineering of each GUI element, exploring how they’re crafted to form a seamless trading dashboard.

bool createButton(string objName,string text,int x, int y,int width, int height,
                  color clrTxt,color clrBg, color clrBorder,int fontsize){
   if (!ObjectCreate(0,objName,OBJ_BUTTON,0,0,0)){
      ResetLastError();
      Print(__FUNCTION__,": Failed to create the button! Error Code = ", GetLastError());
      return (false);
   }
   ObjectSetInteger(0,objName,OBJPROP_XDISTANCE,x);
   ObjectSetInteger(0,objName,OBJPROP_YDISTANCE,y);
   ObjectSetInteger(0,objName,OBJPROP_XSIZE,width);
   ObjectSetInteger(0,objName,OBJPROP_YSIZE,height);
   ObjectSetInteger(0,objName,OBJPROP_CORNER,CORNER_LEFT_UPPER);
   ObjectSetString(0,objName,OBJPROP_TEXT,text);
   ObjectSetInteger(0,objName,OBJPROP_FONTSIZE,fontsize);
   ObjectSetInteger(0,objName,OBJPROP_COLOR,clrTxt);
   ObjectSetInteger(0,objName,OBJPROP_BGCOLOR,clrBg);
   ObjectSetInteger(0,objName,OBJPROP_BORDER_COLOR,clrBorder);
   ObjectSetInteger(0,objName,OBJPROP_BORDER_TYPE,BORDER_SUNKEN);
   ObjectSetInteger(0,objName,OBJPROP_BACK,false);
   ObjectSetInteger(0,objName,OBJPROP_STATE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTABLE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTED,false);
   return (true);
}

bool createLabel(string objName,string text,int x, int y,int width, int height,
                  color clrTxt, int fontsize){
   if (!ObjectCreate(0,objName,OBJ_LABEL,0,0,0)){
      ResetLastError();
      Print(__FUNCTION__,": Failed to create the label! Error Code = ", GetLastError());
      return (false);
   }
   ObjectSetInteger(0,objName,OBJPROP_XDISTANCE,x);
   ObjectSetInteger(0,objName,OBJPROP_YDISTANCE,y);
   ObjectSetInteger(0,objName,OBJPROP_CORNER,CORNER_LEFT_UPPER);
   ObjectSetString(0,objName,OBJPROP_TEXT,text);
   ObjectSetInteger(0,objName,OBJPROP_FONTSIZE,fontsize);
   ObjectSetInteger(0,objName,OBJPROP_COLOR,clrTxt);
   ObjectSetInteger(0,objName,OBJPROP_BACK,false);
   ObjectSetInteger(0,objName,OBJPROP_STATE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTABLE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTED,false);
   return (true);
}

bool createEdit(string objName,string text,int x, int y,int width, int height,
                  color clrTxt, int fontsize){
   if (!ObjectCreate(0,objName,OBJ_EDIT,0,0,0)){
      ResetLastError();
      Print(__FUNCTION__,": Failed to create the edit! Error Code = ", GetLastError());
      return (false);
   }
   ObjectSetInteger(0,objName,OBJPROP_XDISTANCE,x);
   ObjectSetInteger(0,objName,OBJPROP_YDISTANCE,y);
   ObjectSetInteger(0,objName,OBJPROP_CORNER,CORNER_LEFT_UPPER);
   ObjectSetString(0,objName,OBJPROP_TEXT,text);
   ObjectSetInteger(0,objName,OBJPROP_FONTSIZE,fontsize);
   ObjectSetInteger(0,objName,OBJPROP_COLOR,clrTxt);
   ObjectSetInteger(0,objName,OBJPROP_ALIGN,ALIGN_CENTER);
   ObjectSetInteger(0,objName,OBJPROP_BGCOLOR,clrBlack);
   ObjectSetInteger(0,objName,OBJPROP_BORDER_COLOR,clrWhiteSmoke);
   ObjectSetInteger(0,objName,OBJPROP_BACK,false);
   ObjectSetInteger(0,objName,OBJPROP_STATE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTABLE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTED,false);
   return (true);
}

bool createIcon(string objName,int x, int y,int fontsize, char WingDing_No,
                color clrTxt){
   if (!ObjectCreate(0,objName,OBJ_LABEL,0,0,0)){
      ResetLastError();
      Print(__FUNCTION__,": Failed to create the icon! Error Code = ", GetLastError());
      return (false);
   }
   ObjectSetInteger(0,objName,OBJPROP_XDISTANCE,x);
   ObjectSetInteger(0,objName,OBJPROP_YDISTANCE,y);
   ObjectSetInteger(0,objName,OBJPROP_CORNER,CORNER_LEFT_UPPER);
   ObjectSetString(0,objName,OBJPROP_FONT, "wingdings");
   string Icon = CharToString(WingDing_No);
   ObjectSetString(0,objName,OBJPROP_TEXT,Icon);
   ObjectSetInteger(0,objName,OBJPROP_FONTSIZE,fontsize);
   ObjectSetInteger(0,objName,OBJPROP_COLOR,clrTxt);
   ObjectSetInteger(0,objName,OBJPROP_BACK,false);
   ObjectSetInteger(0,objName,OBJPROP_STATE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTABLE,false);
   ObjectSetInteger(0,objName,OBJPROP_SELECTED,false);
   return (true);
}

As we move into the engineering bay, we find the heart of the panel’s design: four functions that craft its elements, each like a specialized tool for building your cockpit. The "createButton()" function is the workhorse, constructing buttons like "B1" (the panel’s backdrop), "B3" (plus), "B4" (minus), "B5" (Buy), and "B6" (Sell). It uses "ObjectCreate(OBJ_BUTTON)" to create a button, setting its position ("OBJPROP_XDISTANCE", "OBJPROP_YDISTANCE"), size ("OBJPROP_XSIZE", "OBJPROP_YSIZE"), and appearance with properties like text color ("OBJPROP_COLOR"), background ("OBJPROP_BGCOLOR"), border ("OBJPROP_BORDER_COLOR", sunken style), and font size ("OBJPROP_FONTSIZE"). For example, the “Buy” button ("B5") is green with black text, positioned at (310,180), sized 85x40 pixels, like a glowing control switch ready to execute a trade on EURUSD.

The "createLabel()" function builds text displays, like "L1" (“TRADE PANEL”), "L3" (ask price), and "L4" (bid price). It uses "ObjectCreate(OBJ_LABEL)", setting position, text ("OBJPROP_TEXT"), color, and font size, but skips size properties for automatic text scaling. The ask price label ("L3") shows 1.2002 in green for EURUSD, like a market display on your dashboard, ensuring you’re always informed.

The "createEdit()" function creates the editable field "E1", using "ObjectCreate(OBJ_EDIT)" with a black background, white text, and a gray border, centered with "OBJPROP_ALIGN". Positioned at (375,150), it’s like a touchscreen where you could type a lot size (e.g., 0.1), though it starts with “Edit Me” and awaits further programming to process inputs.

Finally, "createIcon()" adds decorative Wingdings symbols ("I1", "I2", "I3") using "ObjectCreate(OBJ_LABEL)" with the Wingdings font ("OBJPROP_FONT") and specific character codes ("CharToString(WingDing_No)"). For instance, "I1" at (330,260) displays a black symbol (code 77), like a status light enhancing the panel’s aesthetic. Each function logs errors with "Print()" if creation fails, ensuring reliability, like a diagnostic check on your ship’s systems. Together, these functions craft a cohesive, professional interface, setting the stage for trading control.

Step 3: Monitoring the Galaxy—Keeping the Panel Active

With the panel built, let’s ensure it stays operational, ready to monitor the market and respond to your commands.

void OnTick(){
}

Our journey now takes us to the bridge, where the "OnTick()" function would keep the panel alive, updating prices or handling button clicks. However, this version leaves "OnTick()" empty, like a starship in standby mode. The bid and ask prices on "L3" and "L4" are set once in "OnInit()" using "SymbolInfoDouble()", showing static values (e.g., EURUSD bid at 1.2000). To make the panel dynamic, you’d add code here to refresh prices with "ObjectSetString()", like updating your market scanner every tick. For example, you could write:

ObjectSetString(0,"L3",OBJPROP_TEXT,(string)SymbolInfoDouble(_Symbol,SYMBOL_ASK));
ObjectSetString(0,"L4",OBJPROP_TEXT,(string)SymbolInfoDouble(_Symbol,SYMBOL_BID));

This would keep EURUSD’s prices live, like a real-time feed on your dashboard. The lack of "OnTick()" logic suggests this EA is a foundation, waiting for enhancements like button click handlers (via "OnChartEvent()") to execute trades when you press “Buy” or “Sell,” making it a work-in-progress control panel poised for action.

Step 4: Docking the Starship—Cleaning Up the Console

As our mission nears its end, we prepare to dock the starship, ensuring the console shuts down cleanly.

void OnDeinit(const int reason){
}

In the docking bay, the "OnDeinit()" function is our final stop, but it’s currently empty, like leaving the control panel’s screens glowing. This means the GUI elements (buttons, labels, etc.) remain on the chart when the EA is removed, like leaving your ship’s dashboard active. To tidy up, you could add "ObjectsDeleteAll()" to remove objects like "B1", "L1", and "E1", ensuring a clean chart:

ObjectsDeleteAll(0, -1, -1);
ChartRedraw();

This would be like powering down your cockpit, leaving no trace of the panel. For now, the empty "OnDeinit()" keeps the setup simple, but adding cleanup would make the EA more professional, ready for the next mission.

Why This EA’s a Cosmic Legend (and Keeps You Engaged!)

This EA is a foundation for a trading legend, offering a sleek GUI that’s like a starship’s control panel, poised to revolutionize manual trading. Its buttons, labels, and inputs create an intuitive interface, ready for enhancements like trade execution or dynamic updates. Picture setting up a panel on GBPUSD, monitoring bid/ask prices, and clicking “Buy” to place a 0.1-lot trade at 1.3502—pure cosmic control! Beginners will appreciate the clear design, while pros can extend it with custom logic, making it a versatile tool for any trader’s arsenal.

Putting It All Together

To launch this EA:

1. Open MetaEditor in MetaTrader 5, like stepping into your starship’s cockpit.

2. Paste the code, compile with F5, and check for errors—no captain wants a glitchy console!

3. Drop the EA on your chart and watch the trade panel appear, ready to display prices and controls.

4. Monitor bid/ask prices on the panel and plan enhancements (e.g., button click handlers), like upgrading your ship’s systems.

5. Test on a demo account first—real trades deserve a practice mission!

Conclusion

We’ve crafted a Trade Panel Cosmic Console that transforms manual forex trading into a professional, intuitive experience, like piloting a starship through the market galaxy. This MQL5 code is your control panel, built with a seamless, engaging narrative to guide you from setup to potential upgrades, ensuring every detail sparkles with clarity and purpose. Whether you’re a novice trader or a seasoned explorer, this EA offers a foundation to command your trades with confidence. Ready to take the helm? Check our video guide on the website for a front-row seat to this cosmic trading mission. Now, go conquer those market stars! 🌌

Disclaimer: Trading is like piloting a spaceship—thrilling but risky. Losses can exceed deposits. Test strategies on a demo account before going live.