​​STM32 Web Dashboard: Monitor & Control via Serial​

After completing this course, you will be able to control your STM32 directly from a web browser using a single HTML file with a COM port connection (no internet required).

This course explains simple approaches that can be used to control and visualize peripheral hardware states of STM32-based devices from the Web Browser using ordinary serial connection (e.g., STM32's USART connected to USB-to-TTL converter).

Using Web Serial API, we send and receive commands over wired connection that allow us to test basic dashboard elements:

• LED brightness slider: With percentage level and inertia effect thanks to HTML and JavaScript capabilities

• Buttons reacting to GPIO: Visualize button state changes at the exact same time they are physically pressed

• Waveform of ADC signal:  Receive data points from STM32 and display them as dynamic waveform

• Debug output:  Monitor any STM32 variables in the web browser without need to change HTML code

All examples are using Web Serial API – it's not internet/Wi-Fi. This approach is suitable for wired connections that use RS-232, RS-485 or TTL interfaces.

Ideal for industrial applications that already rely on Window-based tablets and embedded PCs. No need to struggle with .NET or other development frameworks. Run your dashboard directly in a Chrome-based Web Browser and leverage features such as HTML5 Canvas, WebGL, responsive CSS styling that looks great both on large and small tablet screens.

This course also gives unique opportunity for developers to explore alternative to STM32CubeMonitor. Overcome constraints of Node.RED-based approach and learn how the same functionality can be implemented using HTML & JavaScript files that can be hosted both online and locally.

To simplify things, there is a myserial.js library that provides instant path for working with serial ports from your HTML code. With this library, nothing can stop you from using Web Serial API even if you are a total beginner with async functions.

This course won't explain basics of HTML & JavaScript or CSS styling, as well as STM32 clocks and peripherals. You need to have some experience with these or willing to learn by yourself. Lectures 4,5,6 and 7 include STM32 projects and HTML files for these four foundational elements:

• LED brightness slider

• Buttons reacting to GPIO

• Waveform of ADC signal

• Debug output

For better understanding, please implement the first three examples on your own by using text editor for HTML files and STM32CubeIDE for STM32 project. Lecture videos include all the steps I take to edit and run these files. "C macro for variable monitoring" (Debug output) HTML example is a little more complex, and beginners are better to use it as-is at first. For your convenience, all the examples are provided in attached zip files as well.

Occasional calculations and bit extraction was performed using SpeqMath freeware utility for Windows.

HTML file editing was done using Notepad++ text editor.