皆さんこんにちは これからSTM32マイコン 体験実習 グラフィック描画編のハンドゾーンを行いたいと思います 本編ではマイコンに対する外部入力をGUIの上で表示する方法を 学習していきます マイコン外部入力をGUI上に表示させる上で重要 な概念であるモデルビュー プレゼンターのMVPモデルについて より深い理解が得られます 本実習はラボ1とラボ2の2つに分かれています それぞれ ADCのアナラグ入力とGPIO入力をGUI上に表示させる方法 について学習します 本ビデオは前半のラボ1の内容になります ラボ1で収得できる知識は以下のとおりです テキスト ビジェットの使い方 特にワイルドカードについて学習できます ワイルドカードというテキストビジェットの機能を使うことで テキスト ビジェットを編数として扱うことができます ワイルドカード を使用することで ADCのアナラグ入力をモニターしてGUI画面に 表示させることが簡単に実現できます そのほか ADCからのアナラグ 入力のモニターにフリアルトスを使用しますので フリアルトスの タスクの定義 通信方法 MVPモデルにおけるタスクのモニター方法 について学習ができます ラボ1の実習の内容は以下のとおりです 2ページのスワイプコンテナを作成します 1つは ADCのアナラグ 入力の表示に使用しますもう1つはGPIを入力の内容を 表示させるために使用します こちらはラボ2でご紹介する内容になります 次に ADCのアナラグ入力値の表示のため テキスト ビジェットを使用します テキスト ビジェットのワイルドカード機能を使用し 入力した アナラグ値を編数として扱います ADC値を取り込む ためにフリアルトスのタスクを使用します タスクを作成し ADCタスク と GUIタスク管の通信のため メッセージQを作成します アナラグ入力値を GUIに表示させるため GUIのMVPクラスを編集していきます では実習に移っていきたいと思いますまず初めにTuttleXを起動し 新規プロジェクトを作成しますPCのスタートメニューからTuttleXデザイナー を選択しTuttleXを起動しますTuttleXが起動しましたら 画面左側 クリエイトタブをクリックしてくださいTuttleXボードセットアップ TBS選択画面になりますので 今回使用するボードSTM32F746Gディスカバリキット を選択します セットアップのバージョンは画面右側R1の部分で確認できます ので 今回使用するバージョンV3.0.9となっていることを確認してください 次にアプリケーションネームおよびアプリケーションディレクトリ に適切な名前を入力してください最後に画面右下クリエイトボタン をクリックして 新規プロジェクトを生成します 次にトレーニングで 使用する画像データを取り込みます 画像データは視線に配布 したトレーニング用データの中にありますので エキスプローラー を使用してTuttleXプロジェクトの下にあるアセットフォルダー にコピーします データのコピーが終了しましたら 次にTuttleX上での 作業に移ります 画面左側イメージタブを選択します 次に画面中央 プラスボタンをクリックしますファイルダイログ画面がポップアップ しますので アセットフォルダーに移動し アセットフォルダー 内にあるすべての画像データを選択します オープンボタン をクリックすると画像データを取り込めます 最後にキャンバス タブに戻ります画像の取り込みが終了しましたので 自由愛の作成を行っていきますまずスワイプコンテナを作成します 画面上側 ビジェットメニューからコンテナ スワイプコンテナを選択します 次に画面右側 プロパーティーメニューでスワイプコンテナの設定を行 います ネームメニューにスワイプコンテナと入力します ロケーションメニューでウィジェットの配置座標を設定します ビジブルチェックボックスにチェックを入れます 次にスワイプコンテナ にて 現代表示されているページを表す ページインジケーターの設定 を行います ショーページインジケーターチェックボックスにチェック を入れます センター ホリゾンタリーチェックボックスにチェック を入れます 最後にインジケーターの配置座標を設定します 以下 の手順は ページインジケーターでカスタムのイメージを使用する ための設定になります スタイルメニューでノースタイルを選択 します ノーマルイメージおよびハイライテッドイメージで使用 するイメージファイルを選択します スワイプコンテナの イページ名を追加します 画面左側グジェットツリーでスワイプ コンテナを選択します 次に画面右側ページメニューでプラスボタン をクリックしコンテナページスワイプコンテナページ2を追加します プルダウン メニューからスワイプコンテナページ1を選択します この プルダウン表示で選択したコンテナのページは実際の GUI 動作においてデフォルトで表示されます コンテナの1ページメニュー 背景画像を追加します ウィジェットメニューよりイメージフィジェット を選択します ネームメニューでウィジェットの名前を入力します イメージ メニューで使用する画像ファイルを選択します ウィジェットツリーで作成したウィジェットをマウスでスワイプ コンテナページ1の下にドラッグを使用します 同様にしてコンテナ の2ページメニューの背景を設定します 次にコンテナページ1に アナログ入力表示用のテキストウィジェットを配置します 整数部 と小数部にバイルドカードを使用します 小数点及び単位の表示 には固定なテキストを使用しますテキスト表示部分を作成します テキスト表示にはボックスウィジェットを使用します ウィジェット メニューよりボックスウィジェットを選択します ネームメニューでウィジェットの名前を入力します ロケーション メニューでウィジェットの配置座標およびボックスのサイズ を設定します カラーのプルダウンメニューでボックスの色を設定 します アルファーチでボックスの透明度を設定します スクリーン タブを選択します ウィジェット釣り上で作成したボックスをマウス でスワイプコンテナページ1内にドラッグします ワイルドカード を使用するため 新たにテキストのタイポグラフィ 定裁を作成します 画面左側 テキストタブを選択します 次に画面上側 タイポグラフィ タブを選択します アドニュータイポグラフィボタンをクリック すると 新しいタイポグラフィが追加されます 追加されたタイポ グラフィの名前はmyfont01となっていますので 各種設定をこの表の 中で行います ワイルドカード機能を使用して表示するテキスト の範囲を設定します 追加したワイルドカードのワイルドカード キャラクターにマイナスを入力しますワイルドカードレンジに0-9 と入力します これでワイルドカードに表示させるテキストとして 0から9の数字およびマイナス記号が指定できました 前のページで作成 したタイポグラフィを用いてリソーステキストを作成します リソーステキストは繰り返し同じテキスト設定を使用する 場合に便利な機能です ここで作成したリソーステキストを使用して アナログッジの表示を行うことにします 画面上側リソースタブ を選択します アドニューリソースボタンをクリックし 新たなリソーステキスト リソースID1を生成します リソースID1のタイポ グラフィメニューより先ほど作成したタイポグラフィを選択します アライメントメニューでテキストの配置を選択します テキスト値に カッコディ ワイルドカード値を入力します 同様にして 2つのリソーステキスト リソースID2およびリソースID3を作成します リソースID2のテキスト値にはドットと入力します リソースID3のテキスト値にはVと入力します これら2つのリソーステキストはワイルドカードではなく 固定のテキスト値を出力するために使用します 最後にキャンバスタブ を選択しコンテナページの編集に戻ります アナログ入力の整数 部を表示するテキストウィジェットを追加します 画面上側 ミジェットタブより テキストエリアウィジェットを選択します 画面右側 プロパティ メニューで ミジェットの設定を行います ネームメニューで ミジェットの名前を入力します テキストエリア のサイズを固定するためにオートサイズ チェックボックス から チェックを外します ロケーションメニューで テキストエリアウィジェット の配置座標 親び テキストエリアのサイズを入力します リソーステキスト を使用するため テキストメニューよりリソースタブを選択します リソースID プルダウンメニューから使用したいリソーステキスト を選択します ワイルドカードボタンを選択 プルダウンメニュー にて ユーズ ワイルドカードバフは チェックボックスに チェック を入れます カラーメニューで ミジェットの色を設定します 最後に ミジェット 釣り上で作成した テキストウィジェットをコンテナページ1以下に移動 させます 同様にアナログ値の小数部表示用のテキストウィジェット を追加していきます ミジェットメニューより テキストエリアウィジェット を選択します 先ほど作成した青数部表示用 テキストウィジェット と同様に設定を行います 設定が終わりましたら 作成したテキストウィジェット を ミジェット釣り上で スワイプコンテナページ1内にドラッグします 小数点を示すテキストウィジェットを追加します ミジェットメニュー より テキストエリアウィジェットを選択します 先ほどと同様 テキストエリアウィジェットの設定を行います ここでは 小数点 を表すリソーステキストを使用するため リソースIDプルダウンメニュー でリソースID2を選択することに注意してください 設定が終わりましたら 最後に作成したテキストウィジェットをコンテナページ1に移動させ ます 電圧の単位を表すテキストを同様の手順で追加します 小数点 を表すテキストウィジェットと同様に設定をしていきます リソースID2 リソースID3を選択することに注意してください 設定が全て 終わりましたら 先ほどと同様作成したテキストウィジェットを コンテナページ1に移動させますここからはSTM32 Cube MXを使用して ADC3の入力 IN0を有効化させる手順を説明します ADC3のIN0はF746 リスカバリーキットのピンA0に割り当てられます まずプロジェクト ホルダ直下にある.iocファイルをダブルクリックしSTM32 Cube MXを 起動します その際ここに示すようなワーニング画面が出ましたら 最新のCube Fanwareに更新する必要がありますので マイグレート ボタンをクリックしてくださいSTM32 Cube MXを起動後 画面左側の メニューより アナログ ADC3を選択します ADC3モード&コンフィギュレーション画面にて IN0をチェックします 引き続きSTM32 Cube MXを使用してフリーアルトス関連の設定を行います 初めに画面左側のMiddlewareタブでフリーアルトスを選択します デフォルトタスクを編集してAD変化のためのタスクを作成します コンフィギュレーションWindows内のタスク&Cubeタブをクリックし タスク1欄にあるデフォルトタスクをダブルクリックします タスクネーム及びエントリーファンクションの名前を変更しOKをクリックします 以上でADCのニューロクピンの設定及びフリーアルトス関連の設定は 終わりです 画面右上GenerateコードをクリックしSourceコードを更新します なおTouchFXボードセットアップバージョン3.0以降では デフォルトの IDEがCube IDになっていますので EWARMを使用する場合には Project Managerタブツールチェーン IDEをクリックし EWARMを選択してください ここまで終了しましたらGUIコンテンツのコードを生成します TouchFXデザイナー に戻り 画面右下のGenerateコードボタンをクリックします ここからは ADCの変換を行うための技術をコードに追加していきます ADCさんに入力されたアナログ値をデジタル値に変換するタスクを フリーアルトスのタスクとして記述します 前のパートで作成した フリーアルトスのADCさんタスク内にタスクを記述します .projectファイルをダブルクリックしSTMさんにCube IDEを起動し メイン .cファイルを編集しますAD変換用の変数をメイン .cファイル内のユーザー用プライベート変数エリアに追加します ここにアカジで示す2用の技術を追加します AD変換用の関数をユーザーコードエリア後に追加します ソースコードは事前ハイフレーダにあるラボ1フォルダー内にある メイン.cファイルの該当箇所をコピー&ペースとして利用ください フリーアルトス用のライブラリーをインクルードするための技術を追加します ここにアカジで示す3用ユーザー用インクルードエリアに追加します フリーアルトス用の変数を追加します ユーザー用プライベート 関数エリアにアカジで示す一用を追加します タッチgfxタスクとad変換タスク間のメッセージQをクリエイトする フリーアルトス用のタスクの技術をメイン関数に追加します ソースコードは事前ハイフレーダにあるラボ1フォルダー内にある メイン.cファイルの該当箇所をコピー&ペースとして利用ください ad変換用のアナログ入力値をメッセージQを通じてGUIタスクに 送信するためのフリーアルトス用のタスク技術をad変換用の関数 スタートadcさんタスク関数に追加してください ここからはadcの アナログ16値をGUI上に表示させるため GUIのmvpモデルモデルビュー プレゼンターのファイルを編集していきます mvpモデルそれぞれの 役割は以下のとおりです GUIのモデルファイルにあるdick関数を用いてadcさんのad変換をモニターしメッセージQを通じて受け取ったアナログ入力値を GUIのプレゼンタービューを通じてGUI画面に表示させます ではモデルファイルから編集していきましょう まず初めにmodel.cppファイルを開きます次にmodel.cppにあるmodel.hppをインクルードする 技術の上でミリクリックしプルダウンメニューからオープンデクラレーション をクリックしmodel.hppファイルを開きますmodel.hppファイルのパブリックエリア に二つの関数の宣言を記述しますプロテクテッドエリアに三つの編数の宣言を記述します モデル.cppファイルに戻りますフリーアルトス用のライブラリーと編数 を定義する技術を追加してくださいなおシミュレーターのif-not-def分以下に 追加することに注意してください次に定義された編数値を0に 処理化する技術を追加しますなおソースコードは事前ハイフデータ にあるラボ1フォルダー内にあるmodel.cppファイルを参照してください イッグ関数にadc3のad変換をモニターする技術を追加しますここでは以下の処理を実行しています メッセージ9から送られたアナログ入力値が変化すれば合い変数に代入します アナログ入力値を整数の部分と小数の部分に分離します 変数値の整数の部分と小数の部分をモデルリスナーを通じてGUIのプレゼンター に引き渡しますなおこの技術はシミュレーターのif-not-def分以下に追加することに注意してください次にmodel.cppファイルを編集しますmodel.cppファイルにあるmodel.snahppをインクルードする技術の上で右クリックしフォルダーのメニューからオープンデクラレーションをクリックしmodel.sna.hppファイルを開きます バブリックエリアにシステムセットadcバリュー関数のプロトタイプを定義します 以下の技術を追加してください次にプレゼンターの編集に移ります プレゼンターはGUIのモデルから受け取ったアナログ入力値をビューに受け渡しGUIに表示させますではプレゼンターを編集していきましょう まずスクリーン1プレゼンター.cppファイルを開きますこのファイルの上部にあるスクリーン1プレゼンター.hppをインクルードする技術の上で右クリックしフォルダーのメニューからオープンデクラレーションをクリックし スクリーン1プレゼンター.hppファイルを開きますパブリックエリアにシステムセット ADCバリュー関数のプロトタイプを定義します以下の技術を追加してください スクリーン1プレゼンター.cppファイルに戻りますシステムセット ADCバリュー関数の内容を技術します なおソースコードは事前配布資料のラボ1フォルダーにあるスクリーン1プレゼンター.cppファイルを参照してください ビューの編集に移りますビューはプレゼンターから浮くとった アナログ入力値をGUI画面に表示しますではビューファイルを編集していきましょう スクリーン1ビュー.cppファイルを開きますインクルード技術の上で右クリックし プロデイオンメニューからオープンデクラレーションをクリックしスクリーン1ビュー.hppファイルを開きます パブリックエリアにプリント ADCバリュー関数のプロトタイプを定義します以下の技術を追加してください スクリーン1ビュー.cppファイルに戻り プリント ADCバリュー関数の内容を技術しますソースコードは事前配付資料のラボ1フォルダーにある スクリーン1ビュー.cppファイルを参照してください全ての編集が終わりましたらコンパイルを実行し 偉らがないことを確認してくださいコードの編集が終わりましたら STM32 CUBEプログラマンを使用して ボードにアプリケーションをダウンロードしてみましょうまずボードとPCをUSBケーブルで接続し STM32 CUBEプログラマンを起動します 画面左側ツールメニューよりエキスターナルローダーを選択しますエキスターナルローダーの一覧表の中から使用するボード用のエキスターナルローダーを選択します次に画面右上のコネクトボタンをクリックし ボードに実際にアクセスします ボードに接続されるとこのボタンの表記がリスコネクテッドに変わりますのでそれを確認してください 画面左側のツールメニューよりエイシング&プログラミングを選択しますブラウズボタンをクリックし ポップアップメニューからダウンロードするプログラムファイルを選択しますメリファイプログラミングにチェックが入っていることを確認してください スタートプログラミングボタンをクリックしアプリケーションのダウンロードを開始しますログでエラーがないことを確認してください ダウンロード終了後画面右上のディスコネクテッドを選択しツールの接続を解除しますケーブルを物理的に切り離す前に確実にディスコネクトを行うようにしてください実際にボードを使用し動作を確認してみましょう ボリュームの出力をボードのRDのA0端子に入力しますこの端子は本実習中STM32 CubeMXを使用し ADC3の入力ピンとして設定しています ボリュームを操作するとボリュームの出力電圧のアナログ値がGUI画面上に表示されることが確認できました以上で本実習を終了します ラボ2のビデオも合わせてご覧くださいご清聴ありがとうございました