SPI液晶 ILI9341をTouchGFXで使おう４～表示テストを行う～

__SPI液晶 ILI9341をTouchGFXで使おう__ の補足としてSPI液晶の表示テストを行ってみます。
__SPI液晶 ILI9341をTouchGFXで使おう３～キャリブレーションをする～__ の __main文__ を変更することでも確認可能です。

https://qiita.com/usashirou/items/54fe578f056473db11d4

最初に、__SPI液晶 ILI9341をTouchGFXで使おう１__ から __PWM設定まで__ を行い __Device Configuration Tool code Generate__ を行います。
# プロジェクトを生成する
最初に新規プロジェクトを作ります。
__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)
# Code Generation
__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で使おう３～キャリブレーションをする～とmain文違いとなります。__

https://qiita.com/usashirou/items/54fe578f056473db11d4

__1-HOWTO__ のファイルをすべてダウンロードし __Inc__ と __Src__ にファイルを配置し __main.h__ の __USER CODE BEGIN Includes__ を以下に変更します。

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/8492e38e-526b-a80e-3ae8-c717bea68a50.png)

```
/* USER CODE BEGIN Includes */
#include "fonts.h"
#include "z_displ_ILI9XXX.h"
#include "z_displ_ILI9XXX_test.h"
#include "z_touch_XPT2046.h"
#include "z_touch_XPT2046_test.h"
#include "z_touch_XPT2046_menu.h"
/* USER CODE END Includes */
```
# z_displ_ILI9XXX.hの変更
__z_displ_ILI9XXX.h__ の45行目をコメントアウトします。

        //#define DISPLAY_USING_TOUCHGFX
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4cc61cf0-d4b1-a788-e21e-bd4afa2e8098.png)

__STEP 2__ を __ILI9488_V1__ または __ILI9488_V2__ など使用するディスプレイに合わせて変更します。
__ILI9488_V2__ で表示されない場合 __ILI9488_V1__ にすると表示されることがあります。

```
/******************    STEP 2    *****************
 * which display are you using?
 *************************************************/
//#define ILI9341
//#define ILI9488_V1
#define ILI9488_V2
```

# main.cの変更
__main.c__ を以下に変更します。
```
/* USER CODE BEGIN 2 */			// "USER CODE BEGIN 2" is after all system initializations and before entering the main loop. Good place to initialize display
Displ_Init(Displ_Orientat_0);		// initialize the display and set the initial display orientation (here is orientaton: 0°) - THIS FUNCTION MUST PRECEED ANY OTHER DISPLAY FUNCTION CALL.  
Displ_CLS(BLACK);			// after initialization (above) and before turning on backlight (below), you can draw the initial display appearance. (here I'm just clearing display with a black background)
Displ_BackLight('I');  			// initialize backlight and turn it on at init level
/* USER CODE END 2 */
```

```
/* USER CODE BEGIN WHILE */
while (1) 			// into the main loop you can add the test functions
{
  // display testing
  Displ_PerfTest();		// shows display graphics and performance
  // touch testing
  Touch_ShowData();		// polls touch device and shows values returned, showing touch interrupt calls also
  Touch_TestDrawing();		// polling touch, converting and drawing position returned
  /* USER CODE END WHILE */
```
以上でビルドすると画面が表示されると思います。
これで表示されない場合、設定や配線を見直してみてください。
# SPI液晶 ILI9341をTouchGFXで使おう５～ILI9488 でも使おう～
https://qiita.com/usashirou/items/b7551806d795e0072a84