← All projects in the gallery

Round Volume Knob

by jonathan harrocks

A round panel is a different layout problem, and worth one example on its own. There are no corners to put anything in, so it is drawn as the thing these panels get used as: a machined knob. What you turn is a dimple in its face - an arc with nothing drawn but its knob, whose background is a picture of a hollow with a shadow in it. A second arc round the outside is the light that shows the level, and the glass in the middle is a button: press the knob to mute. The dial writes the level and reads it back, so the number in the middle is the value the firmware holds - which is the pattern for anything the user sets and something else then acts on. Mute is a separate variable rather than level zero, so unmuting returns to where the dial was rather than to silence.

About this design

Round Volume Knob is an LVGL interface for the ESP32-S3 + GC9A01 1.28" round (GC9A01 / GC9A01A 240 x 240, CST816S touch), with 1 screen and 7 widgets, made for MicroPython on LVGL 9.

Screens

  • Screen1

Hardware and build

Board
ESP32-S3 + GC9A01 1.28" round
MCU
ESP32-S3
Display
GC9A01 / GC9A01A
Resolution
240 x 240
Touch
CST816S
Graphics library
GFX Library for Arduino
LVGL
v9
Exports to
MicroPython
Libraries
lvgl, GFX Library for Arduino

Notes from the author

A machined knob on a 240 x 240 round panel: turn the dimple, press the middle to mute.

Using it

Open a copy in the designer and it is yours to edit: restyle the screens, move it to another board, and export the MicroPython project. Designing is free, and a copy needs no account. Open the designer.