メイン･コンテンツまでスキップ

TouchGFX Stock

TouchGFX Stockは、組込みのユーザ･インタフェースですぐに使える数千の無料のグラフィック･アセットを集めたライブラリです。 バックグラウンド、アイコン、ウィジェットの視覚スタイル、トップ･バーなど、多くのアセットが含まれています。 これらのアセットはテーマ別に整理され、概要を見渡せるようになっているので、ユーザは各自のUIコンポーネントに合うデザインを選択することができます。

TouchGFX Stockの要素はユーザ独自の設計を補完するだけでなく、UI全体に使用することもできます。

Access to TouchGFX Stock is integrated in TouchGFX Designer tool and lets you access the assets just as if they were part of your project. 画像プロパティの設定時に、Image PickerのポップアップでTouchGFX Stockボタンを押します。

独自のアセットと組込みのTouchGFX Stockとの切り替え

各テーマには説明ページがあり、デザイン、テーマ･カラー、ライセンス条項、完全なデザイン例が示されています。 テーマの情報アイコンを押すと、説明ページが表示されます。

情報アイコンでテーマの説明に切り替え

テーマの説明

ライセンス条項​

アイコンはGoogleから無償提供されているMaterial Iconsライブラリにあるもので、その他すべてのリソースの権利はSTが所有しています。このためTouchGFX Stockのライセンスは許容範囲が広く、STM32デバイス上で実行されるものであれば、商業プロジェクトであっても、チームがアセットを無料で使用できるようになっています。 ユーザはそのアセットを利用して自分のインタフェース用にサイズ変更したり、特定のニーズに合うように編集したりできます。

ライセンス条項の詳細については、こちらをご覧ください。

参照​

ウィジェットの画像やプリセット･プロパティを編集する際に、TouchGFX Stockの要素を参照できます。 参照時には、現在選択されているテーマをクリックして、別のテーマを選択します。

画像を参照し、別のテーマを選択

選択したテーマの下のフォルダ･ツリーをナビゲートして、画像やプリセットをさらに調べます。 目的、ウィジェット･タイプ、またはサイズごとにすべてが分類されています。 画像またはプリセットをクリックすると、要素が選択されます。

アセット​

TouchGFX Stockのテーマで提供されているアセットは、以下の2つのいずれかのフォーマットで提供されています。

画像​

TouchGFX Stockの各画像は、特定のサイズ、外観、目的を備えています。 画像は最も一般的な解像度のアプリケーションに視覚的に合うように調整されています。

例として、Alternate Themeにあるボタンの画像は、次のように分割されます。

  • 丸いまたは丸みをおびた外観
  • アイコンと通常のサイズ
    • ボタン上のアイコンは、それが必要な場合のみ
    • テキスト、アイコン、または両方をサポートする可能性がある長方形のボタンには通常のサイズ
  • ディスプレイの解像度やUIの制約に合わせるためのさまざまな幅や高さ

一部の画像は特定のウィジェット向けではなく、UIを目立たせるために使用することができます。 この一般的な例としては、グラデーションなどの効果、要素を格納するためのバー、UIを異なる部分に分けるためのデバイダーが挙げられます。 TouchGFX Stock全体を参照してみると、もっと多くのものが見つかります。

アイコン​

多くのユーザ･インタフェースにとってアイコンは不可欠の部分であり、オブジェクト、アクション、アイデアを視覚的に表すものです。 正しく用いれば、製品またはアクションの核となる考えや目的を伝達することができ、画面上の使用領域の節約や美的魅力の向上など、ユーザ･インタフェースに多くのすぐれた利点をもたらします。

TouchGFX Stockでは、Material Iconsという名前のテーマに1500を超えるさまざまなアイコンが含まれています。 これらのアイコンは、Googleが提供する無料のMaterial Iconsのセットをベースとしています。

下の図に示すように、TouchGFX Designerでは選択したアイコンのサイズや色を設定することができます。

Material Iconsの参照

TouchGFX Stockにあるアイコンの元のフォーマットはSVGです。ただし、TouchGFXで使用する際にはPNGに変換し、その後のビルド･ステップで内部のビットマップ･フォーマットに変換して、TouchGFXのすべてのPNGベースの画像に使用されます。

ウィジェットのプリセット​

新しいウィジェットをアプリケーションに挿入する際には、ウィジェットのデフォルト･プリセットを選択します。 プリセットとは、特定のウィジェット･タイプに対して事前定義された外観のことです。 ウィジェットで使用される画像だけではなく、外観に影響するその他のパラメータ設定も含まれます。Button With Icon内部のアイコンの配置や、Sliderの最小 / 最大値のつまみの位置などです。

パラメータ設定はプリセットによって自由に変更できます。 これを行う場合、プリセット設定はNo presetに変更されます。 これは、現在のウィジェットが特定のプリセットによって構成されていないという意味です。 いつでもプリセットを再選択して、パラメータをそのプリセットの値に更新することができます。

Sliderウィジェットのプリセット･ピッカー

TouchGFX Stockアセットのカスタマイズ​

TouchGFX Stockにある画像やアイコンを、アプリケーションと一致するようにカスタマイズする必要がある場合は、ユーザが自由にカスタマイズできます。 カスタマイズの一例として、ボタンの画像のサイズ変更があります。 これを行うには、内部パーツを削除し、エンド･ピースを組み合わせます。

カスタマイズの手順は次のとおりです。

  1. アプリケーションのウィジェットで、カスタマイズ対象のアセットを使用します。
  2. コードを生成します。
  3. 選択した生成済みのアセットをassets/images/__generatedフォルダからコピーします。
  4. コピーしたアセットに変更を加えます。
  5. カスタマイズしたアセットをassets/imagesフォルダに貼り付けます。
  6. アプリケーションでカスタマイズ済みのアセットを使用します。