ForumSections

Gallery of UIs written in MQL - page 15

New comment
Nikolai Semko #:

Pyotr, I don't understand you. You didn't answer the questions.
It is important for programmers to know how to interact with your GUI while working.
Here is an example of my GUI. I clicked the light/dark theme shortcut and this event immediately triggered the function to change background colours and lines. How do you do this interaction?


What does it mean " The user will NOT interact (at all) with my code. "?
The programmer needs to interact not with the code, but with the events that the code should generate.

Good. I'll try to use only pictures for clarity.

1.





2.


3.


4.

Our options sheet and the checkbox in the window and the Internal_API file:




5. Performing actions on the window and items in the user code:




6.

INTELLISENSE TELLS US EVERYTHING!!!
OK. I'll try to ask a different question.
Using web development as an example.
Because your GUI is written using the markup language you created. Web development also has its own markup language (HTML) and style language (CSS).
If you have created a web site only in HTML, you can create controls in pure html. Here is an example with checkbox.
But in this case the site will be dead, because nothing will happen when controls are working.
To make something happen, you need to put a handler for each event using JavaScript and the addEventListener function
Here is an example of such a handler: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener4

My main question can be rephrased: How do you implement for the programmer the event handler generated by GUI when the user works. I.e. what is your analogue of addEventListener ?
As I said, I have it implemented through the fact that when the GUI is generated programmatically, each control is assigned its own event handler function using a pointer to a function.
In the picture of getting a value from an element, I forgot to write the variable to which it is written. Sorry, I haven't programmed for a long time.))))))
Nikolai Semko #:
OK. I'll try to ask a different question.
Using web development as an example.
Because your GUI is written using the markup language you created. Web development also has its own markup language (HTML) and style language (CSS).
If you have created a web site only in HTML, you can create controls in pure html. Here is an example with checkbox.
But in this case the site will be dead, because nothing will happen when controls are working.
To make something happen, you need to put a handler for each event using JavaScript and the addEventListener function
Here is an example of such a handler: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener4

My main question can be rephrased: How do you implement for the programmer the event handler generated by GUI when the user works. I.e. what is your analogue to addEventListener ?
As I said, I have it implemented through the fact that when the GUI is generated programmatically, each control is assigned its own event handler function using a pointer to the function.

Nicholas, everything works. You will try it yourself later. Everything is much simpler than you think. I have made many working interfaces using this technology. So... You'll see soon enough.

Реter Konow #:

Nikolai, it's working. You'll try it yourself later. It's much simpler than you think. I have made many working interfaces using this technology. So... You'll see soon enough.

Okay. I'll be waiting. I really want to understand your Creation.
However, to make it easier to understand by example, please create a simple empty indicator (or Expert Advisor), in which your GUI is connected in the form of a separate button, when you press it, the background colour of the window changes from black to white and from white to black. It is only desirable that the colour change takes place in the indicator body, and not in one of the connected files. Because the programmer really should not get into your code.
For simplicity of writing here is the code of the function that should be executed in the program body when the button is pressed:

void ChangeColorScheme() {
   struct ColorScheme {
      uint           background;
      uint           foreground;
      uint           grid;
      uint           bar;
      uint           bull;
      uint           bear;
      uint           volume;
   };
   static const ColorScheme c[2] = {{0x00000000,0x00DDAAAA,0x00804040,0x0000FF00,0x00000000,0x00FFFFFF,0x0032CD32},
      {0x00FFFFFF,0x00000000,0x00C0C0C0,0x00000000,0x00FFFFFF,0x00000000,0x00008000}
   };
   static int clr_scheme = 0;
   if (clr_scheme == 1) clr_scheme = 0;
   else clr_scheme  = 1;

   ChartSetInteger(0,CHART_COLOR_BACKGROUND,c[clr_scheme].background);
   ChartSetInteger(0,CHART_COLOR_FOREGROUND,c[clr_scheme].foreground);
   ChartSetInteger(0,CHART_COLOR_CHART_LINE,c[clr_scheme].bar);
   ChartSetInteger(0,CHART_COLOR_CHART_DOWN,c[clr_scheme].bar);
   ChartSetInteger(0,CHART_COLOR_CHART_UP,c[clr_scheme].bar);
   ChartSetInteger(0,CHART_COLOR_CANDLE_BULL,c[clr_scheme].bull);
   ChartSetInteger(0,CHART_COLOR_CANDLE_BEAR,c[clr_scheme].bear);
   ChartSetInteger(0,CHART_COLOR_GRID,c[clr_scheme].grid);
   ChartSetInteger(0,CHART_COLOR_VOLUME,c[clr_scheme].volume);
   ChartRedraw();
}
Nikolai Semko #:

Okay. I will wait. I really want to understand your Creation.
However, to make it easier to understand by example, please create a simple empty indicator (or Expert Advisor), in which your GUI is connected in the form of a separate button, when you press it, the background colour of the window changes from black to white and from white to black. It is only desirable that the colour change takes place in the indicator body, and not in one of the connected files. Because the programmer really should not get into your code.
For simplicity of writing here is the code of the function that should be executed in the program body when the button is pressed:

Ok. I will make the simplest possible implementation for understanding. No frills).

  • Indicator
  • Inside the indicator is a user window
  • There is one button in the window
  • The button calls your function.
  • All actions are written in the body of the indicator.
Реter Konow #:

Okay. I'll make the simplest possible implementation for understanding. No frills).

  • Indicator
  • Inside the indicator is a user window
  • There is one button in the window
  • The button calls your function.
  • All actions are written in the indicator body.

Great! Thank you.

Nikolay, I can't write a function call inside the indicator body, because its handler is inside the file Internal_API.mqh.

That is, I can call your function on the event of pressing the button from its handler in this file. However, I can set the button states programmatically from the indicator body on the timer event, for example. But then I don't need to press the button. In short, there are different elements. Some of them can be handled inside the indicator body (mostly non-interactive elements, like progress-bar, for example) and there are those that have a handler in the file Internal_API.mqh and work from there. Although their states can be set programmatically from the EA/indicator body.

Your task is completed. (if white square - click)


Code:

//+------------------------------------------------------------------+
//|                                                 Indicators 1.mq5 |
//|                        Copyright 2020, MetaQuotes Software Corp. |
//|                                             https://www.mql5.com |
//+------------------------------------------------------------------+
#include<GUI_DRIVE_2.mqh>
#include<MyProject_1\CORES.mqh>
#include<MyProject_1\Internal_API.mqh> 
//+------------------------------------------------------------------+
//| Custom indicator initialization function                         |
//+------------------------------------------------------------------+
int OnInit()
  {
   //--- create timer
   EventSetMillisecondTimer(25);
   //-------------------------
   D_OnInit();
   //-------------------------
   return(INIT_SUCCEEDED);
  }
//+------------------------------------------------------------------+
//| Custom indicator iteration function                              |
//+------------------------------------------------------------------+
int OnCalculate(const int rates_total,
                const int prev_calculated,
                const datetime &time[],
                const double &open[],
                const double &high[],
                const double &low[],
                const double &close[],
                const long &tick_volume[],
                const long &volume[],
                const int &spread[])
  {
//---
   
//--- return value of prev_calculated for next call
   return(rates_total);
  }
//+------------------------------------------------------------------+
//| Timer function                                                   |
//+------------------------------------------------------------------+
void OnTimer()
  {
   //ВАШ КОД-----------------
   //ВАШ КОД-----------------
   //ВАШ КОД-----------------
   //ВАШ КОД-----------------
   //УСТАНОВИТЬ ВЫЗОВ В САМОМ НИЗУ, ПОД ПОЛЬЗ.КОДОМ.------------------
   //---------------------------
   RMSG(1);
   //---------------------------
  }
//+------------------------------------------------------------------+
//| ChartEvent function                                              |
//+------------------------------------------------------------------+
void OnChartEvent(const int id,
                  const long &lparam,
                  const double &dparam,
                  const string &sparam)
  {
   //УСТАНОВИТЬ ВЫЗОВ НА САМОМ ВЕРХУ, НАД ПОЛЬЗ.КОДОМ.---------------
   //----------------------------------------------------------------
   D_OnChartEvent(id,lparam,dparam,sparam);
   //----------------------------------------------------------------
  }
//+------------------------------------------------------------------+

/*void ChangeColorScheme() {
   struct ColorScheme {
      uint           background;
      uint           foreground;
      uint           grid;
      uint           bar;
      uint           bull;
      uint           bear;
      uint           volume;
   };
   static const ColorScheme c[13] = {{0x00000000,0x00DDAAAA,0x00804040,0x0000FF00,0x00000000,0x00FFFFFF,0x0032CD32},
      {0x00FFFFFF,0x00000000,0x00C0C0C0,0x00000000,0x00FFFFFF,0x00000000,0x00008000}
   };
   static int clr_scheme = 0;
   if (clr_scheme == 1) clr_scheme = 0;
   else clr_scheme  = 1;

   ChartSetInteger(0,CHART_COLOR_BACKGROUND,c[clr_scheme].background);
   ChartSetInteger(0,CHART_COLOR_FOREGROUND,c[clr_scheme].foreground);
   ChartSetInteger(0,CHART_COLOR_CHART_LINE,c[clr_scheme].bar);
   ChartSetInteger(0,CHART_COLOR_CHART_DOWN,c[clr_scheme].bar);
   ChartSetInteger(0,CHART_COLOR_CHART_UP,c[clr_scheme].bar);
   ChartSetInteger(0,CHART_COLOR_CANDLE_BULL,c[clr_scheme].bull);
   ChartSetInteger(0,CHART_COLOR_CANDLE_BEAR,c[clr_scheme].bear);
   ChartSetInteger(0,CHART_COLOR_GRID,c[clr_scheme].grid);
   ChartSetInteger(0,CHART_COLOR_VOLUME,c[clr_scheme].volume);
   ChartRedraw();
}*/


void ChangeColorScheme(uint _color)
{
 ChartSetInteger(0,CHART_COLOR_BACKGROUND,_color);
}

Commented out your function because the compiler was swearing. I made it simpler.


Here is the code in the file Internal_API.mqh



By the way, you should add:

Internal_API.mqh file contains control handlers and is SPECIFICLY designed to connect them.

This file is intended for the user and is not part of the engine or any of my other code.

Реter Konow controls and is SPECIFICLY designed to connect them.

This file is intended for the user and is not part of the engine or any of my other code.

I see, Peter. Thanks.
It is not convenient, of course, for a developer. There is a lot of unnecessary code and movements.
Still, the variant with a pointer to a function is much better.

1...8910111213141516171819202122...82
New comment