Serial Controller

A dynamic web-based GUI that leverages the Web Serial API to provide real-time control, live parameter tuning, and telemetry visualization for complex mechatronic systems, drastically accelerating development and debugging cycles.

Simplified controller view

About This Project

While developing a complex mechatronic project—a self-balancing seesaw robot—I encountered a critical bottleneck that plagues many embedded systems projects: the slow and tedious cycle of tuning a PID controller. The traditional workflow of editing a constant in the code, recompiling, uploading the firmware, and restarting the system could take several minutes for every single adjustment. This turned a creative engineering challenge into a frustrating exercise in patience. I realized that solving this workflow problem was more important than tackling the tuning itself.

My solution was to invest time upfront to build a superior tool: a real-time control interface. Instead of using a familiar language like Python, I took a calculated risk and decided to build it as a modern web application using JavaScript and the Web Serial API, despite having no prior professional experience with these technologies. This "high-risk, high-reward" decision was driven by the desire to create a truly platform-independent tool that anyone could use in a browser, and to accelerate my own learning in web development for future projects like my portfolio.

The gamble paid off. In a single weekend, I developed this complete control and telemetry dashboard from scratch. The tool was instrumental in completing the entire balancing robot project, a task that typically takes teams several months, in just one week of focused work. This project is a testament to my philosophy of "strategic tooling": building better tools to build better systems, faster.

The full version sends to the serial device the string "`p: ${kp} i: ${ki} d: ${kd} t: ${tau} s: ${setpoint} b: ${colorHex} l: ${lMotor} r: ${rMotor} g: ${ledMask}\n" while the simpler version sends the string "p: ${kp} i: ${ki} d: ${kd} t: ${tau} s: ${setpoint} g: ${ledMask}\n"

Key Features

  • Live Parameter Tuning: Modify critical firmware variables, such as PID controller constants (P, I, D), in real-time without recompiling or restarting the embedded device.
  • Real-Time Telemetry: Visualize live data from the hardware using graphical gauges for motor speeds and a display for the seesaw's current angle.
  • Platform Independent Control: Runs in any modern web browser that supports the Web Serial API (like Chrome or Edge) on any operating system, with no need to install dependencies.
  • Simplified and Complete Demos: Provides two versions of the interface—a full-featured controller with all tuning options, and a simplified version for basic operation.

Technologies Used

  • Frontend: HTML5, CSS3, JavaScript
  • Browser API: Web Serial API
  • Development Environment: Node.js
  • Embedded System: C