皆さん こんにちは これから STM32マイコン 体験実習 グラフィック描画編というタイトルで ST Microelectronics の GUI 設計ツール TouchGFX についてご紹介します 今まで産業用機器 家電 医療機器といった組み込み機器を操作するために物理ボタン を使っていました テクノロジーの進歩によりネットワークへ 接続 する IoT デバイスや 本性で操作が可能なスマートデバイスが普及 しています それと同時に組み込みデバイスをタッチパネルで操作 できるユーザーインターフェースの需要が高まっています その中 で スマートフォンのような綺麗でダイナミックなタッチパネル UI の実現と 従来の製品以上に厳しい部品コストの削減という二つの 要求が求められます ST はこれらの要求を満たす汎用マイコンベース の 確信なグラフィックソリューションをユーザーの皆さんに提供します この グラフィックソリューションはスマートフォンのような滑らかな タッチパネル UI を汎用マイコンで実現したい 綺麗でダイナミック な GUIコンテンツの設計を短期間で実現したいというタッチパネル を使った組み込みGUIの設計開発というユーザーの皆さんの悩みを 解決することができます それではタッチGFXの概要について述べます タッチGFXの概要は三つのポイントがあります 一つ目 タッチGFXは汎用マイコンでスマートフォンのような滑らかなタッチインターフェース 操作を実現します 二つ目 タッチGFXを用いることで直感的にドラッグ あのドロップ操作で簡単にGUI設計が可能です 三つ目 タッチGFXのGUI設計ツールはSTM32マイコンと使用する条件で無償 でご利用いただけます タッチGFXの概要一つ目のポイントについて 説明します グラフィックを組み込み機に実現するために高性能のプロセッサ やグラフィックプロセッシングユニットが必要と多くの人が思いますが STはコアテックスM搭載の汎用マイコンでスマートフォンのような 滑らかなタッチインターフェース操作を実現します なぜSTは汎用マイコンでハイクオリティなグラフィックを実現できるかという 利用説明するためにこれからSTのマイコンラインナップについて簡単 に説明します こちらはSTのコアテックスベースの汎用マイコンマイクロプロセッサ のラインナップとなります タッチGFXに対応するマイコン製品は ピンク色の四角に囲まれているものです このラインナップではコアテックスM4を搭載するSTM32 F4 STM32 L4 L4プラス またコアテックスM7を搭載するSTM32 F7 H7はタッチGFXのグラフィックハイパフォーマンス ソリューションの意地づけにあります 一方コアテックスM0プラス を搭載するSTM32 G0とリュアルコアのSTM32 WBはタッチGFXのグラフィック ローコストソリューションの意地づけにあります 先ほどご紹介したタッチGFX に対応するSTM32マイコンの詳細なハードウェア構成はこちらの表で まとめられます この表で注目していただくのは 解像度 ディスプレイコントローラー グラフィックアクセラレーターです 解像度に関してSTM32マイコン は小型ディスプレイの解像度QVGA中型ディスプレイの解像度WQVGA からタブレット型ディスプレイの解像度XGAまでサポートします ディスプレイコントローラーに関して8080 6800 LCDTFT IPDSIという幅広いモバイル聞き向けのディスプレイコントローラー をサポートします コアテックスM4コアテックスM7搭載のSTM32マイコン にクロームアートというグラフィック用ハードウェアアクセラレーターが標準 搭載されます タッチGFXがクロームアートを用いることで CPU負荷を軽減しながら 高速にグラフィック描画を実現します STM32マイコンで動作する タッチGFXのGUI設計ツールは次の特徴を用きます まずメモリ 使用という観点に関して アプリケーションが複数の画面を持ってもある 時点に表示される画面のみにメモリが割り当てられたり また画面が多くの グラフィックコンポーネントを持っていてもある時点に画面 に表示されるコンポーネントのみにメモリが使用されるという タッチGFXの動的なメモリの使用方法により どのような規模の大きい アプリケーションに対しても実行するメモリが最小限に最適化 されます 実行時のCPU負荷という観点に関して STM32マイコンに搭載 されるグラフィック用のハードウェアアクセラレーターのクロームアート を用いることで グラフィック描画中 CPU負荷の軽減効果があります しかし クロームアートの活用頻度はアプリケーションまたは GUI 設計 ツールによります 今回ご紹介するタッチGFXは徹底的に STM32マイコン に搭載されるクロームアートを用いることで グラフィック処理 を高速に行うGUI設計ツールですタッチGFXの使用するメモリの 概楽はこちらになります ライブラリー用のメモリに関して 内部ラムは最大で約35キロバイト 内部外部フラッシュは最大で約200キロバイト が必要です 実際に使用されるメモリはアプリケーションの GUI 画面 また画面に含まれるテキストフォントウィジェットの数に依存します 描画される画面のフレームバッファ用のラムはディスプレイ 解像度 色数 フレームバッファ数に依存します 例えば画面解像度は480×272 で 色数は16ビットカラー ダブルフレームバッファを使用するアプリケーション があるとします この場合 フレームバッファに必要なラムの使用量 は計算式のように510キロバイト画像データ用のフラッシュは 使用 する画像データの合計サイズによりますが 通常1から20メガバイトが必要 です 次にTouchGFXの概要2つ目のポイントについて説明します ここではTouchGFXのGUI 設計ツールで提供する機能について触れたいと思います TouchGFXのGUI 設計ツールは他の機能をユーザーに提供します 一つ目 直感的なドラッカンドドロップ操作によるグラフィック画面設計 二つ目 豊富なウィジェットのラインアップ 三つ目 ウィジェット動作内容 を簡単に定義できるダイナミックなインタラクション 四つ目 画面を自由自在にカスタマイズできるソースコード自動生成 五つ目 様々な言語に対応するテキストハンドリング それでは それぞれの機能について説明します TouchGFXはドラッカンドドロップ 操作を採用します それによってユーザーが簡単にGUIコンテンツ を設計できます ウィジェットメニューから対象のウィジェット をワンクリックで選択できます 設計画面上のウィジェットの配置やサイズ 調整をマウスのドラック操作で簡単に行うことができます 当然 一般のツールに備えているコピーベースとデリート リドゥー アンドゥー操作もサポートしますウィジェットとはGUI画面を構成する ための最小単位のグラフィックコンポーネントです TouchGFXの提供しているウィジェット ラインナップはボタン 画像 スライダーという簡単なウィジェットから 指のスワイプ操作で画面を切り変えるスワイプコンテナー 日付の設定によく使われているスクロールリスト 作業進捗などを示すプログレス インジケーターという複雑なウィジェットまで用意しています TouchGFXは各種 のウィジェットをサポートすることでユーザーは1からグラフィック コンポーネントの作成が不要になりますインタラクションとはウィジェット の動作といいます 例えば電子レンジの操作画面上の調理ボタンがあり 調理ボタンをタッチすることで調理が開始するとします この場合 調理開始という動作は電子レンジの調理ボタンのインタラクション といいますTGFXは画面切り替えをはじめ ウィジェット の移動 軌道変更 リサイズ イベント待ちなど 様々なダイナミックな インタラクションを標準サポートすることによりユーザーがウィジェット の動作を簡単に定義することができます さらにユーザーがC++言語のプログラミングを用いて定義済みのインタラクション の内容をカスタマイズすることも可能です TGFXはユーザーが設計 したGUIコンテンツからC++言語のソースコードを自動生成できます この機能 によりGUI画面を通じたシステム正義の実装や独自インタラクション の作成といったコーディングが簡単にできユーザーはGU自在にGUIコンテンツ の作成ができます TGFXは英語 日本語 中国語などの様々な言語 および横書 縦書の技術方向をサポートします またダイナミックテキスト ワイルドカードをサポートすることによりGUI動作中で様々な ダイナミックなテキスト内容の実現が可能になります TGFXのGUI設計ツール の正式名はTGFXデザイナーといいますこのツール画面の中央は作業エリア でGUIコンテンツ設計を行う場所です 画面の左側にスクリーンタブ がありますGUIコンテンツに使用されるウィジェットのビュアーの役割をします 同じ左側にウィジェットメニューがあります ウィジェットメニューでは ボタン 画像 コンテナーという様々なウィジェットのカテゴリー があります ユーザーがウィジェットメニューからウィジェットを作業エリアに持って きてGUI画面の構成を行います 右側には使用されるウィジェットの プロパティとインタラクションタブがあります プロパティタブでユーザー が使用するウィジェットのサイズ配置座標 見た目などの設定を 行っていただきます インタラクションタブでユーザーが使用するウィジェット の動作の定義をしていただきます画面の上のラインには三つボタン があります それぞれの役割はシミュレーション機能 ターゲット実行機能 コード 生成機能です 以上TouchGFXのツール説明となります 続きましてTouchGFX を使ったGUI開発トレーニングの動画をご覧ください 最後までご覧 いただきましてありがとうございました