feat: implement flex layout to reduce absoluteness

Within this commit, we preserve the same style on home screen but use
flexbox patterns in LVGL. To help the further development better, we
introduce a new interface called display/utils.h to enable developers to
create their flexbox views easily.

Author: electricalgorithm

src/display/screens/home/home.c

@@ -1,5 +1,6 @@
 #include "lvgl.h"
 #include "display/display.h"
+#include "display/utils.h"
 
 // Holds the home screen object.
 lv_obj_t *home_screen;
@@ -9,14 +10,22 @@ lv_obj_t *label_day;
 
 void home_screen_init() {
     // Create the screen object which is the LV object with no parent.
-    home_screen = lv_obj_create(NULL);
-    // Remove the ability to scroll the screen.
-    lv_obj_remove_flag(home_screen, LV_OBJ_FLAG_SCROLLABLE);
+    home_screen = create_screen();
+
+    // Create a vertical flex layout container centered in the screen.
+    lv_obj_t *main_column = create_column(home_screen, 100, 100);
+
+    // Create a horizontal flex layout containers that will hold date and time labels.
+    lv_obj_t *clock_label_row = create_row(main_column, 100, 20);
+    lv_obj_t *date_day_row = create_row(main_column, 100, 20);
+
+    // Add spacing between rows.
+    lv_obj_set_style_pad_row(main_column, 5, LV_PART_MAIN);
 
     // Render items in the screen.
-    render_clock_label();
-    render_date_label();
-    render_day_label();
+    render_clock_label(clock_label_row);
+    render_date_label(date_day_row);
+    render_day_label(date_day_row);
 
     // Add an event handler for all possible events.
     lv_obj_add_event_cb(home_screen, home_screen_event, LV_EVENT_ALL, NULL);
@@ -26,53 +35,27 @@ void home_screen_event(lv_event_t * e) {
     // lv_event_code_t event_code = lv_event_get_code(e);lv_obj_t * target = lv_event_get_target(e);
 }
 
-void render_clock_label() {
-    // Create a new label and expand its size to content size and align it to center.
-    label_clock = lv_label_create(home_screen);
+void render_clock_label(lv_obj_t *flex_element) {
+    label_clock = lv_label_create(flex_element);
     lv_obj_set_width(label_clock, LV_SIZE_CONTENT);
     lv_obj_set_height(label_clock, LV_SIZE_CONTENT);
-    lv_obj_set_align(label_clock, LV_ALIGN_CENTER);
-
-    // Align to center but with upward Y offset.
-    lv_obj_align(label_clock, LV_ALIGN_CENTER, 0, -20);
-    
-    // Set the default text.
     lv_label_set_text(label_clock, "HH:mm");
 
-    // Format the clock text string.
-    /* 1. Set the letter spacing to 5. (Between letters)
-     * 2. Set the line spacing to 0. (Between new lines)
-     * 3. Align the text automatically.
-     * 4. Set no decoration on the text.
-     * 5. Set the font and the size to Montserrat 46.
-     */
     lv_obj_set_style_text_letter_space(label_clock, 5, LV_PART_MAIN | LV_STATE_DEFAULT);
     lv_obj_set_style_text_line_space(label_clock, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
-    lv_obj_set_style_text_align(label_clock, LV_TEXT_ALIGN_AUTO, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_set_style_text_align(label_clock, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT);
     lv_obj_set_style_text_decor(label_clock, LV_TEXT_DECOR_NONE, LV_PART_MAIN | LV_STATE_DEFAULT);
     lv_obj_set_style_text_font(label_clock, &lv_font_montserrat_46, LV_PART_MAIN | LV_STATE_DEFAULT);
 }
 
-void render_date_label() {
-    // Create a new label and expand its size to content size and align it to center.
-    label_date = lv_label_create(home_screen);
-
-    // Align it to the bottom of the clock label with a margin of 2x5y pixels.
-    lv_obj_align_to(label_date, label_clock, LV_ALIGN_OUT_BOTTOM_MID, -65, 0);
-
-    // Set the default text.
+void render_date_label(lv_obj_t *flex_element) {
+    label_date = lv_label_create(flex_element);
     lv_label_set_text(label_date, "YYYY-MM-DD");
     lv_obj_set_style_text_font(label_date, &lv_font_montserrat_18, LV_PART_MAIN | LV_STATE_DEFAULT);
 }
 
-void render_day_label() {
-    // Create a new label and expand its size to content size and align it to center.
-    label_day = lv_label_create(home_screen);
-
-    // Align it to the bottom of the clock label with a margin of 2x5y pixels.
-    lv_obj_align_to(label_day, label_clock, LV_ALIGN_OUT_BOTTOM_MID, +45, 0);
-
-    // Set the default text.
+void render_day_label(lv_obj_t *flex_element) {
+    label_day = lv_label_create(flex_element);
     lv_label_set_text(label_day, "DAY");
     lv_obj_set_style_text_font(label_day, &lv_font_montserrat_18, LV_PART_MAIN | LV_STATE_DEFAULT);
 }

src/display/screens/home/home.h

@@ -15,9 +15,9 @@ void home_screen_init();
 void home_screen_event(lv_event_t * e);
 
 // Render labels.
-void render_clock_label();
-void render_date_label();
-void render_day_label();
+void render_clock_label(lv_obj_t *flex_element);
+void render_date_label(lv_obj_t *flex_element);
+void render_day_label(lv_obj_t *flex_element);
 
 // Set the values on the home-screen. Returns 0 if successful, 1 otherwise.
 uint8_t home_screen_set_clock(uint8_t hour, uint8_t minute);

src/display/utils.c

@@ -0,0 +1,74 @@
+#include "lvgl.h"
+
+void remove_scrollable(lv_obj_t *obj) {
+    // Remove the ability to scroll the object.
+    lv_obj_remove_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
+    lv_obj_remove_flag(obj, LV_OBJ_FLAG_SCROLL_CHAIN);
+    // Set the scrollbar mode of the object to off.
+    lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_OFF);
+}
+
+lv_obj_t* create_screen() {
+    // Create the screen object which is the LV object with no parent.
+    lv_obj_t *screen = lv_obj_create(NULL);
+    remove_scrollable(screen);
+    return screen;
+}
+
+lv_obj_t* create_column(lv_obj_t* root, uint8_t width_perc, uint8_t height_perc) {
+    // Check the parameters if null. If so, set them 100.
+    if (!width_perc) width_perc = 100;
+    if (!height_perc) height_perc = 100;
+
+    // Create a vertical flex layout container centered in the screen.
+    lv_obj_t *column = lv_obj_create(root);
+    lv_obj_set_size(column, LV_PCT(width_perc), LV_PCT(height_perc));
+    lv_obj_center(column);
+
+    // Set the layout.
+    lv_obj_set_layout(column, LV_LAYOUT_FLEX);
+    lv_obj_set_flex_flow(column, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(column,
+                          LV_FLEX_ALIGN_CENTER,  // Main axis (vertical)
+                          LV_FLEX_ALIGN_CENTER,  // Cross axis (horizontal)
+                          LV_FLEX_ALIGN_CENTER); // Track alignment
+    
+    // Remove scrolling and set it to off.
+    remove_scrollable(column);
+
+    // Remove the borders.
+    lv_obj_set_style_border_width(column, 0, LV_PART_MAIN);
+    lv_obj_set_style_bg_opa(column, LV_OPA_TRANSP, LV_PART_MAIN);
+
+    // Return the column instance.
+    return column;
+}
+
+lv_obj_t* create_row(lv_obj_t* root, uint8_t width_perc, uint8_t height_perc) {
+    // Check the parameters if null. If so, set them 100.
+    if (!width_perc) width_perc = 100;
+    if (!height_perc) height_perc = 100;
+
+    // Create a new row object inside the root.
+    lv_obj_t *row = lv_obj_create(root);
+    lv_obj_set_size(row, LV_PCT(width_perc), LV_PCT(height_perc));
+    lv_obj_center(row);
+
+    // Use flext layout on the row.
+    lv_obj_set_layout(row, LV_LAYOUT_FLEX);
+    lv_obj_set_flex_flow(row, LV_FLEX_FLOW_ROW);
+    lv_obj_set_flex_align(row,
+                          LV_FLEX_ALIGN_CENTER,  // Main axis (vertical)
+                          LV_FLEX_ALIGN_CENTER,  // Cross axis (horizontal)
+                          LV_FLEX_ALIGN_CENTER); // Track alignment
+
+    // Remove scrolling and set it to off.
+    remove_scrollable(row);
+
+    // Remove the borders.
+    lv_obj_set_style_border_width(row, 0, LV_PART_MAIN);
+    lv_obj_set_style_bg_opa(row, LV_OPA_TRANSP, LV_PART_MAIN);
+
+    // Return the created row object.
+    return row;
+}

src/display/utils.h

@@ -0,0 +1,39 @@
+#ifndef _DISPLAY_UTILS_H
+#define _DISPLAY_UTILS_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "lvgl.h"
+
+/**
+ * Create a new screen object with no parent and scrolling.
+ * @return The created lv_obj_t screen instance.
+ */
+lv_obj_t* create_screen();
+
+/**
+ * Create a new flex column object inside the root.
+ * @param root The parent of the created lv_obj_t column instance.
+ * @param width_perc The percentage of the screen width to use for this column.
+ * @param height_perc The percentage of the screen height to use for this column.
+ * @return The created lv_obj_t column instance.
+ */
+lv_obj_t* create_column(lv_obj_t* root, uint8_t width_perc, uint8_t height_perc);
+
+/**
+ * Create a new flex row object inside the root.
+ * @param root The parent of the created lv_obj_t row instance.
+ * @param width_perc The percentage of the screen width to use for this row.
+ * @param height_perc The percentage of the screen height to use for this row.
+ * @return The created lv_obj_t row instance.
+ */
+lv_obj_t* create_row(lv_obj_t* root, uint8_t width_perc, uint8_t height_perc);
+
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif // _DISPLAY_UTILS_H