STEP 01
디자인
- LVGL 위젯 드래그 앤 드롭
- 색상, 폰트 & 레이아웃 스타일 지정
- 실시간 애니메이션
실시간 협업 편집 — 피드백을 남기고, 변경 사항을 실시간으로 확인하고, 팀을 동기화.
PicoPixel이란?
PicoPixel은 브라우저 기반 LVGL 비주얼 에디터입니다. 라이브 캔버스에 컴포넌트를 드래그 앤 드롭하고, 시각적으로 스타일을 지정하고, ESP32 등에서 컴파일할 수 있는 클린한 C 코드를 내보냅니다.
임베디드 UI를 위한 Figma라고 생각하세요 — 실시간 협업, 내장 시뮬레이터, 설치 불필요. 모든 기능을 살펴보거나 사용 방법을 확인하세요.
이곳의 메이커들이 사용 중
주요 기능
LVGL GUI 설계에 필요한 모든 것
LVGL을 위한 완전한 비주얼 툴킷 — 드래그 앤 드롭 레이아웃부터 프로덕션 레디 코드 내보내기까지.
비주얼 디자인 캔버스
픽셀 퍼펙트 LVGL 캔버스에 위젯을 추가. 빌드하면서 모든 변경 사항을 실시간으로 확인.
내장 버전 관리
내장 버전 관리로 모든 변경 사항을 추적. 액션 패널에서 세밀한 세션 기록과 정확한 롤백 가능.
에셋 라이브러리
재사용 가능한 위젯, 이미지, 폰트, 색상 — 드래그 앤 드롭으로 새 인터페이스 구축.
쉬운 공유
클라이언트나 팀원에게 시뮬레이터 링크를 전송 — 진행 상황을 확인하고 UI를 실시간으로 조작 가능.
이벤트 에디터
위젯과 버튼에 이벤트 핸들러를 드래그 앤 드롭. 코드 작성 없이 LVGL 액션, 트랜지션, 콜백을 연결.
애니메이션 에디터
위치, 크기, 불투명도 등을 비주얼 타임라인에서 키프레임으로 조정하세요. 프레임 전체에 애니메이션을 겹치고, 코드 한 줄 없이 부드러운 LVGL 트랜지션을 미리 볼 수 있습니다.
Arduino, ESP32 등 다양한 플랫폼 호환
PicoPixel은 표준 LVGL C 코드를 생성하며 LVGL 포트가 있는 모든 플랫폼에서 컴파일 가능 — ESP32, STM32, Arduino, Raspberry Pi Pico 및 수십 가지 마이크로컨트롤러 포함.
사용 방법
빈 캔버스에서 프로덕션 레디 C 코드까지 세 단계로.
STEP 02
미리보기
- 내장 LVGL 시뮬레이터
- 공유 가능한 미리보기 링크
- 팀이나 클라이언트와 검토
STEP 03
1 /* sprite.c */
2 lv_obj_t *scr = lv_scr_act();
3 lv_img_set_src(spr, &sprite);
4 lv_anim_start(&a); // idle
ui.cscreens.cactions.c
내보내기
- 잘 구조화된 LVGL 소스
- 플래시하여 실제 하드웨어에서 실행
- 다른 LVGL 에디터와 비교.
안녕하세요, 저는 Ed입니다.
cat ./about.md
이름 Ed
역할 코드 몽키