add remote source code

remote/README.md

@@ -0,0 +1,4 @@
+# StackChan-RemoteControl-ESPNow
+
+This repository is designed to remotely control StackChan servo movements via the `ESPNow` protocol.
+

remote/code/.clang-format

@@ -0,0 +1,164 @@
+BasedOnStyle:  Google
+AccessModifierOffset: -4
+AlignAfterOpenBracket: Align
+AlignConsecutiveMacros: true
+AlignConsecutiveAssignments: true
+AlignConsecutiveDeclarations: false
+AlignEscapedNewlines: Left
+AlignOperands:   true
+AlignTrailingComments: true
+AllowAllArgumentsOnNextLine: true
+AllowAllConstructorInitializersOnNextLine: true
+AllowAllParametersOfDeclarationOnNextLine: true
+AllowShortBlocksOnASingleLine: Never
+AllowShortCaseLabelsOnASingleLine: false
+AllowShortFunctionsOnASingleLine: false
+AllowShortLambdasOnASingleLine: All
+AllowShortIfStatementsOnASingleLine: WithoutElse
+AllowShortLoopsOnASingleLine: true
+AlwaysBreakAfterDefinitionReturnType: None
+AlwaysBreakAfterReturnType: None
+AlwaysBreakBeforeMultilineStrings: true
+AlwaysBreakTemplateDeclarations: Yes
+BinPackArguments: true
+BinPackParameters: true
+BraceWrapping:
+  AfterCaseLabel:  false
+  AfterClass:      false
+  AfterControlStatement: false
+  AfterEnum:       false
+  AfterFunction:   true
+  AfterNamespace:  false
+  AfterObjCDeclaration: false
+  AfterStruct:     false
+  AfterUnion:      false
+  AfterExternBlock: false
+  BeforeCatch:     false
+  BeforeElse:      false
+  IndentBraces:    false
+  SplitEmptyFunction: true
+  SplitEmptyRecord: true
+  SplitEmptyNamespace: true
+BreakBeforeBinaryOperators: None
+BreakBeforeBraces: Custom
+BreakBeforeInheritanceComma: false
+BreakInheritanceList: BeforeColon
+BreakBeforeTernaryOperators: true
+BreakConstructorInitializersBeforeComma: false
+BreakConstructorInitializers: BeforeColon
+BreakAfterJavaFieldAnnotations: false
+BreakStringLiterals: true
+ColumnLimit:     120
+CommentPragmas:  '^ IWYU pragma:'
+CompactNamespaces: false
+ConstructorInitializerAllOnOneLineOrOnePerLine: true
+ConstructorInitializerIndentWidth: 4
+ContinuationIndentWidth: 4
+Cpp11BracedListStyle: true
+DeriveLineEnding: true
+DerivePointerAlignment: true
+DisableFormat:   false
+ExperimentalAutoDetectBinPacking: false
+FixNamespaceComments: true
+ForEachMacros:
+  - foreach
+  - Q_FOREACH
+  - BOOST_FOREACH
+IncludeBlocks:   Regroup
+IncludeCategories:
+  - Regex:           '^<ext/.*\.h>'
+    Priority:        2
+    SortPriority:    0
+  - Regex:           '^<.*\.h>'
+    Priority:        1
+    SortPriority:    0
+  - Regex:           '^<.*'
+    Priority:        2
+    SortPriority:    0
+  - Regex:           '.*'
+    Priority:        3
+    SortPriority:    0
+IncludeIsMainRegex: '([-_](test|unittest))?$'
+IncludeIsMainSourceRegex: ''
+IndentCaseLabels: true
+IndentGotoLabels: true
+IndentPPDirectives: None
+IndentWidth:     4
+IndentWrappedFunctionNames: false
+JavaScriptQuotes: Leave
+JavaScriptWrapImports: true
+KeepEmptyLinesAtTheStartOfBlocks: false
+MacroBlockBegin: ''
+MacroBlockEnd:   ''
+MaxEmptyLinesToKeep: 1
+NamespaceIndentation: None
+ObjCBinPackProtocolList: Never
+ObjCBlockIndentWidth: 2
+ObjCSpaceAfterProperty: false
+ObjCSpaceBeforeProtocolList: true
+PenaltyBreakAssignment: 2
+PenaltyBreakBeforeFirstCallParameter: 1
+PenaltyBreakComment: 300
+PenaltyBreakFirstLessLess: 120
+PenaltyBreakString: 1000
+PenaltyBreakTemplateDeclaration: 10
+PenaltyExcessCharacter: 1000000
+PenaltyReturnTypeOnItsOwnLine: 200
+PointerAlignment: Left
+RawStringFormats:
+  - Language:        Cpp
+    Delimiters:
+      - cc
+      - CC
+      - cpp
+      - Cpp
+      - CPP
+      - 'c++'
+      - 'C++'
+    CanonicalDelimiter: ''
+    BasedOnStyle:    google
+  - Language:        TextProto
+    Delimiters:
+      - pb
+      - PB
+      - proto
+      - PROTO
+    EnclosingFunctions:
+      - EqualsProto
+      - EquivToProto
+      - PARSE_PARTIAL_TEXT_PROTO
+      - PARSE_TEST_PROTO
+      - PARSE_TEXT_PROTO
+      - ParseTextOrDie
+      - ParseTextProtoOrDie
+    CanonicalDelimiter: ''
+    BasedOnStyle:    google
+ReflowComments:  true
+SortIncludes:    false
+SortUsingDeclarations: true
+SpaceAfterCStyleCast: false
+SpaceAfterLogicalNot: false
+SpaceAfterTemplateKeyword: true
+SpaceBeforeAssignmentOperators: true
+SpaceBeforeCpp11BracedList: false
+SpaceBeforeCtorInitializerColon: true
+SpaceBeforeInheritanceColon: true
+SpaceBeforeParens: ControlStatements
+SpaceBeforeRangeBasedForLoopColon: true
+SpaceInEmptyBlock: false
+SpaceInEmptyParentheses: false
+SpacesBeforeTrailingComments: 2
+SpacesInAngles:  false
+SpacesInConditionalStatement: false
+SpacesInContainerLiterals: true
+SpacesInCStyleCastParentheses: false
+SpacesInParentheses: false
+SpacesInSquareBrackets: false
+SpaceBeforeSquareBrackets: false
+Standard:        Auto
+StatementMacros:
+  - Q_UNUSED
+  - QT_REQUIRE_VERSION
+TabWidth:        4
+UseCRLF:         false
+UseTab:          Never

remote/code/.gitignore

@@ -0,0 +1,4 @@
+managed_components
+build
+.vscode
+.cache

remote/code/CMakeLists.txt

@@ -0,0 +1,6 @@
+# The following five lines of boilerplate have to be in your project's
+# CMakeLists in this exact order for cmake to work correctly
+cmake_minimum_required(VERSION 3.16)
+
+include($ENV{IDF_PATH}/tools/cmake/project.cmake)
+project(StackChan-RemoteControl-ESPNow)

remote/code/README.md

@@ -0,0 +1,23 @@
+# StackChan-RemoteControl-ESPNow
+
+This repository is designed to remotely control StackChan servo movements via the `ESPNow` protocol.
+
+## Applicable Devices
+
+* StickC-Plus + Hat Mini JoyC
+
+## Compilation Environment
+
+* IDF：ESP-IDF v5.4.2
+* Device Type：esp32
+
+## Compilation and Flashing
+
+1. Before compilation, globally search the project for `__has_include(<driver/i2c_master.h>)` in `M5GFX` and replace all occurrences with `0`.
+2. When flashing, specify the baud rate as `1500000`.
+
+## Package Firmware
+
+```
+esptool.py --chip esp32 merge_bin -o StackChan-RemoteControl-ESPNow-jyy-20251231_0x0.bin 0x1000 build\bootloader\bootloader.bin 0x8000 build\partition_table\partition-table.bin 0x10000 build\StackChan-RemoteControl-ESPNow.bin
+```

remote/code/dependencies.lock

@@ -0,0 +1,77 @@
+dependencies:
+  espressif/cmake_utilities:
+    component_hash: 351350613ceafba240b761b4ea991e0f231ac7a9f59a9ee901f751bddc0bb18f
+    dependencies:
+    - name: idf
+      require: private
+      version: '>=4.1'
+    source:
+      registry_url: https://components.espressif.com
+      type: service
+    version: 0.5.3
+  espressif/esp-now:
+    component_hash: 56f902e978ec0b70528ad30a45265b56bf2b91653d13e0badc78159f39f41ece
+    dependencies:
+    - name: espressif/cmake_utilities
+      registry_url: https://components.espressif.com
+      require: private
+      version: 0.*
+    - name: idf
+      require: private
+      version: '>=4.4'
+    source:
+      registry_url: https://components.espressif.com/
+      type: service
+    version: 2.5.2
+  espressif/i2c_bus:
+    component_hash: 4e990dc11734316186b489b362c61d41f23f79d58bc169795cec215e528cba14
+    dependencies:
+    - name: espressif/cmake_utilities
+      registry_url: https://components.espressif.com
+      require: private
+      version: '*'
+    - name: idf
+      require: private
+      version: '>=4.0'
+    source:
+      registry_url: https://components.espressif.com/
+      type: service
+    version: 1.5.0
+  idf:
+    source:
+      type: idf
+    version: 5.4.2
+  lvgl/lvgl:
+    component_hash: d7c1ac037ae6e85d94897f807d6e7ba0946a83e720074fc95a4f6241da9f9f53
+    dependencies: []
+    source:
+      registry_url: https://components.espressif.com/
+      type: service
+    version: 8.4.0
+  m5stack/m5gfx:
+    component_hash: 4c420c89ae7bfe33231dab80b784f4508591279b2a3a935ac849dddb1942d0d5
+    dependencies: []
+    source:
+      registry_url: https://components.espressif.com
+      type: service
+    version: 0.2.17
+  m5stack/m5unified:
+    component_hash: 1c75bb80654da6c7fcdd11ef7a1cb9b7d6db2e98f96612a4babf12b5e9bc7196
+    dependencies:
+    - name: m5stack/m5gfx
+      registry_url: https://components.espressif.com
+      require: private
+      version: ^0.2.17
+    source:
+      registry_url: https://components.espressif.com/
+      type: service
+    version: 0.2.11
+direct_dependencies:
+- espressif/esp-now
+- espressif/i2c_bus
+- idf
+- lvgl/lvgl
+- m5stack/m5unified
+manifest_hash: 1a633f7edf3e64c57d1f921f15913b2bf6deda0e71113957a364b6552fa37e9b
+target: esp32
+version: 2.0.0

remote/code/main/CMakeLists.txt

@@ -0,0 +1,19 @@
+set(SOURCES
+    esp_now/esp_now_init.c
+    joystick/joystick_handle.c
+    ui/ui_running_screen.c
+    ui/ui_setup_screen.c
+    ui/ui_imu_screen.c
+    ui/ui.c
+    ui/updown_img.c
+    lvgl_port.cpp
+    StackChan-RemoteControl-ESPNow.cpp
+)
+
+idf_component_register(SRCS ${SOURCES}
+                    INCLUDE_DIRS 
+                    "."
+                    esp_now
+                    joystick
+                    ui
+                    )

remote/code/main/StackChan-RemoteControl-ESPNow.cpp

@@ -0,0 +1,113 @@
+#include "M5Unified.h"
+
+extern "C" {
+#include <stdio.h>
+#include "esp_log.h"
+#include "string.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "nvs_flash.h"
+#include "lvgl.h"
+
+#include "ui.h"
+#include "esp_now_init.h"
+#include "joystick_handle.h"
+
+#include "lvgl_port.h"
+
+using namespace m5;
+
+joystick_data_t joystick_data;
+
+// extern void lvgl_port_init(M5GFX &gfx);
+
+/**
+ * @brief Handle Button Press.
+ * 1. Press BtnA to switch setup_mode UI and running_mode UI.
+ * 2. Press BtnB to switch espnow-channel or id on setup_mode;
+ * 3. Press BtnB to send btnB_status to remote on running_mode.
+ */
+void handle_button_press()
+{
+    static uint8_t screen_mode = MODE_SETUP;
+    // check if BtnA is pressed
+    if (M5.BtnA.wasPressed()) {
+        // use BtnA to switch mode
+        screen_mode = (screen_mode + 1) % 3;
+
+        if (screen_mode == MODE_SETUP) {
+            // in setup mode, press A to enter running mode
+            joystick_data.screen_mode = MODE_SETUP;
+            switch_screen(joystick_data.screen_mode);
+        } else if (screen_mode == MODE_RUNNING) {
+            // in running mode, press A to enter IMU mode
+            wifi_espnow_reinit(joystick_data.channel);
+            joystick_data.screen_mode = MODE_RUNNING;
+            switch_screen(joystick_data.screen_mode);
+        } else if (screen_mode == MODE_IMU) {
+            // in IMU mode, press A to return to setup mode
+            joystick_data.screen_mode = MODE_IMU;
+            switch_screen(joystick_data.screen_mode);
+        }
+    }
+    if (M5.BtnB.wasPressed()) {
+        if (joystick_data.screen_mode == MODE_SETUP) {
+            joystick_data.select_mode = !joystick_data.select_mode;
+        } else if ((joystick_data.screen_mode == MODE_RUNNING) || (joystick_data.screen_mode == MODE_IMU)) {
+            joystick_data.btnB_status = !joystick_data.btnB_status;
+        }
+    }
+}
+
+void app_main(void)
+{
+    imu_data_t imu_data;
+
+    // Initialize NVS
+    esp_err_t ret = nvs_flash_init();
+    if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
+        ESP_ERROR_CHECK(nvs_flash_erase());
+        ret = nvs_flash_init();
+    }
+
+    M5.begin();
+    M5.Imu.init(&M5.In_I2C);  // init IMU with internal I2C port
+    printf("IN_I2C port: %d\n", M5.In_I2C.getPort());
+    printf("M5 Display width: %ld, height: %ld\n", M5.Display.width(), M5.Display.height());
+
+    joystick_data = joystick_init();  // init joystick
+
+    lvgl_port_init();  // init LVGL
+    ui_init();         // init UI
+
+    // init WiFi and ESP-NOW
+    wifi_espnow_init(joystick_data.channel);
+
+    xTaskCreate(handle_setup_screen, "handle_setup_screen", 8192, &joystick_data, 5, NULL);      // handle setup mode
+    xTaskCreate(handle_running_screen, "handle_running_screen", 8192, &joystick_data, 5, NULL);  // handle running mode
+    xTaskCreate(handle_imu_screen, "handle_imu_screen", 8192, &joystick_data, 5, NULL);
+
+    while (1) {
+        M5.update();
+        // Handle button press
+        handle_button_press();
+        joystick_data.bat = (M5.Power.Axp192.getBatteryLevel());  // updata battery level
+
+        joystick_data.bat = (joystick_data.bat > 100) ? 100 : joystick_data.bat;
+        joystick_data.bat = (joystick_data.bat < 0) ? 0 : joystick_data.bat;
+
+        M5.Imu.update();                              // update IMU data
+        imu_data              = M5.Imu.getImuData();  // get IMU data
+        joystick_data.accel_x = imu_data.accel.x;
+        joystick_data.accel_y = imu_data.accel.y;
+        joystick_data.accel_z = imu_data.accel.z;
+
+#if 0
+        printf("Accel: (%.2f, %.2f, %.2f), Gyro: (%.2f, %.2f, %.2f)\n",
+               joystick_data.accel_x, joystick_data.accel_y, joystick_data.accel_z,
+               joystick_data.gyro_x, joystick_data.gyro_y, joystick_data.gyro_z);
+#endif
+        vTaskDelay(20 / portTICK_PERIOD_MS);
+    }
+}
+}

remote/code/main/esp_now/esp_now_init.c

@@ -0,0 +1,123 @@
+
+#include "esp_now_init.h"
+
+/**
+ * @brief Initialize WiFi in STA mode and ESP-NOW with the specified channel
+ * @param channel The WiFi channel to use (1-13)
+ * @note This function initializes both WiFi subsystem in Station mode and ESP-NOW for communication
+ * @details
+ *      1. Initializes network interface
+ *      2. Creates default event loop
+ *      3. Initializes WiFi with default configuration
+ *      4. Sets WiFi storage to RAM only
+ *      5. Configures WiFi mode to Station (STA)
+ *      6. Starts WiFi
+ *      7. Sets the specified WiFi channel
+ *      8. Optionally enables long range protocol if CONFIG_ESPNOW_ENABLE_LONG_RANGE is defined
+ *      9. Configures ESP-NOW with forwarding disabled, 5 retry attempts, and receive disabled
+ *      10. Initializes ESP-NOW with the configured parameters
+ *      11. Reads and logs the device MAC address
+ * @warning This function combines both WiFi and ESP-NOW initialization in a single call
+ */
+void wifi_espnow_init(uint8_t channel)
+{
+    ESP_ERROR_CHECK(esp_netif_init());
+    ESP_ERROR_CHECK(esp_event_loop_create_default());
+    wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
+    ESP_ERROR_CHECK(esp_wifi_init(&cfg));
+    ESP_ERROR_CHECK(esp_wifi_set_storage(WIFI_STORAGE_RAM));
+    ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));
+    ESP_ERROR_CHECK(esp_wifi_start());
+    ESP_ERROR_CHECK(esp_wifi_set_channel(channel, WIFI_SECOND_CHAN_NONE));
+
+#if CONFIG_ESPNOW_ENABLE_LONG_RANGE
+    ESP_ERROR_CHECK(esp_wifi_set_protocol(
+        ESPNOW_WIFI_IF, WIFI_PROTOCOL_11B | WIFI_PROTOCOL_11G | WIFI_PROTOCOL_11N | WIFI_PROTOCOL_LR));
+#endif
+    espnow_config_t espnow_config = ESPNOW_INIT_CONFIG_DEFAULT();
+
+    espnow_config.forward_enable         = false;
+    espnow_config.forward_switch_channel = false;
+    espnow_config.send_retry_num         = 5;
+    espnow_config.receive_enable.forward = false;
+    espnow_config.receive_enable.data    = false;
+
+    espnow_init(&espnow_config);
+
+    uint8_t mac[6];
+    esp_read_mac(mac, ESP_MAC_EFUSE_FACTORY);
+    ESP_LOGI("espnow_init", "ESP-NOW initialized with MAC: %02X:%02X:%02X:%02X:%02X:%02X", mac[0], mac[1], mac[2],
+             mac[3], mac[4], mac[5]);
+}
+
+/**
+ * @brief Reinitialize WiFi and ESP-NOW with a new channel
+ * @param new_channel The new WiFi channel to use (1-13)
+ * @return uint8_t The actual channel that was set
+ * @note This function properly deinitializes and reinitializes both WiFi and ESP-NOW
+ * @details
+ *      1. Checks if the new channel is different from current channel
+ *      2. Deinitializes ESP-NOW
+ *      3. Stops WiFi
+ *      4. Restarts WiFi and sets the new channel
+ *      5. Reinitializes ESP-NOW with the same configuration
+ *      6. Logs the MAC address and current channel
+ * @warning This function will temporarily interrupt ESP-NOW communication during reinitialization
+ */
+int wifi_espnow_reinit(uint8_t new_channel)
+{
+    uint8_t channel = 0;
+    if (new_channel == channel) {
+        ESP_LOGI("wifi reinit", "New Channel is same as current channel, no need to reinitialize");
+        return channel;
+    }
+    // ESP_LOGI("reinit", "Reinitializing WiFi and ESP-NOW with channel: %d", new_channel);
+
+    // 1. Deinitialize ESP-NOW
+    espnow_deinit();
+
+    // 2. Stop WiFi
+    ESP_ERROR_CHECK(esp_wifi_stop());
+
+    // 3. Restart WiFi and set new channel
+    ESP_ERROR_CHECK(esp_wifi_start());
+    ESP_ERROR_CHECK(esp_wifi_set_channel(new_channel, WIFI_SECOND_CHAN_NONE));
+
+    // ESP_LOGI("reinit", "WiFi channel set to: %d", new_channel);
+
+    // 4. Reinitialize ESP-NOW
+    espnow_config_t espnow_config        = ESPNOW_INIT_CONFIG_DEFAULT();
+    espnow_config.forward_enable         = false;
+    espnow_config.forward_switch_channel = false;
+    espnow_config.send_retry_num         = 5;
+    espnow_config.receive_enable.forward = false;
+    espnow_config.receive_enable.data    = false;
+
+    espnow_init(&espnow_config);
+
+    uint8_t mac[6];
+    esp_read_mac(mac, ESP_MAC_EFUSE_FACTORY);
+    ESP_LOGI("reinit", "ESP-NOW reinitialized with MAC: %02X:%02X:%02X:%02X:%02X:%02X", mac[0], mac[1], mac[2], mac[3],
+             mac[4], mac[5]);
+    wifi_second_chan_t second;
+    esp_wifi_get_channel(&channel, &second);
+    ESP_LOGI("WiFi", "Current channel: %d", channel);
+    return channel;
+}
+
+/**
+ * @brief Send data packet via ESP-NOW broadcast
+ * @param pkt Pointer to the data packet to send
+ * @param len Length of the data packet in bytes
+ * @note This function sends data using ESP-NOW broadcast address
+ * @details
+ *      1. Creates default ESP-NOW frame header
+ *      2. Sends data using ESPNOW_DATA_TYPE_DATA type
+ *      3. Uses broadcast address to send to all devices on the same channel
+ *      4. Blocks until transmission completes (portMAX_DELAY timeout)
+ */
+void espnow_send_data(uint8_t *pkt, size_t len)
+{
+    espnow_frame_head_t frame_head = ESPNOW_FRAME_CONFIG_DEFAULT();
+    ESP_ERROR_CHECK(espnow_send(ESPNOW_DATA_TYPE_DATA, ESPNOW_ADDR_BROADCAST, pkt, len, &frame_head, portMAX_DELAY));
+}

remote/code/main/esp_now/esp_now_init.h

@@ -0,0 +1,23 @@
+#ifndef __ESP_NOW_INIT_H__
+#define __ESP_NOW_INIT_H__
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "esp_err.h"
+#include <esp_mac.h>
+#include <espnow.h>
+#include <espnow_storage.h>
+#include <espnow_utils.h>
+#include "esp_wifi.h"
+
+void wifi_espnow_init(uint8_t channel);
+int wifi_espnow_reinit(uint8_t new_channel);
+void espnow_send_data(uint8_t *pkt, size_t len);
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif

remote/code/main/idf_component.yml

@@ -0,0 +1,20 @@
+## IDF Component Manager Manifest File
+dependencies:
+  ## Required IDF version
+  idf:
+    version: '>=4.1.0'
+  # # Put list of dependencies here
+  # # For components maintained by Espressif:
+  # component: "~1.0.0"
+  # # For 3rd party components:
+  # username/component: ">=1.0.0,<2.0.0"
+  # username2/component2:
+  #   version: "~1.0.0"
+  #   # For transient dependencies `public` flag can be set.
+  #   # `public` flag doesn't have an effect dependencies of the `main` component.
+  #   # All dependencies of `main` are public by default.
+  #   public: true
+  m5stack/m5unified: ^0.2.11
+  espressif/esp-now: =*
+  espressif/i2c_bus: ^1.5.0
+  lvgl/lvgl: ^8.4.0

remote/code/main/joystick/joystick_basic.h

@@ -0,0 +1,29 @@
+#ifndef _JOYSTICK_BASIC_H_
+#define _JOYSTICK_BASIC_H_
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+typedef struct {
+    int channel;
+    int id;
+    int8_t bat;
+    uint16_t joyX;
+    uint16_t joyY;
+    uint8_t screen_mode;
+    uint8_t select_mode;
+    bool btnB_status;
+    float accel_x;
+    float accel_y;
+    float accel_z;
+
+} joystick_data_t;
+
+extern joystick_data_t joystick_data;
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif

remote/code/main/joystick/joystick_handle.c

@@ -0,0 +1,279 @@
+#include "joystick_handle.h"
+
+i2c_bus_device_handle_t i2c_device1;  // i2c device handle
+
+/**
+ * @brief Initialize joystick via I2C interface
+ * @note This is an internal static function that configures I2C_NUM_0 as master with SDA on GPIO0 and SCL on GPIO26
+ * @details
+ *      1. Configures I2C master mode with 100kHz clock speed
+ *      2. Creates I2C bus handle using I2C_NUM_0
+ *      3. Scans the I2C bus to detect connected devices and logs their addresses
+ *      4. Creates device handle for joystick at I2C address 0x54
+ *      5. Assigns the device handle to global variable [i2c_device1]
+ * @warning This function assumes the joystick device is at I2C address 0x54
+ */
+static void joystick_i2c_init()
+{
+    i2c_config_t conf;
+    {
+        conf.mode             = I2C_MODE_MASTER;
+        conf.sda_io_num       = 0;
+        conf.scl_io_num       = 26;
+        conf.sda_pullup_en    = GPIO_PULLUP_ENABLE;
+        conf.scl_pullup_en    = GPIO_PULLUP_ENABLE;
+        conf.master.clk_speed = 100000;
+        conf.clk_flags        = 0;
+    };
+    i2c_bus_handle_t i2c0_bus = i2c_bus_create(I2C_NUM_0, &conf);
+    uint8_t buf[128];
+    memset(buf, 0, sizeof(buf));
+
+    i2c_bus_scan(i2c0_bus, buf, sizeof(buf));
+    for (size_t i = 0; i < sizeof(buf); i++) {
+        if (buf[i] != 0) {
+            ESP_LOGI("I2C Scanner", "Found device at address 0x%02X", buf[i]);
+        }
+    }
+
+    i2c_device1 = i2c_bus_device_create(i2c0_bus, 0x54, 0);
+}
+
+/**
+ * @brief Read X and Y axis values from the joystick via I2C
+ * @param joyX Pointer to store X-axis value (16-bit unsigned integer)
+ * @param joyY Pointer to store Y-axis value (16-bit unsigned integer)
+ * @return void
+ * @details
+ *      1. Reads 2 bytes from register address 0x00 (X-axis low/high bytes)
+ *      2. Waits 10ms to ensure data stability
+ *      3. Reads 2 bytes from register address 0x02 (Y-axis low/high bytes)
+ *      4. Combines high and low bytes for both X and Y axes using bit shifting
+ *      5. Stores the combined values in the provided pointers
+ * @warning This function assumes the joystick provides 16-bit data in little-endian format
+ */
+static void joystick_read_xy(uint16_t *joyX, uint16_t *joyY)
+{
+    uint8_t data[4];
+    esp_err_t ret = i2c_bus_read_bytes(i2c_device1, 0x00, 2, data);
+    vTaskDelay(20 / portTICK_PERIOD_MS);
+    ret |= i2c_bus_read_bytes(i2c_device1, 0x02, 2, &data[2]);
+    if (ret == ESP_OK) {
+        *joyX = (data[1] << 8) | data[0];
+        *joyY = (data[3] << 8) | data[2];
+    } else {
+        // ESP_LOGE("I2C Joystick", "Failed to read joystick data");
+    }
+}
+
+/**
+ * @brief Public interface to initialize the joystick and return default configuration
+ * @return joystick_data_t Structure containing initialized joystick parameters
+ * @note This is the main initialization function exposed to users
+ * @details
+ *      1. Calls internal： device_joystick_init()
+ *      2. Initializes all fields of 'joystick_data_t'
+ *         - channel: 1 (default communication channel)
+ *         - id: 0 (default target ID)
+ *         - bat: 0 (battery level, to be updated later)
+ *         - joyX, joyY: 0 (initial joystick positions)
+ *         - screen_mode: MODE_SETUP (start in setup mode)
+ *         - select_mode: CHANNEL_SELECT (default selection mode)
+ * @return joystick_data_t
+ */
+joystick_data_t joystick_init()
+{
+    joystick_i2c_init();
+    joystick_data_t tmp;
+    tmp.channel     = 1;
+    tmp.id          = 0;
+    tmp.bat         = 0;
+    tmp.joyX        = 0;
+    tmp.joyY        = 0;
+    tmp.accel_x     = 0.0f;
+    tmp.accel_y     = 0.0f;
+    tmp.accel_z     = 0.0f;
+    tmp.screen_mode = MODE_SETUP;
+    tmp.select_mode = CHANNEL_SELECT;
+    tmp.btnB_status = false;
+    return tmp;
+}
+
+/**
+ * @brief Task to handle joystick setup screen
+ * @param pvParam Pointer to joystick data, pointing to joystick_data_t structure
+ * @note This function runs an infinite loop that continuously reads joystick XY coordinates
+ *       and updates the setup screen when the screen mode is MODE_SETUP
+ * @details Reads raw joystick data and then calls update_setup_screen function to update screen display
+ *          Each loop iteration has a 50ms delay to ensure interface responsiveness
+ */
+void handle_setup_screen(void *pvParam)
+{
+    joystick_data_t *joystick_data = (joystick_data_t *)pvParam;
+    while (1) {
+        if (joystick_data->screen_mode == MODE_SETUP) {
+            joystick_read_xy(&joystick_data->joyX, &joystick_data->joyY);
+            update_setup_screen(joystick_data);
+            vTaskDelay(50 / portTICK_PERIOD_MS);
+        } else {
+            vTaskDelay(200 / portTICK_PERIOD_MS);
+        }
+    }
+}
+
+/**
+ * @brief Task to handle joystick running screen, responsible for reading joystick data and sending ESP-NOW control
+ * packets
+ * @param pvParam Pointer to joystick data, pointing to joystick_data_t structure
+ * @note This function runs an infinite loop that reads joystick input, processes data, and sends control packets in
+ * running mode
+ * @details
+ *      1. Reads raw X/Y values from the joystick via I2C
+ *      2. Updates the running screen display with current values
+ *      3. Applies deadzone correction to center the joystick values
+ *      4. Maps raw values to yaw/pitch angle ranges (-1280 to 1280 for yaw, 0 to 900 for pitch)
+ *      5. Only sends data when changes exceed threshold (5 units) to reduce network traffic
+ *      6. Constructs and sends ESP-NOW packet containing target ID, yaw, pitch, speed and button status
+ *      7. Each loop iteration has a 30ms delay when in running mode
+ */
+void handle_running_screen(void *pvParam)
+{
+    joystick_data_t *joystick_data = (joystick_data_t *)pvParam;
+    // communicate packet
+    uint8_t pkt[8];
+    pkt[0]              = joystick_data->id;  // id: 0 for broadcast
+    int16_t yaw_angle   = 0;
+    int16_t pitch_angle = 0;
+    int16_t last_yaw    = 0;
+    int16_t last_pitch  = 0;
+    int16_t speed_val   = 600;
+
+    while (1) {
+        // update screen and send packet when in running mode
+        if (joystick_data->screen_mode == MODE_RUNNING) {
+            joystick_read_xy(&joystick_data->joyX, &joystick_data->joyY);
+
+            if (running_screen != NULL && lv_obj_is_valid(running_screen)) {
+                update_running_screen(joystick_data->joyX, joystick_data->joyY, joystick_data->channel,
+                                      joystick_data->id, joystick_data->bat);
+            }
+
+            // handle data from joystick
+            if ((joystick_data->joyX < X_CENTER + DEAD_ZONE) && (joystick_data->joyX > X_CENTER - DEAD_ZONE)) {
+                joystick_data->joyX = X_CENTER;
+            }
+            if ((joystick_data->joyY < Y_CENTER + DEAD_ZONE) && (joystick_data->joyY > Y_CENTER - DEAD_ZONE)) {
+                joystick_data->joyY = Y_CENTER;
+            }
+
+            yaw_angle   = (int16_t)map(joystick_data->joyX, X_MIN, X_MAX, 1280, -1280);
+            pitch_angle = (int16_t)map(joystick_data->joyY, Y_MIN, Y_MAX, 0, 900);
+
+            // send pitch_angle and yaw_angle only when changes exceed threshold
+            if (abs(yaw_angle - last_yaw) < 5 && abs(pitch_angle - last_pitch) < 5) {
+                if (pkt[7] != joystick_data->btnB_status) {
+                    pkt[7] = joystick_data->btnB_status;
+                    espnow_send_data(pkt, sizeof(pkt));
+                }
+                vTaskDelay(30 / portTICK_PERIOD_MS);
+                continue;
+            }
+
+            pkt[0] = joystick_data->id;
+            memcpy(&pkt[1], &yaw_angle, sizeof(int16_t));
+            memcpy(&pkt[3], &pitch_angle, sizeof(int16_t));
+            memcpy(&pkt[5], &speed_val, sizeof(int16_t));
+            pkt[7] = joystick_data->btnB_status;
+
+#if 0 
+            ESP_LOGI("handle_running_screen", "Yaw: %d, Pitch: %d, Speed: %d, id: %u, Button: %u", 
+                        yaw_angle, pitch_angle, speed_val, joystick_data->id, joystick_data->btnB_status);
+#endif
+
+            last_yaw   = yaw_angle;
+            last_pitch = pitch_angle;
+            espnow_send_data(pkt, sizeof(pkt));
+            vTaskDelay(30 / portTICK_PERIOD_MS);
+        } else {
+            vTaskDelay(200 / portTICK_PERIOD_MS);
+        }
+    }
+}
+
+/**
+ * @brief Task to handle joystick IMU screen functionality, processing IMU sensor data and sending ESP-NOW control
+ * packets
+ *
+ * This function runs an infinite loop that reads IMU sensor data (accelerometer and gyroscope),
+ * updates the IMU visualization screen, processes the angle data to control remote devices,
+ * and sends ESP-NOW packets with the processed control information.
+ * The function maps the IMU pitch and roll angles to yaw and pitch values for remote control,
+ * applies filtering to reduce unnecessary transmissions, and sends control packets at regular intervals.
+ *
+ * @param pvParam Pointer to joystick data structure containing IMU sensor values, battery level,
+ *                device ID, communication channel, and other control parameters
+ * @details
+ *      1. Continuously reads IMU data (acceleration and gyro values) from the joystick_data structure
+ *      2. Updates the IMU screen visualization with current sensor values
+ *      3. Limits roll values to range [-1.5, 1.5] and pitch values to range [0, 1.5]
+ *      4. Maps limited angle values to appropriate yaw/pitch ranges for remote control (-1280 to 1280 for yaw, 900 to 0
+ * for pitch)
+ *      5. Only sends control packets when changes exceed threshold (10 units) to minimize network traffic
+ *      6. Constructs and transmits ESP-NOW packet with device ID, yaw, pitch, speed, and button status
+ *      7. Includes a 50ms delay between iterations when in IMU mode, 200ms otherwise
+ */
+void handle_imu_screen(void *pvParam)
+{
+    joystick_data_t *joystick_data = (joystick_data_t *)pvParam;
+
+    static IMU_Angle_t last_imu_angle = {0.0f, 0.0f};
+
+    // communicate packet
+    uint8_t pkt[8];
+    pkt[0]              = joystick_data->id;  // id: 0 for broadcast
+    int16_t yaw_angle   = 0;
+    int16_t pitch_angle = 0;
+    int16_t last_yaw    = 0;
+    int16_t last_pitch  = 0;
+    int16_t speed_val   = 600;
+
+    while (1) {
+        // update screen and send packet when in running mode
+        if (joystick_data->screen_mode == MODE_IMU) {
+            IMU_Angle_t imu_angle =
+                update_imu_screen(joystick_data->accel_x, joystick_data->accel_y, joystick_data->accel_z,
+                                  joystick_data->bat, joystick_data->id, joystick_data->channel);
+
+            // Limit the roll value to the range of -1.5 to 1.5
+            float limited_roll = fmaxf(-1.5f, fminf(1.5f, imu_angle.roll));
+            // Limit the pitch value to the range of 0 to 1.5
+            float limited_pitch = fmaxf(0.0f, fminf(1.5f, imu_angle.pitch));
+
+            yaw_angle   = (int16_t)map(limited_roll, -1.5, 1.5, -1280, 1280);
+            pitch_angle = (int16_t)map(limited_pitch, 0, 1.5, 900, 0);
+
+            if (abs(yaw_angle - last_yaw) < 10 && abs(last_pitch - pitch_angle) < 10) {
+                vTaskDelay(30 / portTICK_PERIOD_MS);
+                continue;
+            }
+            last_yaw   = yaw_angle;
+            last_pitch = pitch_angle;
+
+            pkt[0] = joystick_data->id;
+            memcpy(&pkt[1], &yaw_angle, sizeof(int16_t));
+            memcpy(&pkt[3], &pitch_angle, sizeof(int16_t));
+            memcpy(&pkt[5], &speed_val, sizeof(int16_t));
+            pkt[7] = joystick_data->btnB_status;
+            espnow_send_data(pkt, sizeof(pkt));
+
+#if 0 
+            // ESP_LOGI("handle_imu_screen", "yaw_angle: %.2f, pitch_angle:%.2f, yaw: %d, pitch: %d\n", 
+                                            imu_angle.roll, imu_angle.pitch, yaw_angle, pitch_angle);
+#endif
+
+            vTaskDelay(30 / portTICK_PERIOD_MS);
+        } else {
+            vTaskDelay(200 / portTICK_PERIOD_MS);
+        }
+    }
+}

remote/code/main/joystick/joystick_handle.h

@@ -0,0 +1,28 @@
+#ifndef __JOYSTICK_HANDLE_H__
+#define __JOYSTICK_HANDLE_H__
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+#include "driver/i2c.h"
+#include "i2c_bus.h"
+#include "hal/i2c_types.h"
+#include "freertos/FreeRTOS.h"
+#include "freertos/task.h"
+#include "../esp_now/esp_now_init.h"
+#include "../ui/ui_setup_screen.h"
+#include "../ui/ui_running_screen.h"
+#include "../ui/ui_imu_screen.h"
+#include "joystick_basic.h"
+
+joystick_data_t joystick_init();
+void handle_setup_screen(void *pvParam);
+void handle_running_screen(void *pvParam);
+void handle_imu_screen(void *pvParam);
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif

remote/code/main/lvgl_port.cpp

@@ -0,0 +1,117 @@
+#include "lvgl_port.h"
+#include <M5Unified.h>
+#include "M5GFX.h"
+
+extern "C" {
+
+#define LV_BUFFER_LINE 40
+static SemaphoreHandle_t xGuiSemaphore;
+static void lvgl_tick_timer(void *arg)
+{
+    (void)arg;
+    lv_tick_inc(10);
+}
+
+static void lvgl_rtos_task(void *pvParameter)
+{
+    (void)pvParameter;
+    while (1) {
+        if (pdTRUE == xSemaphoreTake(xGuiSemaphore, portMAX_DELAY)) {
+            lv_timer_handler();
+            xSemaphoreGive(xGuiSemaphore);
+        }
+        vTaskDelay(pdMS_TO_TICKS(10));
+    }
+}
+
+static lv_disp_draw_buf_t draw_buf;
+static void lvgl_flush_cb(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
+{
+    M5GFX &gfx      = *(M5GFX *)disp->user_data;
+    int w           = (area->x2 - area->x1 + 1);
+    int h           = (area->y2 - area->y1 + 1);
+    uint32_t pixels = w * h;
+
+    M5.Display.startWrite();
+    M5.Display.setAddrWindow(area->x1, area->y1, w, h);
+
+    // Critical fix: Use safe pixel writing method to avoid M5GFX SIMD optimizations
+    // Break large transfers into small chunks to avoid problematic copy_rgb_fast function
+    const uint32_t SAFE_CHUNK_SIZE = 8192;  // 8K pixels per chunk, suitable for small buffer settings
+
+    if (pixels > SAFE_CHUNK_SIZE) {
+        // Chunked transmission for large data
+        const lgfx::rgb565_t *src = (const lgfx::rgb565_t *)color_p;
+        uint32_t remaining        = pixels;
+        uint32_t offset           = 0;
+
+        while (remaining > 0) {
+            uint32_t chunk_size = (remaining > SAFE_CHUNK_SIZE) ? SAFE_CHUNK_SIZE : remaining;
+            M5.Display.writePixels(src + offset, chunk_size);
+            offset += chunk_size;
+            remaining -= chunk_size;
+        }
+    } else {
+        // Direct transmission for small data
+        M5.Display.writePixels((lgfx::rgb565_t *)color_p, pixels);
+    }
+
+    M5.Display.endWrite();
+
+    lv_disp_flush_ready(disp);
+}
+
+// BtnA / BtnB
+static void lvgl_read_cb(lv_indev_drv_t *indev_driver, lv_indev_data_t *data)
+{
+}
+
+void lvgl_port_init(void)
+{
+    lv_init();
+
+    size_t buffer_size      = M5.Display.width() * LV_BUFFER_LINE * sizeof(lv_color_t);
+    static lv_color_t *buf1 = (lv_color_t *)heap_caps_malloc(buffer_size, MALLOC_CAP_DMA | MALLOC_CAP_INTERNAL);
+
+    if (buf1 == NULL) {
+        ESP_LOGE("LVGL", "Failed to allocate display buffer!");
+        return;
+    }
+
+    lv_disp_draw_buf_init(&draw_buf, buf1, NULL, M5.Display.width() * LV_BUFFER_LINE);
+
+    static lv_disp_drv_t disp_drv;
+    lv_disp_drv_init(&disp_drv);
+    disp_drv.hor_res   = M5.Display.width();
+    disp_drv.ver_res   = M5.Display.height();
+    disp_drv.flush_cb  = lvgl_flush_cb;
+    disp_drv.draw_buf  = &draw_buf;
+    disp_drv.user_data = &M5.Display;
+    lv_disp_drv_register(&disp_drv);
+
+    static lv_indev_drv_t indev_drv;
+    lv_indev_drv_init(&indev_drv);
+    indev_drv.type    = LV_INDEV_TYPE_BUTTON;
+    indev_drv.read_cb = lvgl_read_cb;
+    // indev_drv.user_data = &gfx;
+    indev_drv.user_data = &M5.Display;
+    lv_indev_t *indev   = lv_indev_drv_register(&indev_drv);
+
+    xGuiSemaphore                                     = xSemaphoreCreateMutex();
+    const esp_timer_create_args_t periodic_timer_args = {.callback = &lvgl_tick_timer, .name = "lvgl_tick_timer"};
+    esp_timer_handle_t periodic_timer;
+    ESP_ERROR_CHECK(esp_timer_create(&periodic_timer_args, &periodic_timer));
+    ESP_ERROR_CHECK(esp_timer_start_periodic(periodic_timer, 10 * 1000));
+    xTaskCreate(lvgl_rtos_task, "lvgl_rtos_task", 4096, NULL, 1, NULL);
+}
+
+bool lvgl_port_lock(void)
+{
+    return xSemaphoreTake(xGuiSemaphore, portMAX_DELAY) == pdTRUE ? true : false;
+}
+
+void lvgl_port_unlock(void)
+{
+    xSemaphoreGive(xGuiSemaphore);
+}
+}

remote/code/main/lvgl_port.h

@@ -0,0 +1,19 @@
+#ifndef LVGL_PORT_H
+#define LVGL_PORT_H
+
+#include "lvgl.h"
+#include "esp_log.h"
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+void lvgl_port_init(void);
+bool lvgl_port_lock(void);
+void lvgl_port_unlock(void);
+
+#ifdef __cplusplus
+}
+#endif
+
+#endif  // LVGL_PORT_H

remote/code/main/ui/lv_conf.h

@@ -0,0 +1,784 @@
+/**
+ * @file lv_conf.h
+ * Configuration file for v8.4.0
+ */
+
+/*
+ * Copy this file as `lv_conf.h`
+ * 1. simply next to the `lvgl` folder
+ * 2. or any other places and
+ *    - define `LV_CONF_INCLUDE_SIMPLE`
+ *    - add the path as include path
+ */
+
+/* clang-format off */
+#if 1 /*Set it to "1" to enable content*/
+
+#ifndef LV_CONF_H
+#define LV_CONF_H
+
+#include <stdint.h>
+
+/*====================
+   COLOR SETTINGS
+ *====================*/
+
+/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
+#define LV_COLOR_DEPTH 16
+
+/*Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)*/
+#define LV_COLOR_16_SWAP 0
+
+/*Enable features to draw on transparent background.
+ *It's required if opa, and transform_* style properties are used.
+ *Can be also used if the UI is above another layer, e.g. an OSD menu or video player.*/
+#define LV_COLOR_SCREEN_TRANSP 0
+
+/* Adjust color mix functions rounding. GPUs might calculate color mix (blending) differently.
+ * 0: round down, 64: round up from x.75, 128: round up from half, 192: round up from x.25, 254: round up */
+#define LV_COLOR_MIX_ROUND_OFS 0
+
+/*Images pixels with this color will not be drawn if they are chroma keyed)*/
+#define LV_COLOR_CHROMA_KEY lv_color_hex(0x00ff00)         /*pure green*/
+
+/*=========================
+   MEMORY SETTINGS
+ *=========================*/
+
+/*1: use custom malloc/free, 0: use the built-in `lv_mem_alloc()` and `lv_mem_free()`*/
+#define LV_MEM_CUSTOM 0
+#if LV_MEM_CUSTOM == 0
+    /*Size of the memory available for `lv_mem_alloc()` in bytes (>= 2kB)*/
+    #define LV_MEM_SIZE (128U * 1024U)          /*[bytes]*/
+
+    /*Set an address for the memory pool instead of allocating it as a normal array. Can be in external SRAM too.*/
+    #define LV_MEM_ADR 0     /*0: unused*/
+    /*Instead of an address give a memory allocator that will be called to get a memory pool for LVGL. E.g. my_malloc*/
+    #if LV_MEM_ADR == 0
+        #undef LV_MEM_POOL_INCLUDE
+        #undef LV_MEM_POOL_ALLOC
+    #endif
+
+#else       /*LV_MEM_CUSTOM*/
+    #define LV_MEM_CUSTOM_INCLUDE <stdlib.h>   /*Header for the dynamic memory function*/
+    #define LV_MEM_CUSTOM_ALLOC   malloc
+    #define LV_MEM_CUSTOM_FREE    free
+    #define LV_MEM_CUSTOM_REALLOC realloc
+#endif     /*LV_MEM_CUSTOM*/
+
+/*Number of the intermediate memory buffer used during rendering and other internal processing mechanisms.
+ *You will see an error log message if there wasn't enough buffers. */
+#define LV_MEM_BUF_MAX_NUM 16
+
+/*Use the standard `memcpy` and `memset` instead of LVGL's own functions. (Might or might not be faster).*/
+#define LV_MEMCPY_MEMSET_STD 0
+
+/*====================
+   HAL SETTINGS
+ *====================*/
+
+/*Default display refresh period. LVG will redraw changed areas with this period time*/
+#define LV_DISP_DEF_REFR_PERIOD 30      /*[ms]*/
+
+/*Input device read period in milliseconds*/
+#define LV_INDEV_DEF_READ_PERIOD 30     /*[ms]*/
+
+/*Use a custom tick source that tells the elapsed time in milliseconds.
+ *It removes the need to manually update the tick with `lv_tick_inc()`)*/
+#define LV_TICK_CUSTOM 0
+#if LV_TICK_CUSTOM
+    #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
+    #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
+    /*If using lvgl as ESP32 component*/
+    // #define LV_TICK_CUSTOM_INCLUDE "esp_timer.h"
+    // #define LV_TICK_CUSTOM_SYS_TIME_EXPR ((esp_timer_get_time() / 1000LL))
+#endif   /*LV_TICK_CUSTOM*/
+
+/*Default Dot Per Inch. Used to initialize default sizes such as widgets sized, style paddings.
+ *(Not so important, you can adjust it to modify default sizes and spaces)*/
+#define LV_DPI_DEF 130     /*[px/inch]*/
+
+/*=======================
+ * FEATURE CONFIGURATION
+ *=======================*/
+
+/*-------------
+ * Drawing
+ *-----------*/
+
+/*Enable complex draw engine.
+ *Required to draw shadow, gradient, rounded corners, circles, arc, skew lines, image transformations or any masks*/
+#define LV_DRAW_COMPLEX 1
+#if LV_DRAW_COMPLEX != 0
+
+    /*Allow buffering some shadow calculation.
+    *LV_SHADOW_CACHE_SIZE is the max. shadow size to buffer, where shadow size is `shadow_width + radius`
+    *Caching has LV_SHADOW_CACHE_SIZE^2 RAM cost*/
+    #define LV_SHADOW_CACHE_SIZE 0
+
+    /* Set number of maximally cached circle data.
+    * The circumference of 1/4 circle are saved for anti-aliasing
+    * radius * 4 bytes are used per circle (the most often used radiuses are saved)
+    * 0: to disable caching */
+    #define LV_CIRCLE_CACHE_SIZE 4
+#endif /*LV_DRAW_COMPLEX*/
+
+/**
+ * "Simple layers" are used when a widget has `style_opa < 255` to buffer the widget into a layer
+ * and blend it as an image with the given opacity.
+ * Note that `bg_opa`, `text_opa` etc don't require buffering into layer)
+ * The widget can be buffered in smaller chunks to avoid using large buffers.
+ *
+ * - LV_LAYER_SIMPLE_BUF_SIZE: [bytes] the optimal target buffer size. LVGL will try to allocate it
+ * - LV_LAYER_SIMPLE_FALLBACK_BUF_SIZE: [bytes]  used if `LV_LAYER_SIMPLE_BUF_SIZE` couldn't be allocated.
+ *
+ * Both buffer sizes are in bytes.
+ * "Transformed layers" (where transform_angle/zoom properties are used) use larger buffers
+ * and can't be drawn in chunks. So these settings affects only widgets with opacity.
+ */
+#define LV_LAYER_SIMPLE_BUF_SIZE          (24 * 1024)
+#define LV_LAYER_SIMPLE_FALLBACK_BUF_SIZE (3 * 1024)
+
+/*Default image cache size. Image caching keeps the images opened.
+ *If only the built-in image formats are used there is no real advantage of caching. (I.e. if no new image decoder is added)
+ *With complex image decoders (e.g. PNG or JPG) caching can save the continuous open/decode of images.
+ *However the opened images might consume additional RAM.
+ *0: to disable caching*/
+#define LV_IMG_CACHE_DEF_SIZE 0
+
+/*Number of stops allowed per gradient. Increase this to allow more stops.
+ *This adds (sizeof(lv_color_t) + 1) bytes per additional stop*/
+#define LV_GRADIENT_MAX_STOPS 2
+
+/*Default gradient buffer size.
+ *When LVGL calculates the gradient "maps" it can save them into a cache to avoid calculating them again.
+ *LV_GRAD_CACHE_DEF_SIZE sets the size of this cache in bytes.
+ *If the cache is too small the map will be allocated only while it's required for the drawing.
+ *0 mean no caching.*/
+#define LV_GRAD_CACHE_DEF_SIZE 0
+
+/*Allow dithering the gradients (to achieve visual smooth color gradients on limited color depth display)
+ *LV_DITHER_GRADIENT implies allocating one or two more lines of the object's rendering surface
+ *The increase in memory consumption is (32 bits * object width) plus 24 bits * object width if using error diffusion */
+#define LV_DITHER_GRADIENT 0
+#if LV_DITHER_GRADIENT
+    /*Add support for error diffusion dithering.
+     *Error diffusion dithering gets a much better visual result, but implies more CPU consumption and memory when drawing.
+     *The increase in memory consumption is (24 bits * object's width)*/
+    #define LV_DITHER_ERROR_DIFFUSION 0
+#endif
+
+/*Maximum buffer size to allocate for rotation.
+ *Only used if software rotation is enabled in the display driver.*/
+#define LV_DISP_ROT_MAX_BUF (10*1024)
+
+/*-------------
+ * GPU
+ *-----------*/
+
+/*Use Arm's 2D acceleration library Arm-2D */
+#define LV_USE_GPU_ARM2D 0
+
+/*Use STM32's DMA2D (aka Chrom Art) GPU*/
+#define LV_USE_GPU_STM32_DMA2D 0
+#if LV_USE_GPU_STM32_DMA2D
+    /*Must be defined to include path of CMSIS header of target processor
+    e.g. "stm32f7xx.h" or "stm32f4xx.h"*/
+    #define LV_GPU_DMA2D_CMSIS_INCLUDE
+#endif
+
+/*Enable RA6M3 G2D GPU*/
+#define LV_USE_GPU_RA6M3_G2D 0
+#if LV_USE_GPU_RA6M3_G2D
+    /*include path of target processor
+    e.g. "hal_data.h"*/
+    #define LV_GPU_RA6M3_G2D_INCLUDE "hal_data.h"
+#endif
+
+/*Use SWM341's DMA2D GPU*/
+#define LV_USE_GPU_SWM341_DMA2D 0
+#if LV_USE_GPU_SWM341_DMA2D
+    #define LV_GPU_SWM341_DMA2D_INCLUDE "SWM341.h"
+#endif
+
+/*Use NXP's PXP GPU iMX RTxxx platforms*/
+#define LV_USE_GPU_NXP_PXP 0
+#if LV_USE_GPU_NXP_PXP
+    /*1: Add default bare metal and FreeRTOS interrupt handling routines for PXP (lv_gpu_nxp_pxp_osa.c)
+    *   and call lv_gpu_nxp_pxp_init() automatically during lv_init(). Note that symbol SDK_OS_FREE_RTOS
+    *   has to be defined in order to use FreeRTOS OSA, otherwise bare-metal implementation is selected.
+    *0: lv_gpu_nxp_pxp_init() has to be called manually before lv_init()
+    */
+    #define LV_USE_GPU_NXP_PXP_AUTO_INIT 0
+#endif
+
+/*Use NXP's VG-Lite GPU iMX RTxxx platforms*/
+#define LV_USE_GPU_NXP_VG_LITE 0
+
+/*Use SDL renderer API*/
+#define LV_USE_GPU_SDL 0
+#if LV_USE_GPU_SDL
+    #define LV_GPU_SDL_INCLUDE_PATH <SDL2/SDL.h>
+    /*Texture cache size, 8MB by default*/
+    #define LV_GPU_SDL_LRU_SIZE (1024 * 1024 * 8)
+    /*Custom blend mode for mask drawing, disable if you need to link with older SDL2 lib*/
+    #define LV_GPU_SDL_CUSTOM_BLEND_MODE (SDL_VERSION_ATLEAST(2, 0, 6))
+#endif
+
+/*-------------
+ * Logging
+ *-----------*/
+
+/*Enable the log module*/
+#define LV_USE_LOG 0
+#if LV_USE_LOG
+
+    /*How important log should be added:
+    *LV_LOG_LEVEL_TRACE       A lot of logs to give detailed information
+    *LV_LOG_LEVEL_INFO        Log important events
+    *LV_LOG_LEVEL_WARN        Log if something unwanted happened but didn't cause a problem
+    *LV_LOG_LEVEL_ERROR       Only critical issue, when the system may fail
+    *LV_LOG_LEVEL_USER        Only logs added by the user
+    *LV_LOG_LEVEL_NONE        Do not log anything*/
+    #define LV_LOG_LEVEL LV_LOG_LEVEL_WARN
+
+    /*1: Print the log with 'printf';
+    *0: User need to register a callback with `lv_log_register_print_cb()`*/
+    #define LV_LOG_PRINTF 0
+
+    /*Enable/disable LV_LOG_TRACE in modules that produces a huge number of logs*/
+    #define LV_LOG_TRACE_MEM        1
+    #define LV_LOG_TRACE_TIMER      1
+    #define LV_LOG_TRACE_INDEV      1
+    #define LV_LOG_TRACE_DISP_REFR  1
+    #define LV_LOG_TRACE_EVENT      1
+    #define LV_LOG_TRACE_OBJ_CREATE 1
+    #define LV_LOG_TRACE_LAYOUT     1
+    #define LV_LOG_TRACE_ANIM       1
+
+#endif  /*LV_USE_LOG*/
+
+/*-------------
+ * Asserts
+ *-----------*/
+
+/*Enable asserts if an operation is failed or an invalid data is found.
+ *If LV_USE_LOG is enabled an error message will be printed on failure*/
+#define LV_USE_ASSERT_NULL          1   /*Check if the parameter is NULL. (Very fast, recommended)*/
+#define LV_USE_ASSERT_MALLOC        1   /*Checks is the memory is successfully allocated or no. (Very fast, recommended)*/
+#define LV_USE_ASSERT_STYLE         0   /*Check if the styles are properly initialized. (Very fast, recommended)*/
+#define LV_USE_ASSERT_MEM_INTEGRITY 0   /*Check the integrity of `lv_mem` after critical operations. (Slow)*/
+#define LV_USE_ASSERT_OBJ           0   /*Check the object's type and existence (e.g. not deleted). (Slow)*/
+
+/*Add a custom handler when assert happens e.g. to restart the MCU*/
+#define LV_ASSERT_HANDLER_INCLUDE <stdint.h>
+#define LV_ASSERT_HANDLER while(1);   /*Halt by default*/
+
+/*-------------
+ * Others
+ *-----------*/
+
+/*1: Show CPU usage and FPS count*/
+#define LV_USE_PERF_MONITOR 0
+#if LV_USE_PERF_MONITOR
+    #define LV_USE_PERF_MONITOR_POS LV_ALIGN_BOTTOM_RIGHT
+#endif
+
+/*1: Show the used memory and the memory fragmentation
+ * Requires LV_MEM_CUSTOM = 0*/
+#define LV_USE_MEM_MONITOR 0
+#if LV_USE_MEM_MONITOR
+    #define LV_USE_MEM_MONITOR_POS LV_ALIGN_BOTTOM_LEFT
+#endif
+
+/*1: Draw random colored rectangles over the redrawn areas*/
+#define LV_USE_REFR_DEBUG 0
+
+/*Change the built in (v)snprintf functions*/
+#define LV_SPRINTF_CUSTOM 0
+#if LV_SPRINTF_CUSTOM
+    #define LV_SPRINTF_INCLUDE <stdio.h>
+    #define lv_snprintf  snprintf
+    #define lv_vsnprintf vsnprintf
+#else   /*LV_SPRINTF_CUSTOM*/
+    #define LV_SPRINTF_USE_FLOAT 0
+#endif  /*LV_SPRINTF_CUSTOM*/
+
+#define LV_USE_USER_DATA 1
+
+/*Garbage Collector settings
+ *Used if lvgl is bound to higher level language and the memory is managed by that language*/
+#define LV_ENABLE_GC 0
+#if LV_ENABLE_GC != 0
+    #define LV_GC_INCLUDE "gc.h"                           /*Include Garbage Collector related things*/
+#endif /*LV_ENABLE_GC*/
+
+/*=====================
+ *  COMPILER SETTINGS
+ *====================*/
+
+/*For big endian systems set to 1*/
+#define LV_BIG_ENDIAN_SYSTEM 0
+
+/*Define a custom attribute to `lv_tick_inc` function*/
+#define LV_ATTRIBUTE_TICK_INC
+
+/*Define a custom attribute to `lv_timer_handler` function*/
+#define LV_ATTRIBUTE_TIMER_HANDLER
+
+/*Define a custom attribute to `lv_disp_flush_ready` function*/
+#define LV_ATTRIBUTE_FLUSH_READY
+
+/*Required alignment size for buffers*/
+#define LV_ATTRIBUTE_MEM_ALIGN_SIZE 1
+
+/*Will be added where memories needs to be aligned (with -Os data might not be aligned to boundary by default).
+ * E.g. __attribute__((aligned(4)))*/
+#define LV_ATTRIBUTE_MEM_ALIGN
+
+/*Attribute to mark large constant arrays for example font's bitmaps*/
+#define LV_ATTRIBUTE_LARGE_CONST
+
+/*Compiler prefix for a big array declaration in RAM*/
+#define LV_ATTRIBUTE_LARGE_RAM_ARRAY
+
+/*Place performance critical functions into a faster memory (e.g RAM)*/
+#define LV_ATTRIBUTE_FAST_MEM
+
+/*Prefix variables that are used in GPU accelerated operations, often these need to be placed in RAM sections that are DMA accessible*/
+#define LV_ATTRIBUTE_DMA
+
+/*Export integer constant to binding. This macro is used with constants in the form of LV_<CONST> that
+ *should also appear on LVGL binding API such as Micropython.*/
+#define LV_EXPORT_CONST_INT(int_value) struct _silence_gcc_warning /*The default value just prevents GCC warning*/
+
+/*Extend the default -32k..32k coordinate range to -4M..4M by using int32_t for coordinates instead of int16_t*/
+#define LV_USE_LARGE_COORD 0
+
+/*==================
+ *   FONT USAGE
+ *===================*/
+
+/*Montserrat fonts with ASCII range and some symbols using bpp = 4
+ *https://fonts.google.com/specimen/Montserrat*/
+#define LV_FONT_MONTSERRAT_8  0
+#define LV_FONT_MONTSERRAT_10 0
+#define LV_FONT_MONTSERRAT_12 0
+#define LV_FONT_MONTSERRAT_14 1
+#define LV_FONT_MONTSERRAT_16 0
+#define LV_FONT_MONTSERRAT_18 0
+#define LV_FONT_MONTSERRAT_20 0
+#define LV_FONT_MONTSERRAT_22 0
+#define LV_FONT_MONTSERRAT_24 0
+#define LV_FONT_MONTSERRAT_26 0
+#define LV_FONT_MONTSERRAT_28 0
+#define LV_FONT_MONTSERRAT_30 0
+#define LV_FONT_MONTSERRAT_32 0
+#define LV_FONT_MONTSERRAT_34 0
+#define LV_FONT_MONTSERRAT_36 0
+#define LV_FONT_MONTSERRAT_38 0
+#define LV_FONT_MONTSERRAT_40 0
+#define LV_FONT_MONTSERRAT_42 0
+#define LV_FONT_MONTSERRAT_44 0
+#define LV_FONT_MONTSERRAT_46 0
+#define LV_FONT_MONTSERRAT_48 0
+
+/*Demonstrate special features*/
+#define LV_FONT_MONTSERRAT_12_SUBPX      0
+#define LV_FONT_MONTSERRAT_28_COMPRESSED 0  /*bpp = 3*/
+#define LV_FONT_DEJAVU_16_PERSIAN_HEBREW 0  /*Hebrew, Arabic, Persian letters and all their forms*/
+#define LV_FONT_SIMSUN_16_CJK            0  /*1000 most common CJK radicals*/
+
+/*Pixel perfect monospace fonts*/
+#define LV_FONT_UNSCII_8  0
+#define LV_FONT_UNSCII_16 0
+
+/*Optionally declare custom fonts here.
+ *You can use these fonts as default font too and they will be available globally.
+ *E.g. #define LV_FONT_CUSTOM_DECLARE   LV_FONT_DECLARE(my_font_1) LV_FONT_DECLARE(my_font_2)*/
+#define LV_FONT_CUSTOM_DECLARE
+
+/*Always set a default font*/
+#define LV_FONT_DEFAULT &lv_font_montserrat_14
+
+/*Enable handling large font and/or fonts with a lot of characters.
+ *The limit depends on the font size, font face and bpp.
+ *Compiler error will be triggered if a font needs it.*/
+#define LV_FONT_FMT_TXT_LARGE 0
+
+/*Enables/disables support for compressed fonts.*/
+#define LV_USE_FONT_COMPRESSED 0
+
+/*Enable subpixel rendering*/
+#define LV_USE_FONT_SUBPX 0
+#if LV_USE_FONT_SUBPX
+    /*Set the pixel order of the display. Physical order of RGB channels. Doesn't matter with "normal" fonts.*/
+    #define LV_FONT_SUBPX_BGR 0  /*0: RGB; 1:BGR order*/
+#endif
+
+/*Enable drawing placeholders when glyph dsc is not found*/
+#define LV_USE_FONT_PLACEHOLDER 1
+
+/*=================
+ *  TEXT SETTINGS
+ *=================*/
+
+/**
+ * Select a character encoding for strings.
+ * Your IDE or editor should have the same character encoding
+ * - LV_TXT_ENC_UTF8
+ * - LV_TXT_ENC_ASCII
+ */
+#define LV_TXT_ENC LV_TXT_ENC_UTF8
+
+/*Can break (wrap) texts on these chars*/
+#define LV_TXT_BREAK_CHARS " ,.;:-_"
+
+/*If a word is at least this long, will break wherever "prettiest"
+ *To disable, set to a value <= 0*/
+#define LV_TXT_LINE_BREAK_LONG_LEN 0
+
+/*Minimum number of characters in a long word to put on a line before a break.
+ *Depends on LV_TXT_LINE_BREAK_LONG_LEN.*/
+#define LV_TXT_LINE_BREAK_LONG_PRE_MIN_LEN 3
+
+/*Minimum number of characters in a long word to put on a line after a break.
+ *Depends on LV_TXT_LINE_BREAK_LONG_LEN.*/
+#define LV_TXT_LINE_BREAK_LONG_POST_MIN_LEN 3
+
+/*The control character to use for signalling text recoloring.*/
+#define LV_TXT_COLOR_CMD "#"
+
+/*Support bidirectional texts. Allows mixing Left-to-Right and Right-to-Left texts.
+ *The direction will be processed according to the Unicode Bidirectional Algorithm:
+ *https://www.w3.org/International/articles/inline-bidi-markup/uba-basics*/
+#define LV_USE_BIDI 0
+#if LV_USE_BIDI
+    /*Set the default direction. Supported values:
+    *`LV_BASE_DIR_LTR` Left-to-Right
+    *`LV_BASE_DIR_RTL` Right-to-Left
+    *`LV_BASE_DIR_AUTO` detect texts base direction*/
+    #define LV_BIDI_BASE_DIR_DEF LV_BASE_DIR_AUTO
+#endif
+
+/*Enable Arabic/Persian processing
+ *In these languages characters should be replaced with an other form based on their position in the text*/
+#define LV_USE_ARABIC_PERSIAN_CHARS 0
+
+/*==================
+ *  WIDGET USAGE
+ *================*/
+
+/*Documentation of the widgets: https://docs.lvgl.io/latest/en/html/widgets/index.html*/
+
+#define LV_USE_ARC        1
+
+#define LV_USE_BAR        1
+
+#define LV_USE_BTN        1
+
+#define LV_USE_BTNMATRIX  1
+
+#define LV_USE_CANVAS     1
+
+#define LV_USE_CHECKBOX   1
+
+#define LV_USE_DROPDOWN   1   /*Requires: lv_label*/
+
+#define LV_USE_IMG        1   /*Requires: lv_label*/
+
+#define LV_USE_LABEL      1
+#if LV_USE_LABEL
+    #define LV_LABEL_TEXT_SELECTION 1 /*Enable selecting text of the label*/
+    #define LV_LABEL_LONG_TXT_HINT 1  /*Store some extra info in labels to speed up drawing of very long texts*/
+#endif
+
+#define LV_USE_LINE       1
+
+#define LV_USE_ROLLER     1   /*Requires: lv_label*/
+#if LV_USE_ROLLER
+    #define LV_ROLLER_INF_PAGES 7 /*Number of extra "pages" when the roller is infinite*/
+#endif
+
+#define LV_USE_SLIDER     1   /*Requires: lv_bar*/
+
+#define LV_USE_SWITCH     1
+
+#define LV_USE_TEXTAREA   1   /*Requires: lv_label*/
+#if LV_USE_TEXTAREA != 0
+    #define LV_TEXTAREA_DEF_PWD_SHOW_TIME 1500    /*ms*/
+#endif
+
+#define LV_USE_TABLE      1
+
+/*==================
+ * EXTRA COMPONENTS
+ *==================*/
+
+/*-----------
+ * Widgets
+ *----------*/
+#define LV_USE_ANIMIMG    1
+
+#define LV_USE_CALENDAR   1
+#if LV_USE_CALENDAR
+    #define LV_CALENDAR_WEEK_STARTS_MONDAY 0
+    #if LV_CALENDAR_WEEK_STARTS_MONDAY
+        #define LV_CALENDAR_DEFAULT_DAY_NAMES {"Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"}
+    #else
+        #define LV_CALENDAR_DEFAULT_DAY_NAMES {"Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"}
+    #endif
+
+    #define LV_CALENDAR_DEFAULT_MONTH_NAMES {"January", "February", "March",  "April", "May",  "June", "July", "August", "September", "October", "November", "December"}
+    #define LV_USE_CALENDAR_HEADER_ARROW 1
+    #define LV_USE_CALENDAR_HEADER_DROPDOWN 1
+#endif  /*LV_USE_CALENDAR*/
+
+#define LV_USE_CHART      1
+
+#define LV_USE_COLORWHEEL 1
+
+#define LV_USE_IMGBTN     1
+
+#define LV_USE_KEYBOARD   1
+
+#define LV_USE_LED        1
+
+#define LV_USE_LIST       1
+
+#define LV_USE_MENU       1
+
+#define LV_USE_METER      1
+
+#define LV_USE_MSGBOX     1
+
+#define LV_USE_SPAN       1
+#if LV_USE_SPAN
+    /*A line text can contain maximum num of span descriptor */
+    #define LV_SPAN_SNIPPET_STACK_SIZE 64
+#endif
+
+#define LV_USE_SPINBOX    1
+
+#define LV_USE_SPINNER    1
+
+#define LV_USE_TABVIEW    1
+
+#define LV_USE_TILEVIEW   1
+
+#define LV_USE_WIN        1
+
+/*-----------
+ * Themes
+ *----------*/
+
+/*A simple, impressive and very complete theme*/
+#define LV_USE_THEME_DEFAULT 1
+#if LV_USE_THEME_DEFAULT
+
+    /*0: Light mode; 1: Dark mode*/
+    #define LV_THEME_DEFAULT_DARK 0
+
+    /*1: Enable grow on press*/
+    #define LV_THEME_DEFAULT_GROW 1
+
+    /*Default transition time in [ms]*/
+    #define LV_THEME_DEFAULT_TRANSITION_TIME 80
+#endif /*LV_USE_THEME_DEFAULT*/
+
+/*A very simple theme that is a good starting point for a custom theme*/
+#define LV_USE_THEME_BASIC 1
+
+/*A theme designed for monochrome displays*/
+#define LV_USE_THEME_MONO 1
+
+/*-----------
+ * Layouts
+ *----------*/
+
+/*A layout similar to Flexbox in CSS.*/
+#define LV_USE_FLEX 1
+
+/*A layout similar to Grid in CSS.*/
+#define LV_USE_GRID 1
+
+/*---------------------
+ * 3rd party libraries
+ *--------------------*/
+
+/*File system interfaces for common APIs */
+
+/*API for fopen, fread, etc*/
+#define LV_USE_FS_STDIO 0
+#if LV_USE_FS_STDIO
+    #define LV_FS_STDIO_LETTER '\0'     /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
+    #define LV_FS_STDIO_PATH ""         /*Set the working directory. File/directory paths will be appended to it.*/
+    #define LV_FS_STDIO_CACHE_SIZE 0    /*>0 to cache this number of bytes in lv_fs_read()*/
+#endif
+
+/*API for open, read, etc*/
+#define LV_USE_FS_POSIX 0
+#if LV_USE_FS_POSIX
+    #define LV_FS_POSIX_LETTER '\0'     /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
+    #define LV_FS_POSIX_PATH ""         /*Set the working directory. File/directory paths will be appended to it.*/
+    #define LV_FS_POSIX_CACHE_SIZE 0    /*>0 to cache this number of bytes in lv_fs_read()*/
+#endif
+
+/*API for CreateFile, ReadFile, etc*/
+#define LV_USE_FS_WIN32 0
+#if LV_USE_FS_WIN32
+    #define LV_FS_WIN32_LETTER '\0'     /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
+    #define LV_FS_WIN32_PATH ""         /*Set the working directory. File/directory paths will be appended to it.*/
+    #define LV_FS_WIN32_CACHE_SIZE 0    /*>0 to cache this number of bytes in lv_fs_read()*/
+#endif
+
+/*API for FATFS (needs to be added separately). Uses f_open, f_read, etc*/
+#define LV_USE_FS_FATFS 0
+#if LV_USE_FS_FATFS
+    #define LV_FS_FATFS_LETTER '\0'     /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
+    #define LV_FS_FATFS_CACHE_SIZE 0    /*>0 to cache this number of bytes in lv_fs_read()*/
+#endif
+
+/*API for LittleFS (library needs to be added separately). Uses lfs_file_open, lfs_file_read, etc*/
+#define LV_USE_FS_LITTLEFS 0
+#if LV_USE_FS_LITTLEFS
+    #define LV_FS_LITTLEFS_LETTER '\0'     /*Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
+    #define LV_FS_LITTLEFS_CACHE_SIZE 0    /*>0 to cache this number of bytes in lv_fs_read()*/
+#endif
+
+/*PNG decoder library*/
+#define LV_USE_PNG 0
+
+/*BMP decoder library*/
+#define LV_USE_BMP 0
+
+/* JPG + split JPG decoder library.
+ * Split JPG is a custom format optimized for embedded systems. */
+#define LV_USE_SJPG 0
+
+/*GIF decoder library*/
+#define LV_USE_GIF 0
+
+/*QR code library*/
+#define LV_USE_QRCODE 0
+
+/*FreeType library*/
+#define LV_USE_FREETYPE 0
+#if LV_USE_FREETYPE
+    /*Memory used by FreeType to cache characters [bytes] (-1: no caching)*/
+    #define LV_FREETYPE_CACHE_SIZE (16 * 1024)
+    #if LV_FREETYPE_CACHE_SIZE >= 0
+        /* 1: bitmap cache use the sbit cache, 0:bitmap cache use the image cache. */
+        /* sbit cache:it is much more memory efficient for small bitmaps(font size < 256) */
+        /* if font size >= 256, must be configured as image cache */
+        #define LV_FREETYPE_SBIT_CACHE 0
+        /* Maximum number of opened FT_Face/FT_Size objects managed by this cache instance. */
+        /* (0:use system defaults) */
+        #define LV_FREETYPE_CACHE_FT_FACES 0
+        #define LV_FREETYPE_CACHE_FT_SIZES 0
+    #endif
+#endif
+
+/*Tiny TTF library*/
+#define LV_USE_TINY_TTF 0
+#if LV_USE_TINY_TTF
+    /*Load TTF data from files*/
+    #define LV_TINY_TTF_FILE_SUPPORT 0
+#endif
+
+/*Rlottie library*/
+#define LV_USE_RLOTTIE 0
+
+/*FFmpeg library for image decoding and playing videos
+ *Supports all major image formats so do not enable other image decoder with it*/
+#define LV_USE_FFMPEG 0
+#if LV_USE_FFMPEG
+    /*Dump input information to stderr*/
+    #define LV_FFMPEG_DUMP_FORMAT 0
+#endif
+
+/*-----------
+ * Others
+ *----------*/
+
+/*1: Enable API to take snapshot for object*/
+#define LV_USE_SNAPSHOT 0
+
+/*1: Enable Monkey test*/
+#define LV_USE_MONKEY 0
+
+/*1: Enable grid navigation*/
+#define LV_USE_GRIDNAV 0
+
+/*1: Enable lv_obj fragment*/
+#define LV_USE_FRAGMENT 0
+
+/*1: Support using images as font in label or span widgets */
+#define LV_USE_IMGFONT 0
+
+/*1: Enable a published subscriber based messaging system */
+#define LV_USE_MSG 0
+
+/*1: Enable Pinyin input method*/
+/*Requires: lv_keyboard*/
+#define LV_USE_IME_PINYIN 0
+#if LV_USE_IME_PINYIN
+    /*1: Use default thesaurus*/
+    /*If you do not use the default thesaurus, be sure to use `lv_ime_pinyin` after setting the thesauruss*/
+    #define LV_IME_PINYIN_USE_DEFAULT_DICT 1
+    /*Set the maximum number of candidate panels that can be displayed*/
+    /*This needs to be adjusted according to the size of the screen*/
+    #define LV_IME_PINYIN_CAND_TEXT_NUM 6
+
+    /*Use 9 key input(k9)*/
+    #define LV_IME_PINYIN_USE_K9_MODE      1
+    #if LV_IME_PINYIN_USE_K9_MODE == 1
+        #define LV_IME_PINYIN_K9_CAND_TEXT_NUM 3
+    #endif // LV_IME_PINYIN_USE_K9_MODE
+#endif
+
+/*==================
+* EXAMPLES
+*==================*/
+
+/*Enable the examples to be built with the library*/
+#define LV_BUILD_EXAMPLES 1
+
+/*===================
+ * DEMO USAGE
+ ====================*/
+
+/*Show some widget. It might be required to increase `LV_MEM_SIZE` */
+#define LV_USE_DEMO_WIDGETS 0
+#if LV_USE_DEMO_WIDGETS
+#define LV_DEMO_WIDGETS_SLIDESHOW 0
+#endif
+
+/*Demonstrate the usage of encoder and keyboard*/
+#define LV_USE_DEMO_KEYPAD_AND_ENCODER 0
+
+/*Benchmark your system*/
+#define LV_USE_DEMO_BENCHMARK 0
+#if LV_USE_DEMO_BENCHMARK
+/*Use RGB565A8 images with 16 bit color depth instead of ARGB8565*/
+#define LV_DEMO_BENCHMARK_RGB565A8 0
+#endif
+
+/*Stress test for LVGL*/
+#define LV_USE_DEMO_STRESS 0
+
+/*Music player demo*/
+#define LV_USE_DEMO_MUSIC 0
+#if LV_USE_DEMO_MUSIC
+    #define LV_DEMO_MUSIC_SQUARE    0
+    #define LV_DEMO_MUSIC_LANDSCAPE 0
+    #define LV_DEMO_MUSIC_ROUND     0
+    #define LV_DEMO_MUSIC_LARGE     0
+    #define LV_DEMO_MUSIC_AUTO_PLAY 0
+#endif
+
+/*--END OF LV_CONF_H--*/
+
+#endif /*LV_CONF_H*/
+
+#endif /*End of "Content enable"*/

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_