STM32 Serial Dashboard Control MCU from Web Browser

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 the Web Browser. 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 codeAll 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 outputTry 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
Homepage