{"slug": "a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4", "title": "A Smartphone-Style UI on an MCU: Brookesia on SCINTIX P4", "summary": "Espressif's SCINTIX P4 module, powered by the ESP32-P4 MCU, now runs the Brookesia smartphone-style UI, enabling multimedia and edge AI applications on a real-time microcontroller. The tutorial details hardware setup, firmware flashing, and camera/display integration for building HMI systems.", "body_md": "SCINTIX P4 gives you the ability to build multimedia applications powered by a real-time MCU.\n\nIt's a fast and versatile platform designed for display- and camera-based HMI applications over MIPI-DSI and MIPI-CSI. It's equally well suited to edge AI workloads, sensor-processing applications, and modular embedded systems that need the flexibility of a CM4/CM5 carrier while keeping the deterministic behavior of a microcontroller.\n\nWhat you will learn in this tutorial- Project setup and build process\n- Firmware flashing\n- Camera integration\n- Display integration\n\n```\n                        +-----------+                        |  SCINTIX  |                        +-----------+                              |                              v                    +---------------------+                    | CM4-to-Pi4-Adapter  | ─────────────────┐                    +---------------------+                  |                           |         |                       | SUPPLY/RST CABLE              CAMERA CABLE |         | DISPLAY CABLE         |                           v         v                       v+-----------------------------+  +-----------------------------+| ESP32-P4-Function-EV-Board  |  | ESP32-P4-Function-EV-Board  ||           CAMERA            |  |           DISPLAY           |+-----------------------------+  +-----------------------------+\n```\n\nHardware Design**Connections**\n\n- Place the SCINTIX P4 board (already programmed — see the Firmware section below) onto the CM4-to-Pi4 adapter.\n\n- Connect the camera and the display using the flat cables.\n\n- Connect the supplementary cable from the CM4-to-Pi4 adapter to the display. This cable provides the display power supply and reset signal.\n\n```\n  | CM4-to-Pi4-Adapter Pin | Display Pin |  |--------------------------------------|  |           5V           |      5V     |  |          GND           |     GND     |  |         GPIO27         |     PWM     |  |         GPIO22         |   RST_LCD   |\n```\n\n**Project Structure**\n\n```\nesp_brookesia_phone/├── main/│   ├── main.cpp               # entry point — BSP + framework init, app install│   └── lvgl_adapter_init.c    # MIPI-DSI panel + GT911 touch → LVGL binding├── components/│   ├── apps/│   │   ├── camera/            # MIPI-CSI streaming, AI detection, photo UI│   │   ├── setting/           # WiFi, BLE toggle, brightness, SNTP│   │   ├── game_2048/         # gesture input, NVS high-score│   │   ├── music_player/      # SPIFFS file iterator, LVGL music demo│   │   ├── calculator/        # LVGL keyboard, expression parser│   │   └── video_player/      # SD card, MJPEG decoder│   ├── human_face_detect/     # MSRMNP 2-stage face detection (esp-dl)│   └── pedestrian_detect/     # Pico single-stage pedestrian detection (esp-dl)├── spiffs/                    # MP3 assets (game sounds, music tracks)├── partitions.csv             # nvs / phy_init / factory / storage└── CMakeLists.txt\n```\n\n**Software setup**\n\n**Windows**\n\n- Install\n[VS Code](https://code.visualstudio.com/) - Install the\n**ESP-IDF extension** for VS Code (from Espressif). Once the correct extension is installed, you should see these icons and toolbar (1).\n\n- Install\n**ESP-IDF v5.5.4**, as required by the example (steps 2.1 to 2.4).\n\n- Clone the repository:\n\n```\ngit clone https://github.com/relocsrl/scintix-p4.git\n```\n\n- Open the `scintix-p4` folder.\n- Launch VS Code from the `scintix-p4\\examples\\esp_brookesia_phone` folder.\n\n- Select the correct ESP-IDF v5.5.4 (3.1) and build (3.2).\n\n- If everything is set up correctly, you should see the expected output in the terminal, with the target set to `esp32p4`.\n\n- Connect the USB Type-C cable to the SCINTIX P4 board and press\n**Flash**(5.1). If needed, use the UART interface.\n\n- Et voilà — the demo is up and running. The display now shows the Brookesia launcher with its smartphone-style interface, fully driven by the ESP32-P4 on the SCINTIX P4 module. From here, you can navigate the UI and explore the built-in apps.\n\n[Read more](javascript:void(0))", "url": "https://wpnews.pro/news/a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4", "canonical_source": "https://www.hackster.io/reloc/a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4-94612e", "published_at": "2026-06-11 09:54:05+00:00", "updated_at": "2026-06-17 16:55:53.034241+00:00", "lang": "en", "topics": ["computer-vision", "developer-tools"], "entities": ["Espressif", "SCINTIX P4", "ESP32-P4", "Brookesia", "MIPI-DSI", "MIPI-CSI", "LVGL", "ESP-IDF"], "alternates": {"html": "https://wpnews.pro/news/a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4", "markdown": "https://wpnews.pro/news/a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4.md", "text": "https://wpnews.pro/news/a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4.txt", "jsonld": "https://wpnews.pro/news/a-smartphone-style-ui-on-an-mcu-brookesia-on-scintix-p4.jsonld"}}