TouchGFXを使おう～導入編～

STマイクロエレクトロニクスのGUI開発ツールTouchGFXを使ってみましょう。
# ダウンロード
__TouchGFXDesigner__ をダウンロードします。

https://www.st.com/ja/development-tools/touchgfxdesigner.html#st-get-software
# インストール
__TouchGFX__ の __インストール__ を行います。
__Utilities⇒PC_Software⇒TouchGFXDesigner⇒TouchGFX__ を __ダブルクリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1558e621-1f2d-417c-809d-90c7de9f16b7.png)
 __Next__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c13ef4b4-36fc-28e8-cd2b-101e1469a58a.png)
__I accept__ にチェックを入れて __Next__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/93988423-a30a-fe06-81be-2b394276be8c.png)
 __Next__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/606f7c03-df57-081e-0593-cc9e121b5462.png)
 __Install__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/647de897-895d-e845-0053-67c53add72de.png)
 __Finish__ を __クリック__ します。
自動的にTouchGFXが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/dd0c9c8c-a0f0-1251-bbca-c7a202850762.png)
 __OK__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/382293a1-1d06-1168-0df0-d80678c3303b.png)
# 初期画面
 __OK__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1212d11f-905a-a7db-f65b-fb44e6de6ac1.png)
背景の色を選択して __OK__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/84ef581a-c68a-1f28-c437-2c75e6847bfb.png)
# 新規プロジェクト
__Create New__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/710d07da-6a02-c7c6-2159-b587ceecdaf8.png)
使用するデバイスを選択後 __Create__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e219538e-9e10-8258-80ec-8636dc9adad1.png)
# Examples
__Examples__ を __クリック__ し __Select Board Setup__ をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1af1206d-e962-5f03-0db0-78f722fa4114.png)
ボード選定後、__Select__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1b6111b4-b893-7419-204c-9d90a96380c4.png)
開きたいプロジェクトを選択し __Create__ を __クリック__ します。
なお、適さないプロジェクトはnot compatibleとなり開くことが出来ません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/751c4395-b116-7eb4-cd3f-b3b5aaee43df.png)
# Demos
Exampleと同じく、__Demos__ を __クリック__ し __Select Board Setup__ からボード選定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2b5b6ae1-f24f-dee0-f7f9-811e684a26ed.png)
開きたいプロジェクトを選択し __Create__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/03eaf6a4-88f2-9fda-d97d-2084f7ba2ff2.png)
# Run Simulator
シミュレータを起動する場合は、__F5__ または、__Run Simulator__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8e91be3b-6f7e-4c7d-b07d-3f539101201d.png)
シミュレータが起動した状態
![スクリーンショット 2025-01-25 155732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/095e4fbe-0df3-007c-7f4b-b513e8e4da76.png)
# Generate Code
コードを生成する場合は、__F4__ または、__Generate Code__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/097b24be-6c97-1ec9-8017-85b2df568219.png)
# Program and Run Target
コンパイルして書込みをする場合は、__F6__ または、__Program and Run Target__ を __クリック__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8c133fe9-35bb-f9c0-def8-70c62130e8e5.png)
# Select Programing Mode
フラッシュメモリ全体を書き換えるのと一部だけ書き込むのを切り替えることができます。
- Program All
- Program Internal Flash
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a7f0fe7e-8dc0-0bb5-a0d4-0c906ed6cde8.png)
# Files
生成されたファイルを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/12f05fdc-7b51-5c38-5c40-77d3ff89b966.png)
# View Log
ログを表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/85d412c9-20d1-a3e4-025c-9229576c5b02.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c436e3c1-cfdf-476b-5d03-4d3d6fd531c6.png)
TouchGFXを使おう～導入編2～につづきます。