La toile est cool ! - page 84

[Samuel Manoel De Souza]

Martin Moreno #:

Je veux créer une interface utilisateur avec la classe Canvas. Mon seul problème est que je ne sais pas comment rendre le tableau de bord mobile sur le graphique.

J'ai beaucoup cherché mais je n'ai pas trouvé d'exemple. Je vous serais reconnaissant si vous pouviez me donner un indice.

Vous pouvez commencer par cet article : https://www.mql5.com/en/articles/12751

[B.Moreno]

Samuel Manoel De Souza #:

vous pouvez commencer par cet article : https://www.mql5.com/en/articles/12751

Super... Merci beaucoup !

[Nikolai Semko]

Martin Moreno #:

Je veux créer une interface utilisateur avec la classe Canvas. Mon seul problème est que je ne sais pas comment rendre le tableau de bord mobile sur le graphique.

J'ai beaucoup cherché mais je n'ai pas trouvé d'exemple. Je vous serais reconnaissant si vous pouviez me donner un indice.

Je vous ai déjà donné un exemple il y a 4 ans :))

Forum sur le trading, les systèmes de trading automatisés et les tests de stratégies de trading

Comment convertir tous les objets en 1 objet

Nikolai Semko, 2019.10.05 22:39

En effet, Canvas est la solution.

Et Canvas est beaucoup plus facile qu'il n'y paraît à première vue.

Voici un exemple primitif d'un indicateur (MQL5 & MQL4) avec un objet OBJ_BITMAP_LABEL dans lequel il y a plusieurs fenêtres.

#property indicator_chart_window
#include <Canvas\iCanvas.mqh> //https://www.mql5.com/ru/code/22164 - MQL5
                              //https://www.mql5.com/en/code/23840 - MQL4

struct win {
   int               x;
   int               y;
   int               width;
   int               height;
   uint              clr;
};
win wnd[30];
int OnInit() {
   for (int i=0; i<ArraySize(wnd); i++) {
      wnd[i].width=rand()%200+70;
      wnd[i].height=rand()%150+50;
      wnd[i].x=rand()%(W.Width-wnd[i].width);
      wnd[i].y=rand()%(W.Height-wnd[i].height);
      wnd[i].clr=ARGB(255,rand()%150+100,rand()%150+100,rand()%150+100);
   }
   ShowAllWind();
   return(INIT_SUCCEEDED);
}

//+------------------------------------------------------------------+

int OnCalculate(const int rates_total, const int prev_calculated, const int begin, const double &price[]) {
   return(rates_total);
}

//+------------------------------------------------------------------+

void OnChartEvent(const int id,
                  const long &lparam,
                  const double &dparam,
                  const string &sparam) {
   static bool click = false;
   static int x_mouse=0, y_mouse=0;
   static int focus=-1, xfocus=0, yfocus=0;
   int x=(int)lparam;
   int y=(int)dparam;
   if (sparam!="1" && click) focus=-1;
   if (sparam=="1" && !click) {
      focus=-1;
      for (int i=ArraySize(wnd)-1; i>=0; i--) {
         if (wnd[i].x<x && wnd[i].y<y && wnd[i].x+wnd[i].width>x && wnd[i].y+20>y) {
            focus=i;
            xfocus=x;
            yfocus=y;
            break;
         }
      }
      if (focus>=0) ChartSetInteger(0,CHART_MOUSE_SCROLL,false);
      else ChartSetInteger(0,CHART_MOUSE_SCROLL,true);
   }
   click=(sparam=="1")?true:false;
   if (id==CHARTEVENT_MOUSE_MOVE && focus>=0) {
      wnd[focus].x+=x-xfocus;
      wnd[focus].y+=y-yfocus;
      xfocus=x;
      yfocus=y;
      ShowAllWind();
   }
   if (id==CHARTEVENT_CHART_CHANGE) ShowAllWind();
}

//+------------------------------------------------------------------+

void ShowAllWind() {
   Canvas.Erase();
   for (int i=0; i<ArraySize(wnd); i++) {
      Canvas.FillRectangle(wnd[i].x,wnd[i].y,wnd[i].x+wnd[i].width,wnd[i].y+wnd[i].height,ARGB(255,GETRGBR(wnd[i].clr)*0.5,GETRGBG(wnd[i].clr)*0.5,GETRGBB(wnd[i].clr)*0.5));
      Canvas.FillRectangle(wnd[i].x+3,wnd[i].y+23,wnd[i].x+wnd[i].width-3,wnd[i].y+wnd[i].height-3,wnd[i].clr);
      Canvas.FillRectangle(wnd[i].x+3,wnd[i].y+3,wnd[i].x+wnd[i].width-3,wnd[i].y+20,ARGB(255,GETRGBR(wnd[i].clr)*0.7,GETRGBG(wnd[i].clr)*0.7,GETRGBB(wnd[i].clr)*0.7));
   }
   Canvas.Update();
}
//+------------------------------------------------------------------+

Dans ce nouvel article, une autre option pour mettre en place des panneaux d'information.

https://www.mql5.com/ru/articles/13179

[Vitaliy Kuznetsov]

Nikolai Semko #:
Ici, par exemple, j'ai esquissé un script qui le démontre clairement. À droite se trouve cet algorithme rapide, et à gauche le mien (environ 4 à 10 fois plus lent).
.

Nikolai Semko, bonjour. Dans cet exemple https://www.mql5.com/ru/forum/227736/page66#comment_20456641, vous avez démontré le redimensionnement (rétrécissement) d'une image Bmp.

Je peux réduire l'image Bmp, mais la toile reste de la même taille. Pour la même raison, je ne peux pas agrandir l'image, elle est rognée par la taille d'origine, c'est-à-dire la taille de la toile.

Je ne comprends pas très bien les tableaux, alors pouvez-vous m'expliquer, ou mieux me montrer un exemple avec du code :

1. Agrandissement de l'image

2. Une toile égale à la taille de l'image si nous l'avons réduite ou agrandie.

Nous vous remercions.

[Nikolai Semko]

Vitaliy Kuznetsov #:
Nikolai Semko, bonjour. Dans cet exemple https://www.mql5.com/ru/forum/227736/page66#comment_20456641, vous avez démontré le redimensionnement (réduction) d'une image Bmp.

Je peux réduire l'image Bmp, mais la toile reste de la même taille. Pour la même raison, je ne peux pas agrandir l'image, elle est rognée par la taille d'origine, c'est-à-dire la taille de la toile.

Je ne comprends pas très bien les tableaux, alors pouvez-vous m'expliquer, ou mieux, me montrer un exemple avec du code :

1. Agrandissement de l'image

2. Une toile égale à la taille de l'image si nous l'avons réduite ou agrandie.

Merci de votre compréhension.

Bonjour,

Il existe une fonction Resize() dans CCanvas.

[Nikolai Semko]

Vitaliy Kuznetsov #:

Sympa et utile. Juste par intérêt, est-ce que cela peut être utilisé dans MT4 ?

Malheureusement, dans MQL4, il n'est pas possible d'attacher une ressource en tant que tableau. Mais tout le reste fonctionne.

Bien sûr, cela peut être mis en œuvre par le biais de tambourins durs. Par exemple, insérez une image PNG dans un fichier BMP, c'est-à-dire ajoutez un en-tête BMP au début du png, et passez le png lui-même en tant qu'image BMP (c'est-à-dire que si vous ouvrez un tel BMP, il y aura un bruit de pixels colorés de différentes transparences). Ensuite, attachez ce "fichier bmp" en tant que ressource dans MQL4. Cela peut être nécessaire pour le marché, afin que ex4 contienne déjà une image d'un format png plus dense.

Pour référence : le format png est environ 10 fois plus petit que la même image BMP sans perte de qualité, et supporte en outre une transparence totale.

La ressource BMP réelle dans le fichier ex5(ex4) est stockée dans un format compacté, mais pas dans un ordre de grandeur inférieur. Il est nécessaire de vérifier exactement.

[Vladimir Nikolaychuk]

Bonjour à tous. Je suis également intéressé par ce code. Mais lorsque j'utilise Resize(), cela ne fonctionne pas. Peut-être faudrait-il le faire dans un ordre différent.

[Nikolai Semko]

Vladimir Nikolaychuk #:

Bonjour à tous. Je suis également intéressé par ce code. Mais lorsque j'utilise Resize(), cela ne fonctionne pas. Peut-être faudrait-il le faire dans un ordre différent.

D'accord, je vous donnerai un exemple plus tard.

Mais je préfère travailler avec un seul canevas pour l'ensemble du graphique. C'est justifié dans 95 % des cas.

[Vladimir Nikolaychuk]

Nikolai Semko #:
D'accord, je vous donnerai un exemple un peu plus tard.

Mais je préfère travailler avec un seul canevas pour l'ensemble du graphique. Cela se justifie dans 95 % des cas.

Je vous serais très reconnaissant de me donner un exemple de code. Merci d'avance...

[Nikolai Semko]

Nikolai Semko #:
D'accord, je vous donnerai un exemple un peu plus tard.

Mais je préfère travailler avec un seul canevas pour l'ensemble du graphique. Cela se justifie dans 95 % des cas.

Voici un exemple basé sur la bibliothèque png.mql, où le déplacement de la souris modifie la position du canevas et change sa taille. Si le pointeur de la souris est au centre horizontalement, il correspond à la taille originale de l'image, si vers la gauche - zoom arrière, vers la droite - zoom avant.
Seulement j'ai dû repousser les variables C et _C dans png.mql de private à public. Vous devez donc écraser cette bibliothèque si elle est déjà installée.
Cet exemple a deux modes de fonctionnement (variable d'entrée bool resize_canvas) :

• avec redimensionnement de Canvas à chaque fois que l'image est redimensionnée
• sans redimensionner Canvas à chaque fois que l' image est redimensionnée. La taille initiale de Canvas est fixée à la taille maximale possible de l'image selon la logique de travail.

Malheureusement, dans le premier mode de MQL5, il y a un ancien bug de clignotement de l'image, qui ne peut être résolu que d'une seule manière - ne pas changer la taille du canevas. Toutes mes tentatives pour modifier la fonction CCanvas.Resize() n'ont abouti à rien. Tout clignote de la même manière. Peut-être que quelqu'un peut le faire :)))
C'est pourquoi je préfère utiliser un seul canevas pour tout l'écran !

#define  MAX_ZOOM 2
#include <Canvas\png.mqh> //https://www.mql5.com/en/code/45439
CPng img("cubes.png"); // Get PNG from a file, create a canvas and display it on the screen at coordinates (X=500, Y=100)

input bool resize_canvas = false;
int chart_width,chart_height;


//+------------------------------------------------------------------+
int OnInit() {
   img.Resize(resize_canvas?10:img.width*MAX_ZOOM); // формируем массив _bmp[] максимального размера в режиме без изменения размера canvas
   ChartSetInteger(0,CHART_EVENT_MOUSE_MOVE,true);
   chart_width = (int)ChartGetInteger(0,CHART_WIDTH_IN_PIXELS);
   chart_height = (int)ChartGetInteger(0,CHART_HEIGHT_IN_PIXELS);
   img._CreateCanvas(chart_width/3, chart_height/3);
   return(INIT_SUCCEEDED);
}
//+------------------------------------------------------------------+
void OnDeinit(const int reason) {
}
//+------------------------------------------------------------------+
void OnTick() {
}
//+------------------------------------------------------------------+
void OnChartEvent(const int id,
                  const long &lparam,
                  const double &dparam,
                  const string &sparam) {
   if (id == CHARTEVENT_MOUSE_MOVE) {
      double new_width = img.width*(MAX_ZOOM*(double)lparam/chart_width);
      img.Resize(new_width);
      if (resize_canvas) { // режим с изменением размера canvas  Моргает!!!
         img._C.Resize(img._width,img._height);
         ArrayCopy(img._C.m_pixels,img._bmp);
      } else {  // режим без изменения размера canvas         не Мограет!!!
         img._C.Erase(0x00FFFFFF);
         for(int i =0; i++<img._height;) ArrayCopy(img._C.m_pixels,img._bmp,int(i*img.width*MAX_ZOOM),i*img._width,img._width);
      }
      img._C.Update();
      img._MoveCanvas(int(lparam)/5, int(dparam)/5);
   }
}