TouchGFXを使おう3～画面遷移編～

TouchGFXを使おう3～導入編2～の続きです。

https://qiita.com/usashirou/items/b1ecbb903b979cdeb1a1

今回はTouchGFXで画面遷移をします。
# TouchGFX入門：画面遷移と性能
STマイクロエレクトロニクスが製作しているYoutubeも参照ください。
なるべく近い構成となるように調整しています。

https://youtu.be/j6wLcR-AxvA

# Interactionで遷移する
__Interaction__ を使用して __画面遷移__ をしてみます。
2つのScreenを作成し、Screen2にボタンでScreen1に戻るようにします。
最初にScreenを2つ作成し __Interacytions⇒＋__ を __クリック__ し __Integration__ を追加します。
__Trigger：Button is clicked
Choose clicked source：button1
Action：Change screen
Choose Screen：Screen1__
とします。
この段階でScreen2のボタンをクリックするとScreen1に戻るプログラムになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7645412c-eba5-d230-ff35-b1152839fcab.png)
# プログラムで遷移する
プログラムを使用して自動的に画面遷移を行います。
Screen1に __Action__ を __追加__ します。
__＋　Add Custom Action__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/73f57748-8191-b94b-618f-a4424f2b32db.png)
Actionの名前を今回は、__action1__ にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4a0cbea9-0613-d15c-aedb-ee692752c844.png)
__Interacytion__ を追加します。
__Trigger：action1 is called
Action：Change screen
Choose Screen：Screen2__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/76bf268a-eba2-8586-a551-d1f39ba92d3f.png)
# コード追加
__コード生成__ し __Screen1View.hpp__ に __handleTickEvent__ を __追加__ します。
今回は __VisualStudioCode__ を使用していますが、__STM32CubeIDE等__ でも __可能__ です。
__Generate Code__ または __Run Simulator__ で コードを生成し __Files__ から __生成されたコード__ を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0cfcd812-831d-969b-8f92-c2c5a349aca3.png)
__ファイル⇒フォルダーを開く__ からフォルダーを指定して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/367464bf-7502-09e7-5589-366d28757ca2.png)
フォルダはプロジェクト名とおなじｎ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9ce6107b-937b-ffa4-0e2a-18d62f4cf220.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7feeee69-aee6-da6a-0317-fb13b677f24a.png)

今回は、__Screen1View.hpp__ と __Screen1View.cpp__ に __コード__ を __追加__ します。
- gui⇒include_gui⇒Screen1_screen⇒Screen1View.hpp
- gui⇒src⇒Screen1_screen⇒Screen1View.cpp
## Screen1View.hpp
最初に、__Screen1View.hpp__ に __handleTickEvent__ を __追加__ します。
__TouchGFXProjects\MyApplication\gui\include\gui\screen1_screen\Screen1View.hpp__ を開き

    virtual void handleTickEvent();
    int tickCounter = 0;
を追加し以下のような形にします。

```
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
protected:
    int tickCounter = 0;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1fb6d731-7c46-253c-af84-af355406c814.png)

## Screen1View.cpp
次に、__Screen1View.cpp__ に __動作内容__ を __追加__ します。
__Screen1View.cpp__ に __tickCounter__ が __60__ になると動作するようにします。
__TouchGFXProjects\MyApplication\gui\src\screen1_screen\Screen1View.cpp__ を開き
```
void Screen1View::handleTickEvent()
{
    if(tickCounter >= 60) action1();
    tickCounter++;
}
```
を追加します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ac4d8167-4c7c-f61d-3724-c438a4d33a39.png)
以上で __60カウント__ でスクリーンScreen1からScreen2に変化するプログラムになりました。
TouchGFXを使おう4～アニメーション～に続きます。