https://github.com/cesanta/keil-stm32-webui
Step-by-step guide on building Web UI Dashboard on STM32 Nucleo-F756ZG development board
https://github.com/cesanta/keil-stm32-webui
Last synced: 6 months ago
JSON representation
Step-by-step guide on building Web UI Dashboard on STM32 Nucleo-F756ZG development board
- Host: GitHub
- URL: https://github.com/cesanta/keil-stm32-webui
- Owner: cesanta
- License: mit
- Created: 2024-02-20T14:53:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-11T07:06:56.000Z (over 2 years ago)
- Last Synced: 2025-07-02T12:48:14.045Z (about 1 year ago)
- Size: 4.88 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Building Web UI Dashboard on STM32 Nucleo-F756ZG
This guide is a step-by-step tutorial on how to build Web UI dashboard
on STM32 Nucleo-F756ZG development board using Keil IDE. Prerequisites:
- Hardware: Nucleo-F756ZG, connected to the workstation and to Ethernet
- Software: Keil uVision
## General plan
The first step is to create a minimal firmware that:
- initialises system clock to the maximum frequency
- intialises debug UART and redirects `printf()` to the debug UART
- outputs some debug message periodically
After that minimal firmware is created, we'll add a minimal web server on top
of it, and then enhance that minimal web server to a fully functional Web
Device Dashboard.
## Minimal app
**Step 1. Install necessary packs.** Start Keil, click on "Pack Installer"
to start an installer. There in the search input, type "stm32f7", then click
on "STM32F7 Series". On the right side of the window, you should see
"Device Specific / Keil::STM32F7xx_DFP" pack, click on "Install" if it is not
yet installed. When installed, install "Generic / Cesanta::Mongoose" pack
**Step 2. Start a new project.** Create a new project. In the Search filter,
type "stm32f756zg", select first device. In the RTE window, check
"Device/Startup", click on "Resolve", click OK.
**Step 3. Create main.c.** Right click on "Source group 1", "Add new file",
"C file", type "main", click "Add". Copy/paste the following content, then save:
```c
int main(void) {
return 0;
}
```
**Step 4. Update settings.** Click on "Options for target" in the toolbar,
- On the "Device Target", check "Use multilib"
- On the "User" tab, uncheck "Beep when complete"
- On the C/C++ tab, select Warnings / MISRA compatible
- On the Debug tab, select Use / ST-Link debugger
- Click on debugger "Settings", "Flash Download" tab, check "Reset and Run"
**Step 5. Build project.** Click on "Built" toolbar button. The project should
be built with zero errors and warnings.
**Step 6. Configure the board.** Instead of using CubeMX to configure clock,
UART and LED, we'll copy a small HAL header and use it to achieve the same
in a much quicker way.
- Open [hal.h](https://mongoose.ws/demo/?board=Nucleo-F756ZG&project=mqtt&file=hal.h)
copy file contents to the clipboard.
- Right click on "Source Group1", choose "Add new file", name it "hal.h",
paste the contents, save
- Do the same with hal.c - copy it into the project
- Update main.c code with the following:
```c
#include "hal.h"
extern uint64_t mg_millis(void);
int main(void) {
hal_init();
uint64_t timer = 0;
for (;;) {
if (timer < mg_millis()) {
timer += 500;
gpio_toggle(LED1);
printf("hi! tick is %lu\r\n", (unsigned long) mg_millis());
}
}
return 0;
}
```
- Click on "Load" toolbar button to flash this firmware
- The green LED should start blinking
- Open device manager, look up what COM port device corresponds to your board
- Start putty, and open a serial port with baud 115200
- You should see messages like this:
```
hi! tick is 1559001
hi! tick is 1559501
hi! tick is 1560001
```
- Congratulations! We have minimal skeleton firmware working
## Integrate Mongoose Library
**Step 1. Enable Mongoose Library.** Click on "Manage Run-Time Environment",
and enable "Network Library" / "Mongoose"
**Step 2. Configure Mongoose Library.** In the project view, click on
"Network Library" / `mongoose_custom.h`. Click on the "Configuration Wizard"
tab and make sure the following options are set:
- Build environment - Keil MDK
- Built-in TCP/IP stack - enabled
- Enable STM32Fxx driver - enabled
- TLS support - none
- Enable custom `mg_millis()` - enabled
- Enable custom `mg_random()` - enabled
- Enable packed filesystem - disabled
Add this snippet to generate stable (not random) MAC address
```c
#include
#define MG_MAC_ADDRESS MG_MAC_ADDRESS_STM32_UID(UID_BASE)
```
**Step 3. Initialise Mongoose Library.** Open `main.c`, copy-paste the following:
```c
#include "hal.h"
#include "mongoose.h"
// In RTOS environment, run this function in a separate task with 8k stack
static void run_mongoose(void) {
struct mg_mgr mgr; // Mongoose Event Mangager
mg_mgr_init(&mgr); // Initialise Event Manager
mg_log_set(MG_LL_DEBUG); // Set log level to debug
for (;;) { // Run infinite event loop
mg_mgr_poll(&mgr, 0); // Process network events
}
}
int main(void) {
hal_init();
run_mongoose();
return 0;
}
```