ESP32-TUX - A Touch UX template to get you started.

• Currently Supported Devices - For Comparison click here
  • WT32-SC01 - SPI TFT 3.5" ST7796 - ESP32
  • WT32-SC01 Plus 8Bit Parallel 3.5" ST7796UI - ESP32-S3
  • Makerfabs 16Bit Parallel TFT 3.5" ILI9488 - ESP32-S3
  • Makerfabs SPI TFT 3.5" ILI9488 - ESP32-S3
• Graphics & Touch Driver : LovyanGFX
• UI / Widgets : LVGL 8.x
• Framework : ESP-IDF

idf.py

Install idf.py toolset by using the guide:

• Linux/Mac:
  • https://docs.espressif.com/projects/esp-idf/en/latest/esp32/get-started/linux-macos-setup.html
• Windows:
  • https://docs.espressif.com/projects/esp-idf/en/latest/esp32/get-started/windows-setup.html

On mac/linux activat the idf.py environment by using:

• . ~/esp/esp-idf/export.sh

The idf.py tool should now be available.

Screens

1. HOME (you can add more widgets here)
2. REMOTE (Sample App screen where you can have your own)
3. SETTINGS (with WI-FI provisioning, brightness, theme, portrait/landscape)
4. OTA (Over-the-air update and device info)

Remember this is a template so make it your own as per your needs.

Web Installer : https://tux.sukesh.me

You only need a USB Cable and Browser to install and test on your device.
(Work in progress)

Key Project Goals

• An easy UI Template to get started quickly
• UI Scaling for different resolutions
• Rotate to Landscape / Portrait without code changes
• Easy re-use of the template with just a header file Supported Devices here
• Switching Themes easily (Dark/Light)
• Access to SPIFF partition with F:/<filename>
• Support for updating UI from any Task
• Wi-Fi Provisioning using BLE/SoftAP
• OTA update using local (Python webserver) and Cloud (Azure) later
• Save settings in json file
• Support more devices with TFT + Capacitive Touch

Features included

• OTA Update with esp_events integration
• Wi-Fi Provisioning using SoftAP + Espressif Provisioning App
• UI Islands (Widget - tux_panel)
• Support for updating UI from different tasks [lvgl_acquire/lvgl_release]
• UI code separation into gui.hpp
• Same UI code which adapts to different resolutions
• Supports shared SPI bus for SD Card - here
• Instructions below on how to compile and use same project target different ESP32 / ESP32-S3 controllers.
• Switch between devices using just a header file inclusion
• Add your own controller/display with just a header change
• Shows battery meter animation using timer - here
• Shows SD card status change with icon
• Switch theme between Light & Dark - here
• Scrolling long message in footer - here
• Rotate screen Landscape/Portrait here
• Enable SPIFF partition and init here
• Map SPIFF to LVGL Filesystem as F: here
• Map SD Card to LVGL Filesystem as S: here
• Load Images directly using F:/.png here => tux_panel_weather()
• Settings Page

Todo List

• BLE Config
• Pages as modules
• Multiple Navigation styles
• Integration with SquareLine Studio

WIDGET : How to use TUX_PANEL Widget

Entire UI consists of Header, Footer and TUX_PANEL widgets.

// Create the Panel instance with title 
// 200px height and it can also be LV_SIZE_CONTENT or LV_PCT(100)
// Leave title empty if you don't need a title.
lv_obj_t *panel1 = tux_panel_create(parent, LV_SYMBOL_EDIT " CONFIG", 200);

// Set the common panel style
lv_obj_add_style(panel1, &style_ui_island, 0);

// Set title color to RED
tux_panel_set_title_color(panel1, lv_palette_main(LV_PALETTE_RED));

// Set title background color to BLUE
tux_panel_set_title_bg_color(panel1,lv_palette_main(LV_PALETTE_BLUE))

// Set height of tux_panel to 300
tux_panel_set_height(panel1,300);

// Set background color of content area to GREEN
tux_panel_set_content_bg_color(panel1,lv_palette_main(LV_PALETTE_GREEN))

// Get Content Area of the panel to add UI elements
lv_obj_t *cont1 = tux_panel_get_content(panel1);

// Add Label to the content area
lv_obj_t *lbl_version = lv_label_create(cont1);
lv_obj_set_size(lbl_version, LV_SIZE_CONTENT, 30);
lv_obj_align(lbl_version, LV_ALIGN_CENTER, 0, 0);
lv_label_set_text(lbl_version, "Firmware Version 1.1.0");

Currently Supported Devices

Devices	WT32-SC01	WT32-SC01+	ESP32S3SPI35	ESP32S335D
Manufacturer	Wireless-Tag	Wireless-Tag	Makerfabs	Makerfabs
MCU	ESP32	ESP32-S3	ESP32-S3	ESP32-S3
Display Size	3.5"	3.5"	3.5"	3.5"
Resolution	480x320	480x320	480x320	480x320
Display Controller	ST7796	ST7796UI	ILI9488	ILI9488
Display Interface	SPI	8Bit Parallel	SPI	16Bit Parallel
Touch Controller	FT5x06	FT5x06	FT5x06	FT5x06
Flash Size	4MB	8MB	16MB	16MB
PSRAM Size	4MB	2MB	2MB	2MB
Wi-Fi	Yes	Yes	Yes	Yes
Bluetooth	BT/BLE 4.x	BLE 5.x	BLE 5.x	BLE 5.x
SD CARD	No	Yes	Yes	Yes
OTG	No	Yes	Yes	Yes
Datasheet	PDF	PDF	PDF	PDF
Purchase Link	BUY	BUY	BUY	BUY

Flash & PSRAM specifications are as per what I received.

Get Started

Git clone and recursively update submodule

# Clone repo and update submodules (LovyanGFX + LVGL) recursively
git clone --recursive https://github.com/sukesh-ak/ESP32-TUX.git
cd ESP32-TUX

Then you need to select your board

For WT32-SCO-Plus, use idf.py set-target esp32s3

For WT32-SCO (non-plus) you can skip this step according to this.

To select your device uncomment here

Run idf.py menuconfig to configure the settings under ESP32-TUX Configuration including

• WiFi Provisioning using Mobile App - Android App and iPhone App
• MQTT Config (work-in-progress)
• SNTP Config
• OTA Config
• Weather Config

Select the board in the idf.py menuconfig

Please also make sure to set

• Flash size (under Serial flasher config)
• Custom partition table CSV (under Partition Table)

Remaining default configuration is setup using sdkconfig file in the project root for ESP32 & ESP32-S3.

Important customization configuration

• ESP32-TUX Configuration > SNTP Config > Timezone settings (Refer Wikipedia here)
• ESP32-TUX Configuration > OTA Config > OTA URL settings (use local python webserver.py)
• ESP32-TUX Configuration > Weather Config > Weather Location (Test the location here)
• ESP32-TUX Configuration > Weather Config > Weather Units
• ESP32-TUX Configuration > Weather Config > Weather API Key (Register for free API Key from OpenWeatherMap)

Separate build folder for ESP32 & ESP32-S3

Check settings in CMakeLists.txt here
This enables you to have separate build folder, in case you use multiple devices with different controller variants like ESP32 vs ESP32-S3.

# set target and build,flash,monitor - ESP32
idf.py -B build-esp32 set-target esp32 build
idf.py -B build-esp32 flash monitor

# set target and build,flash,monitor - ESP32-S3
idf.py -B build-esp32s3 set-target esp32s3 build
idf.py -B build-esp32s3 flash monitor

Otherwise ESP32/ESP32-S3 devices

# set IDF chip target (default is 'esp32')
idf.py set-target esp32s3

# set target and build
idf.py build

# Compile, Flash and Monitor
idf.py flash monitor

How custom lvgl config is setup - ESP-IDF

Check settings in CMakeLists.txt here

#LVGL custom config file setup
idf_build_set_property(COMPILE_OPTIONS "-DLV_CONF_INCLUDE_SIMPLE=1" APPEND)
idf_build_set_property(COMPILE_OPTIONS "-I../main" APPEND)

Display Helpful Compile Time Information

Check settings in CMakeLists.txt here

# Display Compile Time Information
message(STATUS "--------------Compile Info------------")
message(STATUS "IDF_PATH = ${IDF_PATH}")
message(STATUS "IDF_TARGET = ${IDF_TARGET}")
message(STATUS "PROJECT_NAME = ${PROJECT_NAME}")
message(STATUS "PROJECT_DIR = ${PROJECT_DIR}")
message(STATUS "BUILD_DIR = ${BUILD_DIR}")
message(STATUS "SDKCONFIG = ${SDKCONFIG}")
message(STATUS "SDKCONFIG_DEFAULTS = ${SDKCONFIG_DEFAULTS}")
message(STATUS "CONFIG_LV_CONF_SKIP = ${CONFIG_LV_CONF_SKIP}")
message(STATUS "COMPILE_OPTIONS = ${COMPILE_OPTIONS}")
message(STATUS "---------------------------------------")
message(STATUS "CMAKE_SOURCE_DIR = ${CMAKE_SOURCE_DIR}")
message(STATUS "CMAKE_BINARY_DIR = ${CMAKE_BINARY_DIR}")
message(STATUS "---------------------------------------")

3D Printable enclosure (STL)

FREE - WT32-SC01 - 3D enclosure on SketchFab website
FREE - WT32-SC01 - 3D enclosure on Cults3d by DUANEORTON
PAID - WT32-SC01 - 3D enclosure on Cults3d by PRINTMINION
PAID - WT32-SC01 - 3D enclosure on Cults3d by TOMCASA