小さく高速な組込み向けGUIツール「GUIX」の基礎を解説【その2】

つぶつぶコラム

第1回記事  小さく高速な組込み向けGUIツール「GUIX」の基礎を解説【その1】

第3回記事 小さく高速な組込み向けGUIツール「GUIX」の基礎を解説【その3】

画面の設計

GUIXはWidgetと呼ばれるGUI上の部品を配置して画面を作成します。

Widgetには様々な種類があり、組み合わせることもできます。また、Widgetには外観を変えることのできるものもあり、絵を張り付けることで見た目を変えることもできます。 

ただ、Widgetを配置して画面を作る場合の注意点などもあるのでここに書いておこうと思います。

Widgetの属性

Widgetには様々なプロパティがあります。

配置するための座標やサイズ、色や動作の許可禁止などがあります。

適切なプロパティを設定することで外観や動作を制御できます。

プロパティの中にはWidgetの名称とIDを設定する項目がありますが、ここで設定する文字列はC言語の定義名として使われますので、C言語の定義名として使用可能な文字を設定する必要があります。(重複もできません。)

WidgetとWidgetの関係

複数のWidgetを配置した場合に、必ず発生するのが、Widget同士の関係性です。この関係性は2種類あり、親子関係、兄弟関係です。

例えば、WindowWidgetの中にButtonWidgetを配置した場合、WindowWidgetから見たButtonWidgetは子にあたります。逆にButtonWidgetから見たWindowWidgetは親にあたります。

また、WindowWidgetの中にButtonWidgetを2つ並列に配置した場合、WindowWidgetから見た2つのButtonWidgetは両方とも子にあたります。逆に2つのButtonWidgetから見たWindowWidgetは親にあたります。2つのButtonWidget同士は兄弟関係になります。

この関係性は重要で、ButtonWidgetなどで発生したイベントは子から親に向かって伝わります。伝わる途中でイベント処理を行うとその先には伝わりません。(伝えることも可能です。)一番最後の親まで伝わり、どのイベントハンドラでも処理されない場合はそこでイベントは消えます。この伝わる過程から外れている他の兄弟Widgetには伝わりません。

描画は親Widgetから子Widgetへ順番に行われます。GUIXの描画は、消えた一部を描画するのではなく、描画の必要なWidgetをすべて描画します。これは、透過処理やWidgetの動作で親Widgetの一部に描画が必要な場合、親から描画しないと子Widgetの表示が消されるためです。なので、描画が必要なすべての子Widgetが描画されます。 

描画関係でのもう一つの決まり事として、クリッピング処理があります。これは、Widget内の描画はWidgetからはみ出ないというものです。そのため、子Widgetは親Widgetの外にははみ出ません。

最後に兄弟関係の場合は重なりにも注意が必要です。親子関係の場合はさほど気にする必要はないですが、兄弟関係の場合は重なりが重要になります。(Zオーダーとも言います。)GUIXにはZオーダーを制御するAPIもあるので必要に応じて制御する必要があります。

フォント

フォントも画面設計には重要な項目です。

GUIXにもフォントがいくつか付属しますが、残念ながら日本語は表示があまりきれいとは言い切れません。

また、フォントにもライセンスがあり、商用利用が出来ないものもありますし、フリーのフォントも存在しています。この辺りは権利にも費用にもかかわりますので、きっちり確認いただく必要があります。 

GUIXではTrueTypeフォント(拡張子がTTF)が使用できます。TTCという拡張子のTrueTypeフォントも使用できますが格納されている先頭のフォントのみ使用できます。(先頭以外のフォントを使用する場合はTTFファイルに分割し、別ファイルとして指定するなどが必要です。)

フォントはGUIXのデザインツールで展開され、組込み環境で扱いやすい形式(ビットマップフォントのような形式)に変換されてリソースファイル(C言語の配列データ)として生成されます。TrueTypeフォントそのものを組込み環境にコピーするわけではありません。また、組込み環境ではフォントのスケーリングも行いませんので、サイズの異なるフォントを定義すると、サイズごとにフォントデータがリソースファイルに生成されます。

また、フォントデータは表示する必要のある文字のみを持つことでリソースのサイズを小さくすることもできます。フォントの設定で、デザインツールで設定した文字のみをリソースファイルに生成するか、指定した範囲のすべてのフォント情報をリソースファイルに生成するかを選べます。範囲で設定した場合は膨大な量となる場合がありますのでこの設定は注意する必要があります。

画像

GUIXではWidgetなどに張り付ける絵などを、ピクセルマップと言うリソースとして管理します。

GUIXのデザインツールでPNG形式の画像を取り込み、ピクセルマップ形式でリソースに生成します。この時、多少の圧縮を掛けることができます。圧縮方法は組込み環境で扱いやすい独自の形式になります。(圧縮を掛けないことも可能です。)

画像データは容量が大きいので実行速度などが満たせるなら圧縮機能を有効にすることを検討した方が良いと思います。

テーマ

テーマ(色合いやフォントなど)を変更する機能です。

スマートフォンの着せ替え機能に似ています。ボタンなどのWidgetは同じだけども色設定やフォントを一度に変更します。

あらかじめGUIXのデザインツールで設定しておく必要がありますが、リソースファイルに生成されていれば動的に変更が出来ます。

多言語対応

GUIXは複数言語の切り替えに対応しています。

その為、文字列の設定は1つの文字列IDに対して使用する言語分の設定が必要です。

言語切り替えも動的に行うことができます。

また、XLIFF形式のファイルをインポート/エクスポートすることができます。

AzureRTOS GUIXの製品ページはこちら