MetaTrader用GUIグラフィックライブラリ：インストールと使用ガイド

✔️ GUIグラフィックライブラリMT4©：   https://www.mql5.com/en/market/product/206760

✔️ GUIグラフィックライブラリMT5©:   https://www.mql5.com/en/market/product/206761

✔️ 完全なドキュメント、要素ギャラリー、および画像からコードへのツール5：   https://www.betasoft.dev/gui-graphic-library

ポジション一覧表、注文伝票、そしてリアルタイムチャート。

GUIグラフィックライブラリは、エキスパートアドバイザーやインジケーターに、ウィンドウ、タブ、メニュー、テーブル、チャート、ピッカー、ダイアログ、トレーディングウィジェットといった完全なインターフェースを提供します。すべてが1つのキャンバス上に描画され、同じコードがMetaTrader 4とMetaTrader 5で動作し、API全体は15個の関数で構成されています。

このガイドでは、ダウンロードから最初のパネルの作成、そして最も頻繁に行う作業までを順を追って説明します。すべてのコードサンプルは公開されているインクルードファイルのみを使用しているため、そのまま自分のプログラムに貼り付けることができます。

78個の要素のうちのごく一部：ボタン、入力フィールド、スライダー、タブ。

1. 始める前に

• Windows版MetaTrader 4またはMetaTrader 5。フォントとアイコンはWindowsの表示スケール（100%、125%、150%、200%）に従います。
• MetaEditorは、デモや独自のプログラムをコンパイルするためのツールです。
• 端末オプションで許可する必要は何もありません。このライブラリはDLLを使用せず、Webリクエストも行わず、端末のグローバル変数も使用しません。
• MT4とMT5は別々の製品です。お使いの端末に合ったバージョンをインストールしてください。

2. インストール

1. ターミナルで「ファイル」を選択し、「データフォルダを開く」を選択します。
2. MQL5フォルダ（MetaTrader 5の場合）またはMQL4フォルダ（MetaTrader 4の場合）を開きます。
3. 各ファイルを、上記の表に示されているフォルダ（Libraries、Include、Experts、Indicators）にコピーしてください。
4. MetaEditorで各デモを開き、F7キーを押してください。結果には「エラー0件、警告0件」と表示されるはずです。
5. ターミナルに戻り、ナビゲーターを更新します（右クリックして「更新」を選択）。すると新しいプログラムが表示されます。

フォルダは以下のようになっているはずです。

ライブラリファイルの名前を変更しないでください。インクルードファイルはその名前でライブラリをロードします。

インストール後の確認

GUI_Graphic_Library.mqhの中身は何ですか？

インクルードファイルは意図的に小さく作られています。インポートブロックの上には列挙型（オブジェクト型、プロパティ、イベント、テーマ、アイコン）が宣言されています。下のインポートブロックではコンパイル済みのライブラリがロードされ、その15個の関数がリストされています。MetaTrader 5は.ex5ファイルを、MetaTrader 4は.ex4ファイルをロードします。これらのファイルはコンパイラによって選択されます。このファイルはインクルードするだけで、編集する必要はありません。

 #ifdef __MQL5__
#import "\\Market\\GUI_Graphic_Library.ex5"
#else
#import "\\Market\\GUI_Graphic_Library.ex4"
#endif
   string Gui_Version();
   bool    Gui_Create( const long chart= 0 , const string name= "GUI_Graphic_Library" , const int subwin= 0 );
   void    Gui_Destroy();
   void    Gui_ChartEvent( const int id, const long lparam, const double dparam, const string sparam);
   void    Gui_Timer();
   void    Gui_Update( const bool force= false );
   bool    Gui_NextEvent(ENUM_GUI_EVENT &event, int &sender, long &lparam, double &dparam, string &sparam);
   int     Gui_Add( const ENUM_GUI_OBJECT type, const int parent, const string name, const string text, const int x, const int y, const int w, const int h);
   int     Gui_Set( const int id, const ENUM_GUI_PROP prop, const string s= "" , const double a= EMPTY_VALUE , const double b= EMPTY_VALUE , const double c= EMPTY_VALUE , const double d= EMPTY_VALUE );
   string Gui_Get( const int id, const ENUM_GUI_PROP prop, const string s= "" , const double a= EMPTY_VALUE , const double b= EMPTY_VALUE );
   double Gui_GetNum( const int id, const ENUM_GUI_PROP prop, const string s= "" , const double a= EMPTY_VALUE , const double b= EMPTY_VALUE );
   int     Gui_SetArray( const int id, const ENUM_GUI_PROP prop, const double &values[], const double a= EMPTY_VALUE );
   int     Gui_AddImage( const string name, const uint &argb[], const int w, const int h);
   int     Gui_Find( const string name);
   void    Gui_BringToFront();
#import

15個の関数を記載順に示す。

これがインターフェースの全てです。このガイドのその他の部分は全て、これらの15個の呼び出しの組み合わせです。

3. フルデモを実行する

1. グラフを開いてください。1280×720ピクセル以上の大きなウィンドウを開くと、より多くの情報が表示されます。
2. ナビゲーターから GUI_Graphic_Library_FullDemo をチャートにドラッグします。
3. 上部のセクションタブ（ホーム、ユースケース、ボタン、入力、ピッカー、データ、チャート、レイアウト、フィードバック、取引、設定）を使用してください。

デモ版では、入力項目「InpLiveTrading」を「true」に設定しない限り、注文は送信されません。ライブ口座では、この項目は「true」に設定しないでください。メインウィンドウを閉じると、エキスパートアドバイザーは自動的に削除されます。

一度に1つの要素だけを確認したい場合は、GUI_Graphic_Library_ElementTestsを使用します。選択ウィンドウでグループをクリックしてください。

ライブラリの要素のみで構築されたダッシュボード。

4. 最初のパネル

これは完全なエキスパートアドバイザーです。ロットサイズ入力欄、購入ボタン、ステータス行を備えたウィンドウが表示されます。取引は行わず、メッセージを表示するだけです。

 #include <GUI_Graphic_Library.mqh>
int wMain, spLots, btnBuy, lblInfo;
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
int OnInit ()
  {
   if (!Gui_Create( 0 , "MyPanel" ))
       return INIT_FAILED ;       // 0 = this chart
   Gui_Set( 0 , GUI_PROP_THEME, "" , GUI_THEME_DARK);
   wMain = Gui_Add(GUI_OBJ_WINDOW, 0 , "wMain" , "My panel" , 20 , 40 , 300 , 170 );
   Gui_Set(wMain, GUI_PROP_THEME_BUTTON, "" , true );       // sun / moon button
   Gui_Set(wMain, GUI_PROP_MAIN_WINDOW, "" , true );         // close asks to remove the program
   spLots = Gui_Add(GUI_OBJ_SPIN, wMain, "spLots" , "" , 10 , 10 , 280 , 30 );
   Gui_Set(spLots, GUI_PROP_RANGE, "" , 0.01 , 50 , 0.01 , 2 ); // min, max, step, digits
   Gui_Set(spLots, GUI_PROP_VALUE, "" , 0.10 );
   Gui_Set(spLots, GUI_PROP_SUFFIX, "lots" );
   btnBuy = Gui_Add(GUI_OBJ_BUTTON, wMain, "btnBuy" , "BUY" , 10 , 50 , 280 , 40 );
   Gui_Set(btnBuy, GUI_PROP_STYLE, "" , GUI_BUTTON_SUCCESS);
   Gui_Set(btnBuy, GUI_PROP_ICON, "" , GUI_ICON_ARROW_UP);
   lblInfo = Gui_Add(GUI_OBJ_LABEL, wMain, "lblInfo" , "Ready" , 10 , 100 , 280 , 20 );
   Gui_Set(lblInfo, GUI_PROP_DIM, "" , true );
   Gui_Set( 0 , GUI_PROP_REDRAW);
   return INIT_SUCCEEDED ;
  }
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void ProcessEvents()
  {
   ENUM_GUI_EVENT ev;
   int sender;
   long l;
   double d;
   string s;
   while (Gui_NextEvent(ev, sender, l, d, s))
       if (ev == GUI_EVENT_CLICK && sender == btnBuy)
        {
         double lots = Gui_GetNum(spLots, GUI_PROP_VALUE);
         Gui_Set(lblInfo, GUI_PROP_TEXT, "Buy " + DoubleToString (lots, 2 ) + " lots" );
         Gui_Set( 0 , GUI_PROP_TOAST, "Buy|" + DoubleToString (lots, 2 ) + " lots" , GUI_NOTICE_SUCCESS, 3000 );
        }
  }
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void OnDeinit ( const int r)
  {
   Gui_Destroy();
  }
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void OnTimer ()
  {
   Gui_Timer();
   ProcessEvents();
   Gui_Update();
  }
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void OnChartEvent ( const int id, const long &l, const double &d, const string &s)
  {
   Gui_ChartEvent(id, l, d, s);
   ProcessEvents();
   Gui_Update();
  }

そのパターンは決して変わらない。

1. OnInitはGUIと要素を作成します。
2. OnChartEventとOnTimerはライブラリにイベントを渡し、キューを読み取り、Gui_Updateを呼び出します。
3. OnDeinitはGUIを破棄します。

5. 図書館の考え方

• ID。Gui_Add は整数型の ID を返します。必要な ID を保持するか、後で Gui_Find("name") を使用して名前で ID を検索します。ID 0 は GUI 自体です。テーマ、トースト、ダイアログ、カウンターなどが含まれます。
• 親要素。すべての要素は、親要素、ウィンドウ、またはコンテナに追加されます。ウィンドウ、メニュー、価格ラベルは親要素0を使用します。タブの場合、親要素はタブ要素であり、返されるIDは子要素を追加するページです。
• プロパティ。Gui_Set(id, property, text, a, b, c, d) はプロパティを変更するか、アクションを実行します。text 引数にはテキストを指定します。a から d には数値、色、列挙型を指定します。Gui_Get はテキストを読み取り、Gui_GetNum は数値を読み取ります。
• イベント。ライブラリはユーザーの操作をキューに格納します。Gui_NextEvent を使用してキューを読み取ります。
• 座標は100%スケールでのピクセル単位です。ライブラリは、これらの座標をWindowsの表示スケールで自動的に乗算します。

要素がサポートしていないプロパティを渡しても、何も問題は発生しません。呼び出しは -1 を返し、Experts ログに 1 行が書き込まれます。

6. あなたが最も多く行うタスク

ユーザーが入力または選択した内容を読みます

string name=Gui_Get(edName,GUI_PROP_TEXT);
double lots=Gui_GetNum(spLots,GUI_PROP_VALUE);
int     tab =( int )Gui_GetNum(tabs,GUI_PROP_SELECTED);

タブ

int t=Gui_Add(GUI_OBJ_TABS,win, "tabs" , "" , 10 , 10 , 600 , 300 );
int pOrders =Gui_Add(GUI_OBJ_TAB,t, "" , "Orders" , 0 , 0 , 0 , 0 );     // returns the page
int pHistory=Gui_Add(GUI_OBJ_TAB,t, "" , "History" , 0 , 0 , 0 , 0 );
Gui_Add(GUI_OBJ_BUTTON,pOrders, "b1" , "Close all" , 10 , 10 , 120 , 30 );

表

int tb=Gui_Add(GUI_OBJ_TABLE,page, "tbl" , "" , 10 , 10 , 600 , 300 );
Gui_Set(tb,GUI_PROP_ADD_COLUMN, "Symbol" , 120 ,GUI_ALIGN_LEFT);
Gui_Set(tb,GUI_PROP_ADD_COLUMN, "Strength" , 130 ,GUI_ALIGN_LEFT,GUI_COL_PROGRESS);
Gui_Set(tb,GUI_PROP_ADD_BUTTON_COLUMN, "Action" , 100 ,GUI_BUTTON_PRIMARY);
Gui_Set(tb,GUI_PROP_ADD_ROW, "EURUSD|64|Trade" );
Gui_Set(tb,GUI_PROP_SORT, "" , 0 , true );

ボタンセルをクリックすると、lparamに行、dparamに列を含むGUI_EVENT_CELL_BUTTONイベントが送信されます。

グラフ

int ch=Gui_Add(GUI_OBJ_LINECHART,page, "chart" , "Price" , 10 , 10 , 500 , 260 );
int ln=Gui_Set(ch,GUI_PROP_ADD_SERIES, "Close" , clrDodgerBlue );     // returns the series index
double closes[]; CopyClose ( _Symbol , PERIOD_H1 , 0 , 100 ,closes);
Gui_SetArray(ch,GUI_PROP_SERIES,closes,ln);                       // a whole series at once

int cd=Gui_Add(GUI_OBJ_CANDLECHART,page, "cd" , _Symbol , 10 , 280 , 500 , 260 );
Gui_Set(cd,GUI_PROP_LOAD_BARS, _Symbol , 80 );
Gui_Set(cd,GUI_PROP_ADD_MA, "" , 20 , clrDodgerBlue );
Gui_Set(cd,GUI_PROP_ADD_BANDS, "" , 20 , 2.0 );

対話と乾杯

enum { CMD_CLOSE_ALL= 500 };
Gui_Set( 0 ,GUI_PROP_CONFIRM, "Close all|Close every position?|Close|Cancel" ,CMD_CLOSE_ALL);
// later, in the event loop:
if (ev==GUI_EVENT_DIALOG && Gui_GetNum(sender,GUI_PROP_CMD)==CMD_CLOSE_ALL && l== 0 )
   CloseAll();                       // l = button index, -1 = cancelled

Gui_Set( 0 ,GUI_PROP_TOAST, "Order|Filled" ,GUI_NOTICE_SUCCESS, 3000 );

テーマと色

Gui_Set( 0 ,GUI_PROP_THEME, "" ,GUI_THEME_MIDNIGHT);   // DARK, LIGHT, MIDNIGHT, HIGHCONTRAST, SOFT
Gui_Set( 0 ,GUI_PROP_ACCENT, "" , clrOrange );
Gui_Set( 0 ,GUI_PROP_RADIUS, "" , 10 );

ウィンドウと値を覚えておいてください

Gui_Set( 0 ,GUI_PROP_AUTO_LAYOUT, "" , true );   // load now, save when the GUI is destroyed
Gui_Set( 0 ,GUI_PROP_LOAD_VALUES);             // in OnInit
Gui_Set( 0 ,GUI_PROP_SAVE_VALUES);             // in OnDeinit

どちらも小さなテキストファイルを使用します。端末のグローバル変数は使用しません。

毎秒何かをする

Gui_Set( 0 ,GUI_PROP_COUNTER, "refresh" , 1000 , true );   // name, ms, repeat
// in OnTimer:
if (Gui_GetNum( 0 ,GUI_PROP_COUNTER_DONE, "refresh" )!= 0 ) RefreshNumbers();

7. 独自の注文機能を備えた取引パネル

注文チケット、ポジションパネル、リスク計算ツールは、口座情報と銘柄コードを読み取り、イベントを表示します。注文を送信することはありません。ユーザーが「買い」または「売り」をクリックしたときに何が起こるかは、ユーザーが決定します。

 #include <GUI_Graphic_Library.mqh>
#ifdef __MQL5__
#include <Trade\Trade.mqh>
CTrade g_trade;
#endif
input bool InpLiveTrading = false ;   // send real orders
int g_ticket = 0 ;

//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
int OnInit ()
  {
   if (!Gui_Create( 0 , "GUI_TradePanel" ))
       return INIT_FAILED ;
   int w = Gui_Add(GUI_OBJ_WINDOW, 0 , "w" , "Trade" , 20 , 40 , 360 , 260 );
   Gui_Set(w, GUI_PROP_MAIN_WINDOW, "" , true );
   g_ticket = Gui_Add(GUI_OBJ_ORDERTICKET, w, "ticket" , _Symbol , 10 , 10 , 340 , 212 );
   Gui_Set(g_ticket, GUI_PROP_LOTS, "" , 0.10 );
   Gui_Set(g_ticket, GUI_PROP_STOP_POINTS, "" , 300 );
   Gui_Set(g_ticket, GUI_PROP_TP_POINTS, "" , 600 );
   Gui_Set(g_ticket, GUI_PROP_SHOW_LINES, "" , true );   // SL and TP lines on the chart
   Gui_Set( 0 , GUI_PROP_CLEAR_EVENTS);
   return INIT_SUCCEEDED ;
  }

//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void MyTrade( const bool buy, const double lots, const double sl, const double tp)
  {
   if (!InpLiveTrading)
     {
       Print ( "Trading is off. Would " , buy ? "buy " : "sell " , lots, " lots" );
       return ;
     }
#ifdef __MQL5__
   if (buy)
      g_trade.Buy(lots, _Symbol , 0.0 , sl, tp);
   else
      g_trade.Sell(lots, _Symbol , 0.0 , sl, tp);
#else
   if (buy)
       OrderSend ( _Symbol , OP_BUY, lots, Ask, 3 , sl, tp, "GUI" , 0 , 0 , clrGreen );
   else
       OrderSend ( _Symbol , OP_SELL, lots, Bid, 3 , sl, tp, "GUI" , 0 , 0 , clrRed );
#endif
   }

//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void ProcessEvents()
  {
   ENUM_GUI_EVENT ev;
   int sender;
   long l;
   double d;
   string s;
   while (Gui_NextEvent(ev, sender, l, d, s))
       if (ev == GUI_EVENT_TRADE)           // l: 0 buy, 1 sell   d: lots   s: "sl|tp" prices
        {
         string p[];
         StringSplit (s, '|' , p);
         double sl = ( ArraySize (p) > 0 ) ? StringToDouble (p[ 0 ]) : 0.0 ;
         double tp = ( ArraySize (p) > 1 ) ? StringToDouble (p[ 1 ]) : 0.0 ;
         MyTrade(l == 0 , d, sl, tp);
        }
  }

//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void OnDeinit ( const int r)
  {
   Gui_Destroy();
  }
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void OnTimer ()
  {
   Gui_Timer();
   ProcessEvents();
   Gui_Update();
  }
//+------------------------------------------------------------------+
//|                                                                  |
//+------------------------------------------------------------------+
void OnChartEvent ( const int id, const long &l, const double &d, const string &s)
  {
   Gui_ChartEvent(id, l, d, s);
   ProcessEvents();
   Gui_Update();
  }

まずはデモ口座でテストしてください。実際の注文を出す前に、ロットサイズが銘柄の最小値、最大値、ステップと合っているか、またストップ距離がブローカーのストップレベルと合っているかを確認してください。

位置も同様に機能します。GUI_OBJ_POSITIONSを追加し、GUI_EVENT_POSITIONに反応します（lparamはチケット、dparamは閉じる場合は1、変更する場合は2です）。

8. インジケーターで使用する

インジケーターは独自のサブウィンドウにGUIを描画できます。そのウィンドウの番号をGui_Createに渡してください。

 #property indicator_separate_window
int OnInit ()
  {
   int sub= ChartWindowFind ();
   Gui_Create( 0 , "GUI_MyIndicator" ,sub);
   // add windows and controls as usual
   return INIT_SUCCEEDED ;
  }

インジケーターから価格チャートに描画するには、サブウィンドウ0を使用します。2つのインジケーターデモは完全な例です。プログラムとチャートごとにGUIが1つずつ用意されているため、各プログラムに固有のGUI名を付けてください。

9. MetaTrader 4 および MetaTrader 5

10. 何かがうまくいかない場合

11. ヒント

• 各ハンドラの最後に Gui_Update() を呼び出してください。変更された部分のみを再描画します。
• 非表示のタブページや折りたたまれたウィンドウは再描画が発生しないため、タイマーによる更新はコストがかかりません。
• 多数のチャートを実行する場合は、GUI_PROP_MAX_FPS を使用してフレームレートを制限してください。
• OnInit の最後に GUI_PROP_CLEAR_EVENTS を使用して、パネルの構築中にキューに登録されたイベントを破棄します。
• ウェブサイト上の「画像からコードへ」ツールを使用して、PNG形式のロゴやアイコンをGui_AddImage用の配列に変換してください。
• 新しい列挙値は末尾にのみ追加されるため、古いインクルードファイルで作成されたプログラムは、アップデート後も引き続き動作します。ライブラリファイルとインクルードファイルを一緒に置き換えてください。

12. 次はどこへ行くべきか

• 要素ギャラリー、インストール、ガイド、APIリファレンス、画像からコードへの変換、ヘルプ： https://www.betasoft.dev/gui-graphic-library
• MetaTrader 5 バージョン: https://www.mql5.com/en/market/product/206761
• MetaTrader 4 バージョン: https://www.mql5.com/en/market/product/206760

ご意見をお待ちしております。ご質問や改善案がございましたら、製品コメント欄にご記入いただくか、MQL5.comでメッセージをお送りください。