# 280 ST-SDK Project Start

This section provides a step-by-step guide to creating a simple TouchGFX application using the *280_st_sdk_blank* project included in the software release package. You will learn how to compile the project using STM32CubeIDE, flash it onto the 280 Instruments Display hardware, and test the application. Additionally, it covers how to debug the application using the ST-LINK debugger.

To kickoff the *280_st_sdk_blank* make sure the development tools have been installed per [Development tools setup](/content/b1_280_sdk_tools_setup.md) section.

## 280 ST-SDK Blank Project Installation and Loading

1. Locate the *280_st_sdk_blank.7z* archive containing the blank project
2. Extract the contents to a preferred location
3. After extraction, you will find a folder named *280_Project_Blank*
```
>280_Project_Blank
¦     +---Core
¦     +---Drivers
¦     +---Middlewares
¦     +---tools
¦     +---TouchGFX
¦     +---user_modify_files
```
4. Launch **STM32CubeIDE** and when prompted, enter a workspace name (e.g., *280_st-sdk_blank*) and click **Launch**
6. In STM32CubeIDE, go to the **File** menu and select **Open Projects from File System**
7. In the dialog that appears:
   - Click **Directory...** and browse to the extracted *280_Project_Blank* folder
   - STM32CubeIDE will automatically detect the project
8. Click **Finish** to import the project into your workspace

Once imported, the project will appear in the Project Explorer, ready for development, compilation, and flashing.

---
## Building, Flashing, and Debugging the Blank Project

### 1. Build the Project

Once the blank project is imported into STM32CubeIDE:

1. In the **Project Explorer**, right-click on the project folder
1. Select **Build Project**
1. The IDE will compile the source code and generate the binary (*.elf*) file
1. Check the **Console** tab for build status and ensure there are no errors

There are 2 **Build Project** options: *Debug* and *Release*:
1. The *Debug* option can be downloaded via STM32 ST-Link Debugger
1. The *Release* build can be programmed to the unit via Bootloader using either USB or CAN options.

**Note:** For the purpose of learning and development, the *Debug* build is the best option.

### 2. Flash the Application to 280 Instrument Displays Hardware

To flash the compiled application:

1. Connect the 280 Instrument Displays board to your PC via **ST-LINK USB interface**
1. Ensure the board is powered and recognized by your system
1. In STM32CubeIDE:
   - Click the **Run** menu and select **Run As > STM32 Cortex-M C/C++ Application**
   - Choose the correct *.elf* file if prompted
1. The IDE will flash the firmware to the board and reset it automatically

### 3. Debug the Application

To start debugging:

1. Click the **Debug** icon (bug symbol) in the toolbar or go to:
   - **Run > Debug As > STM32 Cortex-M C/C++ Application**
   - A pre-configured configuration will be present
1. STM32CubeIDE will:
   - Flash the firmware (if not already done)
   - Launch the debugger
   - Switch to the **Debug Perspective**
1. Use breakpoints, step-through execution, and variable inspection to analyze your application

> 💡 Tip: You can set breakpoints by double-clicking the left margin next to a line of code.

---
## Customizing the TouchGFX Blank Project

Once the blank project is successfully imported and flashed to the 280 Instrument Displays hardware, you can begin customizing the UI and application logic using TouchGFX Designer and STM32CubeIDE.

### 1. Launch TouchGFX Designer

1. Open **TouchGFX Designer** from your Start Menu or installation directory
1. Click **Open Project** and navigate to the *TouchGFX* folder inside your STM32CubeIDE project directory:
   - ```
     C:\ST\STM32CubeIDE\workspace\280_st-sdk_blank\TouchGFX
     ```

### 2. Add UI Elements

1. In the **Screens** panel, click **Add Screen** to create a new screen
1. Use the **Widget Toolbox** to drag and drop UI components such as:
   - **Buttons**
   - **Text Areas**
   - **Images**
   - **Sliders**
   - **Graphs**
1. Customize properties (e.g., size, color, font) using the **Properties** panel

### 3. Link UI to Application Logic

1. Open the **Interactions** tab to define behavior for widgets
1. For example:
   - Set a button to trigger a screen change
   - Link a slider to update a value on the display
1. TouchGFX will auto-generate C++ code in the *gui* folder of your project

### 4. Generate Code and Build

1. Click **Generate Code** in TouchGFX Designer
1. Return to **STM32CubeIDE**
1. Build the project again to compile the updated UI logic

### 5. Flash and Test

1. Flash the updated binary to the 280 Instrument Displays hardware using STM32CubeIDE
1. Verify that your custom UI appears and behaves as expected