TouchGFXを使おう6～Lチカ編２～

TouchGFXを使おう5～Lチカ編～の続きです。

https://qiita.com/usashirou/items/8cc73eaade194c75f71d

今回は、Modelにプログラムを記述し、呼び出すプログラムにします。
今回のプログラムはModelにプログラムを集約できる反面、presenterとviewを繋げる必要があり、コードが増えます。
# 画面製作
新規プロジェクトを作成し、__ボタン__ を __2個作成__ します。
今回は、__LED ON__ と __LED OFF__ の二つにします。
![スクリーンショット 2025-01-31 112510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/32d9a42c-7e6e-2425-3136-4d69e9dc4525.png)
# インタラクションの設定
__Interaction__ を以下のように設定します。

||Interaction1|Interaction2|
|---|:-:|:-:|
|Trigger|Button is clicked|Button is clicked|
|Choose clicked source|On_switch|Off_switch|
|Action|Call new virtual function|new virtual function|
|Function Name|On_Switch_func|Off_Switch_func|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9af6d05f-5d57-d65c-fe19-7219cca06393.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1f5c2fbe-4ee1-0f9a-e4ce-a42f47e6faf7.png)
# ピン設定
STM32CubeIDEを立ち上げた状態で __STM32CubeIDEフォルダ__ の __projectファイル__ を __ダブルクリック__ しプロジェクトを __インポート__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ab877328-3311-bb34-4c51-94d50bb95e7b.png)
__OK__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6ab4893b-f252-8581-521c-31249f2d0467.png)
立ち上げ後、__iocファイル__ から __LED__ につながる __PC2__ ピンを __GPIO Output__ にし __Generation__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/34f87b02-d39a-85fa-14e5-eaac34a73e2b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a1c451ba-be7b-c31b-690e-5bf4e4f36c0d.png)
__Warning__ が出ますが __Yes__ で進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6162f98f-ff2b-06ba-7d32-60c3b2fc860e.png)
TouchGFXでも変更されたことが表示されますので __Yes__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/924e233a-27bd-d7b5-bd99-7552871c9f1c.png)
# model
__model.hpp__ に __On_LED__ と __Off_LED__ を __追加__ します。

    void On_LED();
    void Off_LED();
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7276fd8a-6a4e-93e4-7b51-9072761a0187.png)
__model.cpp__ に __On_LED__ と __Off_LED__ を __追加__ します。
ヘッダー
```
#ifndef SIMULATOR
#include "stm32h7xx_hal.h"
#endif
```
プログラム内
```
void Model::On_LED()
{
	#ifndef SIMULATOR
	HAL_GPIO_WritePin(GPIOC, GPIO_PIN_2, GPIO_PIN_RESET);
	#endif
}
void Model::Off_LED()
{
	#ifndef SIMULATOR
	HAL_GPIO_WritePin(GPIOC, GPIO_PIN_2, GPIO_PIN_SET);
	#endif
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a8a77c95-b564-4e9c-1006-6f3ffa1cfc99.png)
# Screen1View
__Screen1View.hpp__ に関数を宣言します。
```
protected:
    virtual void On_Switch_func();
    virtual void Off_Switch_func();
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/989552f0-2a9f-e42a-a902-ddb8d4a050a3.png)
Screen1View.cppにOn_Switch_funcとOff_Switch_funcを追加します。
```
void Screen1View::On_Switch_func()
{
	presenter -> onlight();

	#ifndef SIMULATOR
    HAL_GPIO_TogglePin(GPIOC, GPIO_PIN_3);
    #endif
}
void Screen1View::Off_Switch_func()
{
	presenter -> offlight();
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b3c45511-cc89-ddbc-e26b-cccdedeaa9e3.png)
# Screen1presenter
__Model__ と __Screen1View__ を繋げるコードを __Screen1presenter__ に __追加__ します。
最初に __Screen1presenter.hpp__ に関数を宣言します。

    void onlight();
    void offlight();
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/70ecc54c-6662-f709-3733-879e662aa32d.png)
__Screen1presenter.cpp__ に __関数__ を __追加__ します。
```
void Screen1Presenter::onlight()
{
	model -> On_LED();
}

void Screen1Presenter::offlight()
{
	model -> Off_LED();
}

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/89618013-f91a-009c-c93a-8da46b049f1f.png)
コンパイルすることでLEDの点滅が出来るようになります。
TouchGFXを使おう7～ハードウェアボタン編～に続きます。