add remote source code (#12)

Co-authored-by: jyy <jiangyeying@m5stack.com>

remote/code/main/ui/ui.c

@@ -0,0 +1,93 @@
+#include "ui.h"
+
+/**
+ * @brief Switches between different UI screens based on the provided screen ID
+ *
+ * This function manages the display of different UI screens (setup, running, IMU)
+ * by checking if the requested screen exists, creating it if necessary, validating
+ * the screen object, and then loading it with a slide-left animation effect.
+ *
+ * The function implements error handling by destroying and recreating invalid screens
+ * using goto statements for retry logic. Each screen type has its own creation
+ * and validation flow.
+ *
+ * @param screen_id An integer representing the target screen mode:
+ *                  - MODE_SETUP: Configuration/setup screen
+ *                  - MODE_RUNNING: Main operational screen
+ *                  - MODE_IMU: IMU data visualization screen
+ *                  - Any other value: Logs an error message
+ *
+ * @note The function uses LVGL's animation API to provide smooth screen transitions
+ *       with a 200ms left slide animation. Thread safety should be considered when
+ *       calling this function from different tasks.
+ *
+ * @warning This function relies on external screen objects and creation/destruction
+ *          functions that must be implemented in other UI modules. The use of goto
+ *          statements may affect code maintainability.
+ */
+void switch_screen(int screen_id)
+{
+    if (screen_id == MODE_SETUP) {
+    setup_create:
+        if (setup_screen == NULL) {
+            create_setup_screen();
+            ESP_LOGI("UI", "Setup screen created");
+        }
+        // Load only if object is valid
+        if (setup_screen != NULL && lv_obj_is_valid(setup_screen)) {
+            ESP_LOGI("UI", "Setup screen loaded");
+            lv_scr_load_anim(setup_screen, LV_SCR_LOAD_ANIM_MOVE_LEFT, 200, 0, false);
+        } else {
+            ESP_LOGE("UI", "Setup screen is NULL or invalid!");
+            ui_setup_screen_destory();
+            goto setup_create;
+        }
+    } else if (screen_id == MODE_RUNNING) {
+    running_create:
+        if (running_screen == NULL) {
+            create_running_screen();
+            ESP_LOGI("UI", "Running screen created");
+        }
+        // Load only if object is valid
+        if (running_screen != NULL && lv_obj_is_valid(running_screen)) {
+            ESP_LOGI("UI", "Running screen loaded");
+            lv_scr_load_anim(running_screen, LV_SCR_LOAD_ANIM_MOVE_LEFT, 200, 0, false);
+        } else {
+            ESP_LOGE("UI", "Running screen is NULL or invalid!");
+            ui_running_screen_destory();
+            goto running_create;
+        }
+    } else if (screen_id == MODE_IMU) {
+    imu_create:
+        if (imu_screen == NULL) {
+            create_imu_screen();
+            ESP_LOGI("UI", "IMU screen created");
+        }
+        // Load only if object is valid
+        if (imu_screen != NULL && lv_obj_is_valid(imu_screen)) {
+            ESP_LOGI("UI", "IMU screen loaded");
+            lv_scr_load_anim(imu_screen, LV_SCR_LOAD_ANIM_MOVE_LEFT, 200, 0, false);
+        } else {
+            ESP_LOGE("UI", "Running screen is NULL or invalid!");
+            ui_imu_screen_destory();
+            goto imu_create;
+        }
+    } else {
+        ESP_LOGE("UI", "Invalid screen mode!");
+    }
+}
+
+/**
+ * @brief Initialize the UI system by creating and loading the initial setup screen
+ * @note This function serves as the entry point for UI initialization
+ * @details
+ *      1. Creates the setup screen using create_setup_screen()
+ *      2. Immediately loads the setup screen as the current display
+ *      3. Sets up the initial UI state for user interaction
+ * @warning This function should only be called once during application startup
+ */
+void ui_init()
+{
+    create_setup_screen();
+    lv_disp_load_scr(setup_screen);
+}

remote/code/main/ui/ui.h

@@ -0,0 +1,15 @@
+#ifndef UI_H
+#define UI_H
+
+#include "esp_log.h"
+#include "lvgl.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "ui_setup_screen.h"
+#include "ui_running_screen.h"
+#include "ui_imu_screen.h"
+
+void ui_init();
+void switch_screen(int screen_id);
+
+#endif

remote/code/main/ui/ui_imu_screen.c

@@ -0,0 +1,280 @@
+#include "ui_imu_screen.h"
+#include <math.h>
+#include <stdio.h>
+#include "../lvgl_port.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+
+static lv_obj_t *edge_lines[12];
+static lv_obj_t *cross_lines[2];  // 标识用的对角线
+
+static lv_point_t edge_points[12][2];  // 12条边，每条2个点
+static lv_point_t cross_points[2][2];  // 2条对角线，每条2个点
+
+lv_obj_t *imu_screen;
+lv_obj_t *cube_container = NULL;
+lv_obj_t *imu_battery_label;
+lv_obj_t *imu_channel_info_label;
+lv_obj_t *imu_id_info_label;
+lv_obj_t *imu_data_label;
+
+// 3D cube parameters
+typedef struct {
+    float x, y, z;
+} Point3D;
+
+typedef struct {
+    float x, y;
+} Point2D;
+
+// Define the 8 vertices of a cube
+static Point3D vertices[8] = {{-1, -1, -1}, {1, -1, -1}, {1, 1, -1}, {-1, 1, -1},
+                              {-1, -1, 1},  {1, -1, 1},  {1, 1, 1},  {-1, 1, 1}};
+
+// Define the 12 edges of a cube (indices of vertices connected)
+static int edges[12][2] = {
+    {0, 1}, {1, 2}, {2, 3}, {3, 0},  // fornt
+    {4, 5}, {5, 6}, {6, 7}, {7, 4},  // behind
+    {0, 4}, {1, 5}, {2, 6}, {3, 7}   // middle connecting line
+};
+
+IMU_Angle_t g_imu_angle = {0.0f, 0.0f};
+
+/**
+ * @brief Creates the IMU screen with all UI elements including a 3D cube visualization
+ *
+ * This function initializes and creates the main IMU screen interface with:
+ * - Title label showing "StackChan :)"
+ * - A cube container for 3D visualization
+ * - 12 cube edge lines forming a 3D cube
+ * - 2 diagonal cross lines for orientation reference
+ * - Battery status label
+ * - Channel information label
+ * - Receiver ID label
+ *
+ * The function handles LVGL locking to ensure thread-safe operations.
+ */
+void create_imu_screen()
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    if (imu_screen == NULL) {
+        imu_screen = lv_obj_create(NULL);
+    }
+    lv_obj_clear_flag(imu_screen, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Create title
+    lv_obj_t *label = lv_label_create(imu_screen);
+    lv_label_set_text(label, "StackChan :)");
+    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 10);
+    lv_obj_set_style_text_font(label, &lv_font_montserrat_14, 0);
+
+    // create container
+    cube_container = lv_obj_create(imu_screen);
+    lv_obj_set_size(cube_container, 115, 115);
+    lv_obj_align(cube_container, LV_ALIGN_TOP_MID, 0, 35);
+    lv_obj_set_style_bg_opa(cube_container, LV_OPA_TRANSP, 0);
+    lv_obj_set_style_border_width(cube_container, 0, 0);
+    lv_obj_set_style_pad_all(cube_container, 0, 0);
+    lv_obj_clear_flag(cube_container, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Create 12 cube edges
+    for (int i = 0; i < 12; i++) {
+        edge_lines[i] = lv_line_create(cube_container);
+        lv_obj_set_style_line_width(edge_lines[i], 2, 0);
+        lv_obj_set_style_line_color(edge_lines[i], lv_color_black(), 0);
+        lv_obj_add_flag(edge_lines[i], LV_OBJ_FLAG_FLOATING);
+
+        // Add default coordinate points to avoid empty line segments
+        lv_point_t default_points[2] = {{0, 0}, {0, 0}};
+        lv_line_set_points(edge_lines[i], default_points, 2);
+    }
+
+    // Create 2 lines identifying the diagonals
+    for (int i = 0; i < 2; i++) {
+        cross_lines[i] = lv_line_create(cube_container);
+        lv_obj_set_style_line_width(cross_lines[i], 2, 0);
+        lv_obj_set_style_line_color(cross_lines[i], lv_color_make(0, 255, 255), 0);
+        lv_obj_add_flag(cross_lines[i], LV_OBJ_FLAG_FLOATING);
+
+        // Add default coordinate
+        lv_point_t default_cross_points[2] = {{0, 0}, {0, 0}};
+        lv_line_set_points(cross_lines[i], default_cross_points, 2);
+    }
+
+    // Create other UI elements
+    imu_battery_label = lv_label_create(imu_screen);
+    lv_label_set_text(imu_battery_label, "Bat: 100%");
+    lv_obj_align(imu_battery_label, LV_ALIGN_TOP_LEFT, 10, 160);
+    lv_obj_set_style_text_font(imu_battery_label, &lv_font_montserrat_14, 0);
+
+    imu_channel_info_label = lv_label_create(imu_screen);
+    lv_label_set_text(imu_channel_info_label, "Channel: 1");
+    lv_obj_align(imu_channel_info_label, LV_ALIGN_TOP_LEFT, 10, 180);
+    lv_obj_set_style_text_font(imu_channel_info_label, &lv_font_montserrat_14, 0);
+
+    imu_id_info_label = lv_label_create(imu_screen);
+    lv_label_set_text(imu_id_info_label, "Receiver ID:\n0(broadcast)");
+    lv_obj_align(imu_id_info_label, LV_ALIGN_TOP_LEFT, 10, 200);
+    lv_obj_set_style_text_font(imu_id_info_label, &lv_font_montserrat_14, 0);
+
+    lvgl_port_unlock();
+}
+
+/**
+ * @brief Updates the 3D cube visualization based on IMU accelerometer data
+ *
+ * This function takes accelerometer readings (ax, ay, az) and calculates
+ * the pitch and roll angles to rotate a 3D cube representation. It performs:
+ * - Input validation to check for NaN or infinite values
+ * - Calculation of pitch and roll angles using trigonometric functions
+ * - 3D to 2D projection of cube vertices with rotation transformations
+ * - Updates all 12 cube edge lines and 2 diagonal marker lines
+ *
+ * @param ax Accelerometer X-axis reading
+ * @param ay Accelerometer Y-axis reading
+ * @param az Accelerometer Z-axis reading
+ */
+void update_imu_cube(float ax, float ay, float az)
+{
+    // Check if the input value is valid
+    if (isnan(ax) || isnan(ay) || isnan(az) || isinf(ax) || isinf(ay) || isinf(az)) {
+        printf("Invalid IMU data received!\n");
+        return;
+    }
+
+    // Calculate tilt angle (based on gravitational acceleration)
+    float pitch = atan2(ay, sqrt(ax * ax + az * az));
+    float roll  = atan2(ax, sqrt(ay * ay + az * az));
+
+    if (az < 0) {
+        pitch = M_PI - pitch;
+    }
+
+    g_imu_angle.pitch = pitch;
+    g_imu_angle.roll  = roll;
+
+    // 3D projection calculation
+    Point2D projected[8];  // Store the 2D points after projection
+    int centerX = lv_obj_get_width(cube_container) / 2;
+    int centerY = lv_obj_get_height(cube_container) / 2;
+
+    float scale = 30.0f;
+
+    for (int i = 0; i < 8; i++) {
+        Point3D p = vertices[i];
+
+        // Pitch
+        float y1 = p.y * cos(pitch) - p.z * sin(pitch);
+        float z1 = p.y * sin(pitch) + p.z * cos(pitch);
+        float x1 = p.x;
+
+        // Roll
+        float x2 = x1 * cos(roll) + z1 * sin(roll);
+        float z2 = -x1 * sin(roll) + z1 * cos(roll);
+        float y2 = y1;
+
+        // Orthographic projection
+        projected[i].x = centerX + x2 * scale;
+        projected[i].y = centerY + y2 * scale;
+    }
+
+    // Update 12 cube edges
+    for (int i = 0; i < 12; i++) {
+        edge_points[i][0].x = (int16_t)projected[edges[i][0]].x;
+        edge_points[i][0].y = (int16_t)projected[edges[i][0]].y;
+        edge_points[i][1].x = (int16_t)projected[edges[i][1]].x;
+        edge_points[i][1].y = (int16_t)projected[edges[i][1]].y;
+        lv_line_set_points(edge_lines[i], edge_points[i], 2);
+    }
+
+    // Update 2 diagonal markers
+    cross_points[0][0] = (lv_point_t){(int16_t)projected[0].x, (int16_t)projected[0].y};
+    cross_points[0][1] = (lv_point_t){(int16_t)projected[2].x, (int16_t)projected[2].y};
+    lv_line_set_points(cross_lines[0], cross_points[0], 2);
+
+    cross_points[1][0] = (lv_point_t){(int16_t)projected[1].x, (int16_t)projected[1].y};
+    cross_points[1][1] = (lv_point_t){(int16_t)projected[3].x, (int16_t)projected[3].y};
+    lv_line_set_points(cross_lines[1], cross_points[1], 2);
+}
+
+/**
+ * @brief Updates the complete IMU screen with sensor data and system information
+ *
+ * This function updates the entire IMU screen with real-time data including:
+ * - Updates the 3D cube visualization via update_imu_cube()
+ * - Battery percentage display
+ * - Communication channel information
+ * - Receiver ID display (handles broadcast case)
+ *
+ * Optimized to only update labels when values have changed using static tracking variables.
+ *
+ * @param ax Accelerometer X-axis reading
+ * @param ay Accelerometer Y-axis reading
+ * @param az Accelerometer Z-axis reading
+ * @param bat Battery level percentage (0-100)
+ * @param id Receiver ID (0 for broadcast)
+ * @param channel ESP-NOW communication channel
+ * @return IMU_Angle_t Current pitch and roll angles calculated from IMU data
+ */
+IMU_Angle_t update_imu_screen(float ax, float ay, float az, uint8_t bat, uint8_t id, uint8_t channel)
+{
+    static uint8_t last_bat     = 0xFF;
+    static uint8_t last_id      = 0xFF;
+    static uint8_t last_channel = 0xFF;
+
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+
+    update_imu_cube(ax, ay, az);
+
+    if (imu_battery_label && bat != last_bat) {
+        lv_label_set_text_fmt(imu_battery_label, "Bat: %d%%", bat);
+        last_bat = bat;
+    }
+
+    if (imu_channel_info_label && channel != last_channel) {
+        lv_label_set_text_fmt(imu_channel_info_label, "Channel: %u", channel);
+        last_channel = channel;
+    }
+
+    if (imu_id_info_label && id != last_id) {
+        if (id == 0) {
+            lv_label_set_text(imu_id_info_label, "Receiver ID:\n0(broadcast)");
+        } else {
+            lv_label_set_text_fmt(imu_id_info_label, "Receiver ID: %u", id);
+        }
+        last_id = id;
+    }
+    lvgl_port_unlock();
+    return g_imu_angle;
+}
+
+/**
+ * @brief Destroys and cleans up the IMU screen resources
+ *
+ * This function safely removes the IMU screen from memory by:
+ * - Acquiring LVGL lock for thread safety
+ * - Deleting the main screen object if it exists
+ * - Setting all UI element pointers to NULL to prevent dangling references
+ *
+ * After execution, the screen will need to be recreated before use again.
+ */
+void ui_imu_screen_destory()
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    if (imu_screen != NULL) {
+        lv_obj_del(imu_screen);
+        imu_screen = NULL;
+    }
+    lvgl_port_unlock();
+
+    imu_battery_label      = NULL;
+    imu_channel_info_label = NULL;
+    imu_id_info_label      = NULL;
+    imu_data_label         = NULL;
+}

remote/code/main/ui/ui_imu_screen.h

@@ -0,0 +1,37 @@
+#ifndef UI_IMU_SCREEN_H
+#define UI_IMU_SCREEN_H
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "lvgl.h"
+#include <math.h>
+#include <stdio.h>
+#include "esp_log.h"
+#include "esp_heap_caps.h"
+
+#define MODE_IMU (2)
+
+typedef struct {
+    float pitch;
+    float roll;
+} IMU_Angle_t;
+
+extern lv_obj_t *imu_screen;
+extern lv_obj_t *imu_battery_label;
+extern lv_obj_t *imu_channel_info_label;
+extern lv_obj_t *imu_id_info_label;
+extern lv_obj_t *imu_canvas;
+extern lv_obj_t *imu_data_label;
+
+void create_imu_screen(void);
+IMU_Angle_t update_imu_screen(float ax, float ay, float az, uint8_t channel, uint8_t id, uint8_t bat);
+void update_imu_cube(float ax, float ay, float az);
+void ui_imu_screen_destory(void);
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif

remote/code/main/ui/ui_running_screen.c

@@ -0,0 +1,188 @@
+#include "ui_running_screen.h"
+#include "../lvgl_port.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+
+lv_obj_t* running_screen     = NULL;
+lv_obj_t* joystick_dot       = NULL;
+lv_obj_t* joystick_area      = NULL;
+lv_obj_t* battery_label      = NULL;
+lv_obj_t* channel_info_label = NULL;
+lv_obj_t* id_info_label      = NULL;
+
+/**
+ * @brief Create the running screen UI with joystick visualization and status information
+ * @note This function creates a standalone screen with multiple UI elements:
+ *       - Title label at the top
+ *       - Joystick visualization area with crosshair
+ *       - Red dot representing joystick position
+ *       - Battery level display
+ *       - Channel information display
+ *       - Device ID information display
+ * @details The function creates a 115x115 pixel joystick area with crosshair lines
+ *          and a red circular dot that represents the current joystick position
+ * @warning This function should only be called once per application run to avoid memory leaks
+ */
+void create_running_screen()
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    lv_disp_t* disp = lv_disp_get_default();
+    if (disp == NULL) {
+        ESP_LOGE("UI", "No default display found!");
+        lvgl_port_unlock();
+        return;
+    }
+
+    if (running_screen == NULL) {
+        running_screen = lv_obj_create(NULL);
+    }
+
+    if (running_screen == NULL) {
+        ESP_LOGE("UI", "Failed to create running screen!");
+        return;
+    }
+
+    lv_obj_clear_flag(running_screen, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Create title
+    lv_obj_t* label = lv_label_create(running_screen);
+
+    lv_label_set_text(label, "StackChan :)");
+    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 10);
+    lv_obj_set_style_text_font(label, &lv_font_montserrat_14, 0);
+
+    // Create joystick area
+    joystick_area = lv_obj_create(running_screen);
+    lv_obj_set_size(joystick_area, 115, 115);  // Reduced size
+    lv_obj_align(joystick_area, LV_ALIGN_TOP_MID, 0, 35);
+
+    // Set joystick area style
+    lv_obj_set_style_border_width(joystick_area, 2, LV_PART_MAIN);
+    lv_obj_set_style_border_color(joystick_area, lv_color_black(), LV_PART_MAIN);
+    lv_obj_set_style_bg_color(joystick_area, lv_color_white(), LV_PART_MAIN);
+    lv_obj_set_style_pad_all(joystick_area, 0, LV_PART_MAIN);
+    lv_obj_clear_flag(joystick_area, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Add horizontal crosshair line
+    lv_obj_t* cross_line_h        = lv_line_create(joystick_area);
+    static lv_point_t points_h[2] = {{0, 57}, {115, 57}};  // Horizontal center line
+    lv_line_set_points(cross_line_h, points_h, 2);
+    lv_obj_set_style_line_color(cross_line_h, lv_color_make(64, 64, 64), 0);
+    lv_obj_set_style_line_width(cross_line_h, 1, 0);
+
+    // Add vertical crosshair line
+    lv_obj_t* cross_line_v        = lv_line_create(joystick_area);
+    static lv_point_t points_v[2] = {{56, 0}, {56, 115}};  // Vertical center line
+    lv_line_set_points(cross_line_v, points_v, 2);
+    lv_obj_set_style_line_color(cross_line_v, lv_color_make(64, 64, 64), 0);
+    lv_obj_set_style_line_width(cross_line_v, 1, 0);
+
+    // Create joystick dot
+    joystick_dot = lv_obj_create(joystick_area);
+    lv_obj_set_size(joystick_dot, 10, 10);                                  // Dot size
+    lv_obj_set_style_radius(joystick_dot, LV_RADIUS_CIRCLE, LV_PART_MAIN);  // Set to circle
+    lv_obj_set_style_bg_color(joystick_dot, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN);
+    lv_obj_set_style_border_width(joystick_dot, 0, LV_PART_MAIN);
+    lv_obj_align(joystick_dot, LV_ALIGN_CENTER, 0, 0);
+
+    // Create battery level display
+    battery_label = lv_label_create(running_screen);
+    lv_label_set_text(battery_label, "Bat: 100%%");
+    lv_obj_align(battery_label, LV_ALIGN_TOP_LEFT, 10, 160);
+    lv_obj_set_style_text_font(battery_label, &lv_font_montserrat_14, 0);
+
+    // Create Channel information display
+    channel_info_label = lv_label_create(running_screen);
+    lv_label_set_text(channel_info_label, "Channel: 1");
+    lv_obj_align(channel_info_label, LV_ALIGN_TOP_LEFT, 10, 180);
+    lv_obj_set_style_text_font(channel_info_label, &lv_font_montserrat_14, 0);
+
+    // Create ID information display
+    id_info_label = lv_label_create(running_screen);
+    lv_label_set_text(id_info_label, "Receiver ID: \n0(broadcast)");
+    lv_obj_align(id_info_label, LV_ALIGN_TOP_LEFT, 10, 200);
+    lv_obj_set_style_text_font(id_info_label, &lv_font_montserrat_14, 0);
+
+    lvgl_port_unlock();
+}
+
+/**
+ * @brief Update the running screen UI with current joystick values and status information
+ * @param joyX X-axis value from joystick (raw value to be mapped to screen coordinates)
+ * @param joyY Y-axis value from joystick (raw value to be mapped to screen coordinates)
+ * @param channel Current WiFi channel being used
+ * @param id Device ID for communication
+ * @param bat Battery level percentage (0-100)
+ * @note This function maps joystick values to the 115x115 pixel joystick area
+ *       and applies deadzone correction to center the dot when joystick is near center position
+ * @details
+ *      1. Maps raw joystick values to screen coordinates within the joystick area
+ *      2. Applies deadzone correction to keep dot centered when joystick is in neutral position
+ *      3. Clamps values to prevent the dot from going outside the joystick area
+ *      4. Updates the position of the joystick dot
+ *      5. Updates battery level, channel and ID information labels
+ */
+void update_running_screen(int16_t joyX, int16_t joyY, uint8_t channel, uint8_t id, uint8_t bat)
+{
+    // Map joystick values to 115x115 area (using your mapping approach)
+    int16_t x_pos = map(joyX, X_MIN, X_MAX, 5, 110);  // Leave 5px margin
+    int16_t y_pos = map(joyY, Y_MIN, Y_MAX, 110, 5);  // Y-axis inverted
+
+    // Apply deadzone
+    int16_t x_center = map(X_CENTER, X_MIN, X_MAX, 5, 110);
+    int16_t y_center = map(Y_CENTER, Y_MIN, Y_MAX, 110, 5);
+
+    if (abs(joyX - X_CENTER) < DEAD_ZONE) {
+        x_pos = x_center;
+    }
+    if (abs(joyY - Y_CENTER) < DEAD_ZONE) {
+        y_pos = y_center;
+    }
+
+    // Limit range
+    x_pos = fmax(5, fmin(x_pos, 110));
+    y_pos = fmax(5, fmin(y_pos, 110));
+
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    // Update joystick dot position (relative to joystick_area center)
+    lv_obj_align(joystick_dot, LV_ALIGN_TOP_LEFT, x_pos - 5, y_pos - 5);
+
+    // Update battery level
+    lv_label_set_text_fmt(battery_label, "Bat: %d%%", bat);
+
+    // Update Channel and ID display
+    lv_label_set_text_fmt(channel_info_label, "Channel: %u", channel);
+    if (id == 0) {
+        lv_label_set_text(id_info_label, "Receiver ID:\n  0(broadcast)");
+    } else {
+        lv_label_set_text_fmt(id_info_label, "Receiver ID: %u", id);
+    }
+    lvgl_port_unlock();
+}
+
+/**
+ * @brief Reset all UI object pointers to NULL to prepare for screen destruction
+ * @note This function does not actually destroy the UI objects, but resets the pointers
+ *       that reference them, allowing the UI to be recreated or switched
+ * @warning The actual UI objects should be destroyed separately using LVGL's object destruction functions
+ */
+void ui_running_screen_destory()
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    if (running_screen != NULL) {
+        lv_obj_del(running_screen);
+        running_screen = NULL;
+    }
+    lvgl_port_unlock();
+    joystick_dot       = NULL;
+    joystick_area      = NULL;
+    battery_label      = NULL;
+    channel_info_label = NULL;
+    id_info_label      = NULL;
+}

remote/code/main/ui/ui_running_screen.h

@@ -0,0 +1,40 @@
+#ifndef _UI_RUNNING_SCREEN_H_
+#define _UI_RUNNING_SCREEN_H_
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "lvgl.h"
+#include "../joystick/joystick_basic.h"
+#include <math.h>
+#include <esp_log.h>
+
+#define MODE_RUNNING (1)
+
+#define map(x, in_min, in_max, out_min, out_max) ((x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min)
+
+#define DEAD_ZONE (300)
+#define X_CENTER  (2180)
+#define Y_CENTER  (1960)
+#define X_MIN     (630)
+#define X_MAX     (3730)
+#define Y_MIN     (310)
+#define Y_MAX     (3460)
+
+extern lv_obj_t* running_screen;
+extern lv_obj_t* joystick_dot;
+extern lv_obj_t* joystick_area;
+extern lv_obj_t* battery_label;
+extern lv_obj_t* channel_info_label;
+extern lv_obj_t* id_info_label;
+
+void create_running_screen();
+void update_running_screen(int16_t joyX, int16_t joyY, uint8_t channel, uint8_t id, uint8_t bat);
+void ui_running_screen_destory();
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif  // _UI_RUNNING_SCREEN_H_

remote/code/main/ui/ui_setup_screen.c

@@ -0,0 +1,180 @@
+#include "ui_setup_screen.h"
+#include "../lvgl_port.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+
+LV_IMG_DECLARE(updown_img);
+
+lv_obj_t *setup_screen     = NULL;
+lv_obj_t *channel_label    = NULL;
+lv_obj_t *id_label         = NULL;
+lv_obj_t *channel_dropdown = NULL;
+lv_obj_t *id_dropdown      = NULL;
+
+/**
+ * @brief Create the setup screen UI with configuration options
+ * @note This function creates a standalone screen with multiple UI elements:
+ *       - Title label at the top
+ *       - Channel selection dropdown with options 1-14
+ *       - ID selection dropdown with options 0-50
+ *       - Start button at the bottom for transitioning to running mode
+ * @details The function sets up dropdown controls with initial selections and
+ *          applies specific styling including background colors and transparency
+ * @warning This function should only be called once per application run to avoid memory leaks
+ */
+void create_setup_screen()
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+
+    lv_disp_t *disp = lv_disp_get_default();
+    if (disp == NULL) {
+        ESP_LOGE("UI", "No default display found!");
+        lvgl_port_unlock();
+        return;
+    }
+
+    if (setup_screen == NULL) {
+        setup_screen = lv_obj_create(NULL);
+    }
+
+    lv_obj_clear_flag(setup_screen, LV_OBJ_FLAG_SCROLLABLE);
+
+    // Create title
+    lv_obj_t *label = lv_label_create(setup_screen);
+    lv_label_set_text(label, "StackChan :)");
+    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 10);
+
+    // Create Channel selection label
+    channel_label = lv_label_create(setup_screen);
+    lv_label_set_text(channel_label, "Channel:");
+    lv_obj_align(channel_label, LV_ALIGN_TOP_LEFT, 5, 30);
+
+    // Create Channel dropdown
+    channel_dropdown = lv_dropdown_create(setup_screen);
+    lv_dropdown_set_options(channel_dropdown, "1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14");
+    lv_dropdown_set_selected(channel_dropdown, 0);
+    lv_obj_align(channel_dropdown, LV_ALIGN_TOP_LEFT, 5, 50);
+    lv_dropdown_set_symbol(channel_dropdown, &updown_img);
+    // Set dropdown background color
+    lv_obj_set_style_bg_color(channel_dropdown, lv_color_make(255, 255, 255), LV_PART_MAIN);  // White
+    lv_obj_set_style_bg_opa(channel_dropdown, LV_OPA_COVER, LV_PART_MAIN);  // Ensure background is opaque
+
+    // Create ID selection label
+    id_label = lv_label_create(setup_screen);
+    lv_label_set_text(id_label, "Receiver ID:");
+    lv_obj_align(id_label, LV_ALIGN_TOP_LEFT, 5, 100);
+
+    // Create ID dropdown
+    id_dropdown = lv_dropdown_create(setup_screen);
+    lv_dropdown_set_options(
+        id_dropdown,
+        "0(Broadcast)"
+        "\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n3"
+        "0\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n42\n43\n44\n45\n46\n47\n48\n49\n50");
+    lv_dropdown_set_selected(id_dropdown, 0);
+    lv_obj_align(id_dropdown, LV_ALIGN_TOP_LEFT, 5, 120);
+    lv_dropdown_set_symbol(id_dropdown, &updown_img);
+    // Set dropdown background color
+    lv_obj_set_style_bg_color(id_dropdown, lv_color_make(255, 255, 255), LV_PART_MAIN);  // White
+    lv_obj_set_style_bg_opa(id_dropdown, LV_OPA_COVER, LV_PART_MAIN);                    // Ensure background is opaque
+
+    lv_obj_t *btn_label = lv_label_create(setup_screen);
+    lv_label_set_text(btn_label, "Press to Start");
+    lv_obj_set_style_text_font(btn_label, &lv_font_montserrat_18, 0);
+    lv_obj_align(btn_label, LV_ALIGN_BOTTOM_MID, 0, -30);
+
+    lv_obj_t *arrow_label = lv_label_create(setup_screen);
+    lv_label_set_text(arrow_label, LV_SYMBOL_DOWN);
+    lv_obj_align(arrow_label, LV_ALIGN_BOTTOM_MID, 0, -5);
+
+    lvgl_port_unlock();
+}
+
+/**
+ * @brief Update the setup screen UI based on joystick input
+ * @param data Pointer to joystick_data_t structure containing current joystick values and selection mode
+ * @note This function handles joystick input to navigate and modify settings:
+ *       - Highlights the currently selected dropdown (Channel or ID)
+ *       - Increases/decreases values using joystick Y-axis movement
+ *       - Updates the internal data structure with selected values
+ * @details
+ *      1. Changes background color of dropdowns to indicate selection
+ *      2. Processes joystick Y-axis input for value modification
+ *      3. Updates dropdown selections and corresponding data values
+ *      4. Applies debouncing delay to prevent rapid value changes
+ */
+void update_setup_screen(joystick_data_t *data)
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    // Update setup screen
+    if (data->select_mode == CHANNEL_SELECT) {
+        lv_obj_set_style_bg_color(channel_dropdown, lv_color_make(255, 255, 0), LV_PART_MAIN);  // Yellow
+        lv_obj_set_style_bg_color(id_dropdown, lv_color_make(255, 255, 255), LV_PART_MAIN);     // White
+    } else if (data->select_mode == ID_SELECT) {
+        lv_obj_set_style_bg_color(channel_dropdown, lv_color_make(255, 255, 255), LV_PART_MAIN);  // White
+        lv_obj_set_style_bg_color(id_dropdown, lv_color_make(255, 255, 0), LV_PART_MAIN);         // Yellow
+    }
+    // In setup mode, joystick up/down controls value increment/decrement
+    if (data->joyY > Y_CENTER + DEAD_ZONE) {
+        // Move up - Increase Channel
+        if (data->select_mode == CHANNEL_SELECT) {
+            uint16_t selected = lv_dropdown_get_selected(channel_dropdown);
+            if (selected < 13) {  // Maximum index is 13 (corresponding to Channel 14)
+                lv_dropdown_set_selected(channel_dropdown, selected + 1);
+                data->channel = selected + 2;  // Index + 1 + 1 = displayed value
+            }
+        } else if (data->select_mode == ID_SELECT) {
+            uint16_t selected = lv_dropdown_get_selected(id_dropdown);
+            if (selected < 50) {
+                lv_dropdown_set_selected(id_dropdown, selected + 1);
+                data->id = selected + 1;
+            }
+        }
+        vTaskDelay(50 / portTICK_PERIOD_MS);  // Add delay to prevent rapid changes
+    } else if (data->joyY < Y_CENTER - DEAD_ZONE) {
+        // Move down - Decrease Channel
+        if (data->select_mode == CHANNEL_SELECT) {
+            uint16_t selected = lv_dropdown_get_selected(channel_dropdown);
+            if (selected > 0) {
+                lv_dropdown_set_selected(channel_dropdown, selected - 1);
+                data->channel = selected;  // Index - 1 + 1 = index itself
+            }
+        } else if (data->select_mode == ID_SELECT) {
+            uint16_t selected = lv_dropdown_get_selected(id_dropdown);
+            if (selected > 0) {
+                lv_dropdown_set_selected(id_dropdown, selected - 1);
+                data->id = selected - 1;
+            }
+        }
+        vTaskDelay(50 / portTICK_PERIOD_MS);  // Add delay to prevent rapid changes
+    }
+    lvgl_port_unlock();
+}
+
+/**
+ * @brief Destroy the setup screen and reset all UI object pointers to NULL
+ * @note This function properly deletes the LVGL objects and resets internal pointers
+ * @details
+ *      1. Deletes the setup screen and all child objects using lv_obj_del
+ *      2. Sets all UI object pointers to NULL to prevent dangling references
+ */
+void ui_setup_screen_destory()
+{
+    while (!lvgl_port_lock()) {
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+    if (setup_screen != NULL) {
+        lv_obj_del(setup_screen);
+        setup_screen = NULL;
+    }
+    lvgl_port_unlock();
+
+    channel_label    = NULL;
+    id_label         = NULL;
+    channel_dropdown = NULL;
+    id_dropdown      = NULL;
+}

remote/code/main/ui/ui_setup_screen.h

@@ -0,0 +1,42 @@
+#ifndef _UI_SETUP_SCREEN_H_
+#define _UI_SETUP_SCREEN_H_
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "esp_log.h"
+#include "lvgl.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "../joystick/joystick_basic.h"
+
+#define MODE_SETUP (0)
+
+#define CHANNEL_SELECT (0)
+#define ID_SELECT      (1)
+
+#define DEAD_ZONE (300)
+#define X_CENTER  (2180)
+#define Y_CENTER  (1960)
+#define X_MIN     (630)
+#define X_MAX     (3730)
+#define Y_MIN     (310)
+#define Y_MAX     (3460)
+
+extern lv_obj_t *setup_screen;
+extern lv_obj_t *channel_label;
+extern lv_obj_t *id_label;
+extern lv_obj_t *start_btn;
+extern lv_obj_t *channel_dropdown;
+extern lv_obj_t *id_dropdown;
+
+void create_setup_screen();
+void update_setup_screen(joystick_data_t *data);
+void ui_setup_screen_destory();
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif  // _UI_SETUP_SCREEN_H_