皆さん こんにちは これからSTM32マイコン 体験実習 グラフィック描画編のハンゾーンを行いたいと思います 本編では マイコンに対する外部入力をGUI上で表示する方法を学習していきます マイコン外部入力をGUI上に表示させる上で重要な概念であるモデル ビュー プレゼンターのMVPモデルについて より深い理解が得られます本実習はラボ1とラボ2の2つに分かれています それぞれ ADCのアナログ入力とGPIO入力をGUI上に表示させる方法について学習します本ビデオは 方法のラボ2の内容になります 前半のビデオと合わせてご覧いただくと より深く内容を理解していただけますラボ2で修得できる知識は以下のとおりです テキストビジェットの使い方 特にワイルドカードについて学習できますワイルドカードを使用して ボタンを押した回数をモニターしてGUI画面に表示させることが簡単に実現できますまた GPIOモニターにフリーアルトスを使用しますので フリーアルトスのタスク感の通信方法およびMVPモデルにおけるタスクのモニター方法について学習ができますラボ2の実習では ラボ1で作成したTouchGFXプロジェクトに編集を加えていきます前半のビデオをご覧いただき TouchGFXプロジェクトの作成をお願いします ラボ2の具体的な内容は以下のとおりですラボ1で作成したSwipeコンテナのベージに GPIO入力を表示させます数字を表示させるため テキストビジェットのワイルドカードを使用します数字をGUIに表示するため GUIのモデルビュープレゼンタークラスを編集しますではGUIの編集に移ります ラボ1の実習で作成したGUIプロジェクトを開きますTouchGFXデザイナーの画面左側のスクリーンタブを選択しますリジェット3でSwipeコンテナを選択します ページメニューでSwipeコンテナページ2を選択しますここで選択したコンテナのページが 作業エリアで表示されますまた実際のGUI動作で デフォルトのコンテナページとして表示されますコンテナページ2を編集していきますウィジェットメニューからイメージタブ イメージウィジェットを選択しますネームメニューでウィジェットの名前を入力します ロケーションメニューでウィジェットの配置作標を入力しますイメージメニューで表示するイメージを選択します 編集が終わったウィジェットを画面左側ウィジェットツリー上でマウスを使って Swipeコンテナページに以下にドラッグしますテキストを表示させるため テキストエリアウィジェットを使用しますウィジェットメニューから テキストエリアウィジェットを選択しますネームメニューにウィジェットの名前を入力しますオートサイズチェックボックスから チェックを外しますウィジェットの配置作標 およびサイズを入力しますワイルドカードテキストを使用するため テキストメニューでリソースタブを選択しますリソースIDプルダウンメニューでリソースID1を選択します最後にワイルドカード1プルダウンメニューで ユーズワイルドカードバッファ チェックボックスにチェックを入れますテキストのカラー値を設定します画面左側 デジェットツリー上で 作成したテキストエリアウィジェットをマウスでスワイプコンテナページに内にトラッグします最後にTouchGFXデザイナーの ジェネレートコードボタンをクリックしGUIコンテンツのソースコードを生成します次にGPIO入力をGUI上に表示するためにGUIのモデル Viewプレゼンターを編集していきますmodel.cppファイル内のTick関数を使用してDiscovery Kitのユーザーボタンをモイターしますボタンが押されたことを検出したら 内部カウンターの値を更新しGUIのプレゼンターViewを通じて カウンターの値をGUI画面に表示しますでは実際にモデルの編集を行っていきますmodel.hppのパブリックエリアに ゲットカウンターバリュー関数を宣言しますmodel.hppのProtectedエリアに カウンター編数を宣言しますソースコードは 事前配布資料のラボニフォルダーにあるmodel.hppファイルを参照してくださいmodel.hppに 春に関するヘッダファイルをインクルードする技術を追加しますシュミレーターのifnotdef技術以下に追加します次に カウンター値をゼロに初期化する技術を追加しますソースコードは 事前配布資料のラボニフォルダーにあるmodel.hppファイルを参照してくださいmodel.hppのリック関数内にユーザーボタンをモニターする技術を追加しますここでは以下の処理を行いますボタンのオン オフの動作を検出ボタンが押されたことを検出したら 内部カウンター値を更新しGUIのモデルリスナーを通じて GUIのプレゼンターに通知シュミレーターのifnotdef技術以下に この技術を追加します追加するソースコードは 事前配布資料を参照してください次に モデルリスナー.hppファイルを編集しますパブリックエリアにシステムセットカウンターバリュー 関数のプロトタイプを定義します以下の技術を追加しますプレゼンターはGUIのモデルからカウンター値の更新の通知を受け取るとViewを通じて更新されたカウンター値を GUI画面に表示しますプレゼンターの編集を行っていきますスクリーン1 プレゼンター.hppファイルのパブリックエリアにシステムセットカウンターバリュー関数のプロトタイプを定義しますスクリーン1 プレゼンター.hppファイルを編集しますシステムセットカウンターバリュー関数の内容を記述します次に アクティベート関数に同じ内容を追加しますソースコードは 事前配布資料のスクリーン1 プレゼンター.hppファイルを参照してくださいGUIのViewは プレゼンターから更新されたカウンターな対応を受け取りGUI画面に表示します ではViewの編集を行っていきますスクリーン1 プレゼンター.hppのパブリックエリアにセットカウンターバリュー関数のおよび プリントカウンターバリュー関数のプロトタイプを追加しますプロテクテットエリアにカウンター編数を追加しますソースコードは 事前配布資料のスクリーン1 プレゼンター.hppを参照してくださいスクリーン1 プレゼンター.hppファイルを編集しますセットカウンターバリュー関数の内容 および プリントカウンターバリュー関数の内容を記述しますソースコードは 事前配布資料のスクリーン1 プレゼンター.hppを参照してください編集が全て終わりましたら コンパイルを行い エラーがないことを確認してください生成したコードをSTM3にCubeプログラマー を使用して ボードにダウンロードし 動作を確認してみましょうボードのユーザーボタンを押すと 表示される数字が変化することが確認できますここからは 今回学習した ADCアナログ入力を GUI画面で表示する方法とGPIO入力を GUI画面で表示する方法の中で使用したMCU入力値をモニタリングする方法 について解説しますGUIのMVPモデルを使用して ADCからの入力値をモニタリングし GUIに表示していますまず ADCによって変換されたデジタル値を プログラムで計算し GUIに表示する値に再変換しますこのタスクはアルトスタスクとして割り当てています再変換された値をメッセージQを通じて モデルに送りますモデルではティックメソッドを用いて 定期的にメッセージQを通じて ADC位置の変化をモニタリングしています値が変化すると モデルリスナーを使用して プレゼンターに値を通知しますプレゼンターから ビュークラスのプリント ADCバリュー関数を呼び出して 値を表示しますCPI用の値をモニタリングし GUIに表示するためにも 同様に GUIのMVPモデルを使用していますモデルではティックメソッドを使用して 定期的にユーザーボタンを押された回数をモニタリングしており 値が変化すると モデルリスナーを使用して プレゼンターに値を通知しますプレゼンターから ビュークラスのプリントカウンターバリュー関数を呼び出して 値を表示しています以上で本実習を終了しますご清聴ありがとうございました