皆さん こんにちは これからSTM32 マイコン 体験実習 グラフィック描画編のハンズ音を行いたいと思います 本編ではTouchFXのウィジェットの動作であるインタラクションの 基本について拡充します 前編であるGUI画面作成編で作成した GUIを使用し インタラクションを作成することでGUIに動作は 追加することが可能になります本実習ではGUI画面作成編で作成 したTouchFXプロジェクトを使用します前編のYouTubeビデオをご覧いただき プロジェクトを準備してくださいラボ2ではTouchFXデザイナーにあらかじめ 用意されているインタラクションを使用して ウィジェットのインタラクション を作成します 作成するインタラクションの内容を説明します ラボ1で作成 したGUIにインタラクションを追加します 具体的には スクリーン 1の画面切替ボタンにボタンをクリックすると スクリーン2に移動するインタラクションを追加します 同様にスクリーン2の画面切替ボタンにボタンをクリック すると スクリーン1に移動するインタラクションを追加します では 実際にGUIにインタラクションを追加していきます まず スクリーン1のネキストボタンに 画面移動のインタラクション を追加します 初めにスクリーンタブを選択します ウィンドウ左側に表示 される通り スクリーン1をクリックします 次に画面右側インタラクション タブをクリックします 最後に青いアドインタラクションボタン をクリックし 新規インタラクションを作成します 続きまして 具体的な インタラクションの動作を設定していきます 画面右側 インタラクションタブにて設定します 全ての項目はプルダウンメニュー より選択可能です 初めにトリガーを設定します GUI上でインタラクション を開始するためのトリガーの内容を設定します ボタンいずクリック と選択することで ボタンのクリックがインタラクションの トリガーとして設定されましたちなみに選択肢にあるスクリーン イズエンタードは スクリーンが表示されたら自動的に開始されるインタラクション を作成する場合に使用します次にチューズクリックとソース を設定します一で指定したトリガーとなる ボタンを設定しますここではネキストボタンを選択 することで ネキストボタンをトリガーとなるボタンとして 設定しました次にアクションを設定します インタラクションの内容を設定します チェンジスクリーンを選択 することで インタラクションとしてスクリーンの移動が設定されました 次にチューズスクリーンを設定しますここでは移動先のスクリーンを 指定します スクリーン2を選択することで スクリーン2が移動先 スクリーンとして設定されました次にトランジションを設定します トランジションでは スクリーン移動時の視覚効果を設定します スライドとは 現在のスクリーンと移動先スクリーンが連続して 滑るように移動する視覚効果ですカバーを選択すると 次のスクリーン が移動してきて 現在表示されているスクリーンを覆うような視覚効果 が得られます 最後にトランジションディレクションを設定します 次の スクリーンがスライドしてくる方向を指定します イースト ウエスト ノース サウスは それぞれ 地図上の方向に対応しており イースト を選択すると 画面の右側から次のスクリーンがスライドして きます ノースならば 上側から次のスクリーンがスライドして くるような視覚効果が得られます前のページで作成したインタラクション をTouchEffectsのシミュレーション機能で確認していきます 画面 上のLANシミュレーターボタンをクリックし シミュレーターを起動させます シミュレーターが起動するまでには使用するPCの性能によって異なります が 多少時間がかかります 実際にシミュレーション機能で確認して みましょう 画面上側LANシミュレーターボタンをクリックします シミュレーターが起動するまでには多少時間がかかります シミュレーターが起動しました 先ほど作成したインタラクションが正しく 動作していることが確認できます次にバックボタンにインタラクション を追加していきます 画面左側スクリーンタブよりスクリーン2をクリック します 画面右側インタラクションタブをクリックします 青色のアド インタラクションボタンをクリックし 新規インタラクションを作成 します 作成したインタラクションに動作の内容を設定していきます 初め に トリガーにボタンをクリックと選択します 次にチューズ クリック とソースにプレダウンメニューよりバックボタンを選択 します 次にアクションにプレダウンメニューよりチェンジスクリーン を選択します チューズスクリーンにスクリーン1を選択します トランジション にスライドを選択します 最後にトランジション ディレクションにウェストを選択します 評価ボードを使用して ここ まで作成したインタラクションの動作を確認します 評価ボード には F746ディスカバリーを使用します 評価ボードをPCにUSBケーブル で接続してください その後TouchFXデザイナーの右上にある ランターケットボタンをクリックします 評価ボードにTouchFXが生成 したプログラムが転送されますでは実際に評価ボードを使用して 確認 してみましょう TouchFXデザイナーのランターケットボタンをクリック して プログラムをボードに書き込みます TouchFXデザイナー でプログラムをビルドするのに多少時間がかかります ボード のLEDが点滅するのが確認できます ビルドが終了し バイナリ データをボードに書き込んでいますデータの転送が終わり プログラム が起動しました 評価ボード上で作成したインタラクションが正しく 動作することが確認できました続きましてラボさんの内容に移 ります ラボさんではインタラクションの内容をC++コードで実装する 方法を学習していきます 具体的にはTouchFXデザイナーを使用して 作成 したGUIコンテンツのソースコードをジェネレートします その後 ジェネレート したソースコードを編集してウジェットのインタラクション を実装します なお本ラボで使用するソースコードは事前配布した データの中に含まれますのでご参照ください まず スクリーン 2の 電源ボタンのインタラクションをC++コードで実装していきます インタラクションの内容は以下の通りです パワーボタンを押す たびに スクリーン2の電球のグラフィックがオン オフに切り替わります 同時 にディスクバリキットに実装されているLEDがオン オフします ここでTouchFXのソフトウェア構造について説明いたします TouchFXデザイナー はシステム全体とやり取りするため モデル ビュー プレゼンター MVPと呼ばれるソフトウェア構造を提供します MVPは主に3つのクラス で構成されます 各クラスはそれぞれの役割があります モデルクラス は実機とのインターフェースを担当いたします ビュークラス は GUI画面の表示を担当しますプレゼンタークラスはGUI画面のロジック を担当します TouchFXはGUIとシステム間のやり取りをする枠組みを提供します ユーザーは各MVPクラスの詳細実装を行いGUIを完成させます それでは このMVPソフトウェア構造を利用してどのようにボタンの インタラクションを実装するかを見ていきましょう MVPソフトウェア構造 を用いて電源ボタンのインタラクションを実装するアルゴリズムについて 説明します プレゼンタークラスはビュークラスあるいはモデルクラス かのイベントを受け取るとイベントの内容に基づいてGUI画面を更新 する指示をビュークラスに出したりあるいはシステムとのやり取り を行う指示をモデルクラス本実習では以下のように実装します 電源ボタンが押されるとビュークラスは電源ボタンが押されたという イベントをプレゼンタークラスに通知します プレゼンタークラス がビュークラスから受け取った通知に基づいてGUI上の電球のオン オフを切り替える指示をビュークラスに出します ビュークラスがGUI上の電球をオンオフにする制御を行います 実装方針をまとみますビュークラスにて電源ボタンを押すイベント を作成しますラボ2で既に作成したバックボタンを押すとスクリーン を移動するインタラクションと同じように電源ボタンを押すとプレゼンター クラスの関数を実行するインタラクションを作成します プレゼンタークラス にて電源ボタンが押されたときにGUI上の電球をオンオフする指示 をビュークラスに出す関数を作成します この関数は丸位置で電源ボタン が押されるとコールされますビュークラスにてGUI上の電球をオンオフ にするための関数を作成しますではビュークラスにて電源ボタン を押すイベントを作成しますスクリーン2のパワーボタンに インタラクションを追加していきます 画面左側スクリーンタブ においてスクリーン2をクリックしスクリーン2を選択します 次に画面右側 インタラクションタブをクリックします 青いアドウインタラクションボタンをクリックし新規インタラクション を作成します インタラクションの内容を設定していきます まず トリガーとしてボタンイズクリクトを選択します 次に チューズクリクトソースにてパワーボタンを選択します アクション にコールにヴァーチャルファンクションを選択します これによりボタン を押したときのインタラクションとしてヴァーチャルファンクション をコールするという設定がなされました ファンクションネーム にパワーボタンプレストを入力しますインタラクションの設定が終わりましたら 最後にジェネレートコードをクリックしコードを生成します 画面左下で ジェネレートコード弾のメッセージが出ることを確認してください 電源 ボタンを押した際にコールされるビュークラスの関数 パワーボタン プレスト 関数をC++で実装していきます まずSTMさんにCube IDEを起動しますプロジェクタフォルダー内のSTMさん にCube IDEフォルダー以下にある.projectファイルをダブルクリックしSTMさん にCube IDEを起動しますSTMさんにCube IDEでプロジェクト をビュードして選ばないことを確認してください 画面左側のファイル ツリーよりスクリーン2ビュー.cppファイルを開きます ファイル先頭にあるインクルド技術の行で右クリックし プルダウン メニューからオープンデクラレーションを選択してヘッダーファイルスクリーン 2ビュー.hppファイルを開きますヘッダーファイルのプロテクテッド 宣言エディアにパワーボタンプレスト関数のプロスタイプ宣言を追加 します その後スクリーン2ビュー.cppファイルを編集するために戻ります スクリーン2ビュー.cppにパワーボタンプレスト関数の内容を技術していきます この関数の内容はスクリーン2プレゼンタークラスのトグルライト関数を実行 するという内容です 技術内容は事前に配布したデータのラボさん ホルダー内に同名のソースコードがありますのでそこからコピー することができます 次にパワーボタンプレスト関数内でコールされるプレゼンター クラスのトグルライト関数の内容を作成します ファイル2Dよりスクリーン2プレゼンター.cppファイルを開きます インクルード分の上で右クリックしプルダウンメニューよりヘッダーファイル を開きます ヘッダーファイル内のパブリック宣言エリアにトグルライト 関数のプロスタイプ宣言を追加します プライベート宣言エリア に変数ライトステートの宣言を追加します スクリーン2プレゼンター.cppに戻りますスクリーン2プレゼンター.cppファイル の編集をしていきます まずアクティブ関数の内容を追加します 次にトグルライト 関数の内容を実装しますこの関数ではライトステート編数 の値に応じてスクリーン2ビュークラスのスイッチバルブオン およびスイッチバルブオフ関数を実行します なお 技術内容の詳細は 事前ハイフデータ内のソースコードにて参照ください ビュークラスにGUI上の電球をオンオフにするための関数スイッチバルブオン スイッチバルブオフ関数を実装していきます スクリーン2ビュー HPPのパブリック宣言エリアに関数のプロスタイプ宣言を追加します スクリーン2ビュー.cppファイルを編集していきます インクルード分をファイルの先頭に追加します スイッチバルブオン およびスイッチバルブオフ関数の内容を工術していきます これらの関数はバルブのイメージビジェットに引数で指定された それぞれオン およびオフのビットマップイメージを表示します ビットマップ関数の引数ビットマップ アンダースコアイディは タッチGFXデザイナーに取り込んだイメージデータを表しており ビットマップデータベース.hppファイルで参照可能です タッチGFXデザイナーのシミュレーション機能を使用し ここまで実装した インタラクションの動作確認を行います STMさんにCube IDを使用してビルドを行い 偉やがないことを確認しますCube IDのツールバーで Project Build Allと選択しますその後 タッチGFXのシミュレーション機能を実行します電源ボタンをオン オフすると 電球の色が変わることを確認できましたでしょうか 引き続き 電源ボタンを押すと評価ボード上のLED位置をオン オフにする動作を実装していきます電源ボタンを押されると View Classは電源ボタンを押されたというイベントをプレゼンタークラスに通知します プレゼンタークラスは Viewクラスから受け取った通知に基づいて 電源ボタンを押されたと判断し評価ボード上のLED位置をオン オフに切り替える指示をモデルクラスに出します 指示を受け取るとモデルクラスが実際に評価ボード上のLED位置を オン オフに切り替える制御を行います 実装方針をまとめますまる 1 View Classにいて電源ボタンのイベントを作成しますこのイベントは実は既にTouchExデザイナーを用いて イントラクション2として作成されています まる 2プレゼンタークラスにいて電源ボタンを押されたという通知を受けて LED位置をオン オフに切り替える指示をモデルクラスに出す 関数を作成しますまる 3 モデルクラスにいて LED位置をオン オフに切り替えるための関数を作成します TouchExデザイナーで作成したインタラクションはどのように生成されるコードに 反映されるのでしょうかここに示すようにScreenViewBase.cppファイルに スクリーンごとにインタラクションの内容が記述されます ViewBase ClassにはTouchExデザイナーによって作られたGUIコンテンツのコードが生成されますしかしこのファイルの属性はリードオンリーなので 生成されたコードをユーザーが直接編集してGUIをカスタマイズすることはできませんではどのようにGUIをカスタマイズするのでしょうか実際にはViewClassにコードを記述することで カスタマイズが可能になりますViewClassはViewBase Classを軽称しているためTouchExデザイナーで作成したGUIを基にユーザーが独自に カスタマイズをすることが可能になりますmodel.cppファイルを開きます ファイルの戦闘にあるインクル度行の上で右クリックし プルダウン メニューからオープン・デクラレーションを選択しmodel.hppファイルを開きます ヘッダーファイルのパブリック宣言エディアに2つの関数 ターンオン LED関数 およびターンオフLED関数のプロタイプ宣言を追加します 追加したらmodel.cppファイルの編集に戻ります ここに記載しているインクル度分をmodel.cppのファイル戦闘のインクル度宣言エリアに追加します ここでsharpifndefシミュレータをコードに追加する理由について 説明します TouchDFXデザイナーはシミュレーション機能があります シミュレーションでは実機を操作できません モデル.cppに実装したソースコードは実機を操作するためのソースコード です 従ってシミュレーションの際こちらのソースコードを実行しない ようにsharpifndefシミュレータ技術を追加します 引き続きターンオン LED関数およびターンオフLED関数の内容を記述 していきますスクリーン2プレゼンター.cppの編集 をします トグルライト関数にターンオフLED関数およびターンオフLED関数 をコールする機能を追加します最後にmcuのgpiをopinの設定を行います メイン.cファイルを開きメイン.c内のmx アンダースコア gpiを アンダースコアイニット関数に評価ボードのLED1につながる gpiをpin1を アウトプットモードに設定するコードを追加します これでコード の編集は終了です STMさんにcubedideでビルドを行います ビルド後 偉がないことを確認してくださいその後STMさんにcubeプログラマ を用いて生成したバイナリーファイルを評価ボードにダウンロードし 動作を確認してください STMさんにcubeプログラマの使用法について説明します 本実習では生成したコードを評価ボードにダウンロードするのに STMさんにcubeプログラマを使用しますこのツールの使用方法について 簡単に説明しますまずプログラムを起動します 次に 外部メモリーにコードを書き込むのに使用する エキスターナル ローダーを設定します 画面左側のツールメニューより エキスターナル ローダーを選択します その後メインウィンドウで使用する エキスターナル ローダーを選択しますツールメニューのコネクテッド を選択し PCと評価ボードを接続します 次にダウンロードする バイナリーファイルを設定しますツールメニューのイレーシング&プログラミング を選択します ファイルパスのブラウズボタンをクリックし ダウンロードする バイナリーファイルを設定しますランアフタープログラミングオプション が選択されていることを確認してください ダウンロードする ファイルが指定できましたらその後 ダウンロードを開始します スタートプログラミングボタンをクリックし ダウンロードを開始 します ダウンロード終了後ログでエラーがないことを確認 してください では実際に評価ボードに作成したコードをダウンロード します まずはエキスターナルローダを設定します 画面左側のツール メニューよりエキスターナルローダを選択します メイン画面にて 使用するボードのエキスターナルローダを選択して ください 次に画面右上ツールメニューのコネクテッドボタン をクリックし PCと評価ボードを接続します ボードとの接続状況 は画面右上の表示で確認できます次にコードをダウンロードしていきます ツール メニューのイレーシングアンダプログラミングを選択します ファイルバスのブラウズボタンをクリックし ダウンロードする バイナリーファイルを指定しますランアフタープログラミング オプションを選択した後 スタートプログラミングボタンをクリック しダウンロードを開始しますダウンロードが終了しましたら ログ 表示画面でエラーがないことを確認します 評価ボードで動作を確認します ディスプレイ状の電源ボタンをタッチすると 電球のグラフィック の色が変わることが確認できますまた評価ボードに実装されている LED が殿滅することが確認できます本実習のまとめです タッチ GFX 材難を使用することで STM32マイコン上で簡単にGUI 設計ができます 本実習ではウィジェットの操作 インタラクションの追加 および 設計されたGUI動作を確認する方法について学習しました タッチ GFXデザイナーは無償ツールです STM32マイコンを使用したGUI 設計にぜひご活用ください最後にタッチ GFXの参考資料を ご紹介します ぜひご活用ください以上をお持ちまして STM32マイコン 体験実習 グラフィック描画編のハンズ音を終了いたします ご清聴ありがとうございました