TouchGFXを使おう9～I2C編～

TouchGFXを使おう8～ADC編～の続きです。

https://qiita.com/usashirou/items/72291b7e87eaa7917207

I2Cの温湿度センサーから温度データを表示してみましょう。
TouchGFXを使おう8～ADC編～とSTM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版 (9) I2Cを使ってみよう2 si7020編を参考に進めます。

https://qiita.com/usashirou/items/f59b4b82d7d4086b8936
# 画面の作成
新規プロジェクトを作成し、画面上に温度を表示するテキストエリアを作成します。
__Transtation__ を __Temp °__ にし __＋__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4d1acabc-885b-2f99-c5e7-81a1280d0a99.png)
# wildcardの設定
__Wildcard1__ を __クリック__ します。
__＋__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/f5a9c012-2036-301d-56d4-1d627d5ffcfe.png)
__Initial Value__ を __00.0__ とします。
__Buffer size__ は __12__ にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cb33b0b1-7044-3c2c-d611-85d050e1823a.png)
左の __Texts__ を __クリック__ し、文字設定を行います。
__Typographies__ を選択し、__Large__ の __Wildcard Ranges__ を __0-9__ にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/fffb0aa6-a8f6-d7b2-8202-479c859a5090.png)
# pin設定
I2CはPF14,PF15を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/420dba6b-f6a3-c7ca-c058-72fb14b9989c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/030f1295-eb8d-4b67-6b45-404061d5607a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/efe10ccf-d65b-a2cf-98b7-5f1da713aada.png)
__Connectivity⇒I2C4⇔Mode__ を __I2C__ にします。
黄色の〇が緑色になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/262ba413-b1d7-af44-71f3-fe210f5f4bea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5645780b-eb43-69c2-125a-e1a42e02a085.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/30dabeee-8252-0647-0a69-721845f53d5b.png)
__Yes__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/93b71630-2204-baef-fb1a-0e86b117c4e0.png)
# プログラム
TouchGFXではプロジェクトが変更されたことが表示されます。
__Yes__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/68ed89cc-806c-9d18-8ed9-8e8a86bc6ac0.png)
## Screen1View.cpp
ヘッダーにはI2Cのアドレス、インクルードするヘッダーファイルを追加します。
```
#ifndef SIMULATOR
#include "stm32h7xx_hal.h"
#include "stm32h7xx_hal_i2c.h"

#include "main.h"

static const uint16_t si7020_ADDR = 0x40<< 1;
#endif
uint8_t reg[2];
uint8_t tmp[2];

float temp;
uint8_t utemp[12];
float tempd;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e223cd75-bc40-8e0e-9749-abbc2d5c47db.png)
```
プログラムはtickCounterが300毎にI2Cのデータを読み出し、textArea1Bufferを書き換え
textArea1.invalidateで書き換えます。
void Screen1View::handleTickEvent()
{
    tickCounter++;

	if(tickCounter >= 300)
	{
		tickCounter = 0;
		#ifndef SIMULATOR
	    uint8_t rego =0xE3;
	    HAL_I2C_Master_Transmit(&hi2c4, si7020_ADDR,&rego,1, 1000);
	    HAL_I2C_Master_Receive(&hi2c4, si7020_ADDR,tmp,2,1000 );
	    temp = ((((tmp[0]  * 256 + tmp[1])* 175.72) / 65536.0) - 46.85);
	    Unicode::snprintfFloat(textArea1Buffer, TEXTAREA1_SIZE, "%.1f", temp);
	    #endif
	    textArea1.invalidate();
	}
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/07e5d2f6-b0de-c5c4-0519-83e7055e9961.png)
## Screen1View.hpp
使用する関数を宣言します。

```
public:
    virtual void handleTickEvent();
protected:
    uint16_t tickCounter;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/963a73ce-5d6d-c56f-a92a-e98f1880cb31.png)

## main.h
main.hにexternを追加します。
```
/* USER CODE BEGIN Includes */
extern I2C_HandleTypeDef hi2c4;
/* USER CODE END Includes */
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/82662720-c7b7-4cf7-a3c0-74403018b8ed.png)

以上でコンパイル＆書込みすることで、温度データを画面に表示するようになります。