SPI液晶 ILI9341をTouchGFXで使おう１

__SPI液晶__ の __ILI9341__ のコードが __Github__ にて公開されていましたので今回は __TouchGFX__ を __SPI液晶__ で使用してみたいと思います。
# ILI9XXX/XPT2046-STM32
__Github__ の __ILI9XXX/XPT2046-STM32__ を使用します。
https://github.com/maudeve-it/ILI9XXX-XPT2046-STM32
## 参考動画
__A fast TouchGFX library for ILI9341, ILI9488 and ST7735 on STM32__

https://www.youtube.com/watch?v=g1siKaPox88&list=WL&index=1
# 設定内容
__z_displ_ILI9XXX.h__ の __STEP__ と __HOW TO setup a project with this software__ の内容に合わせて設定します。

https://github.com/maudeve-it/ILI9XXX-XPT2046-STM32/blob/main/1-HOWTO/z_displ_ILI9XXX.h
```
/*||||||||||| USER/PROJECT PARAMETERS |||||||||||*/

/*****************     STEP 1      *****************
```
## HOW TO setup a project with this software

https://github.com/maudeve-it/ILI9XXX-XPT2046-STM32/tree/main/1-HOWTO

# プロジェクトを生成する
最初に新規プロジェクトを作ります。
__File⇒New⇒STM32 project__
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b534c1e2-5999-babe-079f-557eb160c17f.png)
使用するマイコンを選定し __OK__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/29885995-098b-b370-7c63-f47d9416fe31.png)
__Project Name__ を入力し、__Finish__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2ae86459-90d6-1ed6-812b-cb6530be380a.png)
# デバイス設定をする
最初に __クロック__ の生成と __周波数__ を設定します。
__Crystal/Ceramic Resonator__ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6030e80b-7300-7667-e6f4-29bc88b12398.png)
次に __Clock Configuration__ をクリックし、周波数を設定します。
今回は __100MHz__ にするため、__HCLK__ に __100__ を入力します。
Enterを押すと、自動で設定が変更されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a9b68c0e-e68a-2f43-7af7-9ba8c171949b.png)
# SPI設定
次に、使用する　__SPI__ の設定を __Step3__ の通り __SPI2__ の __Mode__ を __Full-Duplex Master__ に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/83b1323a-4083-4018-f288-35cfbbad0fc7.png)
__GPIO__ のピンの名称は以下を参考に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e4c8bbed-dede-afd1-8e4f-882de547101b.png)

https://github.com/maudeve-it/ILI9XXX-XPT2046-STM32/tree/main/1-HOWTO

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/097bf536-5b24-241e-f38b-698b9700eba2.png)
__DMASettings__ にて __Add__ から __SPI2__TX__ を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9554b92c-bd8a-619c-f912-7d44f75834ac.png)
__NVIC Settings__ において __SPI2 global Interrupt__ の __チェック__ を入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/63e0b3ca-6763-f609-cc7b-281eb901818e.png)
# GPIO設定
__GPIO Output__ を 4本追加し、以下設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1d0f4727-aedb-4b07-a701-e677866c0e0f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6c49cf0c-b652-be98-38a2-e9af60c28866.png)
__GPIO⇒Configuration__

https://github.com/maudeve-it/ILI9XXX-XPT2046-STM32/tree/main/1-HOWTO

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2b8f8981-9a40-bf40-7360-6337a086adb2.png)
## TOUCH_INTの設定
__TOUCH_INT用__ に __GPIO_EXIT__ を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/383f4e75-f8c2-7ad1-20ad-fbee09b44131.png)
__Interrupt mode__ において __External interrupt-falling edge__ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/015a19ef-c19a-dcb4-1b22-6831b34d44d6.png)
# PWM設定
バックライトに使用するPWMの設定を行います。
__STEP 6__ の通り __TIM2　TIM_CHANNEL_1にPWM　Generation CH1__ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/22201538-4095-73d3-0af1-969d4748bebb.png)
__prescaler,counter period__ は __Youtube__ を参考に __10000/100__ としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3333b666-1169-36c5-b77f-a379cab22510.png)
使用するピンの __UserLabel__ を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1c376d3b-0c2a-3a1f-ec2f-75e79772492f.png)
__STEP 7__ を参考に __TIM3__ の __InternalClock__ のチェックを入れておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/250c7d69-4a7d-efad-ab61-59e26fda25d2.png)
# TouchGFXを使用する
__TouchGFX__ 使用するため、__CRC__ の __Activated__ にチェックを入れてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2eb258c4-bb16-2bcb-9e9f-bbd32502778a.png)
__TouchGFX__ を有効にするため __X-CUBE-TOUCHGFX__ を使用できるようにします。
__X-CUBE-TOUCHGFX__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/30465dfe-83af-46de-f075-f72b3d616dcf.png)
__SoftwarePacks Component Selector__ にて __X-CUBE-TOUCHGFX__ を有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6335cae2-b582-c2ab-73e9-fc379b189bb7.png)
__X-CUBE-TOUCHGFX__ を開き __Graphics Application__ のチェックを入れることで __X-CUBE-TOUCHGFX__ が有効になります。
__FrameBuffer Strategy__ にて __Partial Buffer__ を選択します。
解像度は使用するデバイスに合わせて設定します。
ILI9341の場合、__240/320__ pixelsにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ff86c65a-34e0-7345-19b4-d267309a3380.png)
__Device Configuration Tool code Generate__ を押すことでハードウェア設定に基づいてコード生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4a57b529-ed44-c62b-288c-8dad020039ee.png)
続いて、プログラムに進みましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9f6f5645-f897-7706-0c24-cc4d08dc3d1c.png)
SPI液晶 ILI9341をTouchGFXで使おう２に続きます。
https://qiita.com/usashirou/items/1671e1664f473ea01c59