How to convert a beautiful html / CSS switch code in lvgl code

How-to
1

What do you want to achieve?

Create a beautiful switch in lvgl.

What have you tried so far?

Gemini ai conversion code.

Code to reproduce

beautiful_button.zip (1.3 KB)

Screenshot

off

on

Environment

  • MCU/MPU/Board:
    ESP32-S3
  • LVGL version: See lv_version.h
    9.3.0
2

Would I be able to convert using lvgl pro ?

I’ve never used lvgl pro.

3

@Baldhead, I tried created something similar to this image using Figma, but it’s necessary install two plugins : html to design and LVGL plugin to Figma

After that you can copy the styles to LVGL Editor do some adjustments. Here is final result:
image

Code generated by Editor:
switch.zip (4.2 KB)

1 Like