Skip to content

Commit aab7cf5

Browse files
koosolikoosoli
committed
Add ViewDisplay profile and adjust LVGL plugins
Add a new hardware recipe for the ViewDisplay ESP32-S3 round TFT (viewdisplay-esp32-s3-uedx48480021.yaml) and accompanying unit test. Adjust LVGL plugin defaults and export/import mapping to normalize property names and defaults: keyboard textarea handling (use textarea_id), spinner spin_time vs time, textarea placeholder_text default, button color normalization, qrcode size/size default, and other minor prop defaults (size/scale_width/checkable/entity_id). Update widget_props_map parsing to match these changes and update tests/snapshots accordingly. Also tweak the round-trip test to mock the text plugin export for integration checks.
1 parent ba2cdd1 commit aab7cf5

File tree

10 files changed

+245
-128
lines changed

10 files changed

+245
-128
lines changed

‎custom_components/esphome_designer/frontend/features/lvgl_keyboard/plugin.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const exportLVGL = (w, { common, formatOpacity }) => {
3939
keyboard: {
4040
...common,
4141
mode: p.mode || "TEXT_LOWER",
42-
textarea: textareaId || undefined,
42+
...(textareaId ? { textarea: textareaId } : {}),
4343
opa: formatOpacity(p.opa)
4444
}
4545
};
@@ -53,7 +53,6 @@ export default {
5353
mode: "TEXT_LOWER",
5454
opa: 255,
5555
textarea_id: "",
56-
textarea: "",
5756
opacity: 255
5857
},
5958
schema: [

‎custom_components/esphome_designer/frontend/features/lvgl_spinner/plugin.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export default {
6464
category: "LVGL",
6565
defaults: {
6666
spin_time: 1000,
67-
time: 1000,
6867
arc_length: 60,
6968
arc_color: "blue",
7069
track_color: "white",

‎custom_components/esphome_designer/frontend/features/lvgl_textarea/plugin.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ export default {
6969
category: "LVGL",
7070
defaults: {
7171
text: "",
72-
placeholder: "Enter text...",
7372
placeholder_text: "Enter text...",
7473
max_length: 128,
7574
accepted_chars: "",

‎custom_components/esphome_designer/frontend/hardware/viewdisplay-esp32-s3-uedx48480021.yaml‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# ============================================================================
2+
# ESPHome YAML - Generated by ESPHome Designer
3+
# ============================================================================
4+
# TARGET DEVICE: ViewDisplay ESP32 Round TFT Knob 2.1" UEDX48480021-MD80ET
5+
# - Display Platform: st7701s (RGB LCD)
6+
# - PSRAM: Yes (Octal, 80MHz)
7+
# - Touchscreen: CST816
8+
# - Framework: ESP-IDF
9+
# Name: ViewDisplay ESP32 Round TFT Knob 2.1" UEDX48480021-MD80ET
10+
# Resolution: 480x480
11+
# Shape: round
12+
# ============================================================================
13+
#
14+
# BASED ON:
15+
# - https://viewedisplay.com/product/esp32-2-1-inch-480x480-round-tft-knob-display-rotary-encoder-arduino-lvgl/
16+
# - https://github.com/VIEWESMART/UEDX48480021-MD80ESP32-2.1inch-Touch-Knob-Display
17+
# - https://github.com/esphome/feature-requests/issues/3254
18+
#
19+
# Hardware configuration adapted for ESPHome Designer.
20+
#
21+
# ============================================================================
22+
#
23+
# SETUP INSTRUCTIONS:
24+
#
25+
# STEP 1: Copy the Material Design Icons font file
26+
# - From this repo: resources/fonts/materialdesignicons-webfont.ttf
27+
# - To ESPHome: /config/esphome/fonts/materialdesignicons-webfont.ttf
28+
# (Create the fonts folder if it doesn't exist)
29+
#
30+
# STEP 2: Create a new device in ESPHome
31+
# - Click "New Device"
32+
# - Name: your-device-name
33+
# - Select: ESP32-S3
34+
# - Framework: ESP-IDF (Required for this device)
35+
#
36+
# STEP 3: PASTE this snippet into your device YAML
37+
# - Paste this snippet at the end of your configuration.
38+
# - System sections (esphome, esp32, psram, etc.) are auto-commented
39+
# to avoid conflicts with your existing setup.
40+
#
41+
# ============================================================================
42+
43+
esphome:
44+
min_version: 2024.11.0
45+
project:
46+
name: "ViewDisplay.ESP32-S3-UEDX48480021"
47+
version: "1.0"
48+
49+
esp32:
50+
board: esp32-s3-devkitc-1
51+
variant: esp32s3
52+
flash_size: 16MB
53+
framework:
54+
type: esp-idf
55+
advanced:
56+
execute_from_psram: true
57+
58+
psram:
59+
mode: octal
60+
speed: 80MHz
61+
62+
preferences:
63+
flash_write_interval: 5min
64+
65+
logger:
66+
level: DEBUG
67+
68+
spi:
69+
- id: lcd_spi
70+
clk_pin:
71+
number: GPIO13
72+
allow_other_uses: true
73+
mosi_pin:
74+
number: GPIO12
75+
allow_other_uses: true
76+
77+
output:
78+
- platform: ledc
79+
pin: GPIO7
80+
id: gpio_backlight_pwm
81+
frequency: 1000Hz
82+
83+
light:
84+
- platform: monochromatic
85+
output: gpio_backlight_pwm
86+
name: Display Backlight
87+
id: display_backlight
88+
restore_mode: ALWAYS_ON
89+
90+
i2c:
91+
- id: bus_a
92+
sda: GPIO16
93+
scl: GPIO15
94+
scan: true
95+
96+
display:
97+
- platform: st7701s
98+
id: my_display
99+
rotation: 0
100+
update_interval: 1s
101+
auto_clear_enabled: true
102+
color_order: RGB
103+
dimensions:
104+
width: 480
105+
height: 480
106+
cs_pin: GPIO18
107+
reset_pin:
108+
number: GPIO8
109+
allow_other_uses: true
110+
de_pin: GPIO17
111+
hsync_pin: GPIO46
112+
vsync_pin: GPIO3
113+
pclk_pin: GPIO9
114+
pclk_frequency: 12MHz
115+
hsync_pulse_width: 255
116+
hsync_front_porch: 1
117+
hsync_back_porch: 255
118+
vsync_pulse_width: 254
119+
vsync_front_porch: 2
120+
vsync_back_porch: 254
121+
data_pins:
122+
red: [40, 41, 42, 2, 1]
123+
green: [21, 47, 48, 45, 38, 39]
124+
blue:
125+
- 10
126+
- 11
127+
- number: 12
128+
allow_other_uses: true
129+
- number: 13
130+
allow_other_uses: true
131+
- 14
132+
# __LAMBDA_PLACEHOLDER__
133+
134+
touchscreen:
135+
- platform: cst816
136+
id: my_touchscreen
137+
reset_pin:
138+
number: GPIO8
139+
allow_other_uses: true
140+
transform:
141+
swap_xy: false
142+
mirror_x: false
143+
mirror_y: false
144+
on_release:
145+
- if:
146+
condition: lvgl.is_paused
147+
then:
148+
- lvgl.resume:
149+
- lvgl.widget.redraw:
150+
- light.turn_on: display_backlight
151+
152+
sensor:
153+
- platform: rotary_encoder
154+
name: Rotary Encoder
155+
id: knob_encoder
156+
pin_a: GPIO6
157+
pin_b: GPIO5
158+
resolution: 2
159+
internal: true
160+
161+
binary_sensor:
162+
# __TOUCH_SENSORS_PLACEHOLDER__
163+
- platform: gpio
164+
name: Encoder Button
165+
id: encoder_button
166+
pin:
167+
number: GPIO0
168+
inverted: true
169+
ignore_strapping_warning: true
170+
internal: true

‎custom_components/esphome_designer/frontend/js/io/yaml_parsers/widget_props_map.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -323,14 +323,14 @@ export function buildWidgetProps(widgetType, p, widget) {
323323
};
324324
} else if (widgetType === "lvgl_button") {
325325
if (p.title) widget.title = p.title;
326-
const text_color = normalizeColor(p.text_color || p.color, "theme_auto");
326+
const color = normalizeColor(p.color || p.text_color, "theme_auto");
327327
delete props.color;
328328
delete props.text_color;
329329
return {
330330
...props,
331331
text: p.text || "Button",
332332
bg_color: normalizeColor(p.bg_color, "theme_auto_inverse"),
333-
text_color,
333+
color,
334334
font_size: parseInt(p.font_size || 14, 10),
335335
border_width: parseInt(p.border_width || p.border || 2, 10),
336336
radius: parseInt(p.radius || 5, 10),
@@ -378,6 +378,7 @@ export function buildWidgetProps(widgetType, p, widget) {
378378
return {
379379
...props,
380380
text: p.text || "https://github.com/koosoli/ESPHomeDesigner/",
381+
size: parseInt(p.size || 100, 10),
381382
scale: parseInt(p.scale || 4, 10),
382383
color: p.color || "black",
383384
bg_color: p.bg_color || "white"
@@ -426,7 +427,7 @@ export function buildWidgetProps(widgetType, p, widget) {
426427
} else if (widgetType === "lvgl_spinner") {
427428
return {
428429
...props,
429-
time: parseInt(p.time || p.spin_time || 1000, 10),
430+
spin_time: parseInt(p.spin_time || p.time || 1000, 10),
430431
arc_length: parseInt(p.arc_length || 60, 10),
431432
arc_color: p.arc_color || "blue",
432433
track_color: p.track_color || "white"
@@ -497,7 +498,7 @@ export function buildWidgetProps(widgetType, p, widget) {
497498
} else if (widgetType === "lvgl_textarea") {
498499
return {
499500
...props,
500-
placeholder_text: (p.placeholder_text || p.placeholder || "").replace(/^"|"$/g, ''),
501+
placeholder_text: (p.placeholder_text || p.placeholder || "Enter text...").replace(/^"|"$/g, ''),
501502
text: (p.text || "").replace(/^"|"$/g, ''),
502503
one_line: (p.one_line === "true" || p.one_line === true),
503504
max_length: parseInt(p.max_length || 128, 10),

‎custom_components/esphome_designer/frontend/tests/features/__snapshots__/plugin_defaults_snapshot.test.js.snap‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,8 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
176176
{
177177
"bg_color": "theme_auto_inverse",
178178
"border_width": 2,
179+
"checkable": false,
180+
"color": "theme_auto",
179181
"entity_id": "",
180182
"font_family": "Roboto",
181183
"font_size": 14,
@@ -185,7 +187,6 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
185187
"opacity": 255,
186188
"radius": 5,
187189
"text": "Button",
188-
"text_color": "theme_auto",
189190
}
190191
`;
191192

@@ -232,6 +233,7 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
232233
{
233234
"bg_color": "transparent",
234235
"color": "blue",
236+
"entity_id": "",
235237
"max": 100,
236238
"min": 0,
237239
"opa": 255,
@@ -288,7 +290,7 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
288290
"mode": "TEXT_LOWER",
289291
"opa": 255,
290292
"opacity": 255,
291-
"textarea": "",
293+
"textarea_id": "",
292294
}
293295
`;
294296

@@ -345,6 +347,7 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
345347
"min": 0,
346348
"opa": 255,
347349
"opacity": 255,
350+
"scale_width": 10,
348351
"tick_count": 11,
349352
"tick_length": 10,
350353
"value": 0,
@@ -374,6 +377,7 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
374377
"opa": 255,
375378
"opacity": 255,
376379
"scale": 4,
380+
"size": 100,
377381
"text": "https://github.com/koosoli/ESPHomeDesigner/",
378382
"width": 130,
379383
}
@@ -432,7 +436,7 @@ exports[`Plugin Defaults Snapshots > should match snapshot for defaults of lvgl_
432436
"arc_length": 60,
433437
"opa": 255,
434438
"opacity": 255,
435-
"time": 1000,
439+
"spin_time": 1000,
436440
"track_color": "white",
437441
}
438442
`;

‎custom_components/esphome_designer/frontend/tests/features/__snapshots__/plugin_export_smoke.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1330,7 +1330,7 @@ exports[`Plugin Export Smoke Tests > Export for lvgl_qrcode > should export LVGL
13301330
"qrcode": {
13311331
"dark_color": "Color(black)",
13321332
"light_color": "Color(white)",
1333-
"size": NaN,
1333+
"size": 100,
13341334
"text": ""https://github.com/koosoli/ESPHomeDesigner/"",
13351335
},
13361336
}
@@ -1463,7 +1463,7 @@ exports[`Plugin Export Smoke Tests > Export for lvgl_textarea > should export LV
14631463
"max_length": 128,
14641464
"one_line": false,
14651465
"password_mode": false,
1466-
"placeholder_text": undefined,
1466+
"placeholder_text": "Enter text...",
14671467
"text": "",
14681468
},
14691469
"type": "textarea",

0 commit comments

Comments
 (0)