製品
- embOS
- emIP
- emFile
- emWIN
サポート
- 窓口
- ライセンス
- 技術 Q & A
ダウンロード
- カタログ
- ドキュメント
- ソフトウェア
サポートしているマイコン
- CPUサポート
- マイコン
- コンパイラ
- 評価ボード
ウィジェットはオブジェクト型のプロパティを持つウィンドウであり、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 |
---|---|
3ページ、タブは左上寄せ | |
6ページ、タブは右下寄せ |
TEXT
通常、以下のメッセージボックスに表示される、ダイアログボックス内のテキストフィールドを表示するために使用されます。
もちろんテキストフィールドは、次のように他のウィジェットのラベルに使用することができます。
VNCは2つのソフトに分かれています。ディスプレイを生成するサーバと実際にお客様の前にある画面にディスプレイの内容を表示するビューアです。遠隔操作するマシンを見るだけでなく、マウスやキーボードを通して操作することができます。サーバとビューアは異なるマシン上で異なるアーキテクチャの上で動作している可能性がありますが、サーバとビューワを接続するプロトコルは、シンプルでありオープンかつプラッフォームに依存しません。ビューアにはなにも保存されていないので、サーバとビューアの接続が切断されてもデータが失われる心配はありません。サーバーとビューアの接続はどこからでも可能なので、ハードウェア本体を携行する必要がなく身軽になれます。VNCサーバを使用することでどこからでも本体を制御でき、画面のスクリーンショットをとることもできます。
TCP / IPスタック
サーバとビューア間の通信はTCP / IP接続に基づいているため、VNCはTCP / IPスタックが必要です。Win32のシミュレーション環境では、TCP / IP(Winsock)は通常既に含まれています。TCP / IPスタックが存在する必要があります。TCP / IPスタックはemWinに含まれていませんが、柔軟なインタフェースをもつので、任意のTCP / IPスタックが利用できます。
マルチタスク
VNCサーバは、別スレッドとして実行する必要があるのでVNCサーバー側にマルチタスクシステムが必要になります。
対応するサーバメッセージクライアント
emWin VNCサーバは、ポインタのイベントメッセージとキーボードのイベントのメッセージをサポートしています。
エンコーディング
サーバは、Rawエンコーディングとhextileエンコーディングをサポートしています。
認証
サーバーは現在認証を必要としません。しかし認証機能は要求に応じて簡単にサーバに追加することができます。
パフォーマンス
ほとんどのビューアは圧縮率の高いhextileエンコーディングをサポートしています。標準的なQVGA画面では20~50KBのデータが必要になります。ARM7プラットフォーム(50 MHZ、キャッシュ付き)上で動作する場合1画面を更新するのに200-300ms必要になります。サーバは増分更新で処理をするので、ほとんどの場合、更新される表示領域はディスプレイに比べてずっと小さく、送信するデータは極僅かになります。よって標準的なARM7システムではリアルタイム更新が可能になります。
マルチサーバ
サーバーの実装は、全く安全でリエントラントです。マルチVNCサーバではおなじCPU 上に複数のレイヤ、ディスプレイを走らせることができます。遠隔操作する対象がマルチディスプレイまたはマルチレイヤーが有効になっている場合、このことは有用なオプションとなります。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
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”を入力すると接続することができます。
スクリーンショット例
シミュレーションに接続
ターゲットに接続
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サーバのスクリーンショット
レイヤ0【図】
レイヤ1【図】
ウィンドウマネージャは、ウィンドウ作成、移動、サイズ変更などウィンドウに関するあらゆる操作を提供します。
一般的にウィンドウは長方形で、左上の原点(xy座標)とXsize(幅)とYsize(高さ)が定義されています。
emWinでは
アクティブウィンドウ
現在の描画操作に使用されているウィンドウがアクティブウィンドウと呼ばれます。最前面のウィンドウと同じであるとは限りません。
コールバックルーチン
特定のイベントが発生した時に描画システムを呼び出すユーザー定義関数のことです。通常、ウィンドウの内容が変更されたときに自動的にウィンドウを再描画するために使用されます。
子/親ウィンドウ
子ウィンドウは親と呼ばれる、別のウィンドウに対して相対的に定義されているものです。親ウィンドウが移動すると、その子ウィンドウも一緒に移動します。同じ親を持つ複数の子ウィンドウは、お互いに"兄弟"とみなされます。
クライアントエリア
ウィンドウのクライアント領域は、単にその使用可能な領域です。ウィンドウの枠やタイトルバーが含まれている場合、クライアント領域は、長方形の内側の領域です。そのようなフレームが存在しない場合は、クライアント領域の座標は、ウィンドウ自体のものと同じです。
クリッピング、クリップ領域
クリッピングは、ウィンドウまたはその一部に出力を制限するプロセスです。ウィンドウのクリップ領域は表示領域です。
デスクトップウィンドウ
デスクトップウィンドウは自動的にウィンドウマネージャによって作成され、常に表示領域全体をカバーしています。常に一番裏のウィンドウであり、他のウィンドウがない場合、デフォルトの(アクティブな)ウィンドウとなります。またすべてのウィンドウはデスクトップウィンドウの子/孫ウィンドウとなりますである。
ハンドル
新しいウィンドウが作成されると、ウィンドウマネージャーはハンドルと呼ばれる固有のIDを割り当てます。ハンドルはウィンドウを操作するときに使用されます。
ウィンドウの非表示/表示
ハンドルを持つが画面上に表示されていないウィンドウを非表示ウィンドウといいます。通常createフラグが指定されていない場合は、ウィンドウ作成時にデフォルトで非表示ウィンドウとなります。ウィンドウを表示状態にすると画面に表示され、非表示状態にすると画面に表示されなくなります。
透明度
透明度を持っているウィンドウは、ウィンドウの一部が描画されず、背後にあるウィンドウを表示しています。
Z -ポジション、ボトム/トップ
画面上のバーチャルな奥行きです。これによってどのウィンドウがどのウィンドウの前に有り優先的に表示されるかなどを管理しています。
仮想スクリーンはディスプレイの物理的サイズよりも大きな表示領域のことです。追加のビデオメモリが必要になりますが、低速なCPUでの画面の切替を高速にすることができます。仮想スクリーンが設定されている時、実際の表示領域の切り替えは参照原点を変更することでできます。
仮想スクリーンではページの切替時にパンニングを利用することができます。
パンニング
アプリケーションがディスプレイサイズよりも大きな表示領域を使用している場合、仮想スクリーンAPIによって原点を変更することで目的の領域を画面に表示することができます。
仮想ページ
アプリケーションが複数のページを使用する場合、あらかじめ複数のページを仮想スクリーン上に読み込んでおくことで低速CPUでも高速な画面切り替えを可能します。たとえばアプリケーションが3ページ使用する場合、まだ表示しない2ページ目、3ページ目についてもあらかじめ仮想スクリーン上に読み込んでしまいます。下層ページを利用する場合、仮想スクリーンのサイズは高さはページ数分だけ大きくなります。
仮想スクリーンでは通常のシングルスクリーンと比較して大きなビデオメモリが必要となります。
ビデオメモリサイズ
ディスプレイコントローラは仮想スクリーンに必要なビデオメモリサイズに対応している必要があります。例えば、解像度が320×240の画面で色深度が16ビット・2ページ分の仮想スクリーンの場合、必要なビデオメモリサイズは次のように計算できます。
表示開始位置
ディスプレイコントローラは、表示開始位置を自由に設定できる必要があります。すなわちディスプレイドライバも表示開始位置について保持するレジスタを持っていなければなりません。
仮想スクリーンは初期化設定をする必要があります。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 ); / * スクリーン1の原点を設定* /
GUI_SetOrg(0、128); / *スクリーン2の原点を設定* /
出力
解説 | 画面出力 | 仮想スクリーン |
GUI_SetOrg(0, 240)実行前 | ||
GUI_SetOrg(0, 240)実行後 | ||
GUI_SetOrg(0, 480)実行後 |
emWinにはウィンドウマネージャーを使用した仮想スクリーンのサンプルをSampleGUIBASIC_VirtualScreens.cにあらかじめ用意してあります。
スクリーン0
スクリーン1
スタート画面は2つの温度変化をモニターするグラフ(スクリーン0)を表示しています。SetColorボタンを押すと画面は瞬時にスクリーン1に切り替わります。たとえ低速なCPUでも高速切替が可能です。
上記のサンプルのビューアでのスクリーンショット
ビューアを使用している場合、両方の画面を同時に表示することができます。上記スクリーンショットでは、左側に実際に表示さている画面を、右側に仮想スクリーン全体を表示しています。
メイン画面/ スクリーン0
メイン画面/スクリーン1
キャリブレーション画面/ スクリーン2
説明画面/ スクリーン2
はじめにメイン画面としてスクリーン0がディスプレイに表示されます。"セットアップ"ボタンを押すと、"セットアップ"画面がスクリーン1に作成され画面を切り替えます。キャリブレーションと説明画面の両方はスクリーン2を使用して表示されます。
ビューアを使用している場合、両方の画面を同時に表示することができます。上記スクリーンショットでは、左側に実際に表示さている画面を、右側に仮想スクリーン全体を表示しています。