皆さん こんにちは これから STM32 マイコン 体験実習 グラフィック描画編のハンズオン GUI 画面作成編を行っていきたいと思いますこのハンズオンの目的はTouchGFXの 基本的な使用方法を学習していただくことにあります 今後TouchGFXを用いた GUI 開発を行う際に 本日収穫した知識をもとに より高度な GUI 設計ができるようになっていただきたいと考えております 本日 ハンズオンで使用する機材はF746 リスカバリキット および USB ケーブルです ハンズオンで使用するデータはベッドダウンロードしておいてください また 事前準備としてお手持ちのPCに各種ツール のインストールを行っておいてTouchGFXトレーニングは3つのパート から構成されますLabo 1では GUI画面を作成し ボタン 画像など各種のWizetを画面に追加しますLabo 2ではボタンのインタラクション の作成をしますLabo 3ではボタンのインタラクション をC++言語で実施そうし より複雑な動作を実現します 本 トレーニングでは 前編としてLabo 1のハンズオントレーニング を行っていきます 後編としてLabo 2およびLabo 3のハンズオン トレーニングを予定しておりますご期待くださいLabo 1に入る前にあらかじめトレーニング で使用する画像を外部よりTouchGFXデザイナー に取り込みます事前準備で作成した新規プロジェクト が置かれているTouchGFXプロジェクツフォルダーへ移動してください 事前にダウンロードしていただいたハンズオンデータ内TouchGFX トレーニングマテリアルフォルダーにあるアセッツフォルダーをこの フォルダーにコピーしてください次にエキザンプルF746ディスコ フォルダー以下にあるTouchGFXフォルダーに移動してください このフォルダー にある.touchGFXファイルをダブルクリックしTouchGFXデザイナーを立ち上げます TouchGFXデザイナーで外部より画像データを取り込んでいきます まずはじめにTouchGFXデザイナーにおいてイメージタブを選択します 次に画面左上にあるプラスのマークをクリックしてください ファイルダイアルグが出現しますアセッツフォルダーに移動し アセッツフォルダーにある全ての画像データを選択します 次に ファイルダイアルグのオープンボタンをクリックし選択した 画像をTouchGFXデザイナーに取り込みます最後にキャンバスボタンを選択してください ここまでの作業を微量で確認しましょう エキスプローラー上で事前準備で作成した新規プロジェクターが分かれているフォルダーに移動します事前にダウンロードしておいたハンズオンデータより アセッツフォルダーを同じフォルダーにコピーしておきます 次に作成しておいたプロジェクトフォルダーに移動します TouchGFXフォルダーに移動し以下にある.touchGFXファイルをダブルクリックしてTouchGFXを起動しますTouchGFXデザイナーが起動しましたら 回避より画像データを取り込んでいきますイメージタブを選択します 画面左上にあるプラスボタンをクリックして 取り込むファイルを選択します アセッツフォルダー以下にあるすべての画像データを選択します 画像データを選択しましたらオープンボタンをクリックします 外部画像ファイルが取り込めたことが確認できます 最後にキャンバスタブをクリックし編集画面に戻ります ここからラブ1に入りますラブ1ではGUI画面の作成および ビジェットの追加を行いますまずラブ1の学習内容についてご紹介します ラブ1を通じて以下の内容を皆さんに学んでいただきたいと思います 1つ目がTouchGFXデザイナーを使用したGUI画面の作成方法について 2つ目がTouchGFXが提供するウィジェットであります画像ウィジェットおよび ボタン ウィジェットの使い方についてです ラブ1で作成していただく 内容は以下のとおりです ラブ1では皆さんに2つのGUI画面を 作成していただきます スクリーン1というGUI画面と スクリーン2というGUI画面です 各GUI画面に画像とボタンのビジェットを配置します なおボタンにインタラクションを追加する手順については トレーニングの後編で説明する予定ですスクリーン1のGUI画面の構成について ご説明します スクリーン1では以下のウィジェットを使用しています 背景画像およびTouchGFXロゴにはイメージウィジェットを使用しています また スクリーンの右側にある矢印ボタンにはボタンウィジェットを使用して おり ボタンを押すとスクリーン2に切り替わるというインタラクション を実装しています スクリーン2のGUI画面の構成について ご説明します スクリーン2では以下のウィジェットを使用します 背景画像および電球にはイメージウィジェットを使用しています 電源ボタン およびスクリーン1に切り替えるための矢印ボタンにはボタン ウィジェットを使用しています スクリーン2に含まれるインタラクション は以下の二つがあります 一つ目は電源ボタンを押すために電球 がオンオフに切り替わると同時に評価ボードのLEDもオンオフ に切り替わるという動作 二つ目のインタラクションは画面切り替え ボタンを押すとスクリーン1に切り替わるという動作です それでは 実際にTouchGFXデザイナーを操作してみましょう まず スクリーン1と スクリーン2を作成します ツールのデフォルト設定でスクリーン1 が既に作成されていますので実際にはスクリーン2のみを 作成します では実際に作業に移っていきたいと思います 画面 左上にあるスクリーンタブを選択してください プラスのマークをクリック するとスクリーン2が作成されますツリー表示でスクリーン1の下に スクリーン2が現れることを確認してください この後 スクリーン1 の編集を行います ツリー上でスクリーン1をクリックします ここ で補足事項がございますTouchGFXでは2のスクリーンをスタート アップ画面として設定することが可能です 画面右側にあるプロパティ タブをクリックしてスタートアップスクリーンを選択することで スタート アップ画面を設定できます本トレーニングでは スクリーン1 をスタートアップ画面としますので スタートアップスクリーン セクションでスクリーン1が選択されていることを確認して ください 次に背景を追加します画面左上 ウィジェットタブを選択します ウィジェットメニューが表示されますので そこからイメージウィジェット を選択します イメージウィジェットがウィジェットメニューに表示されて いない場合には ウィジェットメニュー右側のスクロールバーをした方向 にドラックしてください ウィジェットメニューに表示しきれないウィジェット が表示されます 操作を続けます画面左上 スクリーンタブを選択します スクリーンを構成する要素がツリ表示されます ツリ表示の中で スクリーン1の隣にある下向きの矢印をクリックします スクリーン 1で使用されているウィジェットの一覧が表示されますので 先ほど 追加したイメージ1画像ウィジェットを選択します 画面右側 プロパティタブをクリックし ネームセクションにおいて 追加した画像ウィジェット の名前を変更します プロパティタブにあるイメージセクションにて 画像 メニューを開いて 使用する画像データを選択します プルダウンメニュー にある画像の上にマウスを移動すると 画像メニューに表示されて いる画像が拡大され 画像の内容と画像名を確認することが できます ここまでの作業を微量で確認しましょう 画面左上 スクリーンタブ を選択します プラスボタンをクリックし スクリーン2を追加します 釣り表示でスクリーン1をクリックし スクリーン1に移動します 右側 のスタートアップスクリーンセクションで スクリーン1がスタートアップ スクリーンであることを確認します スクリーン1に背景を追加 します ウィジェットタブをクリックし ウィジェットメニューに移動します イメージ ウィジェットをクリックしウィジェットを追加します スクリーン タブをクリック 釣り表示でスクリーン1で使用するウィジェットの一覧 を確認します イメージ1を確選択し プロパティタブを選択 プロパティ メニューで名前を変更しますイメージセクションで使用する 画像データを選択します プルダウンメニュー上でマウスオンで画像が拡大 され 画像ファイル名が確認できます次に背景画面の上にTouchGFXログ を追加していきます 画面左上ウィジェットタブを選択します ウィジェットメニュー にてイメージウィジェットを選択します 次に画面右側プロパティ タブをクリックし ネームセクションにて追加した画像ウィジェット の名前をTouchGFXに変更します同じくプロパティタブにあるイメージ セクションにて画像メニューを開いて使用するTouchGFXログの画像を選択します 最後に同じくプロパティタブにあるロケーションセクション にて配置座標を入力します 引き続きスクリーン位置に画面を切り替える ボタンを配置していきます 画面左側ウィジェットメニューより ボタンウィジェットを選択します次に画面右側プロパティタブにある ネームセクションにて追加したボタンウィジェットの名前を入力します 同じくプロパティタブにあるロケーションセクションにてボタンの配置座標 を入力します 今回ボタンの画像を落としてTouchGFX標準のイメージ じゃなく外部から取り込んだ独自のイメージを使用するため以下の 設定をします まずプロパティタブにあるスタイルセクションにて ノースタイルを選択します 次にボタンが押されていないときの画像を設定 します イメージセクションのリリースとイメージのプルダウンメニュー から使用する画像を選択します同様にボタンが押されているとき の画像を設定します プレストイメージのプルダウンメニュー から使用する画像を選択しますここまでの作業を微量で確認 しましょう まずTouchGFXロゴを配置します フィジェットタブを選択 フィジェットメニューよりイメージフィジェットを選択します 次に画面右側 プロパティタブを選択 ネームセクションにて フィジェットの名前を入力しますイメージセクションで使用する 画像を選択します 最後にロケーションセクションにて配置座標を入力 します 次に画面切り替えボタンを配置していきます フィジェット メニューでボタンをウィジェットを選択します フィジェットの名前 を変更していきます配置座標を入力します 今回ボタン の画像としてTouchGFX標準のものではなく 外部から取り込んだもの を使用するため以下の設定をしていきます スタイルセクション にてノースタイルを選択します次にボタンが押されていないとき の画像を設定します リリースとイメージで使用する画像を選択 してください 最後にボタンが押されて次の画像をプレストイメージで設定 します 引き続きスクリーン2の画像を作成していきます まずスクリーン2 を編集画面として設定します 画面左上スクリーンタブを選択します 次 表示でスクリーン2を選択します次にウィジェットタブを選択します ウィジェット メニューよりイメージウィジェットを選択します 作業を進めていきます 画面左上スクリーンタブを選択します 次が表示される ことを確認し スクリーン2の隣にある下向きの矢印マークをクリック します スクリーン2で使用されてるウィジェットの一覧が確認できる ことが分かります ウィジェットの一覧より先ほど4のステップ で追加したイメージ画像ウィジェットを選択します 画面右側 プロパティ メニューにあるネームセクションにて ウィジェットの名前を bg アンタースコアイメージで変更します同じくプロパティメニューにあるイメージ セクションにて 使用する画像イメージを選択します スクリーン2に 電球画像を追加していきます画面左上 ビジェットタブを選択します ウィジェットメニューよりイメージ ビジェットを選択します 画面右側 プロパティ メニューにあるネームセクションにて 先ほど追加した画像ウィジェットの名前をバルブと変更して入力します プロパティ メニュー ロケーションセクションにて配置座標を入力します 最後にイメージセクションにて使用する画像イメージを選択します 次に スクリーン2に電源ボタンを追加します 今回 ボタンをスタビにオン オフの状態が切り変わるという実装をするため トクルボタンウィジェットを使用します ウィジェットメニューより トクルボタンウィジェットを選択してください 次に画面右側 プロパティ タブにあるネームセクションにて追加したボタンウィジェットの 名前を入力します 同じくロケーションセクションで配置座標を入力します ボタンの画像として外部より入力した画像を使用するため スタイル セクションでノースタイルを選択します ボタンを話した時の画像を選択するため リリースとイメージ セクションで使用する画像を選択します 最後にボタンが押された時の画像を選択するため プレストイメージセクション で使用する画像を選択します次にスクリーンに画面切り替えボタン を配置します 画面左側ウィジェットメニューよりボタンウィジェット を選択します 次に画面右側プロパティメニューにおいて 先ほどと同様ウィジェットの名前 配置座標 画像 イメージを選択していきますここまでの作業内容を微量で確認 しましょう スクリーン2に背景を追加していきます スクリーン2を編集画面 に設定します スクリーンタブを選択し スリー表示でスクリーン2をクリック します 次にウィジェットタブを選択します ウィジェットメニュー からイメージウィジェットを選択します スクリーンタブを選択します スリー表示で追加したイメージウィジェットを選択します 画面右側 プロパティメニュー内 ネームセクションにおいてウィジェットの名前を変更します 最後にイメージセクションにおいて使用する画像を選択します 次に 電球の画像を追加します ウィジェットメニューよりイメージウィジェット を選択します 画面右側プロパティメニュー内 ネームセクション で追加したウィジェットの名前をバルブに変更します ロケーションセクション において配置座標を設定します イメージセクションにおいて使用する画像 を設定します 電源スイッチを追加します ウィジェットメニュー から トグルボタンウィジェットを選択します プロパティメニュー内 ネームセクションでボタンビジェットの名前を変更します ロケーション セクションにおいてボタン配置座標の値を入力します 今回 ボタンの画像データとしてタッチジェフェクス標準のデータではなく 外部入力の画像データを使用するため スタイルセクションにおいて ノースタイルを選択します イメージセクション リリーストイメージ でボタンを離したときの画像データを選択します プレストイメージ でボタンが押されたときのイメージを選択します 最後に画面切り 替えボタンを追加します ウィジェットメニューよりボタンウィジェット を選択します 画面右側 プロパティメニュー内 ネームセクションにおいて ウィジェットの名前を変更しますロケーションセクションで配置座標 を入力します 電源ボタンの場合と同じよう スタイルセクション でノースタイルを選択 リリーストイメージでボタンを離したとき の画像を選択 プレストイメージセクションでボタンが押された ときの画像を選択します以上でSTM32マイコン 体験実習 グラフィック描画編のハンズオンGUI画面作成編を終了します 今回の ハンズオントレーニングではGUI画面の作成及びウィジェットの追加 について学習ができました 本トレーニングの後編としてラボ にボタンのインタラクションの作成及びラボさんボタンの インタラクションをC++言語で実装を予定しております 準備が整いましたら STMicro Electronicsよりご案内いたします 本日はハンズオン トレーニングに参加していただきありがとうございました