Skip to content

Commit d2e8ca3

Browse files
baba-devbaba-dev
authored
Merge pull request #74 from baba-dev/codex/rework-weather-page-layout-and-add-cards
feat(ui): refresh weather layout
2 parents a8036fd + 4bb1ae3 commit d2e8ca3

1 file changed

Lines changed: 169 additions & 28 deletions

File tree

‎custom/ui/pages/ui_page_weather.c‎

Lines changed: 169 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,66 +5,207 @@
55
*/
66
#include "ui_page_weather.h"
77

8+
#include "../ui_theme.h"
89
#include "../ui_wallpaper.h"
10+
#include "../widgets/ui_room_card.h"
911

10-
static void ui_page_weather_delete_cb(lv_event_t *event)
12+
static lv_obj_t* create_metric_block(lv_obj_t* parent, const char* title, const char* value)
1113
{
12-
ui_wallpaper_t *wallpaper = (ui_wallpaper_t *)lv_event_get_user_data(event);
14+
lv_obj_t* block = lv_obj_create(parent);
15+
lv_obj_remove_style_all(block);
16+
lv_obj_set_width(block, LV_PCT(100));
17+
lv_obj_set_style_bg_opa(block, LV_OPA_TRANSP, LV_PART_MAIN);
18+
lv_obj_set_flex_flow(block, LV_FLEX_FLOW_COLUMN);
19+
lv_obj_set_style_pad_gap(block, 4, LV_PART_MAIN);
20+
21+
lv_obj_t* title_label = lv_label_create(block);
22+
lv_label_set_text(title_label, title != NULL ? title : "");
23+
lv_obj_set_style_text_font(title_label, &lv_font_montserrat_16, LV_PART_MAIN);
24+
lv_obj_set_style_text_color(title_label, ui_theme_color_muted(), LV_PART_MAIN);
25+
26+
lv_obj_t* value_label = lv_label_create(block);
27+
lv_label_set_text(value_label, value != NULL ? value : "");
28+
lv_obj_set_style_text_font(value_label, &lv_font_montserrat_22, LV_PART_MAIN);
29+
lv_obj_set_style_text_color(value_label, ui_theme_color_on_surface(), LV_PART_MAIN);
30+
31+
return block;
32+
}
33+
34+
static void
35+
create_forecast_item(lv_obj_t* parent, const char* day, const char* icon, const char* range)
36+
{
37+
lv_obj_t* item = lv_obj_create(parent);
38+
lv_obj_remove_style_all(item);
39+
lv_obj_set_size(item, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
40+
lv_obj_set_style_bg_color(item, ui_theme_color_surface(), LV_PART_MAIN);
41+
lv_obj_set_style_bg_opa(item, LV_OPA_60, LV_PART_MAIN);
42+
lv_obj_set_style_radius(item, 14, LV_PART_MAIN);
43+
lv_obj_set_style_pad_all(item, 12, LV_PART_MAIN);
44+
lv_obj_set_style_pad_gap(item, 8, LV_PART_MAIN);
45+
lv_obj_set_style_border_width(item, 1, LV_PART_MAIN);
46+
lv_obj_set_style_border_color(item, ui_theme_color_outline(), LV_PART_MAIN);
47+
lv_obj_set_style_border_opa(item, LV_OPA_40, LV_PART_MAIN);
48+
lv_obj_set_flex_flow(item, LV_FLEX_FLOW_COLUMN);
49+
lv_obj_set_flex_align(item, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
50+
lv_obj_set_flex_grow(item, 1);
51+
52+
lv_obj_t* day_label = lv_label_create(item);
53+
lv_label_set_text(day_label, day != NULL ? day : "");
54+
lv_obj_set_style_text_font(day_label, &lv_font_montserrat_16, LV_PART_MAIN);
55+
lv_obj_set_style_text_color(day_label, ui_theme_color_muted(), LV_PART_MAIN);
56+
57+
lv_obj_t* icon_label = lv_label_create(item);
58+
lv_label_set_text(icon_label, icon != NULL ? icon : LV_SYMBOL_MINUS);
59+
lv_obj_set_style_text_font(icon_label, &lv_font_montserrat_28, LV_PART_MAIN);
60+
lv_obj_set_style_text_color(icon_label, ui_theme_color_accent(), LV_PART_MAIN);
61+
62+
lv_obj_t* range_label = lv_label_create(item);
63+
lv_label_set_text(range_label, range != NULL ? range : "");
64+
lv_obj_set_style_text_font(range_label, &lv_font_montserrat_18, LV_PART_MAIN);
65+
lv_obj_set_style_text_color(range_label, ui_theme_color_on_surface(), LV_PART_MAIN);
66+
}
67+
68+
static void ui_page_weather_delete_cb(lv_event_t* event)
69+
{
70+
ui_wallpaper_t* wallpaper = (ui_wallpaper_t*)lv_event_get_user_data(event);
1371
ui_wallpaper_detach(wallpaper);
1472
}
1573

16-
static lv_obj_t *ui_page_create_content(lv_obj_t *page, const char *title_text)
74+
static lv_obj_t* ui_page_create_content(lv_obj_t* page, const char* title_text)
1775
{
18-
lv_obj_t *content = lv_obj_create(page);
76+
lv_obj_t* content = lv_obj_create(page);
1977
lv_obj_remove_style_all(content);
2078
lv_obj_set_size(content, LV_PCT(100), LV_PCT(100));
2179
lv_obj_set_style_bg_opa(content, LV_OPA_TRANSP, LV_PART_MAIN);
2280
lv_obj_set_style_pad_left(content, 192, LV_PART_MAIN);
2381
lv_obj_set_style_pad_right(content, 48, LV_PART_MAIN);
24-
lv_obj_set_style_pad_top(content, 40, LV_PART_MAIN);
25-
lv_obj_set_style_pad_bottom(content, 40, LV_PART_MAIN);
82+
lv_obj_set_style_pad_top(content, 48, LV_PART_MAIN);
83+
lv_obj_set_style_pad_bottom(content, 48, LV_PART_MAIN);
2684
lv_obj_set_style_pad_row(content, 32, LV_PART_MAIN);
2785
lv_obj_set_flex_flow(content, LV_FLEX_FLOW_COLUMN);
2886
lv_obj_set_flex_align(content, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
2987

30-
lv_obj_t *title = lv_obj_create(content);
31-
lv_obj_remove_style_all(title);
88+
lv_obj_t* title = lv_label_create(content);
89+
lv_label_set_text(title, title_text != NULL ? title_text : "");
3290
lv_obj_set_width(title, LV_PCT(100));
33-
lv_obj_set_style_bg_color(title, lv_color_hex(0x132029), LV_PART_MAIN);
34-
lv_obj_set_style_bg_opa(title, LV_OPA_80, LV_PART_MAIN);
35-
lv_obj_set_style_radius(title, 16, LV_PART_MAIN);
36-
lv_obj_set_style_shadow_width(title, 24, LV_PART_MAIN);
37-
lv_obj_set_style_shadow_opa(title, LV_OPA_50, LV_PART_MAIN);
38-
lv_obj_set_style_shadow_ofs_y(title, 10, LV_PART_MAIN);
39-
lv_obj_set_style_border_width(title, 0, LV_PART_MAIN);
40-
lv_obj_set_style_pad_all(title, 28, LV_PART_MAIN);
41-
42-
lv_obj_t *label = lv_label_create(title);
43-
lv_label_set_text(label, title_text);
44-
lv_obj_set_width(label, LV_PCT(100));
45-
lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN);
46-
lv_obj_set_style_text_font(label, &lv_font_montserrat_32, LV_PART_MAIN);
47-
lv_obj_set_style_text_color(label, lv_color_hex(0xf8fafc), LV_PART_MAIN);
91+
lv_obj_set_style_text_align(title, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN);
92+
lv_obj_set_style_text_font(title, &lv_font_montserrat_32, LV_PART_MAIN);
93+
lv_obj_set_style_text_color(title, ui_theme_color_on_surface(), LV_PART_MAIN);
94+
95+
ui_room_card_config_t living_config = {
96+
.room_id = "living_room",
97+
.title = "Living Room Climate",
98+
.icon_text = LV_SYMBOL_HOME,
99+
};
100+
ui_room_card_t* living_card = ui_room_card_create(content, &living_config);
101+
if (living_card != NULL)
102+
{
103+
lv_obj_t* living_obj = ui_room_card_get_obj(living_card);
104+
lv_obj_t* toggle = ui_room_card_get_toggle(living_card);
105+
if (toggle != NULL)
106+
{
107+
lv_obj_add_flag(toggle, LV_OBJ_FLAG_HIDDEN);
108+
}
109+
if (living_obj != NULL)
110+
{
111+
lv_obj_t* specs = lv_obj_get_child(living_obj, -1);
112+
if (specs != NULL)
113+
{
114+
lv_obj_add_flag(specs, LV_OBJ_FLAG_HIDDEN);
115+
}
116+
117+
lv_obj_t* metrics = lv_obj_create(living_obj);
118+
lv_obj_remove_style_all(metrics);
119+
lv_obj_set_width(metrics, LV_PCT(100));
120+
lv_obj_set_style_bg_opa(metrics, LV_OPA_TRANSP, LV_PART_MAIN);
121+
lv_obj_set_style_pad_gap(metrics, 16, LV_PART_MAIN);
122+
lv_obj_set_flex_flow(metrics, LV_FLEX_FLOW_COLUMN);
123+
124+
create_metric_block(metrics, "Indoor Temperature", "72 \u00B0F");
125+
create_metric_block(metrics, "Humidity", "45% RH");
126+
create_metric_block(metrics, "HVAC Mode", "Auto (Cooling)");
127+
}
128+
}
129+
130+
ui_room_card_config_t outdoor_config = {
131+
.room_id = "outdoor",
132+
.title = "Outdoor Sensors",
133+
.icon_text = LV_SYMBOL_GPS,
134+
};
135+
ui_room_card_t* outdoor_card = ui_room_card_create(content, &outdoor_config);
136+
if (outdoor_card != NULL)
137+
{
138+
lv_obj_t* outdoor_obj = ui_room_card_get_obj(outdoor_card);
139+
lv_obj_t* toggle = ui_room_card_get_toggle(outdoor_card);
140+
if (toggle != NULL)
141+
{
142+
lv_obj_add_flag(toggle, LV_OBJ_FLAG_HIDDEN);
143+
}
144+
if (outdoor_obj != NULL)
145+
{
146+
lv_obj_t* specs = lv_obj_get_child(outdoor_obj, -1);
147+
if (specs != NULL)
148+
{
149+
lv_obj_add_flag(specs, LV_OBJ_FLAG_HIDDEN);
150+
}
151+
152+
lv_obj_t* metrics = lv_obj_create(outdoor_obj);
153+
lv_obj_remove_style_all(metrics);
154+
lv_obj_set_width(metrics, LV_PCT(100));
155+
lv_obj_set_style_bg_opa(metrics, LV_OPA_TRANSP, LV_PART_MAIN);
156+
lv_obj_set_style_pad_gap(metrics, 16, LV_PART_MAIN);
157+
lv_obj_set_flex_flow(metrics, LV_FLEX_FLOW_COLUMN);
158+
159+
create_metric_block(metrics, "sensor.tab5_temperature", "18 \u00B0C");
160+
create_metric_block(metrics, "sensor.tab5_humidity", "52 %");
161+
}
162+
}
163+
164+
lv_obj_t* forecast_label = lv_label_create(content);
165+
lv_label_set_text(forecast_label, "Forecast");
166+
lv_obj_set_style_text_font(forecast_label, &lv_font_montserrat_24, LV_PART_MAIN);
167+
lv_obj_set_style_text_color(forecast_label, ui_theme_color_on_surface(), LV_PART_MAIN);
168+
169+
lv_obj_t* forecast = lv_obj_create(content);
170+
lv_obj_remove_style_all(forecast);
171+
lv_obj_set_width(forecast, LV_PCT(100));
172+
lv_obj_set_style_bg_color(forecast, ui_theme_color_surface(), LV_PART_MAIN);
173+
lv_obj_set_style_bg_opa(forecast, LV_OPA_50, LV_PART_MAIN);
174+
lv_obj_set_style_radius(forecast, 18, LV_PART_MAIN);
175+
lv_obj_set_style_border_width(forecast, 1, LV_PART_MAIN);
176+
lv_obj_set_style_border_color(forecast, ui_theme_color_outline(), LV_PART_MAIN);
177+
lv_obj_set_style_border_opa(forecast, LV_OPA_40, LV_PART_MAIN);
178+
lv_obj_set_style_pad_all(forecast, 20, LV_PART_MAIN);
179+
lv_obj_set_style_pad_gap(forecast, 16, LV_PART_MAIN);
180+
lv_obj_set_flex_flow(forecast, LV_FLEX_FLOW_ROW);
181+
lv_obj_set_flex_align(
182+
forecast, LV_FLEX_ALIGN_SPACE_AROUND, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
183+
184+
create_forecast_item(forecast, "Today", LV_SYMBOL_REFRESH, "75° / 62°");
185+
create_forecast_item(forecast, "Tomorrow", LV_SYMBOL_DOWNLOAD, "78° / 64°");
186+
create_forecast_item(forecast, "Sat", LV_SYMBOL_UPLOAD, "80° / 66°");
48187

49188
return content;
50189
}
51190

52-
lv_obj_t *ui_page_weather_create(lv_obj_t *parent)
191+
lv_obj_t* ui_page_weather_create(lv_obj_t* parent)
53192
{
54-
if (parent == NULL) {
193+
if (parent == NULL)
194+
{
55195
return NULL;
56196
}
57197

58-
lv_obj_t *page = lv_obj_create(parent);
198+
lv_obj_t* page = lv_obj_create(parent);
59199
lv_obj_remove_style_all(page);
60200
lv_obj_set_size(page, LV_PCT(100), LV_PCT(100));
61201
lv_obj_set_style_bg_opa(page, LV_OPA_TRANSP, LV_PART_MAIN);
62202
lv_obj_set_scroll_dir(page, LV_DIR_VER);
63203
lv_obj_set_scrollbar_mode(page, LV_SCROLLBAR_MODE_OFF);
64204
lv_obj_add_flag(page, LV_OBJ_FLAG_CLICKABLE);
65205

66-
ui_wallpaper_t *wallpaper = ui_wallpaper_attach(page);
67-
if (wallpaper != NULL) {
206+
ui_wallpaper_t* wallpaper = ui_wallpaper_attach(page);
207+
if (wallpaper != NULL)
208+
{
68209
lv_obj_add_event_cb(page, ui_page_weather_delete_cb, LV_EVENT_DELETE, wallpaper);
69210
}
70211

0 commit comments

Comments
 (0)