ウィンドウオブジェクト（ウィジット）

ウィジェットはオブジェクト型のプロパティを持つウィンドウであり、Windows環境でははコントロールと呼ばれ、ユーザーインターフェースの要素を構成します。特定のイベントに自動的に反応することができ、例えばボタンが押された場合外観を変化させます。ウィジットはいつでも変更可能なプロパティをもちます。また不要になったウィジットはすみやかに削除されます。ウィンドウと同様にウィジットはそれぞれ固有のハンドルを与えられています。

ウィジットにはウィンドウマネージャーが必要になります。ウィジットが作成されるとウィンドウ同様に振る舞い、ウィンドウマネージャによって位置や再描画の管理が適切に行われます。ウィジットはアプリケーションやユーザーインターフェースに必ずしも必要ありませんが、開発時間を減らすことができます。

ウィジットの基本

利用可能なウィジェット

ウィジェットのうちスキニングをサポートするものはスキニングされた状態も示してあります。

スキニングについての詳細はこちら

名前	スクリーンショット (クラッシック)	スクリーンショット (スキン適用)	説明
BUTTON			プッシュ可能なボタンです。テキストやビットマップをボタン上に表示することができます。
CHECKBOX			チェックボックスです。チェック状態と非チェック状態が有ります
DROPDOWN			ドロップダウンリストボックスです。プッシュするとリストが開きます。
EDIT			一行の入力ボックスです。
FRAMEWIN			フレームウィンドウ。GUIの外観を決めます。
GRAPH			グラフウィジット。曲線や数値を表示します。
HEADER			ヘッダコントロール。列管理をします。
ICONVIEW			アイコン調ウィジット。携帯デバイスなどでアイコンを利用する場合に便利です。
IMAGE			イメージウィジット。自動で様々なフォーマットの画像を表示します。
LISTBOX			リストボックス。選択されると青くハイライトが付きます。
LISTVIEW			リスト表示ウィジット。表や計算用紙を作るのに利用します。
LISTWHEEL			リストホイールウィジット。データは回転して表示される用にエフェクトがかかります。
MENU			メニューウィジット。水平または垂直メニューバーを作成します。
MULTIEDIT			複数行の入力ボックス
MULTIPAGE			複数ページウィジット
PROGBAR			プログレスバー
RADIO			一つしか選択できないラジオボタン
SCROLLBAR			水平または垂直スクロールバー
SLIDER			変数を変えるためのスライダー
SPINBOX			スピニングボックス、飛び飛びの値を選択できます。
TEXT			テキスト表示
TREEVIEW			ツリー表示

再描画のメカニズム

ウィジェットは、そのプロパティに応じて自分自身を再描画します。WM_Exec（）、GUI_Exec（）またはGUI_Delay（）を呼び出して再描画が行われます。マルチタスク環境では、バックグラウンドタスクは、通常WM_Exec（）を呼び出すとウィジェット（およびコールバック機能を持つ他のすべてのウィンドウ）を更新するために使用されます。
ウィジェットのプロパティが変更されると、ウィジェットのウィンドウ（またはその一部）が無効状態になり、すぐに再描画は開始されず、後でWMで行われます。

ウィジェットの使用方法

プログレスバーを表示してみます。次のコードだけで表示することができます。

PROGBAR_Handle hProgBar;
GUI_DispStringAt("Progress bar", 100, 20);
hProgBar = PROGBAR_Create(100, 40, 100, 20, WM_CF_SHOW);

最初の行は、ウィジェットのハンドル用のメモリーを予約。最後の行は実際にウィジェットを作成します。この後WM_Exec（）が呼ばれると自動的に描画が行われます。
メンバ関数でウィジットのプロパティを変更することで随時ウィジットの外観に変更できます。今回プログレスバーを45％表示にし、色をデフォルト（暗い灰色/明るい灰色）から緑/赤に変更してみます。

PROGBAR_SetBarColor(hProgBar, 0,   GUI_GREEN);
PROGBAR_SetBarColor(hProgBar, 1,   GUI_RED);
PROGBAR_SetValue   (hProgBar, 45);

動的メモリ使用

断片化が発生するため組込み用途では動的メモリ使用は望ましくありません。しかしemWinでは異なるハンドルを利用することで断片化なしに動的メモリ使用を可能にしました。実際にメモリを参照するポインタとハンドルを別に管理することでウィジットが実際に使用するメモリ領域を適宜最適化していくことで断片化を防いでいます。

ウィジットの詳細

BUTTON

タッチスクリーンでの主なユーザーインターフェースとして使用されます。次の画像のように、ボタンにテキストを表示したり背景を追加できます。

CHECK BOX

様々な選択肢を選択するために使用されます。チェックボックスにはオンまたはオフ状態があります。また、操作無効になっている場合ボックスは次の表のようにグレー表示されます。

	選択	非選択
操作有効
操作無効

DROPDOWN

複数の要素を持つリストから一つの要素を選択するために使用されます。それは、閉じている状態では現在選択されている項目を示し、ユーザーがウィジェットを開いた場合はリストが展開されます。

閉じている状態	開いている状態

EDIT

テキスト入力の主要なユーザーインターフェイスとして使用されます。

空の状態	入力済みの状態

バイナリ、10進数、16進モードで値を入力するためのEDITフィールドを使用することができます。入力無効状態ではチェックボックスのように編集フィールドがグレー表示されます。

入力有効状態	入力無効状態

FRAMEWIN

フレームウィンドウは、アプリケーション、PCアプリケーションの外観を決めます。フレーム、タイトルバーとユーザ領域で構成されています。、下図のように、ウィンドウのアクティブまたは非アクティブ状態はタイトルバーの色で示します。

アクティブ	非アクティブ

GRAPH

グラフのウィジェットは、データを視覚化するために使用することができます。グラフウィジェットの標準的なアプリケーションは測定値または関数のグラフの曲線を示しています。複数の曲線を同時に表示することができます。水平と垂直のスケールとグリッドを使用することができます。データが表示領域より大きくなると自動的にスクロールバーを追加しデータ領域を拡大できます。

グラフの曲線	測定値の時間推移

 HEADER

HEADERのウィジェットは、次のように表のラベルに使用されます。

ポインタインプットデバイス（PID）が使用されている場合、ヘッダー項目の幅はPIDによって仕切りをドラッグして管理することができます。

LISTBOX
リストボックスは、リストの一つの要素を選択するために使用されています。以下に示すように、周囲のフレームのウィンドウなしで作成、またはFRAMEWINウィジェットの子ウィンドウとすることができます。リストボックス内の項目が選択されている場合強調表示されます。

リストボックスアクティブ	リストボックス非アクティブ

LISTVIEW
ListViewのウィジェットは、複数の列を持つリストの一つの要素を選択するために使用されています。列を管理するLISTWIEWウィジェットは、HEADERウィジェットが含まれています。周囲のフレームウィンドウなしまたはFRAMEWINのウィジェットの子ウィンドウとして作成することができます。項目が選択されている場合、強調表示します。

説明	LISTVIEW
非アクティブ フレームウィンドウなし スクロールバーなし グリッド非表示
アクティブ フレームウィンドウなし スクロールバーなし グリッド非表示
アクティブ フレームウィンドウあり スクロールバーなし グリッド非表示
アクティブ フレームウィンドウあり スクロールバーあり グリッド非表示
アクティブ フレームウィンドウあり スクロールバーあり グリッド表示

MENU

メニューを作成するために使用することができます。各メニュー項目は、アプリケーションのコマンドやサブメニューを表します。メニューは水平および/または垂直に表示することができます。メニュー項目は、セパレータを使用してグループ化することができます。メニュー項目を選択すると、メニューの親にWM_MENUメッセージを送信するか、サブメニューを開きます。マウスのサポートが有効になっている場合はメニューのウィジェットはマウスに反応します。以下の表は、垂直サブメニューを持つ水平メニューの例です。

説明	WIDGET_Effect_3D1L	WIDGET_Effect_Simple
カラーディスプレイ
モノクロディスプレイ （グレースケール）
モノクロディスプレイ

MULTIEDIT
MULTIEDITウィジェットは複数行でテキストを編集することができます。テキストエディタとして使用するか、テキストを表示することに使用できます。ウィジェットはスクロールをサポートしています。

説明	フレームウィンドウ
編集モード 自動水平スクロールバー 折り返し表示なし インサートモード
編集モード 自動垂直スクロールバー 折り返し表示 オーバーライトモード
表示モード 折り返し表示

MULTIPAGE

マルチページウィジェットを使用することにより、アプリケーションはウィンドウまたはダイアログボックスの同じ領域に対して複数のページを定義することができます。ページのタブをクリックすることでページが選択でき、表示領域を超えるタブがある場合は自動的にページの角に小さなスクロールバーを表示します。サンプルフォルダにはマルチページのウィジェットを作成して使用法を示すWIDGET_Multipage.cが含まれています。

説明	MULTIPAGE
３ページ、タブは左上寄せ
６ページ、タブは右下寄せ

TEXT
通常、以下のメッセージボックスに表示される、ダイアログボックス内のテキストフィールドを表示するために使用されます。

もちろんテキストフィールドは、次のように他のウィジェットのラベルに使用することができます。

emWinホームに戻る 

VNCサポート

VNCは２つのソフトに分かれています。ディスプレイを生成するサーバと実際にお客様の前にある画面にディスプレイの内容を表示するビューアです。遠隔操作するマシンを見るだけでなく、マウスやキーボードを通して操作することができます。サーバとビューアは異なるマシン上で異なるアーキテクチャの上で動作している可能性がありますが、サーバとビューワを接続するプロトコルは、シンプルでありオープンかつプラッフォームに依存しません。ビューアにはなにも保存されていないので、サーバとビューアの接続が切断されてもデータが失われる心配はありません。サーバーとビューアの接続はどこからでも可能なので、ハードウェア本体を携行する必要がなく身軽になれます。VNCサーバを使用することでどこからでも本体を制御でき、画面のスクリーンショットをとることもできます。

要件

TCP / IPスタック

サーバとビューア間の通信はTCP / IP接続に基づいているため、VNCはTCP / IPスタックが必要です。Win32のシミュレーション環境では、TCP / IP（Winsock）は通常既に含まれています。TCP / IPスタックが存在する必要があります。TCP / IPスタックはemWinに含まれていませんが、柔軟なインタフェースをもつので、任意のTCP / IPスタックが利用できます。

マルチタスク

VNCサーバは、別スレッドとして実行する必要があるのでVNCサーバー側にマルチタスクシステムが必要になります。

VNC実装上の注意

対応するサーバメッセージクライアント

emWin VNCサーバは、ポインタのイベントメッセージとキーボードのイベントのメッセージをサポートしています。

エンコーディング

サーバは、Rawエンコーディングとhextileエンコーディングをサポートしています。

認証

サーバーは現在認証を必要としません。しかし認証機能は要求に応じて簡単にサーバに追加することができます。

パフォーマンス

ほとんどのビューアは圧縮率の高いhextileエンコーディングをサポートしています。標準的なQVGA画面では20～50KBのデータが必要になります。ARM7プラットフォーム（50 MHZ、キャッシュ付き）上で動作する場合１画面を更新するのに200-300ｍｓ必要になります。サーバは増分更新で処理をするので、ほとんどの場合、更新される表示領域はディスプレイに比べてずっと小さく、送信するデータは極僅かになります。よって標準的なARM7システムではリアルタイム更新が可能になります。

マルチサーバ

サーバーの実装は、全く安全でリエントラントです。マルチVNCサーバではおなじCPU 上に複数のレイヤ、ディスプレイを走らせることができます。遠隔操作する対象がマルチディスプレイまたはマルチレイヤーが有効になっている場合、このことは有用なオプションとなります。VNCサーバーは一対一対応でレイヤーと接続しています。

VNCビューア

入手

AT＆Tケンブリッジ研究所からVフリーソフトウェアとして、GNU Public Licenseの条件の下で配布されています。http:// www.uk.research.att.com / vnc　からダウンロードできます。

バージョン

emWinのVNCの実装は、バージョン3.3.3R2でテストされており、このバージョンまたはそれ以降のバージョンでも動作するはずです。

プラットフォーム

ビューアは、異なるプラットフォームで利用可能です。詳細については、AT＆Tケンブリッジ研究所のウェブサイトを参照してください。http:// www.uk.research.att.com / vnc

VNCビューアの使用

ToolVNCViewer.exeをダブルクリックしてビューアを起動すると、接続するVNCサーバを選択するダイアログが表示されます。

シミュレーションを使って同じPCをVNCサーバとして接続する

一つのPC上でシュミレータとVNCビューアを使用する場合、”localhost:0”を入力するとVNCサーバに接続できる。"：0"は、サーバーのインデックスが0であることを意味し、省略が可能である。なので、単に"localhost"と入力すると接続することができます。

別のPCまたはターゲット上で動作するVNCサーバへの接続

別のPCまたはターゲット上で動作しているVNCサーバーに接続するには、マシンの名前またはIPアドレスを入力してください。マシン名が"Joerg"、IPアドレス192.168.1.2であるVNCサーバに接続するには、"192.168.1.2:0"、"Joerg:0"または”Joerg”を入力すると接続することができます。

スクリーンショット例

シミュレーションに接続

ターゲットに接続

emWin VNCサーバの起動

VNCサーバを起動は関数GUI_VNC_X_StartServer（）を呼び出すことでできます。

void MainTask(void) {
  GUI_Init();
  GUI_VNC_X_StartServer(0,  /* Layer index */
                        0); /* Server index */
  ...
}

上記の関数呼び出すと、接続用にポート5900で待機するスレッドを作成します。接続が検出されると GUI_VNC_Process（）を呼び出します。

ポート

VNCサーバは590xポートで待機します、xはサーバーのインデックスです。デフォルトでディスプレイ0を使用するためほとんど場合ポートは5900になります。

サンプル

シングルレイヤのサンプル
シミュレーションのスクリーンショット【図】

VNCサーバのスクリーンショット【図】

マルチレイヤーのサンプル

シミュレーションのスクリーンショット【図】

VNCサーバのスクリーンショット

レイヤ０【図】

レイヤ１【図】

emWinホームに戻る 

ウィンドウマネージャー

ウィンドウマネージャは、ウィンドウ作成、移動、サイズ変更などウィンドウに関するあらゆる操作を提供します。

用語説明

一般的にウィンドウは長方形で、左上の原点（ｘｙ座標）とXsize（幅）とYsize（高さ)が定義されています。　

emWinでは

• 長方形
• Z -ポジションを持つ
• 非表示や表示が可能
• 有効、無効領域を持つことが可能
• 透明度を持つことが可能
• コールバックルーチンを持つことが可能

アクティブウィンドウ

現在の描画操作に使用されているウィンドウがアクティブウィンドウと呼ばれます。最前面のウィンドウと同じであるとは限りません。

コールバックルーチン

特定のイベントが発生した時に描画システムを呼び出すユーザー定義関数のことです。通常、ウィンドウの内容が変更されたときに自動的にウィンドウを再描画するために使用されます。

子/親ウィンドウ

子ウィンドウは親と呼ばれる、別のウィンドウに対して相対的に定義されているものです。親ウィンドウが移動すると、その子ウィンドウも一緒に移動します。同じ親を持つ複数の子ウィンドウは、お互いに"兄弟"とみなされます。

クライアントエリア

ウィンドウのクライアント領域は、単にその使用可能な領域です。ウィンドウの枠やタイトルバーが含まれている場合、クライアント領域は、長方形の内側の領域です。そのようなフレームが存在しない場合は、クライアント領域の座標は、ウィンドウ自体のものと同じです。

クリッピング、クリップ領域

クリッピングは、ウィンドウまたはその一部に出力を制限するプロセスです。ウィンドウのクリップ領域は表示領域です。

デスクトップウィンドウ

デスクトップウィンドウは自動的にウィンドウマネージャによって作成され、常に表示領域全体をカバーしています。常に一番裏のウィンドウであり、他のウィンドウがない場合、デフォルトの（アクティブな）ウィンドウとなります。またすべてのウィンドウはデスクトップウィンドウの子/孫ウィンドウとなりますである。

ハンドル

新しいウィンドウが作成されると、ウィンドウマネージャーはハンドルと呼ばれる固有のIDを割り当てます。ハンドルはウィンドウを操作するときに使用されます。

ウィンドウの非表示/表示

ハンドルを持つが画面上に表示されていないウィンドウを非表示ウィンドウといいます。通常createフラグが指定されていない場合は、ウィンドウ作成時にデフォルトで非表示ウィンドウとなります。ウィンドウを表示状態にすると画面に表示され、非表示状態にすると画面に表示されなくなります。

透明度

透明度を持っているウィンドウは、ウィンドウの一部が描画されず、背後にあるウィンドウを表示しています。

Z -ポジション、ボトム/トップ

画面上のバーチャルな奥行きです。これによってどのウィンドウがどのウィンドウの前に有り優先的に表示されるかなどを管理しています。

emWinホームに戻る 

仮想スクリーンサポート

仮想スクリーンはディスプレイの物理的サイズよりも大きな表示領域のことです。追加のビデオメモリが必要になりますが、低速なCPUでの画面の切替を高速にすることができます。仮想スクリーンが設定されている時、実際の表示領域の切り替えは参照原点を変更することでできます。

仮想スクリーンではページの切替時にパンニングを利用することができます。

パンニング

アプリケーションがディスプレイサイズよりも大きな表示領域を使用している場合、仮想スクリーンAPIによって原点を変更することで目的の領域を画面に表示することができます。

仮想ページ

アプリケーションが複数のページを使用する場合、あらかじめ複数のページを仮想スクリーン上に読み込んでおくことで低速CPUでも高速な画面切り替えを可能します。たとえばアプリケーションが３ページ使用する場合、まだ表示しない２ページ目、３ページ目についてもあらかじめ仮想スクリーン上に読み込んでしまいます。下層ページを利用する場合、仮想スクリーンのサイズは高さはページ数分だけ大きくなります。

使用要件

仮想スクリーンでは通常のシングルスクリーンと比較して大きなビデオメモリが必要となります。

ビデオメモリサイズ

ディスプレイコントローラは仮想スクリーンに必要なビデオメモリサイズに対応している必要があります。例えば、解像度が320×240の画面で色深度が16ビット・2ページ分の仮想スクリーンの場合、必要なビデオメモリサイズは次のように計算できます。

• メモリサイズ= LCD_XSIZE × LCD_YSIZE × LCD_BITSPERPIXEL / 8 × NUM_SCREENS
• メモリサイズ= 320 × 240 × 16 / 8 × 2
• メモリサイズ= 307200バイト

表示開始位置

ディスプレイコントローラは、表示開始位置を自由に設定できる必要があります。すなわちディスプレイドライバも表示開始位置について保持するレジスタを持っていなければなりません。

初期化設定

仮想スクリーンは初期化設定をする必要があります。LCD_SetVSizeEx（）で仮想スクリーンのサイズを設定し、LCD_X_SETORGで表示開始位置（原点）を設定します。

LCD_SetVSizeEx（）

仮想スクリーンのサイズを設定する関数

• 変数の設定

int　LCD_SetVSizeEx（int LayerIndex, int xSize, int ySize）;

• 戻り値

成功時に0、エラー時に1

サンプル

次のサンプルは128x192の仮想スクリーンと128 × 64のディスプレイでどのように3ページを高速で切り替えるのか示します。

初期設定

＃difine LCD_XSIZE 128

＃difine LCD_YSIZE 64

＃difjne LCD_VYSIZE 192

アプリケーション
GUI_SetColor（GUI_RED）;
GUI_FillRect（0、0、127、63）;
GUI_SetColor（GUI_GREEN）;
GUI_FillRect（0、64、127、127）;
GUI_SetColor（GUI_BLUE）;
GUI_FillRect（0、127、127、191）;
GUI_SetColor （GUI_WHITE）;
GUI_SetTextMode（GUI_TM_TRANS）;
GUI_DispStringAt（"スクリーン0"、0、0）;
GUI_DispStringAt（"画面1"、0、64）;
GUI_DispStringAt（"画面2"、0、128）;
GUI_SetOrg（0、64 ）; / * スクリーン１の原点を設定* /
GUI_SetOrg（0、128）; / *スクリーン２の原点を設定* / 

出力

解説	画面出力	仮想スクリーン
GUI_SetOrg(0, 240)実行前
GUI_SetOrg(0, 240)実行後
GUI_SetOrg(0, 480)実行後

ウィンドウマネージャのサンプル

emWinにはウィンドウマネージャーを使用した仮想スクリーンのサンプルをSampleGUIBASIC_VirtualScreens.cにあらかじめ用意してあります。
スクリーン０

スクリーン１

スタート画面は２つの温度変化をモニターするグラフ（スクリーン０）を表示しています。SetColorボタンを押すと画面は瞬時にスクリーン１に切り替わります。たとえ低速なCPUでも高速切替が可能です。

上記のサンプルのビューアでのスクリーンショット

ビューアを使用している場合、両方の画面を同時に表示することができます。上記スクリーンショットでは、左側に実際に表示さている画面を、右側に仮想スクリーン全体を表示しています。

ダイアログのサンプル

メイン画面/ スクリーン0

メイン画面/スクリーン1

キャリブレーション画面/ スクリーン2

説明画面/ スクリーン2

はじめにメイン画面としてスクリーン0がディスプレイに表示されます。"セットアップ"ボタンを押すと、"セットアップ"画面がスクリーン1に作成され画面を切り替えます。キャリブレーションと説明画面の両方はスクリーン２を使用して表示されます。

ビューアを使用している場合、両方の画面を同時に表示することができます。上記スクリーンショットでは、左側に実際に表示さている画面を、右側に仮想スクリーン全体を表示しています。

emWinホームに戻る