STM32CubeIDEでTouchGFXを使おう1

STM32CubeIDEでTouchGFXを使ってみましょう。

なお、STマイクロのトレーニング資料を基に構成しています。

トレーニング資料 (日本語)：TouchGFXトレーニング資料
https://www.stmcu.jp/design/document/training-materials_j/67768/
TouchGFX Documentation
https://support.touchgfx.com/docs/introduction/welcome
初めに、新規プロジェクトを作ります。

# ダウンロード
TouchGFX
https://www.st.com/ja/development-tools/touchgfxdesigner.html

インストール画面は飛ばしています。

# プロジェクト作成
プロジェクト名を入れたうえで
ApplicationTemplateを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/fa349b49-3d2e-ce78-78e1-43bb0f50ecfc.png)

今回は、STM32F4-Discovery　STM32F429I-DISCOを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/729b2a22-976a-219b-7045-e90f9045bf13.png)

UI Templateを選択します
今回は、このままでCreateします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/35ef60e2-8145-85a9-4ec5-1e9bbc651647.png)

UITemplateを選択する場合は、こちらで選択します。
なお、STM32F429I-DISCOは、240x320の表示の為、対応するのはこちらの2つになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/098f1255-be92-42df-03cc-dbbdaf72c180.png)
# 画面作成
ここから表示内容を作っていきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/add25c4f-d68b-c591-9292-e36316955eb3.png)

まずは、画面の背景を設定します。
BOXを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/40d5fe14-0f0a-487b-ff91-13d8b91f458d.png)
背景の色を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cc7724e5-f69c-06da-44af-9d32e7b7f17c.png)
背景のBOXで画面を覆います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3605765d-fc74-39d1-8d09-a4072aad5213.png)
一度ここでシミュレーションと、コード生成をしてみましょう。
右上のRunSimulatorをクリックし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8d971d4b-1ff9-6bea-b324-f58b68a14807.png)
# シミュレーターで確認
シミュレーター画面を確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/bf6175eb-7716-22e4-85d0-42ecff60829c.png)

次にGeneraterCodeをクリックし、コードを生成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c060e7ba-2c08-b217-d957-7f6414b2466b.png)
# コードジェネレーション
右下のBrowseCodeをくりっくすることで、生成されたコードを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a6715a06-8291-91ee-db84-f7b1e2034f73.png)
生成されたコードをこちらになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/73731cb2-c44a-408c-18ad-10e9770c1c39.png)
一つ上の階層に各種コンパイラー用のフォルダがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2ceeca89-658a-242c-7de0-8c35686e3c30.png)
# STM32CubeIDEの起動
STM32CubeIDEフォルダを開けて.projectをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/190361db-f6f7-204c-45f1-33aa627abebb.png)
STM32CubeIDEが起動します。
![4-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c467721b-c4d5-e71c-2cdc-
61d6f2041a01.jpeg)
インポートされます。
![5-1-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/18b6f38c-c99e-6d76-a190-d07bad50792b.jpeg)
まずは、この画面でコンパイルし、実機で確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e99f2ce5-d0b1-9599-2f33-897490b0d7e7.png)
シミュレーターと同じ画面になればOKです。

それでは、次に進みます。
# ボタンの追加
ボタンで画面遷移できるようにしましょう
Buttonを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a3438c42-cec5-e983-857a-6dc8098d01a3.png)
ボタンのIDと、表示するテキストの内容を決め、位置決めしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7d0aecb5-a2ee-c92d-dfaf-a6305ac5feb0.png)
![2-2-6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9869139b-9f4c-981b-9a87-028ec33b8e79.jpeg)
次の画面を作ります。
左上の＋をクリックし、新しいScreenとしてScreen2を作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e5829a31-5496-f754-7e80-1de932981cd2.png)
Screen1と同じように背景とボタンを用意します。
![2-2-8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2bc9354c-3897-18c3-e491-6a59c58e3d7b.jpeg)
# 動作設定
右上にタッチのアイコンをクリックし
AddInteractionをクリックします。

ここでは、画面のNextのボタンをクリックしたうえで起こる動作を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/61350205-8b48-c520-e74c-87006d94b2fb.png)
Trigerをクリックし、Button is Clickedを選択します。
Buttonをクリックすると動作します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c41ab711-42b4-5f47-af74-70d286d4fae8.png)
どのボタンかの選択もあります
今回は、1個だけなのでこのまま進めます。
次に、ActionをChangeScreenにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b090968f-6f49-309c-902a-60ae6cac0b29.png)
ChooseScreenをScreen2にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/01e6b070-be5f-9532-af70-09dc0ebea91b.png)

同じことをScreen2でも行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/58181c3f-ba2b-bdb4-a14a-514fdc34da0b.png)

このような形になっているはずです。
Screen1のButtonを押すと、Screen2に移行する
Screen2のButtonを押すと、Screen1に移行する
シミュレーターを起動して確認しましょう。
もちろん、実機でも動かしてください。

以上で画面遷移が可能な、プログラムができたことになります。

STM32CubeIDEでTouchGFXを使おう2に続きます
https://qiita.com/usashirou/items/0ab63b4d9403937cdfe9