Creating a TouchGFX Board Setup
TouchGFXボード設定(TBS)とは、TouchGFXアプリケーションが実行されるプラットフォームを定義する.tpa
ファイルのことです。 This approach is for developers who wish to distribute easy-to-use TBSs separately from the UI code that runs on top of them. この記事では、組込みツールtgfx.exe
を使用して、既存のTouchGFXプロジェクトを再配布可能なTBSにパッケージ化する方法について説明します。 This tool can be found in the TouchGFX installation directory which is C:/TouchGFX/4.25.0/designer if it is installed in the default directory. For the duration of this article, examples are based on an application called "MyApplication" and on TouchGFX version 4.25.0.
Once you have a fully functional TouchGFX project the following steps are required to create a TBS.
- Clean up the project: Remove generated files
- Create description files: Call
tgfx.exe
to generate the zip and json file - Describe the TBS: Edit the json file
- Generate
.tpa
: Calltgfx.exe
to finalize.tpa
- Test & Verify: Create a new project with the TBS in TouchGFX Designer and verify that it works
Clean up the project
When generating code (F4) in TouchGFX Designer, multiple files and folders are created. These files are not needed in the TBS because you will generate code again when creating a UI. Therefore, removing these files and folders will significantly reduce the size of the .tpa
file. The following files and folders can be removed from the project:
The following TouchGFX related folders can be removed:
.\TouchGFX/assets
.\TouchGFX/build
.\TouchGFX/config
.\TouchGFX/generated
.\TouchGFX/gui
.\TouchGFX/simulator
.\TouchGFX/screenshots
.\Middleware/ST/touchgfx
.\Middleware/ST/touchgfx_components
Note
- If you have a dual context project (for example CM4/CM7 or Boot/Appli), the TouchGFX folder will be placed in the CM7 or Appli folder. In this case, you should also remove the CM4/TouchGFX/build or Boot/TouchGFX/build folder during the cleanup process.
- If you wish to keep the GUI inside the .tpa when distributed, you should not remove the .\TouchGFX/gui and .\TouchGFX/assets folders.
The following STM32CubeIDE folders can be removed:
.\STM32CubeIDE/.settings
.\STM32CubeIDE/Debug
.\STM32CubeIDE/Drivers
.\STM32CubeIDE/Middlewares
.\STM32CubeIDE/Release
In the EWARM folder (relating to the IAR IDE), we only need to keep the following files:
.\EWARM/*.eww
.\EWARM/*.ewd
.\EWARM/*.ewp
.\EWARM/*.icf
.\EWARM/startup_*.s
In the MDK-ARM folder (relating to the Keil IDE), we only need to keep the following files:
.\MDK-ARM/startup_*.s
.\MDK-ARM/*.sct
.\MDK-ARM/*.uvoptx
.\MDK-ARM/*.uvprojx
Create description files
tgfx.exe
ツールにより、TBSの内部構成を記述する設定ファイル(.json)が生成されます。 This information is read by TouchGFX Designer and presented in the description pane on the right when selecting the TBS.
TouchGFX Environmentコンソールを開き、アプリケーションの親ディレクトリで以下のコマンドを実行します。
$ /c/TouchGFX/4.25.0/designer/tgfx.exe pack -d MyApplication
コマンドが実行されたディレクトリに、以下のファイルが作成されます。
Describe the TBS
Before creating the final .tpa
, edit MyApplication.json
to control how the TBS is displayed to users in TouchGFX Designer. The following sections should be updated:
- Author: Authorセクションのフィールドを使用して、作者名、連絡先の電子メール、URLを指定します。 You can delete some fields or keep them empty.
- PathToDotTouchGFX Specify the path to the .touchgfx file usually located in the TouchGFX folder.
- Data Use the fields in the Data section to specify TBS version, images, board name, type (TGAT for a TBS) vendor, description, and link to further information.
The available types and how each type is placed in TouchGFX Designer is shown below.

**TGUI** is for GUIs. If it is a simple GUI, set the category to **example**, which will place it in 'Examples'.

**TGUI** is for GUIs. If it is a complex GUI, set the category to **demo**, which will place it in 'Demos'.

**TGAPP** is for a TBS combined with a GUI. It will be placed in 'Board Specific Demo' under 'Demos'.
An example of a json description file for a TBS is shown below.
MyApplication.json
...
"Author": [
{
"Name": "Chad Brody",
"Contact": "chad.brody@mycompany.com",
"URL": "http://mycompany.com/"
}
],
...
"PathToDotTouchGFX": "",
"EmbeddedOs": "FreeRTOS"
...
"Data": {
"Version": {
"Major": 1,
"Minor": 0,
"Build": 0
},
"Name": "MyApplication",
"HumanFriendlyName": "MyApplication",
"BoardName": "Custom STM32 Board",
"Type": "TGAT",
"Vendor": "MyCompany",
"Description": "This is a working project on which to base your UI on top of.",
"DocumentationLink": "",
"Category": "",
"Images": [
"http://mysite.com/MyCustomBoard-front.png"
],
"Tags": [],
"AvailableResolutions": [
{
"Height": 480,
"Width": 480
}
],
"TargetBpp": [
24
]
}
}
Note
"PathToDotTouchGFX": "MyTouchGFXFolder/TouchGFX"
Tip
Generate .tpa
以下のコマンドを実行して、最終的な'.tpa'ファイルを作成し、TouchGFXボード設定を完了します。
$ /c/TouchGFX/4.25.0/designer/tgfx.exe pack -rc -d MyApplication
テストと検証
To verify that the .tpa
file can be seen by TouchGFX Designer as a TBS and used to create new applications, perform the following steps:
- You can rename the
.tpa
file if you want to. - Copy or move the
.tpa
file toC:\TouchGFX\4.25.0\app\packages
. This allows users to import TBSs, GUIs, and BSDs into TouchGFX Designer from a local folder. - Open TouchGFX Designer and select the TBS under the By Partners tab.
最後の注意点
The following section contains tips about what to consider when distributing TBSs.
一般的な注意点
一般的に、.tpa
を配布する前には次のことを行う必要があります。
- すべてのIDEプロジェクトが期待どおりに動作することを確認する。
- TouchGFXプロジェクト・ファイル
.touchgfx
で定義したカスタム・コマンド(PostGenerateなど)が期待どおりに動作することを確認する。 - TBSがTouchGFX Designerによって読み取り可能で、新しいアプリケーションの作成に使用できることを確認する。
Tip
After distributing the .tpa
one should instruct users to copy the .tpa
file into C:\TouchGFX\4.25.0\app\packages
and restart TouchGFX Designer.
バージョン管理
通常、開発者は開発プロジェクト全体(Board bringup、TouchGFX AL、TouchGFX UI)を同じリポジトリ内に保持するので、配布可能な.tpa
ファイルは必要ありません。 ただし、チームのメンバーが新しいTouchGFXアプリケーションを開始できるようにするには、統一されたプラットフォーム・コードがテストや検証の際に役に立ちます。
.tpa
ファイルを配布したり、repo
、git submodules
などのツールを使用してコードベースをモジュラー化したりする場合には、この記事の前で取り上げたように、TBSコンポーネントのバージョンを.json
ディスクリプタで指定されたバージョンに合わせる方が賢明です。 モジュラー型のアプローチを使用する場合、platformのコードは、配布可能な.tpa
ファイルを作成するために使用することもできますが、メインのプロジェクト構成内のモジュールとして使用することもできます。
"Data": {
"Version": {
"Major": 3,
"Minor": 0,
"Build": 0
},
$ git tag
v1.1.0
v2.0.0
v2.1.0
v3.0.0