WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 0337446

Browse files
joinedjoined
committed
UI cleanup
1 parent 48d319f commit 0337446

File tree

2 files changed

+47
-80
lines changed

2 files changed

+47
-80
lines changed

‎esp/ui/ui.cpp‎

Lines changed: 47 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,21 @@ const lv_color_t purple = lv_color_hex(0x993399); // bus
1414
const lv_color_t tram_red = lv_color_hex(0xcc0000); // tram
1515
} // namespace Color
1616

17-
// TODO Rework the whole thing lol
17+
static constexpr lv_style_selector_t DEFAULT_SELECTOR = LV_PART_MAIN | LV_STATE_DEFAULT;
18+
19+
// Helper functions
20+
static void setup_flex_container(lv_obj_t *obj, lv_flex_flow_t flow, lv_flex_align_t main_align = LV_FLEX_ALIGN_START,
21+
lv_flex_align_t cross_align = LV_FLEX_ALIGN_START,
22+
lv_flex_align_t track_align = LV_FLEX_ALIGN_START) {
23+
lv_obj_set_flex_flow(obj, flow);
24+
lv_obj_set_flex_align(obj, main_align, cross_align, track_align);
25+
}
1826

19-
static lv_style_selector_t DEFAULT_SELECTOR = (uint32_t)LV_PART_MAIN | (uint16_t)LV_STATE_DEFAULT;
27+
static void remove_borders_and_padding(lv_obj_t *obj) {
28+
lv_obj_set_style_radius(obj, 0, DEFAULT_SELECTOR);
29+
lv_obj_set_style_border_width(obj, 0, DEFAULT_SELECTOR);
30+
lv_obj_set_style_pad_all(obj, 0, DEFAULT_SELECTOR);
31+
}
2032

2133
void Screen::switchTo(lv_scr_load_anim_t anim_type, uint32_t time, uint32_t delay) {
2234
if (screen == nullptr) {
@@ -29,25 +41,6 @@ void Screen::switchTo(lv_scr_load_anim_t anim_type, uint32_t time, uint32_t dela
2941
}
3042
}
3143

32-
lv_obj_t *Screen::createPanel() {
33-
const ui_lock_guard lock;
34-
auto *panel = lv_obj_create(screen);
35-
lv_obj_set_width(panel, lv_pct(100));
36-
lv_obj_set_height(panel, lv_pct(85));
37-
lv_obj_set_y(panel, 5);
38-
lv_obj_set_align(panel, LV_ALIGN_CENTER);
39-
lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_COLUMN);
40-
lv_obj_set_flex_align(panel, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
41-
lv_obj_set_style_radius(panel, 0, DEFAULT_SELECTOR);
42-
lv_obj_set_style_border_width(panel, 0, DEFAULT_SELECTOR);
43-
lv_obj_set_style_pad_hor(panel, 10, DEFAULT_SELECTOR);
44-
lv_obj_set_style_pad_ver(panel, 5, DEFAULT_SELECTOR);
45-
lv_obj_set_style_pad_row(panel, 2, DEFAULT_SELECTOR);
46-
lv_obj_set_style_pad_column(panel, 0, DEFAULT_SELECTOR);
47-
// TODO Bring back snapping of departure lines, without allowing to scroll past the last item somehow
48-
return panel;
49-
};
50-
5144
void SplashScreen::init() {
5245
const ui_lock_guard lock;
5346
screen = lv_obj_create(NULL);
@@ -68,12 +61,10 @@ void SplashScreen::init() {
6861
lv_obj_set_style_text_font(status, &montserrat_regular_16, DEFAULT_SELECTOR);
6962

7063
spinner = lv_spinner_create(screen);
71-
lv_obj_set_width(spinner, 50);
72-
lv_obj_set_height(spinner, 51);
64+
lv_obj_set_size(spinner, 50, 51);
7365
lv_obj_set_y(spinner, 60);
7466
lv_obj_set_align(spinner, LV_ALIGN_CENTER);
75-
76-
lv_obj_set_style_arc_color(spinner, Color::yellow, (uint32_t)LV_PART_INDICATOR | (uint16_t)LV_STATE_DEFAULT);
67+
lv_obj_set_style_arc_color(spinner, Color::yellow, LV_PART_INDICATOR | LV_STATE_DEFAULT);
7768
};
7869

7970
void SplashScreen::updateStatus(const std::string &message) {
@@ -89,11 +80,17 @@ void ProvisioningScreen::init() {
8980
const ui_lock_guard lock;
9081
screen = lv_obj_create(NULL);
9182
lv_obj_set_style_bg_color(screen, Color::black, DEFAULT_SELECTOR);
92-
lv_obj_set_style_bg_opa(screen, 255, DEFAULT_SELECTOR);
9383

94-
panel = createPanel();
84+
panel = lv_obj_create(screen);
85+
lv_obj_set_size(panel, lv_pct(100), lv_pct(85));
86+
lv_obj_set_y(panel, 5);
87+
lv_obj_set_align(panel, LV_ALIGN_CENTER);
88+
setup_flex_container(panel, LV_FLEX_FLOW_COLUMN);
89+
remove_borders_and_padding(panel);
90+
lv_obj_set_style_pad_hor(panel, 10, DEFAULT_SELECTOR);
91+
lv_obj_set_style_pad_ver(panel, 5, DEFAULT_SELECTOR);
92+
lv_obj_set_style_pad_row(panel, 2, DEFAULT_SELECTOR);
9593
lv_obj_set_y(panel, 0);
96-
lv_obj_set_style_height(panel, lv_pct(85), DEFAULT_SELECTOR);
9794
lv_obj_set_style_bg_opa(panel, LV_OPA_0, DEFAULT_SELECTOR);
9895
lv_obj_set_style_text_align(panel, LV_TEXT_ALIGN_CENTER, DEFAULT_SELECTOR);
9996
lv_obj_set_flex_align(panel, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START);
@@ -107,9 +104,7 @@ void ProvisioningScreen::addLine(const std::string &message) {
107104

108105
const ui_lock_guard lock;
109106
auto *log_line = lv_label_create(panel);
110-
lv_obj_set_width(log_line, lv_pct(100));
111-
lv_obj_set_height(log_line, LV_SIZE_CONTENT);
112-
lv_obj_set_align(log_line, LV_ALIGN_TOP_LEFT);
107+
lv_obj_set_size(log_line, lv_pct(100), LV_SIZE_CONTENT);
113108
lv_label_set_text(log_line, message.c_str());
114109
lv_obj_set_style_text_font(log_line, &montserrat_regular_16, DEFAULT_SELECTOR);
115110
lv_obj_set_style_text_color(log_line, Color::white, DEFAULT_SELECTOR);
@@ -160,31 +155,25 @@ void DepartureItem::create(lv_obj_t *parent, const std::string &line_text, const
160155
departure_time = time_to_departure;
161156

162157
item = lv_obj_create(parent);
163-
lv_obj_set_width(item, lv_pct(100));
164-
lv_obj_set_height(item, LV_SIZE_CONTENT);
165-
lv_obj_set_align(item, LV_ALIGN_TOP_LEFT);
166-
lv_obj_set_style_bg_opa(item, 0, DEFAULT_SELECTOR);
158+
lv_obj_set_size(item, lv_pct(100), LV_SIZE_CONTENT);
159+
lv_obj_set_style_bg_opa(item, LV_OPA_0, DEFAULT_SELECTOR);
167160
lv_obj_set_style_border_width(item, 0, DEFAULT_SELECTOR);
168161
lv_obj_set_style_pad_top(item, 2, DEFAULT_SELECTOR);
169162
lv_obj_set_style_pad_bottom(item, 2, DEFAULT_SELECTOR);
170163
lv_obj_set_style_pad_left(item, 2, DEFAULT_SELECTOR);
171164
lv_obj_set_style_pad_right(item, 8, DEFAULT_SELECTOR);
172165
lv_obj_set_style_text_color(item, Color::black, DEFAULT_SELECTOR);
173166
lv_obj_set_style_text_font(item, &roboto_condensed_regular_28_4bpp, DEFAULT_SELECTOR);
174-
// Set horizontal flexbox layout
175-
lv_obj_set_flex_flow(item, LV_FLEX_FLOW_ROW);
176-
lv_obj_set_flex_align(item, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START);
167+
setup_flex_container(item, LV_FLEX_FLOW_ROW, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
177168

178169
// Create colored badge for line (fixed width)
179170
lv_obj_t *line_badge = lv_obj_create(item);
180-
lv_obj_set_width(line_badge, 60);
181-
lv_obj_set_height(line_badge, 30);
182-
lv_obj_set_scroll_dir(line_badge, LV_DIR_NONE); // Disable scrolling for badge
171+
lv_obj_set_size(line_badge, 60, 30);
172+
lv_obj_set_scroll_dir(line_badge, LV_DIR_NONE);
183173
lv_obj_set_style_radius(line_badge, 5, DEFAULT_SELECTOR);
184174
lv_obj_set_style_border_width(line_badge, 0, DEFAULT_SELECTOR);
185175
lv_obj_set_style_pad_all(line_badge, 0, DEFAULT_SELECTOR);
186176
lv_obj_set_style_bg_color(line_badge, getProductColor(product_type), DEFAULT_SELECTOR);
187-
lv_obj_set_style_bg_opa(line_badge, LV_OPA_COVER, DEFAULT_SELECTOR);
188177

189178
line = lv_label_create(line_badge);
190179
lv_obj_center(line);
@@ -196,18 +185,16 @@ void DepartureItem::create(lv_obj_t *parent, const std::string &line_text, const
196185
direction = lv_label_create(item);
197186
lv_obj_set_height(direction,
198187
33); // ideally we'd specify "one line" here but we can't, the value is guessed visually
199-
lv_obj_set_style_flex_grow(direction, 1, DEFAULT_SELECTOR); // Take remaining space
188+
lv_obj_set_style_flex_grow(direction, 1, DEFAULT_SELECTOR);
200189
lv_obj_set_style_pad_left(
201190
direction, 9,
202191
DEFAULT_SELECTOR); // Add spacing from line badge (60px line + 9px padding = 69px, matching header)
203-
// Only use the dot mode if the label is really long, otherwise it looks weird.
204192
lv_label_set_long_mode(direction, LV_LABEL_LONG_DOT);
205193
lv_label_set_text(direction, direction_text.c_str());
206194
lv_obj_set_style_text_font(direction, &roboto_condensed_light_28_4bpp, DEFAULT_SELECTOR);
207195

208196
// Time column (fixed width, right-aligned)
209197
time = lv_label_create(item);
210-
lv_obj_set_width(time, LV_SIZE_CONTENT);
211198
lv_label_set_text(time, time_text.c_str());
212199
lv_obj_set_style_text_align(time, LV_TEXT_ALIGN_RIGHT, DEFAULT_SELECTOR);
213200

@@ -223,8 +210,6 @@ void DepartureItem::update(const std::string &line_text, const std::string &dire
223210

224211
const ui_lock_guard lock;
225212
departure_time = time_to_departure;
226-
// TODO The label circular scroll is reset when updating the text (= on refresh), avoid it
227-
// -> now outdated?
228213
lv_label_set_text(time, time_text.c_str());
229214
applyStrikethroughStyle(is_cancelled);
230215
}
@@ -254,14 +239,10 @@ void DepartureItem::applyStrikethroughStyle(bool enable) {
254239
if (strikethrough_line == nullptr) {
255240
// Create the strikethrough line - position it absolutely to avoid flexbox interference
256241
strikethrough_line = lv_obj_create(item);
257-
lv_obj_set_width(strikethrough_line, lv_pct(100));
258-
lv_obj_set_height(strikethrough_line, 2); // 2px thick line
259-
lv_obj_set_pos(strikethrough_line, 0, 16); // Fixed vertical center position
242+
lv_obj_set_size(strikethrough_line, lv_pct(100), 2);
243+
lv_obj_set_pos(strikethrough_line, 0, 16);
260244
lv_obj_set_style_bg_color(strikethrough_line, Color::black, DEFAULT_SELECTOR);
261-
lv_obj_set_style_bg_opa(strikethrough_line, LV_OPA_COVER, DEFAULT_SELECTOR);
262-
lv_obj_set_style_border_width(strikethrough_line, 0, DEFAULT_SELECTOR);
263-
lv_obj_set_style_radius(strikethrough_line, 0, DEFAULT_SELECTOR);
264-
lv_obj_set_style_pad_all(strikethrough_line, 0, DEFAULT_SELECTOR);
245+
remove_borders_and_padding(strikethrough_line);
265246
// Remove from flex layout so it doesn't interfere
266247
lv_obj_add_flag(strikethrough_line, LV_OBJ_FLAG_IGNORE_LAYOUT);
267248
} else {
@@ -281,62 +262,51 @@ void DeparturesScreen::init() {
281262
const ui_lock_guard lock;
282263
screen = lv_obj_create(NULL);
283264
lv_obj_set_style_bg_color(screen, Color::black, DEFAULT_SELECTOR);
284-
285-
// Set screen to use flex layout (column direction)
286-
lv_obj_set_flex_flow(screen, LV_FLEX_FLOW_COLUMN);
287-
lv_obj_set_flex_align(screen, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
265+
setup_flex_container(screen, LV_FLEX_FLOW_COLUMN);
288266
lv_obj_set_style_pad_all(screen, 0, DEFAULT_SELECTOR);
289267

290268
// Header with fixed height using horizontal flexbox
291269
header = lv_obj_create(screen);
292-
lv_obj_set_width(header, lv_pct(100));
293-
lv_obj_set_height(header, 35);
270+
lv_obj_set_size(header, lv_pct(100), 35);
294271
lv_obj_set_style_bg_color(header, Color::black, DEFAULT_SELECTOR);
295272
lv_obj_set_style_text_font(header, &roboto_condensed_light_28_4bpp, DEFAULT_SELECTOR);
296273
lv_obj_set_style_text_color(header, Color::white, DEFAULT_SELECTOR);
297274
lv_obj_set_style_border_width(header, 0, DEFAULT_SELECTOR);
298275
lv_obj_set_style_pad_left(header, 12, DEFAULT_SELECTOR);
299276
lv_obj_set_style_pad_right(header, 15, DEFAULT_SELECTOR);
300-
lv_obj_set_style_flex_grow(header, 0, DEFAULT_SELECTOR); // Don't grow
301-
lv_obj_set_flex_flow(header, LV_FLEX_FLOW_ROW);
302-
lv_obj_set_flex_align(header, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
277+
lv_obj_set_style_flex_grow(header, 0, DEFAULT_SELECTOR);
278+
setup_flex_container(header, LV_FLEX_FLOW_ROW, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
303279

304280
line = lv_label_create(header);
305-
lv_obj_set_width(line, 68); // Fixed width for line column
281+
lv_obj_set_width(line, 68);
306282
lv_label_set_text(line, "Line");
307283

308284
direction = lv_label_create(header);
309-
lv_obj_set_style_flex_grow(direction, 1, DEFAULT_SELECTOR); // Take remaining space
285+
lv_obj_set_style_flex_grow(direction, 1, DEFAULT_SELECTOR);
310286
lv_label_set_text(direction, "Direction");
311287

312288
departure = lv_label_create(header);
313-
lv_obj_set_width(departure, LV_SIZE_CONTENT); // Auto-size for ETD
314289
lv_label_set_text(departure, "ETD");
315290
lv_obj_set_style_text_align(departure, LV_TEXT_ALIGN_RIGHT, DEFAULT_SELECTOR);
316291

317292
// Panel takes remaining space (flex-grow)
318293
panel = lv_obj_create(screen);
319294
lv_obj_set_width(panel, lv_pct(100));
320-
lv_obj_set_style_flex_grow(panel, 1, DEFAULT_SELECTOR); // Grow to fill remaining space
321-
lv_obj_set_flex_flow(panel, LV_FLEX_FLOW_COLUMN);
322-
lv_obj_set_flex_align(panel, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
323-
lv_obj_set_style_radius(panel, 0, DEFAULT_SELECTOR);
324-
lv_obj_set_style_border_width(panel, 0, DEFAULT_SELECTOR);
295+
lv_obj_set_style_flex_grow(panel, 1, DEFAULT_SELECTOR);
296+
setup_flex_container(panel, LV_FLEX_FLOW_COLUMN);
297+
remove_borders_and_padding(panel);
325298
lv_obj_set_style_pad_hor(panel, 10, DEFAULT_SELECTOR);
326299
lv_obj_set_style_pad_ver(panel, 5, DEFAULT_SELECTOR);
327300
lv_obj_set_style_pad_row(panel, 2, DEFAULT_SELECTOR);
328-
lv_obj_set_style_pad_column(panel, 0, DEFAULT_SELECTOR);
329-
lv_obj_set_style_bg_opa(panel, LV_OPA_100, DEFAULT_SELECTOR);
330301
lv_obj_set_style_bg_color(panel, Color::white, DEFAULT_SELECTOR);
331302

332303
// Footer with fixed height
333304
footer = lv_obj_create(screen);
334-
lv_obj_set_width(footer, lv_pct(100));
335-
lv_obj_set_height(footer, 30);
305+
lv_obj_set_size(footer, lv_pct(100), 30);
336306
lv_obj_set_style_bg_color(footer, Color::black, DEFAULT_SELECTOR);
337307
lv_obj_set_style_border_width(footer, 0, DEFAULT_SELECTOR);
338308
lv_obj_set_style_pad_all(footer, 0, DEFAULT_SELECTOR);
339-
lv_obj_set_style_flex_grow(footer, 0, DEFAULT_SELECTOR); // Don't grow
309+
lv_obj_set_style_flex_grow(footer, 0, DEFAULT_SELECTOR);
340310

341311
// Move last updated label to footer
342312
last_updated_label = lv_label_create(footer);
@@ -387,7 +357,6 @@ void DeparturesScreen::addTextItem(const std::string &text) {
387357
auto *item = lv_label_create(panel);
388358
lv_obj_set_width(item, lv_pct(100));
389359
lv_obj_set_align(item, LV_ALIGN_CENTER);
390-
lv_obj_set_style_text_font(item, &roboto_condensed_regular_28_4bpp, DEFAULT_SELECTOR);
391360
lv_label_set_text(item, text.c_str());
392361
lv_obj_set_style_text_font(item, &roboto_condensed_light_28_4bpp, DEFAULT_SELECTOR);
393362
lv_obj_set_style_text_color(item, Color::black, DEFAULT_SELECTOR);
@@ -513,8 +482,7 @@ void SplashScreen::showConnectingToWiFiWithResetButton(void (*reset_callback)())
513482
if (reset_button == nullptr) {
514483
const ui_lock_guard lock;
515484
reset_button = lv_btn_create(screen);
516-
lv_obj_set_width(reset_button, 200);
517-
lv_obj_set_height(reset_button, 40);
485+
lv_obj_set_size(reset_button, 200, 40);
518486
lv_obj_set_y(reset_button, -80);
519487
lv_obj_set_align(reset_button, LV_ALIGN_BOTTOM_MID);
520488
lv_obj_set_style_bg_color(reset_button, Color::white, DEFAULT_SELECTOR);

‎esp/ui/ui.hpp‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ class Screen {
4141
void switchTo(lv_scr_load_anim_t anim_type = LV_SCR_LOAD_ANIM_NONE, uint32_t time = 0, uint32_t delay = 0);
4242

4343
protected:
44-
lv_obj_t *createPanel();
4544
lv_obj_t *screen = nullptr;
4645

4746
virtual void init() = 0;

0 commit comments

Comments
 (0)