STM32 Serial Dashboard: Control MCU from Web Browser

Control & Monitor your MCU from the Web Browser using a wired serial connection

What you'll learn
- Control LED brightness from the Web Browser
- Display GPIO states on the Web page
- Display ADC waveforms using HTML Canvas
- Monitor STM32 variables from the Web Browser
- Save logged STM32 variables to the CSV file

Requirements
- Basic experience working HTML files and modifying JavaScript algorithms
- STM32F103C8T6 Blue Pill development board and USB-to-TLL converter
- Experience creating simple STM32 programs using STM32CubeIDE
- Microsoft Windows operating system with Microsoft Edge browser installed

Description
This course explains simple approaches that can be used to control and visualize peripheral hardware states of STM32-based devices from theWeb Browser.

UsingWeb 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'snotinternet/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 librarythat provides instant path for working with serial ports from your HTML code. With this library, nothing can stop you from usingWeb Serial APIeven 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

Try to 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.

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

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

Who this course is for:
- Early adopters of Web Serial API technology
- Anyone who considering using Windows-based x64 tablets as a dashboard
- Developers who want escape limitations of STM32CubeMonitor
- Custom gaming controller developers for HTML5 Canvas & WebGL based applications
More Info