Getting started with the STM32H7B3I-DK
Posted to support the STM32H7B3I-DK - DISCOVERY KIT roadtest.
The following items are recommended by ST to explore and test the various features of the STM32H7B3I-DK:
- Java 8.241
- STM32CubeIDE 1.3.0
- STM32CubeMX 5.6.0
- STM32CubeProgrammer 2.4.0
- TouchGFX Designer 4.13.0
- STM32Cube_FW_H7_V1.7.0
- X-CUBE-TOUCHGFX
TouchGFX Designer
It is a user friendly software to facilitate creating graphics, especially for touchscreen displays.
It is a modern tool that can help developers create applications with a backwards approach starting from the user interface then back to low level coding.
Application templates
• TouchGFX Designer is based on Application Templates (AT)
• An AT is a complete setup for a given ST development Kit (HAL, Drivers, etc.)
• Once selected the AT is downloaded from a remote server (internet connection)
Tutorial
- First we need to creating an application template
- Start TouchGFX Designer
- Startup screen looks like the following
- Hover the mouse cursor over the Simulator box, a pop up window appears, press "Change"
- Scroll until you find the STM32H7B3I-DK template then select it
- You can also hover the cursor over the "Blank UI box" and choose an exapmle UI, but for this tutorial it will be left as blank.
- Change the Application name and directory if needed.
- Click on create.
- Now the template has been created, the designer screen looks like the following:
- To choose a background we will create a box and choose a fill colour for it.
- The left side menu has various widgets, scroll down to shapes then select the box widget.
- This will create a box in the corner of the design.
- Resize the box to cover the screen.
- Choose a colour from the appearance menu on the right (make sure the box is selected).
- Next we will add a button, by going back to the widgets menu
- The created button can be dragged to desired location.
- Various options for the button can be set in the menu, change text to "Action"
- Now select a new widget, this time it is the scalable image.
- Once the widget is placed the options menu appear.
- Click on the image bar to browse for the image you want to use.
- Once the image was selected, I dragged it to the centre and resized it.
- Now we need to configure the behaviour and functionality of these widgets.
- This reminds me of designing mobile apps using Xamarin by selecting an action for events.
- In the menu on the right side of the work space we can switch to the interactions tab to add the first interaction.
- We can rename the interaction and choose how it is triggered, by what event, and its functionality.
- In this example we will only add one interaction, but we can add more if needed, and have interactions trigger eachother.
- Since it is only one interaction in this example we need to uncheck the option: "Can trigger another action"
- Before generating your code and switching to Cube IDE to test the application on your board, you can run a simulation, by clicking on the word simulation above the workspace.
- Now that we verified that the application works as it should, it is time to test it on the target.
- We start by clicking on Generate Code.
- Once done the option to browse to the directory where the code was generated becomes available in the lower right corner.
- When the folder opens go one folder back, in my case it is C:\TouchGFXProjects\STM32H7B3I-DK-RoadTest
- click to STM32CubeIDE and open .project in CubeIDE tool
- Click launch
- Right click on the project and build.
- Once done the console window should look like the following
- Connect the board using a micro usb cable
- (the Cube IDE might detect an old ST link firmware, update if necessary)
- Now to configure the debugging configurations.
- Click on the debugger tab.
- Leave all settings at default values, except for the external loader.
- Scroll down and tick the external loader box.
- The scan button should be able to find your board automatically, but be careful it will not work for this board, it will select a wrong loader, it needs to be selected manually
- Press OK and start the debug session.
- The execution will halt at the beginning of the "main" function.
- Press resume (F8) to run the code.
Top Comments