Project 5: A Custom GUI Widget

A new GUI widget, ColorWheel, that displays a circular spectrum of colors. You’ll be able to add this widget to any GUI application.

Quick Reference

Attribute Value
Primary Language C++
Alternative Languages N/A
Difficulty Level 3: Advanced
Time Estimate 1-2 weeks
Knowledge Area GUI Internals / Graphics Programming
Tooling LibGUI, LibGfx
Prerequisites Project 2, strong C++ (inheritance, virtual functions), basic computer graphics concepts.

What You Will Build

A new GUI widget, ColorWheel, that displays a circular spectrum of colors. You’ll be able to add this widget to any GUI application.

Why It Matters

This project builds core skills that appear repeatedly in real-world systems and tooling.

Core Challenges

  • Subclassing GUI::Widget → maps to the foundation of all widgets
  • Implementing the paint_event → maps to custom drawing with GUI::Painter and LibGfx
  • Handling mouse events → maps to making your widget interactive
  • Defining custom properties and events → maps to making your widget reusable

Key Concepts

  • The Paint System: LibGfx/Painter.h and its drawing primitives.
  • Widget Events: LibGUI/Widget.h and the various *_event virtual methods.
  • Color Theory: Basic HSV/HSL to RGB conversion math for drawing the wheel.

Real-World Outcome

Deliver a working demo with observable output that proves the feature is correct.

Implementation Guide

  1. Reproduce the simplest happy-path scenario.
  2. Build the smallest working version of the core feature.
  3. Add input validation and error handling.
  4. Add instrumentation/logging to confirm behavior.
  5. Refactor into clean modules with tests.

Milestones

  • Milestone 1: Minimal working program that runs end-to-end.
  • Milestone 2: Correct outputs for typical inputs.
  • Milestone 3: Robust handling of edge cases.
  • Milestone 4: Clean structure and documented usage.

Validation Checklist

  • Output matches the real-world outcome example
  • Handles invalid inputs safely
  • Provides clear errors and exit codes
  • Repeatable results across runs

References

  • Main guide: LEARN_SERENITYOS_DEEP_DIVE.md
  • The source code for LibGfx and LibGUI.