GNBD MINI·radio UI Editor v0.1.0 beta

브라우저에서 320 × 170 라디오 화면을 직접 그리고, 저장하는 순간 기기에 적용되는 런타임 UI 에디터입니다.

A runtime UI editor for the 320 × 170 radio screen — design in the browser and the radio picks it up the moment you save.

아직 부족한 점 WIP

기능이 많이 부족하고 미흡한 부분이 많습니다. 일부 기능은 동작하지 않거나 의도와 다르게 보일 수 있습니다. 중요한 레이아웃은 반드시 다운로드로 백업해 두세요.

Many features are still missing and there are rough edges. Some functions may not work or may look wrong. Always keep a download backup of important layouts.

접속 · 허브 http://<radio-ip>/에서 UI Editor를 선택하거나 /ui/로 바로 들어갑니다. Open · go to http://<radio-ip>/ and choose UI Editor, or open /ui/ directly.

1. 개요1. Overview

이 에디터는 펌웨어가 그리는 화면을 데이터로 정의합니다. 화면에 놓은 요소(위젯)는 좌표·크기·색·바인딩을 가지며, 저장하면 기기 LittleFS에 텍스트 레이아웃으로 기록되어 다음 프레임부터 곧바로 반영됩니다. 재부팅도, 펌웨어 재빌드도 필요 없습니다.

FM / AM / SSB 각각 별도 레이아웃
모든 변경은 기기 저장 즉시 반영
테마(색상)도 같은 파일에 포함되어 함께 적용
마음에 안 들면 UI List에서 이전 레이아웃으로 되돌리기

참고: 에디터가 다루는 것은 화면 구성뿐입니다. 볼륨·밴드·스캔처럼 실제 동작은 기기의 MENU/SETTINGS에서 조작합니다.

The editor describes the firmware-drawn screen as data. Each widget carries a position, size, color and binding; saving writes a text layout to the radio's LittleFS and the very next frame uses it. No reboot, no firmware rebuild.

FM / AM / SSB have independent layouts
Changes apply immediately after saving
Theme colors are stored in the same file
Roll back anytime with UI List

Note: the editor only controls appearance. Radio behaviour (volume, band, scanning) is still handled by the device's MENU/SETTINGS.

2. 용어 정리2. Terminology

문서 전체에서 같은 뜻으로 사용합니다. / Used consistently across this document.

캔버스 Canvas: 실제 기기 화면과 1:1로 대응하는 320 × 170 편집 영역. 화면에는 2배(640 × 340)로 그려집니다.
The 320 × 170 editing area that maps 1:1 to the device. Drawn at 2× (640 × 340).
위젯 Widget: 화면에 그려지는 최소 단위. 타입(text, bar, freq …), 좌표, 크기, 색, 정렬, 바인딩을 가집니다.
The smallest drawable unit: type, position, size, color, alignment, binding.
모듈 Module: 여러 위젯을 묶은 재사용 블록. 팔레트에서 끌어다 놓으면 위젯 세트가 한 번에 배치됩니다.
A reusable block of widgets placed from the palette in one drop.
프리미티브 Primitive: 가장 단순한 모듈 묶음(텍스트, 바, 사각형, 선, 토스트, 시그널 아이콘).
The basic building blocks (text, bar, rect, line, toast, signal icon).
레이아웃 Layout: FM / AM / SSB 각각의 위젯 목록. 모드를 바꾸면 해당 레이아웃만 보입니다.
The widget list for one mode. Switching mode swaps the visible list.
팔레트 Palette: 왼쪽의 모듈 목록. 드래그해서 캔버스에 놓습니다.
The module list on the left, dragged onto the canvas.
바인딩 Binding: 위젯이 표시할 펌웨어 값의 이름(clock, rssi, battv …).
The firmware value a widget displays.
스냅 Snap: 이동/크기조절 시 좌표를 일정 간격(기본 4 px)에 맞추는 기능.
Rounding positions to a grid (4 px by default).
정렬 가이드 Alignment guide: 다른 위젯과 변/중심이 맞을 때 표시되는 빨간 점선. 4 px 이내면 자동 스냅.
Red dashed lines shown when edges/centers align (auto-snap within 4 px).
런타임 레이아웃 Runtime layout: 기기 저장 공간에 들어가는 텍스트 파일(UIR1). 컴파일 없이 교체 가능.
The text file (UIR1) stored on the device, replaceable without compiling.
테마 Theme: 펌웨어의 색상 세트. 커스텀 테마는 저장된 UI의 팔레트를 사용합니다.
A firmware color set. Custom themes use a saved UI's palette.
프로젝트 파일 Project: .mrpack — 레이아웃 3종 + 팔레트 + 메타데이터를 담은 JSON. 백업/이동용.
A JSON bundle of all layouts, palette and metadata for backup.

3. 시작하기3. Getting started

3-1. 접속3-1. Connect

라디오와 같은 Wi-Fi에 연결합니다.
브라우저에서 http://<radio-ip>/를 엽니다 (예: 192.168.0.13).
허브에서 UI Editor 카드를 누릅니다 (주소는 /ui/).
로딩 화면에 GNBD MINI·radio / UI Editor / v0.1.0 beta가 표시됩니다.

Connect to the same Wi-Fi network as the radio.
Open http://<radio-ip>/ in a browser.
Tap the UI Editor card (route /ui/).
The loading screen shows GNBD MINI·radio / UI Editor / v0.1.0 beta.

3-2. 화면 구성3-2. Layout of the editor

영역 / Area	내용 / Contents
상단 배너 / Banner	BETA 안내 · `자세한 내용`(이 문서) · 닫기(×, 기억됨) Beta notice, docs link, dismiss (remembered)
상단바 / Top bar	프로젝트 이름, 미리보기, 스냅, 확대, 실행취소/다시 실행, 새로 만들기, 가져오기, 다운로드, 라디오에 저장, UI 목록, 언어
왼쪽 / Left	팔레트: 템플릿 → 화면 모듈 → 프리미티브 (검색 가능)
가운데 / Center	캔버스 + 정렬/레이아웃/확대 도구 + 힌트바
오른쪽 / Right	레이어 · 색상 · 속성

3-3. 첫 저장3-3. First save

팔레트에서 모듈을 끌어다 놓고 라디오에 저장을 누르면 이름 입력창이 뜹니다. 저장과 동시에 그 UI가 활성화되어 기기 화면이 바뀝니다.

Tip: 처음에는 UI List에서 기존 UI를 먼저 불러와 조금씩 고치는 편이 안전합니다. 기본 Default 템플릿은 실제 펌웨어 기본 화면과 같습니다.

Drop a module, press Save to radio, enter a name. Saving also activates the layout so the device screen updates immediately.

Tip: start by loading an existing layout from UI List and editing it. The Default template mirrors the stock firmware screen.

4. 화면 구조4. Screen anatomy

기기 화면은 320 × 170 px입니다. 아래는 Default 템플릿 기준 배치입니다.

The device screen is 320 × 170 px. Below is the Default template layout.

그림 1. Default 템플릿의 영역별 좌표 / Fig 1. Default template regions

4-1. 실제 화면4-1. Actual screen

기기 스크린샷 (예시) / Device screenshot (example)

4-2. 좌표 규칙4-2. Coordinate rules

원점 (0,0)은 왼쪽 위, x는 오른쪽, y는 아래로 증가 / origin is top-left
화면 밖 좌표도 저장은 되지만 잘려 보입니다 / off-screen widgets are clipped
정렬 l/c/r은 위젯 박스 기준이므로 r은 글자 끝이 박스 오른쪽에 붙습니다 / alignment is relative to the widget box

좌표가 안 맞게 보이는 이유 / Why text looks misaligned:

오른쪽 정렬(r)은 위젯의 오른쪽 끝이 기준입니다. 드래그한 위치는 왼쪽 끝이므로, 같은 좌표라도 글자가 왼쪽으로 밀려 보입니다. 대부분 왼쪽 정렬로 바꾸면 해결됩니다.

Right alignment anchors the right edge of the widget box, while you drag the left edge. Switching to left alignment makes the drag position match the text.

5. 레이아웃 모드5. Layout modes

FM / AM / SSB는 완전히 별개의 레이아웃입니다. 탭을 바꾸면 캔버스 내용과 레이어 목록이 모두 교체됩니다. 한 모드에서 지운 위젯은 다른 모드에 영향을 주지 않습니다.

각 레이아웃은 저장 시 하나의 파일에 함께 기록됩니다.
위젯별 모드 제한도 가능합니다(속성의 modes 값, 1=FM 2=AM 4=SSB).
기본 화면 위에 현재 모드 마스크와 맞는 위젯만 그려집니다.

FM / AM / SSB are separate layouts. Changing the tab swaps both the canvas and the layer list. Deleting a widget in one mode does not touch the others.

All three layouts are saved into one file.
Widgets can be restricted by mode mask (1=FM, 2=AM, 4=SSB).
Only widgets matching the current mode are drawn.

모드 / Mode	마스크 / Mask	비고 / Note
FM	`1`	RDS 카드 사용 / uses RDS card
AM	`2`	EiBi 카드 사용 / uses EiBi card
SSB (LSB/USB)	`4`	EiBi 카드 사용 / uses EiBi card
공통 / All	`0` 또는 `7`	모든 모드에 표시 / shown in all modes

6. 캔버스 조작6. Canvas

6-1. 선택 Selection

클릭: 선택 / click to select
Shift + 클릭: 다중 선택 / multi-select
빈 곳 클릭: 선택 해제 / click empty space to deselect
선택된 위젯은 파란 실선, 나머지는 옅은 점선으로 표시 / selected = solid blue, others = faint dashed

6-2. 크기조절 Resize

선택하면 8개의 파란 핸들이 나타납니다. 모서리 4개 + 변 4개이며, 어느 방향으로든 끌어서 크기를 바꿀 수 있습니다. 왼쪽/위쪽 핸들을 끌면 위치도 함께 이동합니다.

최소 크기: 8 × 4 px
화면(320 × 170) 밖으로 나가지 않음
스냅이 켜져 있으면 4 px 단위
커서가 방향에 맞게 바뀜 (↔ ↕ ⤡ ⤢)

Selecting shows 8 blue handles (4 corners + 4 edges). Drag any of them to resize; left/top handles also move the widget.

Minimum 8 × 4 px
Stays inside the 320 × 170 screen
4 px steps when Snap is on
Cursor changes per direction (↔ ↕ ⤡ ⤢)

그림 2. 8방향 핸들 / Fig 2. Eight resize handles

6-3. 정렬 가이드 Alignment guides

위젯을 이동하거나 팔레트에서 모듈을 끌어올 때, 다른 위젯의 왼쪽·가운데·오른쪽 / 위·중간·아래와 화면 중심에 4 px 이내로 접근하면 빨간 점선이 나타나고 자동으로 맞춰집니다.

여러 위젯이 같은 축에 있으면 가이드가 여러 줄 표시됩니다.
드래그를 놓으면 가이드는 사라집니다.
크기조절 중에는 가이드가 표시되지 않습니다.

While moving a widget (or dragging from the palette), edges and centers snap to other widgets and to the screen center within 4 px, with red dashed guides.

Multiple guides appear when several widgets share the same axis.
Guides disappear on drop.
Guides are not shown while resizing.

그림 3. 정렬 가이드 / Fig 3. Alignment guides

6-4. 확대/축소 Zoom

툴바의 확대 슬라이더: 50% ~ 200% / Zoom slider 50–200%
기준점 선택: 중앙 또는 좌상단 / anchor: center or top-left
Ctrl + 마우스 휠로도 조절 / Ctrl + wheel
설정은 브라우저에 기억됩니다 / remembered in the browser

Tip: 200%에서 미세 조정, 50%에서 전체 균형 확인 / fine-tune at 200%, check balance at 50%.

6-5. 단축키 Keyboard

키 / Key	동작 / Action
`Delete` / `Backspace`	선택 삭제 / delete selection
`Ctrl`+`D`	복제 / duplicate
`Ctrl`+`Z`	실행취소 / undo
`Ctrl`+`Shift`+`Z`, `Ctrl`+`Y`	다시 실행 / redo
`←↑→↓`	1 px 이동 / nudge 1 px
`Shift`+화살표	8 px 이동 / nudge 8 px
`Esc`	선택 해제 / deselect
`Ctrl`+휠	확대/축소 / zoom

7. 모듈7. Screen modules

팔레트 SCREEN MODULES 그룹. 여러 위젯이 한 번에 배치됩니다.

Palette group SCREEN MODULES. Each module places several widgets at once.

색상 칸 읽는 법 / How to read the color column

오른쪽 속성(Properties)에서 바꿀 수 있는 팔레트 키입니다. 값은 아래 11번 색상 표의 슬롯과 같습니다. 굵게 표시된 키가 화면에서 가장 크게 보이는 색입니다.

Palette keys you can change in Properties. They map to the slots in section 11 (Colors). Bold keys dominate the look.

모듈 / Module	구성 / Contents	기본 크기 / Default	사용 색상 / Colors
Header + Wi-Fi	시계, Wi-Fi 상태, 배터리 전압, 시그널 아이콘, 배터리 바 clock, Wi-Fi state, battery voltage, signal icon, battery bar	320 × 22	panel(배경) · accent(좌측 바) · fg(시계) · muted(Wi-Fi/전압) · accenth(신호) · ok(배터리)
Band + Mode + ST	밴드명 · 모드 · 스테레오 표시 band, mode, stereo flag	104 × 12	muted(밴드/모드) · ok(ST)
Band + Mode	밴드명 · 모드 band and mode	60 × 12	muted
P / A badges	프리셋 번호 · ATS 번호 칩 preset and ATS chips	72 × 12	accent(P) · warn(A) · 칩 배경은 각 색
Frequency	주파수 큰 숫자 + 단위 large frequency + unit	200 × 32	fg(숫자) · muted(단위) — 고정 / fixed
RSSI / SNR	두 개의 바 + 숫자 two bars with numbers	176 × 44	track(바 배경) · ok(RSSI) · accent(SNR) · warn(SNR 낮음) · muted · fg
Param grid	BW/BFO/AGC 등 3줄 three parameter lines	122 × 42	muted
INFO card (RDS/EIBI)	FM은 RDS, AM/SSB는 EiBi RDS in FM, EiBi otherwise	200 × 46	panel(배경) · line(테두리) · accenth(RDS) · fg(PS) · muted(RT/PTY) · warn(EiBi)
SIG graph	RSSI/SNR 꺾은선 그래프 RSSI/SNR history graph	98 × 46	panel(배경) · line(축) · track(중앙선) · ok(RSSI 선) · accent(SNR 선)
Band map	중앙 고정 다이얼 눈금 centered dial	304 × 46	line(테두리) · bg(칩) · fg(바늘) · muted(눈금) · accent(마커)
PANEL (MENU/SETTINGS)	메뉴/설정 패널 위치 가이드 menu panel placement guide	98 × 150	펌웨어가 그림 · panel · line · hsel(선택) · accenth(포커스 글자) · fg
VOL / BRT status	볼륨·밝기 상태 텍스트 volume / brightness text	84 × 10	muted

7-1. Signal icon NEW

와이파이 신호 세기를 4칸 막대로 표시합니다. 어디에나 놓을 수 있고 크기를 바꾸면 막대 굵기·간격·높이가 함께 비례해서 변합니다.

AP 모드: 4칸 / AP mode: 4 bars
STA 모드: RSSI −55 이상 4칸, −65 이상 3칸, −75 이상 2칸, 그 이하 1칸
스캔 중: 4칸 / scanning: 4 bars
미연결: 표시 안 함 / disconnected: hidden
색상은 속성에서 변경 / color editable in Properties

Four-bar Wi-Fi level indicator. Place it anywhere; resizing scales bar width, gap and height proportionally.

AP: 4 bars
STA: RSSI ≥ −55 → 4, ≥ −65 → 3, ≥ −75 → 2, else 1
Scanning: 4 bars
Disconnected: hidden
Color is editable

8. 프리미티브8. Primitives

이름 / Name	설명 / Description	사용 색상 / Colors
Text	고정 문자열 또는 바인딩 값 literal text or a bound value	color — 속성에서 선택 (기본 fg)
Bar	0..max 값을 막대로 표시 value bar with a max	color(채움, 기본 ok) · track(배경)
Rect / Panel	배경/테두리 사각형, 모서리 반경 지원 filled/stroked rectangle with radius	fill(기본 panel) · stroke(기본 line)
Line	구분선 (가로/세로) divider line	color (기본 line)
Toast	하단 안내 메시지 영역 bottom message area	panel(배경) · line(테두리) · fg(글자)
Signal icon	4칸 와이파이 신호 4-bar Wi-Fi signal	color (기본 accenth)

9. 템플릿9. Templates

템플릿 / Template	설명 / Description
Default (기본 UI)	펌웨어 기본 화면과 동일한 구성 mirrors the stock firmware screen
Radio + Band map	하단 전체 폭 밴드맵 버전 full-width band map at the bottom
Minimal	주파수 + RSSI/SNR만 frequency and RSSI/SNR only

주의 / Caution:

템플릿을 누르면 현재 모드의 레이아웃이 즉시 교체됩니다. 필요하면 먼저 다운로드로 백업하세요.

Applying a template replaces the current mode's layout immediately. Export first if unsure.

10. 속성10. Properties

항목 / Field	의미 / Meaning
Type	위젯 타입(읽기 전용) / widget type (read only)
Name	레이어에 표시할 이름. 비우면 자동 이름 layer label; auto when empty
X / Y	왼쪽 위 좌표 / top-left position
W / H	크기 / size
Scale %	50–200, 글자/숫자 크기 배율 text and number scale
Hide	편집 중 숨김(저장 시 제외) hidden in editor; excluded on save
Layer	그리기 순서. 위젯 목록에서 아래가 앞 draw order; bottom of the list is front
Inherit	다른 위젯의 레이어를 그대로 따름 follow another widget's layer
Bind	표시할 값(바인딩) value binding
Text	바인딩이 없을 때 표시할 문자열 literal when no binding
Size	tiny / small / large
Align	l / c / r — 위젯 박스 기준 left / center / right within the box
Color	팔레트 키 / palette key
Chip	텍스트 뒤 알약 배경 pill background behind text
Fill / Stroke / Radius	사각형 전용 / rect only
Max	Bar 전용 최댓값 / bar maximum
List / Layout	PANEL 전용: MENU/SETTINGS, 세로/가로 panel only: MENU/SETTINGS, vertical/horizontal

Scale

텍스트·주파수·RSSI/SNR 숫자에 실제로 적용됩니다. 배율이 커지면 위젯 박스 밖으로 나갈 수 있으니 W/H도 함께 키우세요.

Applies to text, frequency and RSSI/SNR digits. Enlarge W/H too, otherwise scaled text overflows the box.

11. 색상11. Colors

오른쪽 색상 패널에서 16개 슬롯을 편집합니다. 값은 저장 시 함께 기록되고 기기의 커스텀 테마에 적용됩니다.

Edit the 16 slots in the COLORS panel. Values are saved with the layout and applied to the radio's custom theme.

#	키 / Key	기본값(다크) / Default	용도 / Used for
1	`bg`	#080c10	화면 배경 / screen background
2	`panel`	#191821	헤더·카드 배경 / header and card
3	`hl`	#102842	강조 배경 / highlight
4	`hsel`	#19416b	선택된 항목 / selected item
5	`cell`	#101419	입력 셀 / cell
6	`line`	#29313a	테두리·구분선 / borders
7	`track`	#212831	바 배경 / bar track
8	`fg`	#f7f3f7	기본 글자 / primary text
9	`muted`	#8c8e9c	보조 글자 / secondary text
10	`accent`	#0886ff	포인트 / accent
11	`accenth`	#19db94	포인트 밝게 / accent hi
12	`gold`	#ff9e10	강조 숫자 / gold
13	`ok`	#31d25a	정상 / good
14	`warn`	#ff453a	경고 / warning
15	`red`	#ff0000	오류 / error
16	`blue`	#2128ff	파랑 / blue

Reset colors

색상 초기화는 위 다크 기본값으로 되돌립니다.

Restores the dark defaults listed above.

12. MENU / SETTINGS 패널12. Menu panel

라디오의 MENU / SETTINGS 화면이 나타나는 위치와 방향을 정하는 모듈입니다. 실제 항목 내용은 펌웨어가 그리며, 에디터에서는 위치·크기·방향만 설계합니다.

List: MENU 또는 SETTINGS
Layout: 세로(기본 98 × 150) / 가로(자동 304 × 50)
가로 모드에서는 포커스가 끝에 닿을 때 한 항목씩 스크롤됩니다.
가로 패널은 하단에 현재 값이 표시됩니다.

Defines where and how the radio's MENU / SETTINGS overlay appears. The firmware draws the actual items; the editor only sets position, size and orientation.

List: MENU or SETTINGS
Layout: vertical (98 × 150) or horizontal (auto 304 × 50)
Horizontal mode scrolls one item at a time at the edges.
The current value is shown at the bottom of a horizontal panel.

그림 4. 세로/가로 패널 / Fig 4. Vertical and horizontal panels

13. 바인딩13. Bindings

텍스트/바가 표시할 값을 고릅니다. 값 이름은 펌웨어와 1:1로 대응합니다.

Select which firmware value a text or bar displays.

바인딩 / Binding	표시 / Shows	예 / Example
`freq`	주파수 문자열 / frequency text	89.10
`mode`	모드 / mode	FM, LSB
`band`	밴드명 / band name	VHF, 40m
`rssi`	신호 세기 0–63	34
`snr`	SNR 0–63	7
`clock`	시계 HH:MM	22:29
`date`	날짜 / date	2026-10-26
`ps`, `rt`, `pty`	RDS 문자열 / RDS fields	KBS 1FM
`preset`, `pname`	프리셋 번호/이름 / preset	P01
`ats`	ATS 번호 / ATS index	A07
`batt`, `battv`	배터리 %, 전압 / percent and volts	87, 4.41V
`vol`	볼륨 / volume	15
`bw`, `step`	대역폭, 스텝 / bandwidth, step	AUTO, 100K
`bfo`, `agc`, `sm`	BFO / AGC / 소프트뮤트	+0, ON, 4
`afc`, `avc`, `sq`	AFC / AVC / 스퀠치	OK, 63, OFF
`stereo`	스테레오 표시 / stereo flag	ST
`line1`–`line3`	파라미터 조합 줄 / parameter lines	BW AUTO ST 100K
`eibi`	EiBi 방송 정보 / EiBi info	KBS World 19:00
`toast`	안내 메시지 / toast text	SAVED
`wifi`	Wi-Fi 상태 문자 / Wi-Fi state	STA, AP
`status`	VOL/BRT 요약 / volume + brightness	VOL 15 BRT 50

14. 저장과 불러오기14. Save & Load

14-1. 라디오에 저장14-1. Save to radio

라디오에 저장 클릭 → 이름 입력(영문/숫자/_/-, 1–24자)
같은 이름이 있으면 덮어쓸지 물어봅니다(대소문자 무시).
저장 성공 시 즉시 활성화되고 기기 화면이 갱신됩니다.
실패 시 사유가 상단 상태 영역과 모달로 표시됩니다.

Press Save to radio and enter a name (letters/digits/_/-, 1–24).
If the name exists you are asked to overwrite (case-insensitive).
On success the layout is activated immediately.
Failures are reported in the status area and a modal.

14-2. UI 목록14-2. UI List

기기에 저장된 UI 목록 표시 / lists layouts stored on the radio
항목 클릭 → 불러오기 / click to load
Delete → 확인 후 삭제 / delete with confirmation
(active) 표시는 현재 적용 중 / marks the active layout

14-3. 다운로드 / 가져오기14-3. Export / Import

다운로드: .mrpack (JSON) — 3개 레이아웃 + 팔레트 + 메타
가져오기: 파일 선택 → 검증 후 로드. 오류 시 이유 표시
브라우저 저장이 아니므로, 새로고침 전 반드시 다운로드 또는 라디오 저장

되돌리기Roll back

적용한 UI가 마음에 들지 않으면 기기 SETTINGS → THEME에서 원래 UI(기본 테마)로 언제든 되돌릴 수 있습니다.

If you do not like the applied layout, open SETTINGS → THEME on the device and switch back to the original UI (default theme) at any time.

15. 테마 연동15. Themes

기본 테마 외에 커스텀 테마는 저장된 UI의 팔레트를 사용합니다.
테마 목록에는 저장된 파일 이름이 그대로 표시됩니다.
선택하면 즉시 적용되고 열려 있던 모달/오버레이는 모두 닫힙니다(토스트 없음).
커스텀 테마에서 MENU/SETTINGS 패널은 저장된 패널 위치·크기·방향을 따릅니다.

Custom themes use the palette of a saved UI.
The theme list shows the saved file names.
Selecting applies immediately and closes any open modal (no toast).
In custom themes the MENU/SETTINGS panel follows the saved position, size and orientation.

16. 런타임 파일 포맷16. Runtime format

기기에는 텍스트 파일 하나로 저장됩니다. 첫 줄은 포맷 식별자, 둘째 줄은 팔레트, 이후는 위젯 라인입니다.

Stored as a single text file: identifier line, palette line, then one line per widget.

UIR1
PAL  # 16 colors as decimal RGB565
type  x   y   w    h   modes fill stroke color font align bind chip max scale \t text
1     14  6   70   12  7     0    0      2     0    0     6    0    0   100   \t
4     12  40  200  32  7     0    0      0     0    0     0    0    0   100   \t
11    166 5   18   11  7     0    0      6     0    0     0    0    0   100   \t

16-1. 타입 코드16-1. Type codes

값 / Value	타입 / Type
0	rect
1	text
2	bar
3	line
4	freq
5	rsq
6	rds / info card
7	sig (graph)
8	bandmap
10	menu guide (PANEL)
11	wifi signal icon

16-2. 필드16-2. Fields

필드 / Field	설명 / Description
`modes`	모드 마스크 1=FM, 2=AM, 4=SSB, 7/0=공통
`fill/stroke/color`	색상 인덱스(위 팔레트 순서와 별개의 UI 색상 인덱스)
`font`	0 tiny, 1 small, 2 large
`align`	0 left, 1 center, 2 right
`bind`	바인딩 번호(펌웨어 enum)
`chip`	1이면 텍스트 뒤 알약 배경
`max`	bar 최댓값
`scale`	50–200 (생략 시 100)
`text`	탭 뒤 문자열(리터럴 텍스트)

왜 알아야 하나요?

문제가 생겼을 때 /api/ui/layout?name=...로 실제 저장된 값을 확인할 수 있습니다. 좌표가 이상하면 이 텍스트를 직접 보고 고칠 수 있습니다.

When something looks wrong, fetch /api/ui/layout?name=... to inspect the stored values and fix them directly if needed.

17. 언어17. Language

에디터는 한국어 / 영어를 지원합니다. 상단 EN / 한국어 버튼으로 전환되며 선택은 브라우저에 기억됩니다. 팔레트, 속성, 레이어, 모달, 검증 메시지까지 모두 번역됩니다.

The editor supports Korean / English. Use the EN / 한국어 toggle; the choice is remembered. Palette, properties, layers, modals and validation messages are all translated.

18. 제한18. Limits

항목 / Item	값 / Value
화면 / Screen	320 × 170 px
위젯 수 / Widgets	레이아웃당 128개 / 128 per layout
레이아웃 파일 / Layout file	16 KB
프로젝트 파일 / Project file	128 KB
이름 길이 / Name length	1–24자, 영문/숫자/_/-
텍스트 길이 / Text length	64 bytes
Scale	50–200 %

19. FAQ19. FAQ

Q. 글자 좌표가 드래그한 위치와 다르게 보여요.Q. The text does not sit where I dragged it.

오른쪽 정렬(r)은 글자가 박스의 오른쪽 끝에 붙기 때문입니다. 속성에서 Align = l로 바꾸면 드래그한 위치에 그대로 놓입니다.

Right alignment pins the text to the right edge of the box. Set Align = l in Properties to make the drag position match.

Q. 저장했는데 화면이 그대로예요.Q. I saved, but the screen did not change.

① UI List에서 활성 표시가 붙은 이름이 맞는지, ② 저장 직후 상태 문구가 저장+적용됨으로 바뀌었는지 확인하세요. 그대로라면 한 번 더 라디오에 저장하면 됩니다.

Check the active name in UI List, and confirm the status line shows saved+applied. Save again if needed.

Q. 위젯이 안 보여요.Q. A widget is not visible.

① Hide가 켜져 있는지, ② 모드 마스크가 현재 모드와 맞는지, ③ 다른 위젯에 가려져 있지는 않은지 확인하세요.

Check Hide, the mode mask, and whether another widget covers it.

Q. 128개 제한에 걸렸어요.Q. I hit the 128-widget limit.

128개는 화면 한 장 기준입니다. FM·AM·SSB는 서로 다른 화면이므로 각각 128개까지 쓸 수 있고, 세 화면을 합쳐서 세는 것이 아닙니다.

모듈 하나는 위젯 여러 개로 이루어집니다. 예를 들어 Header + Wi-Fi는 배경·시계·Wi-Fi·전압·시그널·배터리·구분선까지 7개, RSSI / SNR은 6개입니다. 모듈 20개를 놓으면 대략 100개를 넘습니다.

줄이는 방법: ① 쓰지 않는 Line(구분선)과 장식용 Rect 삭제 → ② 두 줄짜리 텍스트를 하나로 합치기 → ③ 필요 없는 모듈 제거. 현재 개수는 오른쪽 속성 패널의 items: 값으로 확인할 수 있습니다.

The limit is 128 per screen. FM, AM and SSB are separate screens, so each one gets its own 128 — they are not added together.

A single module is made of several widgets. Header + Wi-Fi is 7 widgets (background, clock, Wi-Fi, voltage, signal, battery, divider) and RSSI / SNR is 6. Twenty modules already exceed 100 widgets.

How to reduce: ① delete unused Line dividers and decorative Rect panels → ② merge two-line text into one → ③ remove unneeded modules. Check the current count in the Properties panel (items:).

Q. 새로고침하면 작업이 사라지나요?Q. Do I lose my work when I refresh?

네. 에디터는 브라우저에 작업 내용을 저장하지 않습니다. 작업 중간중간 라디오에 저장하거나 다운로드로 백업하세요.

Yes. The editor has no local storage. Save to the radio or download the project.

Q. 가로 패널에서 항목이 잘려 보여요.Q. Items are cut off in a horizontal panel.

가로 패널은 폭에 맞춰 한 항목씩 스크롤합니다. 폭을 넓히면 더 많이 보입니다.

Horizontal panels scroll one item at a time. Widen the panel to show more.

Q. Signal icon이 안 보여요.Q. The Signal icon is not showing.

Wi-Fi가 연결되지 않으면 표시되지 않습니다(의도된 동작). AP/STA/스캔 상태에서만 보입니다.

It is hidden while disconnected — by design. It appears in AP, STA and scanning states.

Q. 색을 바꿨는데 일부만 바뀌어요.Q. Only some colors changed.

위젯마다 색상 키가 지정되어 있습니다. 팔레트 값은 키를 쓰는 위젯에만 적용됩니다.

Each widget references a palette key; only widgets using that key change.

20. 라이선스20. License

에디터와 펌웨어 자체 코드는 MIT입니다. 함께 포함된 외부 구성요소는 각자의 라이선스를 따르며 고지는 삭제하지 않습니다.

Editor and firmware code are MIT. Bundled components keep their own licenses and their notices must be preserved.

구성 / Component	라이선스 / License
Editor (HTML/CSS/JS)	MIT
Firmware (ESP-IDF app)	MIT
`components/display`	MIT (ESP32-SI4732 Radio / Max Arnold notice)
`components/lovyan_gfx`	MIT family (see `license.txt`)
`joltwallet/littlefs`	BSD-3-Clause
ESP-IDF	Apache-2.0

전체 고지는 기기 화면의 Licenses 페이지에서 확인할 수 있습니다. Full notices are available on the device's Licenses page.

Designed & developed by @gnbd · gnbdatsmini.netlify.app/docs
GNBD MINI·radio UI Editor v0.1.0 beta · 2026