Skip to content

Commit cfe9f9d

Browse files
baba-devbaba-dev
authored
Merge pull request #194 from baba-dev/codex/add-static-homepage-wireframe-with-cards
feat: add static Home/Rooms wireframe with reserved nav rail
2 parents 87cee96 + 501d62a commit cfe9f9d

3 files changed

Lines changed: 178 additions & 4 deletions

File tree

‎app/apps/app_launcher/app_launcher.cpp‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* SPDX-License-Identifier: MIT
55
*/
66
#include "app_launcher.h"
7-
7+
#include "ui_home.h"
88
#include <hal/hal.h>
99
#include <mooncake.h>
1010
#include <mooncake_log.h>
@@ -28,13 +28,12 @@ void AppLauncher::onOpen()
2828
{
2929
mclog::tagInfo(getAppInfo().name, "on open");
3030

31-
_view = std::make_unique<launcher_view::LauncherView>();
32-
_view->init();
31+
ui_home_create(nullptr);
3332
}
3433

3534
void AppLauncher::onRunning()
3635
{
37-
_view->update();
36+
// Static wireframe has no dynamic updates yet.
3837
}
3938

4039
void AppLauncher::onClose()

‎app/ui_home.c‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
#include "ui_home.h"
7+
8+
// ---- small helpers ----
9+
static void set_bg(lv_obj_t* obj, lv_color_t color)
10+
{
11+
lv_obj_set_style_bg_color(obj, color, 0);
12+
lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, 0);
13+
}
14+
15+
static lv_obj_t*
16+
make_label(lv_obj_t* parent, const char* txt, const lv_font_t* font, lv_color_t color)
17+
{
18+
lv_obj_t* label = lv_label_create(parent);
19+
lv_obj_set_style_text_font(label, font, 0);
20+
lv_obj_set_style_text_color(label, color, 0);
21+
lv_label_set_text(label, txt);
22+
return label;
23+
}
24+
25+
static lv_obj_t* make_divider(lv_obj_t* parent)
26+
{
27+
lv_obj_t* line = lv_obj_create(parent);
28+
lv_obj_remove_style_all(line);
29+
lv_obj_set_height(line, 2);
30+
set_bg(line, lv_color_hex(0x223049));
31+
lv_obj_set_width(line, LV_PCT(100));
32+
return line;
33+
}
34+
35+
static lv_obj_t* make_card(lv_obj_t* grid, const char* title, const char* body)
36+
{
37+
lv_obj_t* card = lv_obj_create(grid);
38+
set_bg(card, lv_color_hex(0x0F172A));
39+
lv_obj_set_style_radius(card, 20, 0);
40+
lv_obj_set_style_pad_all(card, 16, 0);
41+
lv_obj_set_style_pad_bottom(card, 18, 0);
42+
lv_obj_set_style_border_width(card, 3, 0);
43+
lv_obj_set_style_border_color(card, lv_color_hex(0x10B981), 0);
44+
45+
lv_obj_t* header = lv_obj_create(card);
46+
lv_obj_remove_style_all(header);
47+
lv_obj_set_style_radius(header, 14, 0);
48+
lv_obj_set_style_pad_all(header, 10, 0);
49+
set_bg(header, lv_color_hex(0x10B981));
50+
lv_obj_set_width(header, LV_PCT(100));
51+
lv_obj_set_height(header, 44);
52+
53+
make_label(header, title, &lv_font_montserrat_20, lv_color_white());
54+
55+
lv_obj_t* text = make_label(card, body, &lv_font_montserrat_18, lv_color_hex(0x94A3B8));
56+
lv_obj_align_to(text, header, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 12);
57+
58+
return card;
59+
}
60+
61+
lv_obj_t* ui_home_create(lv_obj_t* parent)
62+
{
63+
lv_obj_t* root = parent ? parent : lv_scr_act();
64+
set_bg(root, lv_color_hex(0x0B1220));
65+
66+
lv_obj_set_layout(root, LV_LAYOUT_FLEX);
67+
lv_obj_set_flex_flow(root, LV_FLEX_FLOW_ROW);
68+
lv_obj_set_style_pad_all(root, 0, 0);
69+
70+
lv_obj_t* rail = lv_obj_create(root);
71+
lv_obj_remove_style_all(rail);
72+
lv_obj_set_width(rail, 96);
73+
lv_obj_set_height(rail, LV_PCT(100));
74+
75+
lv_obj_t* content = lv_obj_create(root);
76+
lv_obj_remove_style_all(content);
77+
lv_obj_set_size(content, LV_PCT(100), LV_PCT(100));
78+
lv_obj_set_flex_grow(content, 1);
79+
80+
lv_obj_t* header = lv_obj_create(content);
81+
lv_obj_remove_style_all(header);
82+
lv_obj_set_layout(header, LV_LAYOUT_FLEX);
83+
lv_obj_set_flex_flow(header, LV_FLEX_FLOW_ROW);
84+
lv_obj_set_style_pad_all(header, 16, 0);
85+
lv_obj_set_style_pad_column(header, 16, 0);
86+
lv_obj_set_width(header, LV_PCT(100));
87+
lv_obj_set_height(header, 120);
88+
89+
lv_obj_t* left = lv_obj_create(header);
90+
lv_obj_remove_style_all(left);
91+
lv_obj_set_layout(left, LV_LAYOUT_FLEX);
92+
lv_obj_set_flex_flow(left, LV_FLEX_FLOW_COLUMN);
93+
lv_obj_set_style_pad_row(left, 4, 0);
94+
lv_obj_set_width(left, LV_PCT(100));
95+
lv_obj_set_flex_grow(left, 1);
96+
97+
make_label(left, "HH:MM:SS", &lv_font_montserrat_28, lv_color_hex(0xE5E7EB));
98+
make_label(left, "DD:MM:YYYY", &lv_font_montserrat_18, lv_color_hex(0x94A3B8));
99+
make_label(left,
100+
"Weather Forecast: Feeling Cloudy, Pack a raincoat",
101+
&lv_font_montserrat_18,
102+
lv_color_hex(0xE5E7EB));
103+
104+
lv_obj_t* right = lv_obj_create(header);
105+
lv_obj_remove_style_all(right);
106+
lv_obj_set_layout(right, LV_LAYOUT_FLEX);
107+
lv_obj_set_flex_flow(right, LV_FLEX_FLOW_COLUMN);
108+
lv_obj_set_style_pad_all(right, 0, 0);
109+
lv_obj_set_width(right, 320);
110+
lv_obj_set_height(right, LV_PCT(100));
111+
112+
lv_obj_t* red = lv_obj_create(right);
113+
lv_obj_remove_style_all(red);
114+
set_bg(red, lv_color_hex(0xEF4444));
115+
lv_obj_set_size(red, 320, 78);
116+
lv_obj_align(red, LV_ALIGN_TOP_RIGHT, 0, 0);
117+
118+
lv_obj_t* aqi = make_label(right, "AQI: XXX", &lv_font_montserrat_18, lv_color_hex(0xEF4444));
119+
lv_obj_align(aqi, LV_ALIGN_BOTTOM_RIGHT, 0, 0);
120+
121+
make_divider(content);
122+
123+
lv_obj_t* title =
124+
make_label(content, "Page Title: Homepage", &lv_font_montserrat_20, lv_color_hex(0xE5E7EB));
125+
lv_obj_set_style_pad_top(title, 8, 0);
126+
lv_obj_set_style_pad_left(title, 16, 0);
127+
128+
lv_obj_t* grid = lv_obj_create(content);
129+
lv_obj_remove_style_all(grid);
130+
lv_obj_set_layout(grid, LV_LAYOUT_GRID);
131+
132+
static int32_t cols[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
133+
static int32_t rows[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
134+
lv_obj_set_grid_dsc_array(grid, cols, rows);
135+
136+
lv_obj_set_style_pad_row(grid, 12, 0);
137+
lv_obj_set_style_pad_column(grid, 12, 0);
138+
lv_obj_set_style_pad_left(grid, 16, 0);
139+
lv_obj_set_style_pad_right(grid, 16, 0);
140+
lv_obj_set_style_pad_top(grid, 12, 0);
141+
lv_obj_set_width(grid, LV_PCT(100));
142+
lv_obj_set_height(grid, LV_PCT(100));
143+
144+
lv_obj_t* card_bakery = make_card(grid,
145+
"(ICON): Bakery",
146+
"Temp: X Celsius\nX Lights are currently on.\n\nTurn off "
147+
"Controls\n\nX Ventilation are currently on.\n\nTurn Off");
148+
lv_obj_set_grid_cell(card_bakery, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_START, 0, 1);
149+
150+
lv_obj_t* card_bedroom = make_card(grid, "(ICON): Bedroom", "Same as Bakery Card");
151+
lv_obj_set_grid_cell(card_bedroom, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 0, 1);
152+
153+
lv_obj_t* card_outside = make_card(grid, "(ICON): Outside", "Same as bakery card");
154+
lv_obj_set_grid_cell(card_outside, LV_GRID_ALIGN_STRETCH, 2, 1, LV_GRID_ALIGN_START, 0, 1);
155+
156+
return root;
157+
}

‎app/ui_home.h‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2025 M5Stack Technology CO LTD
3+
*
4+
* SPDX-License-Identifier: MIT
5+
*/
6+
#pragma once
7+
#include "lvgl.h"
8+
#ifdef __cplusplus
9+
extern "C"
10+
{
11+
#endif
12+
13+
/** Create the Home screen under parent (or lv_scr_act() if NULL). */
14+
lv_obj_t* ui_home_create(lv_obj_t* parent);
15+
16+
#ifdef __cplusplus
17+
}
18+
#endif

0 commit comments

Comments
 (0)