技術関連ブログ
TouchGFX 4.20：カスタム･コンテナの共有新しいエクスポート機能のご紹介
TouchGFX 4.20がダウンロード可能になりました。本バージョンでは、開発者の制作物をチームや世界中のユーザと共有できるようになります。今回、カスタム･コンテナをエクスポートする手段を提供します。設計者は、特定の設計エレメントをプロジェクト間で共有することが可能になります。TouchGFX 4.20では、ベクタ･グラフィックスの性能も大幅に最適化されます。そのため、開発者は、よりスムーズなアニメーションを顧客と共有したり、より複雑なインタフェースを提供したりできるようになります。通常は、この新バージョンのフレームワークを使用すれば、より広範囲のマイクロコントローラ上で豊かなUIを実行し、創造性を高める上でチーム間での余計な作業を減らすことが可能になります。
TouchGFXとは
フレームワーク
TouchGFXは、STM32マイクロコントローラ上で動作するGUIを作成できるSTの無償のフレームワークです。C++で記述されたエンジンは、STのデバイス向けに最適化されています。TouchGFXは、ユーザが移動可能な複数の画面によってインタフェースが構成されていることを前提に動作します。そのため、フレームワークは直感的で、人間の経験を反映したものとなっています。また、広範囲に及ぶ2Dや3Dのオブジェクト、ビデオ、アニメーション、遷移などを扱えるだけではありません。専門エンジニアは、生成されたコードにアクセスしてそれを最適化することもできます。このプロセスを補助するため、TouchGFXに関するドキュメントでは、フレームワークのAPIや利用可能な開発ツールについての情報を提供しています。
TouchGFX Designer
コーヒー･メーカー向けのUIを作成するTouchGFX Designer
TouchGFX Designerは、基本的に、UIの開発を始める時に開発者が最初に使用するツールとなります。本ユーティリティは、ユーザが閲覧したり使用したりする対象物を設計者が見たままに作成する、WYSIWYGアプローチを採用しています。開発者は、時計、ゲージ、アニメーション化された画像といったサンプル･プロジェクトを使って開発を始められます。サイコロのアニメーション、シーンの遷移、プール監視システムといった本格的なデモも用意されています。スタートアップ画面では、デモ･アプリケーションやSTの開発ボードを選択した後、すべての構成を設定できます。そのため、サンプル･コードやデモの実行には数分しかかからず、概念実証をすばやく行えます。TouchGFX DesignerのUIエレメントは、通常、ユーティリティのインタフェースを介して追加し、構成するウィジェットの形態をとります。
TouchGFX Designerは、TouchGFX開発エコシステムで不可欠な構成要素です。たとえば、ユーザが3.0のテンプレートを選択している場合は、プロジェクトをTouchGFX Designerで開始した後にSTM32CubeMXに渡し、ディスカバリ･ボードやマイクロコントローラをセットアップし、TouchGFX Generator（以下参照）で.IOCファイルを更新することにより、新しい設定を即座に適用できます。
同様に、開発者はTouchGFX Generatorで作業を開始した後、TouchGFX Designerに移動し、再度STM32CubeMXに戻ってディスプレイの解像度を変更することもできます。本システムでは、アプリケーションを閉じなくても、TouchGFX Designerが自動的に更新されます。
TouchGFX Simulator
TouchGFX Simulatorでは、開発者は、GUIをマイクロコントローラ上で実行する前にプレビューすることができます。 メリットの1つは、キーボード･ショートカットを使ってワークフローを効率化できることです。たとえば、さまざまなスクリーンショットを撮影してアニメーションをフレームごとに精査する作業がより簡単になります。同様に、F2を押すと、invalidateされているエリア、つまり、システムで更新する必要のあるフレームのセクションがハイライトされます。そのため、開発者は、アニメーションが不必要な部分までinvalidateすることでマイクロコントローラのリソースを無駄にしていないかを確認することができます。
TouchGFX Generator
スマートウォッチ上で連動するTouchGFX GeneratorおよびTouchGFX Designer
TouchGFX Generatorは、STM32CubeMXと連動して、TouchGFX抽象化レイヤの大部分を生成します。STでは、ディスプレイを搭載したほぼすべてのSTM32ディスカバリ･キットをサポートしています。新しいプラグインは、Arm® Cortex® -M0+、M4、またはM7を搭載したすべてのSTM32マイクロコントローラと連動します。開発者は、今でも自分のユーザ･コードでいくつかの空白を埋め、最適化を実行する必要がありますが、この新しいプラグインがあれば、プロジェクトを非常に簡単に開始できるようになります。TouchGFX Generatorは実際に空の関数を作成することで、開発者をガイドし、ボードの初期化を簡略化します。開発を高速化し、サンプルとして機能するSTの開発ボードのデフォルト設定も、あらかじめ用意されています。
TouchGFX 4.20の新機能
カスタム･コンテナのエクスポート
単純に言えば、TouchGFX Designerは、画面に描画された機能の表現、つまりウィジェットに依存しています。ソフトウェアには、ゲージ、時計、グラフといった多くの事前定義済みのウィジェットが備わっており、開発者は、これらを使ってカスタム･ウィジェットを設計できます。ウィジェットをより簡略化するため、ウィジェットをコンテナ内部でグループ化することもできます。コンテナは通常、インタフェースの構成要素です。プログラマはコンテナを使うことで、一連のウィジェットを毎回構成し直さなくても複数の画面間で再利用することが可能になります。また、コンテナを変更すると、そのコンテナを使用しているすべての画面に反映させることができるため、開発を大幅に簡素化できます。TouchGFXには、頻繁に使用される設計動作を高速化する事前定義済みのコンテナが付属しており、開発者はこれを使ってカスタム･コンテナを作成できます。
カスタム･コンテナを使用することで、開発者はインタフェースをマイナーチェンジしたり、正確なビジョンを具体化したりできるため、カスタム･コンテナは非常に人気があります。ただし、どんな設計ツールにも固有の課題があります。カスタム･コンテナでは、1つのプロジェクトで行った作業を別のUIにエクスポートすることはほぼ不可能になります。カスタム･コンテナには、既存のプロジェクトに関連付けられたコード、グラフィカル･アセット、テキスト、依存関係などが含まれているからです。TouchGFX Designer 4.20では、他のプロジェクトで再利用できるバンドル（.tpkgファイル）を作成するエクスポート機能を提供することで、この問題を解決しました。このユーティリティは、フォントなどのすべてのアセットをバンドルに追加し、XMLファイルにその内容をリストします。そのため、開発者はそのファイルを確認したり、ファイルに変更を加えたりして、エクスポートしたいアセットを選択できます。
カスタム･コンテナのインポート
カスタム･コンテナをインポートするには、[Edit] > [Import] > [Custom Container]を選択してください。TouchGFX 4.20には、ユーザ向けにプロセスをガイドする新しいインポート･ユーティリティが含まれています。たとえば、ソフトウェアが、カスタム･コンテナで定義された言語を検出し、新しいプロジェクトで使用可能な言語とマッチさせるか、無視します。また、一般名間で矛盾があったり、特定の問題のために新しいインタフェースの内部でトラブルが発生したりする可能性がある場合には、システムがインポート･プロセスを中断します。TouchGFX Designerは、インポート･プロセスの最中に回避策を作成するのではなく、元のカスタム･コンテナで問題を修正することをユーザに要求します。 本機能は複数製品間でインタフェースのルック･アンド･フィールを維持することを目指しているため、元のプロジェクト内での変更を要求することにより、UI間での一貫性を確保しています。
ベクタ最適化
マイクロコントローラのほとんどの静的インタフェースでは、計算処理能力がほとんど不要なため、ビットマップが使用されています。それに比べると、多くの計算能力を必要とするベクタ画像はあまり一般的とは言えません。しかし問題は、アニメーションにはベクタが不可欠であるということです。開発者は、使用するリソースを増やすことで、1秒当たりのフレーム数の増加に対応し、よりスムーズなアニメーションを提供する場合もあるでしょう。または、アニメーションのパフォーマンスを落とし、スムーズさを犠牲にする場合もあるでしょう。TouchGFX 4.20では、ベクタ･グラフィックスの処理時に大幅な最適化を行い、場合によっては効率を最大70%も高めます。これにより開発者は、より小規模のマイクロコントローラで今まで以上にスムーズなアニメーションを提供したり、より多くのベクタ･エレメントを使用したりすることが可能になります。ただし、アニメーションのサイズが大きい方が、最大限のパフォーマンスを発揮しやすくなります。
新しい最適化機能では、Chrom-ARTを活用することで、色塗りなどの特定の操作中にマイクロコントローラの負荷を低減します。STは、フレームワークによる特定形状の端の計算方法も更新しました。さらに、これはフレームワークによるベクタ･グラフィックスの取り扱い方も更新するため、ユーザは自動的に更新の恩恵を受けることになります。そのため、開発者は即座に性能向上の効果を把握し、それに従って計画を立てることが可能です。アプリケーションのメモリ要件を下げるのも、インタフェースに新しいアニメーションを追加するのも、開発者次第です。いくつかのエレメントが予想よりも早く実行できるようになる可能性もあるため、チームでUIをレビューしなければならない場合もあります。
TouchGFXの既存の機能
X-NUCLEO-GFX01M2およびX-NUCLEO-GFX02Z1のサポート
X-NUCLEO-GFX01M2エンジニアがGUIを組み込む際は、使用する部品の中で、ディスプレイが最も高価なコンポーネントになりがちです。タッチ･レイヤが搭載されていない単純な2インチのディスプレイでもユーザ体験は大幅に向上しますが、それでも他のコンポーネントと比べれば依然として高価です。そのため、5ドル以下の部品を目指して手ごろなディスプレイを調達するのは困難です。STでは、エンジニアがコスト効率の高い部品を見つけられるようディスプレイ拡張ボードを提供しており、TouchGFX Designer内でハードウェアのサポートも提供しています。ユーザがディスプレイの設定を選択すれば、その仕様に合ったインタフェースで作業を開始することができます。
エンジニアが最初に選択できる拡張ボードはX-NUCLEO-GFX01M2です。本ボードには、SPI FlashメモリをサポートするSPI 2.2インチQVGA（320 x 240）ディスプレイが採用されており、外部Flashメモリと2層PCBを備えた一般的な組込みシステムに対して、約5ドルで必要な部品を揃えられます。X-NUCLEO-GFX01M2は、幅広い64ピンNUCLEOボードと互換性があります。たとえば、このボードをNUCLEO-WB55RGで使用すれば、エンジニアはBluetooth®アプリケーションへのアクセス性を向上させることができます。
X-NUCLEO-GFX02Z1同様に、X-NUCLEO-GFX02Z1は、パラレル･インタフェース、QSPI Flashメモリ、および144ピンNucleoボードに対応したST初のディスプレイ拡張ボードです。本プラットフォームは、電力の高いマイクロコントローラを対象としており、より高いバンド幅を提供するインタフェースと互換性があります。開発者は、初期のSTM32U5と同時にリリースされたNUCLEO-U575ZI-QとあわせてX-NUCLEO-GFX02Z1を使用できます。そのため、エンジニアは、ワット当たりの性能が向上した新しいマイクロコントローラを使って、これまでの世代のSTM32では不可能だったユーザ･インタフェースを作成することができます。
UIへのビデオの組込み
組込みシステム上のディスプレイの人気が高まっている結果、より多くのUIにビデオを組み込みたいというニーズが生まれているのは必然のことです。しかし、マイクロコントローラを搭載した組込みシステム上にビデオを表示するのは簡単ではありません。現在のオペレーティング･システムで、デフォルトのメディア･プレーヤやコーデックを備えているものはありません。同様に、YouTubeビデオを表示したWebページを書き込むことも不可能です。開発者は、ビデオ･バッファを実装する、各マイクロコントローラにぴったりのフォーマットを検討する、ハードウェアを高速化させる方法を決定するといった、手間のかかるあらゆる作業を行わなければなりません。TouchGFX Designerは、こうした問題を解決するため、ビデオ･ウィジェットを提供しています。そのため、ビデオの追加は、3つの簡単なステップを実施するだけで済みます。
CacheableContainer
名前が示す通り、このコンテナは、ビットマップ･キャッシュを使用することでグラフィック性能を高速化し、フレーム･レートを高めて遷移をよりスムーズにします。以下のデモはSTM32F429Iディスカバリ･キット上で動作します。CacheableContainerを使用しない場合、単純なフルスクリーン（240 × 320）スライド･アニメーションは、1秒当たり9フレームで実行されます。TouchGFXテクノロジーを使用すれば、1秒当たり60フレームを達成できます。一部のスマートウォッチでは、現在、そのフォーム･ファクタのせいでハードウェアが相当制限されており、バッテリ寿命を延長する必要があるにもかかわらず、シームレスなユーザ体験を実現するためにこの機能が使用されています。CacheableContainerは、アニメーションだけでなく、テクスチャ･マッパーや静的背景の前に表示される小型のダイナミック･エレメントのような複雑なウィジェットも最適化できます。
CacheableContainerを使用しない場合は、アニメーションの各フレームを再描画しなければならず、これは計算上高コストになる可能性があります。CacheableContainerは、個別のコンテナ内にある最初と最後のフレームを、システムがRAM内に保持しているビットマップの形式で保存することにより、この問題を回避します。アニメーションを描画する代わりに、システムがDMAを使ってメモリから2枚の画像を取得し、単純なDynamicBitmap方式により、これらの画像をさまざまな場所に表示します。マイクロコントローラで個々のフレームを生成する必要がなくなるため、性能が大幅に最適化されます。開発者が行う作業は、TouchGFX Designerの[Cacheable]ボックスにチェックを入れて、キャッシュしたいコンテナのメモリ内の場所を選択し、必要に応じて呼び出すだけです。この技術により、描画時間は100msから5msに短縮されます。
パーシャル･フレームバッファ
フレームバッファとは、ディスプレイに表示される各ピクセルの表示内容を保存した連続的なメモリ空間のことです。たとえば、スマートウォッチのディスプレイに使用される標準的な24bitで390 x 390画像の場合は、3,650,400bitまたは456.3KB（(390x390x24)÷8 ）のフレームバッファが必要です。このサイズは、スマートウォッチやウェアラブルで実行されるSTM32L4+で使用可能なSRAMの70%以上を占めることになります。また、アプリケーションで複数のフレームバッファが必要な場合、この数値は増大する可能性があります。こうした容量制限を超えるサイズの大きなフレームバッファでは、メモリからディスプレイへ移動するデータの量が多くなるため、その取得に時間がかかり、性能が低下します。
名前が示す通り、パーシャル･フレームバッファには、フレームバッファの一部のみが保存されるため、メモリ･フットプリントを10分の1に縮小できます。開発者は、画面内のセクションの変化に応じてパーシャル･フレームバッファのサイズを設定し、複数のパーシャル･バッファを保存することができます。
その後、フレームワークにより適切なバッファが選択され、ディスプレイに送信されます。本テクノロジーは、時計、ローディング･バー、時間の経過とともに生成されるグラフといった短いアニメーションに最適です。また、本テクノロジーでは、マイクロコントローラのRAMからパーシャル･フレームバッファを直接取得するため、ディスプレイは組込みコントローラを使用する必要があり、これによってFlashメモリを回避し、性能を高めることが可能です。本テクノロジーは、パラレル / 8080、DSI、およびSPIディスプレイで動作します。
TouchGFXでは、パーシャル･フレームバッファを最適化し、リソースに制約のあるマイクロコントローラにUIを実現することができます。これまでは、最小限のグラフィカル･インタフェースでも約200KBのフレームバッファが必要でした。しかし、STM32G071などのマイクロコントローラには36KBのRAMしか備わっていないため、これが大変な問題となることがあります。TouchGFXは、パーシャル･フレームバッファをたった6KBに最適化することで、この問題を解決します。フレームワークのアプリケーション･データの場合、エントリレベルのUIを実行するために必要なRAMのサイズはわずか16KBです。TouchGFXでは、部分的画面のスマート更新にも対応しています。本機能は、パーシャル･フレームバッファを補完して、画面上の更新の順序を最適化します。このプロセスではリソースが節約されるため、同じ時間でより多くの更新を実行できます。
L8圧縮フォーマット
グラフィカル･アセットはメモリのスペースを大量に使用しますが、アセットの品質を落とせばユーザ･インタフェースの品質も落ちます。L8は、STM32マイクロコントローラのChrom-ARTアクセラレータにより、品質を落とすことなく画像ファイルを最大75%圧縮できる不可欠な機能です。アセットで使用する最大色数が、STM32マイクロコントローラを搭載した小型の組込みシステムで一般的な256色である限り、開発者は、TouchGFX Designerでボックスにチェックを入れるだけで、L8フォーマットを使用してアセットを圧縮することができます。解凍も計算上効率的で、Chrom-ARTエンジンを使用してテーブル内の色を検索し、品質を落とすことなくアセットを描画できます。
テキスト用XMLファイル
設計チームは、世界中のさまざまな翻訳担当者と連携できるよう、テキストをExcelファイルに保存することが多々あります。しかし、Gitなどのバージョン管理システムを使用する代わりに、編集者が変更を手動で行わなければならない場合は、別の担当者による作業を誤って上書きしてしまわないようにする必要がありますが、それが面倒な場合もあります。この問題を解決するため、TouchGFXは、すべてのテキストをXMLファイルに保存します。本フォーマットは、マージ操作や競合解決を大幅に簡素化します。TouchGFXには、既存のワークフローに適合するようXMLからExcelへのコンバータも含まれています。開発者はExcelへのエクスポートを行った後、そのExcelファイルをTouchGFXにインポートし、XMLフォーマットに戻すことができます。
最適化されたプロジェクト･ファイル
TouchGFXでは、プロジェクト･ファイルのサイズが小さいため、コラボレーションも促進されます。そのサイズのおかげで、マージや共有も簡単です。これまでのプロジェクト･ファイルでは、すべてのパラメータがJSONフォーマットで保存されていました。問題は、こうしたファイルのサイズが非常に大きくなってしまう場合があることでした。そのため、STでは、カスタム設定のみを保存してプロジェクト･ファイルを最適化できるようにしました。したがってファイルにない設定は、デフォルト値を使用することになります。これにより、ファイルのサイズが大幅に小さくなり、Gitでのマージ操作が大幅に簡素化され、高速化されました。
シングル･ユース･テキストおよびそのランダムID
開発者がテキストを使う場合は、TouchGFX Designerのテキスト･パネルでリソースを作成し、UI内でそのテキストのIDを使用する必要があります。TouchGFXでは、一般的なテキスト･リソースとして表示されない「シングル･ユース･テキスト」を使用することもできます。このテキストは、テスト時や、テキストが重要でない場合に使用されます。シングル･ユース･テキストにより、無関係なテキストでデータベースが一杯になるのを防ぐとともに、試作を高速化することができます。このシングル･ユース･テキスト機能は、一般のテキスト･リソースとは異なり、IDを自動的に生成し、リソースがUIから削除されるとそのリソースをデータベースからも消去します。またTouchGFXは、ランダム文字列生成器を使用してIDを作成します。そのため、2つのシングル･ユース･テキストIDが同一プロジェクト内で同じになってしまうことはほぼあり得ません。
アニメーションとウィジェット
スライドイン遷移と動的グラフ
STがTouchGFXに追加し続けているすべての機能を活用することは、開発者にとっても困難です。そのため、STは、上記の機能がすでに使用されている最適化されたアニメーションを提供しています。たとえば、従来のスライドイン遷移では、画面全体をリフレッシュする必要がありましたが、TouchGFXのワイプ･アニメーションでは、はるかに少ないリソースが使用されます。同様に、動的グラフ･ウィジェットは、RAMやマイクロコントローラにあまり影響を与えずに、連続的なデータを表示します。
静的グラフ
ウェアラブルが環境データや物理データを追跡するように、ユーザも進捗状況を確認したいと考えています。グラフでは、心拍、体温、歩数などを追跡できます。TouchGFXの開発者は、当初は実装が困難になる恐れがあったために動的グラフを求めていました。この機能は、TouchGFX 4.15から利用できるようになっています。今回、STのチームは、新しいアプリケーションに対応できる静的グラフをリリースします。常に展開する必要のないデータや、時間がたってもわずかな変化しか発生しないデータには、静的表現の方が適しています。この新グラフは、若干異なる動きをします。動的グラフでは、時間間隔が一定であることから、開発者はグラフ上の1つのデータ･ポイントを送信するだけで済みます。しかし、静的グラフでは、XおよびY座標に関する情報をプログラマが入力しなければなりません。
時計とテクスチャ･マッパー
TouchGFXには、アナログ時計やデジタル時計といった、アプリケーションを模したウィジェットが備わっています。また、テクスチャ･マッパーもあり、この機能では、開発者はドラッグ･アンド･ドロップするだけでマッピング･プログラムの作成を開始することができます。引き続きC++コードを入力する必要はありますが、プロセス全体は大幅にスムーズになります。テクスチャ･マッパーは、リソースに制約のあるマイクロコントローラ上におけるTouchGFXの最適化の好例でもあります。グラフィカル･アセットがFlashメモリではなくRAMに保存されていれば、オブジェクトや作業ですらSTM32G0上でアニメーション化することができます。
ゲージ
ゲージ･テンプレートでは、針と弧を描画することで、ユーザが値をモニタできるようにします。開発者は、背景、針の方向、値の範囲なども変更できます。以下のデモでは、プログラマがIDEからTouchGFX Designerに切り替えることで、ワークフローをさらにスムーズにする方法を紹介しています。チームはゲージを即座に確認したり、臨機応変にマイナーチェンジしたり、瞬時にコードをテストしたりすることができます。たとえば、本ビデオでは、handleTickEvent()関数がゲージの動きを制御する様子が示されます。コードをほんの少し記述するだけで、開発者は値の範囲やインジケータが更新を受信する頻度などを変更することができます。こうした最適化により、表示される値を常に更新する必要のないアプリケーションで、多くのリソースを節約することができます。
高度なテキスト管理
テキストは、ほとんどのGUIで不可欠な構成要素であるため、設計者はテキストに多くの労力をかけます。設計者はテキストをカスタマイズし、翻訳し、成形します。TouchGFX Designerで作成された一部のアプリケーションには、数千のテキスト･リソースが含まれている場合があり、それらは多くの言語に翻訳されます。問題は、テキストを扱う作業は面倒な場合がある点です。このような「摩擦」を減らすため、TouchGFXでは、アプリケーションのセクションや機能に合わせて開発者が定義できるグループが提供されます。この新機能では、翻訳されたテキストをTouchGFX Designer上で横に並べて簡単に表示させることができます。関連する情報をバンドルして、その一貫性や正確性を確認することも可能です。さらに、グループ化により、特定のリソースの検索が高速化されます。
TouchGFX Designerには、タイポグラフィ･オプションも備わっており、グループ内でのデフォルトのパラメータを設定できます。このセクションで、ユーザは、フォント仕様、フォールバック文字、ワイルドカード、配置などを選択できます。これまで、開発者はテキスト･リソースごとにパラメータを上書きしなければなりませんでしたが、これには多大な労力がかかっていました。グループ化によって、多くのリソースに対してパラメータを同時に設定できるようになったため、開発が大幅に最適化されます。カスタム･タイポグラフィを使用した既存のプロジェクトの設定は、新しいセクションに移されます。この新しいテキスト･インタフェースにはシングル･ユース･テキストも表示され、必要に応じてこれらをリソースへ昇格させることもできます。
関連情報
技術関連ブログ一覧