GUIビルダ

GUIビルダはC言語の知識なしでダイアログを作る事ができるソフトです。ウィジットを設置したり、そのサイズを変えたりするのはドラッグアンドドロップでできます。ソースコードを記述することは不要です。機能追加はウィンドウ上部のメニューからできます。また詳細設定はウィジットのプロパティを変更することで可能です。これらに関してもC言語の知識は一切不要です。作成したダイアログはCファイルとして保存でき、お客様が追加でコードを微調整することが可能です。さらにユーザーによって修正されたダイアログのCファイルを読み込んでGUIビルダでさらに編集することも可能です。

emWin GUIBuilder

 

概観

下図ではGUIビルダの画面の各要素を紹介しています。

emWin GUIBuilder2

 

ウィジットセレクションバー

このバーには利用可能な全てのウィジットがあります。ウィジットをクリックするか、エディターエリアにドラッグアンドドロップすることで、ダイアログに追加できます。

オブジェクトツリー

このエリアは現在ロードされている全てのダイアログとそこに追加されているウィジットが表示されています。このツリーにあるウィジットをクリックすることでウィジットの編集が有効になります。

ウィジットプロパティ

各ウィジットのプロパティを表示しています。また各ウィジットの設定はここで変更できます。

エディター

現在選択されているダイアログを表示しています。ダイアログとウィジットの配置やサイズ変更をここで行います。

 

GUIビルダの設定

プロジェクト開始前に、プロジェクトパスの設定が必要です。デフォルトではGUIビルダのアプリケーションのパスになっています。すべてのファイルはプロジェクトパスに保存されることになります。

GUIビルダのディレクトリにはGUIBuilder.iniという設定ファイルがあります。この設定ファイルのProjectPath変数を変更することでプロジェクトパスの変更ができます。

 

ダイアログの作成

ダイアログの作成方法とウィジットのプロパティ変更方法を紹介します。

 親ウィジットを選択

すべてのダイアログには親ウィジットが必要になります。なのでまず親ウィジットとなるウィジットの選択から開始します。現在２つのウィジットが親ウィジットとして利用できます。

フレームウィンドウウィンドウ

上の表はウィジットセレクションバーにあるそれぞれのアイコンを示しています。エディターエリアに追加するにはアイコンをワンクリックするか、ドラッグアンドドロップするかNewメニューからできます。

サイズ変更と位置変更

エディターエリアにウィジットを追加するとマウスまたはキーボードを使用して選択中のウィジットの移動ができます。またマーカーをドラッグすることでサイズの変更ができます。

emWin GUIBuilder Markers

ウィジットのプロパティの変更

GUIビルダの左下側はプロパティウィンドウです。新しくウィジットを追加するとデフォルトのプロパティ（名前、座標、サイズ、容量など）が表示されます。これらのデフォルトプロパティは全てのウィジットの共通プロパティで削除することはできません。一方デフォルトプロパティ以外の追加プロパティはメニューまたはDELキーで削除することができます。変数の値の変更は目的のプロパティが選択されている状態でEnterキーを押す、または変数エリアをワンクリックすることでできます。また右クリックでメニューを呼び出しEditを選択することでも可能です。ESCキーで編集を終了できます。

emWin GUIBuilder PropertyWindow

追加機能の追加

エディターエリアまたはオブジェクトツリーで右クリックして追加機能のメニューを呼び出すことができます。追加機能を追加すると新しくプロパティが加えられ、そのプロパティの編集状態になります。数値・英数字の変数をもつ場合はプロパティウィンドウで変更が行われます。フォントやアライメント、色などの変数をもつ場合は別ウィンドウが開き変更が行われます。

  • アライメント変更

アライアメントセレクションダイアログは有効になっているアライメントの状態が緑色になっています。クリックして選択することでアライメントが変更できます。ESCキーで編集を終了できます。

 emWin GUIBuilder AlignmentSelection

  • 色変更

ウィンドウデフォルトカラーセレクションダイアログを起動して変更できます。ESCキーで編集を終了できます。

emWin GUIBuilder ColorSelection

  • フォント変更

フォントセレクションダイアログでは利用可能なフォントが表示されています。適用したいフォントをクリックして選択します。ESCキーで編集を終了できます。

emWin GUIBuilder FontSelection

 

ウィジットのプロパティの削除

プロパティウィンドウで消去したいプロパティを選択してDELキーで削除することができます。

 

ウィジットの削除

エディターエリアでウィジットが選択されている状態でDELキーで削除することができます。またオブジェクトツリーで削除したいウィジットを選択してDELキーでも削除できます。親ウィジットが削除されるとそのウィジットの子ウィンドウも削除されるので注意して下さい。

 

ダイアログの保存

メニューのFile/Saveからロード中の全てのダイアログをプロジェクトフォルダに保存することができます。各ダイアログはそれぞれCファイルとして保存されます。ファイル名は自動的に親ウィンドウの名前を使用して　＜ウィジットの名前＞DLG.c　に決まります。

（例）親ウィジットの名前がFramewinの場合、ファイル名はFramewinDLG.c　となります。

 

（出力ファイル例）

/*********************************************************************
* *
* SEGGER Microcontroller GmbH & Co. KG *
* Solutions for real time microcontroller applications *
* *
**********************************************************************
* *
* C-file generated by: *
* *
* GUI_Builder for emWin version 5.09 *
* Compiled Mar 23 2011, 09:52:04 *
* (c) 2011 Segger Microcontroller GmbH & Co. KG *
* *
**********************************************************************
* *
* Internet: www.segger.com Support: This email address is being protected from spambots. You need JavaScript enabled to view it. *
* *
**********************************************************************
*/
// USER START (Optionally insert additional includes)
// USER END
#include "DIALOG.h"
/*********************************************************************
*
* Defines
*
**********************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x0A)
#define ID_BUTTON_0   (GUI_ID_USER + 0x0B)
// USER START (Optionally insert additional defines)
// USER END
/*********************************************************************
*
* Static data
*
**********************************************************************
*/
// USER START (Optionally insert additional static data)
// USER END
/*********************************************************************
*
* _aDialogCreate
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
  { FRAMEWIN_CreateIndirect, "Framewin", ID_FRAMEWIN_0, 0, 0, 320, 240, 0, 0, 0 },
  { BUTTON_CreateIndirect,   "Button",   ID_BUTTON_0,   5, 5,  80,  20, 0, 0, 0 },
  // USER START (Optionally insert additional widgets)
  // USER END
};
/*********************************************************************
*
* Static code
*
**********************************************************************
*/
// USER START (Optionally insert additional static code)
// USER END
/*********************************************************************
*
* _cbDialog
*/
static void _cbDialog(WM_MESSAGE * pMsg) {
  WM_HWIN hItem;
  int     Id, NCode;
  // USER START (Optionally insert additional variables)
  // USER END
  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
    //
    // Initialization of 'Framewin'
    //
    hItem = pMsg->hWin;
    FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
    FRAMEWIN_SetFont(hItem, GUI_FONT_24_ASCII);
    //
    // Initialization of 'Button'
    //
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
    BUTTON_SetText(hItem, "Press me...");
    // USER START (Opt. insert additional code for further widget initialization)
    // USER END
    break;
  case WM_NOTIFY_PARENT:
    Id    = WM_GetId(pMsg->hWinSrc);
    NCode = pMsg->Data.v;
    switch(Id) {
    case ID_BUTTON_0: // Notifications sent by 'Button'
      switch(NCode) {
      case WM_NOTIFICATION_CLICKED:
        // USER START (Optionally insert code for reacting on notification message)
        // USER END
        break;
      case WM_NOTIFICATION_RELEASED:
        // USER START (Optionally insert code for reacting on notification message)
        // USER END
        break;
      // USER START (Opt. insert additional code for further notification handling)
      // USER END
      }
      break;
    // USER START (Optionally insert additional code for further Ids)
    // USER END
    }
    break;
  // USER START (Optionally insert additional message handling)
  // USER END
  default:
    WM_DefaultProc(pMsg);
    break;
  }
}
/*********************************************************************
*
* Public code
*
**********************************************************************
*/
/*********************************************************************
*
* CreateFramewin
*/
WM_HWIN CreateFramewin(void) {
  WM_HWIN hWin;
  hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbDialog, WM_HBKWIN, 0, 0);
  return hWin;
}
// USER START (Optionally insert additional public code)
// USER END
/*************************** End of file ****************************/

 

Cファイルの修正

 出力されたCファイルにはカスタムコードを追加可能な部分が多数用意されています。以下の部分です。

// USER START (Optionally insert ...)
// USER END

 この2行の間にコードを追加することができます。コメントを変更することはできません。以下がコードを追加した例です。

// USER START (Optionally insert additional includes)
#ifndef WIN32
  #include <ioat91sam9261.h>
#endif
// USER END

 

Cファイルの使用方法

上記の出力ファイル例では実際にディスプレイに表示するためのコードは含まれていません。出力されるCファイルはダイアログを生成する関数になります。Create＜ウィジットの名前＞（）でこの関数を呼び出してダイアログを表示することができます。

（例）以下のコードは上記の出力ファイルを実際に画面に表示するためのコードの一例です。

#include "DIALOG.h"
/*********************************************************************
*
* Externals
*
**********************************************************************
*/
WM_HWIN CreateFramewin(void);
/*********************************************************************
*
* Public code
*
**********************************************************************
*/
/*********************************************************************
*
* MainTask
*/
void MainTask(void) {
  WM_HWIN hDlg;
  GUI_Init();
  //
  // Call creation function for the dialog
  //
  hDlg = CreateFramewin();
  //
  // May do anything with hDlg
  //
  ...
  //
  // Keep program alive...
  //
  while (1) {
    GUI_Delay(10);
  }
}

 

emWinホームに戻る 

SEGGER
RTOS&Middleware