### ESP32-S2, ESP32-S3, ESP32-C3 Setup Files Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md Support has been added for ESP32-S2, ESP32-S3, and ESP32-C3 microcontrollers. DMA is currently supported only on the ESP32-S3. Example setup header files for different displays and board configurations are provided. ```Arduino #include "User_Setups/Setup70_ESP32_S2_ILI9341.h" // or #include "User_Setups/Setup70b_ESP32_S3_ILI9341.h" // or #include "User_Setups/Setup70c_ESP32_C3_ILI9341.h" // or #include "User_Setups/Setup70d_ILI9488_S3_Parallel.h" ``` -------------------------------- ### Configure TFT_eSPI Library User Setup Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This example demonstrates how to configure the TFT_eSPI library by editing the User_Setup.h file. Users can enable or disable specific fonts and features by commenting or uncommenting lines in this configuration file. ```C++ #include // Example of enabling/disabling fonts and features // #define LOAD_GFXFF // #define SMOOTH_FONTS // #define TOUCH_SCREEN ``` -------------------------------- ### Include Custom TFT_eSPI Setup Select File Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This C++ code snippet shows how to include a custom setup select file for the TFT_eSPI library. This allows users to manage their setup configurations in a separate file that won't be overwritten during library updates, simplifying the process of selecting new setups. ```C++ #include <../TFT_eSPI_Setups/my_setup_select.h> ``` -------------------------------- ### Include Custom TFT_eSPI Setup Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This C++ code snippet demonstrates how to include a custom setup file for the TFT_eSPI library from a separate directory. It uses a relative path to point to the custom setup file, ensuring that user configurations are not lost during library upgrades. ```C++ #include <../TFT_eSPI_Setups/my_custom_setup.h> ``` -------------------------------- ### TFT_eSPI Library Configuration Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This snippet illustrates how to configure the TFT_eSPI library for different hardware setups. Users must define screen controller, interface pins, and other settings within the library's setup files, such as User_Setup_Select.h, rather than in the Arduino sketch. PlatformIO users can manage these settings in their platformio.ini file. ```Arduino // Example of configuration within User_Setup_Select.h or similar // #define ILI9341_DRIVER // For ILI9341 controller // #define TFT_MOSI 19 // #define TFT_SCLK 18 // #define TFT_CS 5 // #define TFT_DC 17 // #define TFT_RST 16 // For PlatformIO users, these settings would be in platformio.ini ``` -------------------------------- ### PlatformIO Configuration for ESP32dev with TFT_eSPI Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/PlatformIO/Configuring options.txt This snippet shows the PlatformIO project configuration for an ESP32dev board using the Arduino framework and the TFT_eSPI library. It specifies build flags for optimization, debug level, user setup loading, and detailed TFT display parameters like driver, dimensions, SPI pins, and font loading options. ```INI [env:esp32dev] platform = https://github.com/platformio/platform-espressif32.git#feature/arduino-upstream board = esp32dev framework = arduino lib_deps = bodmer/TFT_eSPI@^2.4.31 build_flags = -Os -DCORE_DEBUG_LEVEL=ARDUHAL_LOG_LEVEL_DEBUG -DUSER_SETUP_LOADED=1 ; Define the TFT driver, pins etc. here: -DST7789_DRIVER=1 -DTFT_WIDTH=128 -DTFT_HEIGHT=160 -DTFT_MISO=19 -DTFT_MOSI=23 -DTFT_SCLK=18 -DTFT_CS=5 -DTFT_DC=19 -DTFT_RST=4 ;-DTFT_BL=21 ;-DTOUCH_CS=22 -DLOAD_GLCD=1 -DLOAD_FONT2=1 -DLOAD_FONT4=1 -DLOAD_FONT6=1 -DLOAD_FONT7=1 -DLOAD_FONT8=1 -DLOAD_GFXFF=1 -DSMOOTH_FONT=1 -DSPI_FREQUENCY=27000000 ``` -------------------------------- ### ESP-IDF: Add Arduino ESP32 as ESP-IDF Component Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/ESP-IDF/Using ESP-IDF.txt This command, executed within the VS Code ESP-IDF extension, automates the process of downloading and installing the latest version of the Arduino core for ESP32 as an ESP-IDF component. This is the simplest method but may introduce compilation errors due to the use of the latest code. ```Shell ESP-IDF: Add Arduino ESP32 as ESP-IDF Component ``` -------------------------------- ### Configure 8-bit Parallel Interface for STM32/ESP32 Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This example shows the configuration for 8-bit parallel TFT displays, commonly used with "Mcufriend" shields on STM Nucleo and ESP32 UNO style boards. It includes specific GPIO pin assignments and modifications required for certain board types. ```C++ // Example User_Setup file for ILI9341 Parallel display on UNO board // #define ILI9341_PARALLEL // #define TFT_CS -1 // Chip select control pin // #define TFT_DC -1 // Data Command control pin // #define TFT_RST -1 // Reset pin (could connect to RST pin) // GPIO definitions for ESP32 UNO style board with Mcufriend shield // #define TFT_RDATA_PIN 35 // Example: LCD_RD mapped to IO35 // #define TFT_WDATA_PIN 33 // Example: LCD_WR mapped to IO33 // #define TFT_D0_PIN 15 // Example: LCD_D0 mapped to IO15 // #define TFT_D1_PIN 13 // Example: LCD_D1 mapped to IO13 // ... and so on for D2-D7 ``` -------------------------------- ### Update Smooth Font Rendering Parameters Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This update introduces a new parameter to control background rendering for smooth fonts, allowing for line-by-line and block-by-block updates to minimize flicker. The default is false if the parameter is omitted. Examples show how to set text color with the new parameter. ```Arduino tft.setTextColor(TFT_WHITE, TFT_BLUE, true); spr.setTextColor(TFT_BLUE, TFT_BLACK, true); ``` -------------------------------- ### ESP-IDF: Build Project Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/ESP-IDF/Using ESP-IDF.txt This command initiates the build process for an ESP-IDF project. It compiles the source code, links libraries, and generates the firmware executable. This can be triggered via a command or a button within the VS Code extension. ```Shell ESP-IDF: Build your project ``` -------------------------------- ### Initialize TFT Display Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Initializes the TFT display and its core functionalities. This is typically the first step before performing any drawing operations. ```C++ TFT_eSPI tft; tft.begin(); ``` -------------------------------- ### E-Paper Display Initialization and Drawing Source: https://github.com/seeed-studio/seeed_gfx/blob/master/README.md This C++ code demonstrates the basic usage of the EPaper class for initializing an E-Paper display, filling the screen with a color, drawing text, and updating the display. It requires the EPaper class and associated libraries. ```cpp // Example usage EPaper epaper; epaper.begin(); epaper.fillScreen(TFT_WHITE); epaper.drawString("Hello E-Paper", 10, 10, 2); epaper.update(); // Explicit update required for E-Paper displays ``` -------------------------------- ### ESP-IDF: SDK Configuration Editor (menuconfig) Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/ESP-IDF/Using ESP-IDF.txt This command opens the project configuration menu for ESP-IDF projects. It allows users to navigate and modify various settings, including those specific to libraries like TFT_eSPI, such as the TFT driver, pins, and fonts. ```Shell ESP-IDF: SDK Configuration editor (menuconfig) ``` -------------------------------- ### PlatformIO Configuration for Seeed GFX on Pico Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/PlatformIO/rp2040.txt This snippet shows the PlatformIO project configuration file (platformio.ini) for the Raspberry Pi Pico. It specifies the platform, board, framework, and essential library dependencies like TFT_eSPI. It also includes crucial build flags for configuring the TFT display, such as the driver type, pin assignments, and microcontroller frequency. ```ini ;PlatformIO User notes: ;It is possible to load settings from the calling program rather than modifying ;the library for each project by modifying the "platformio.ini" file. ;The User_Setup_Select.h file will not load the user setting header files if ;USER_SETUP_LOADED is defined. ;Instead of using #define, use the -D prefix, for example: ; PlatformIO Project Configuration File ; ; Build options: build flags, source filter, extra scripting ; Upload options: custom port, speed and extra flags ; Library options: dependencies, extra library storages ; ; Please visit documentation for the other options and examples ; http://docs.platformio.org/page/projectconf.html [env:pico] platform = https://github.com/maxgerhardt/platform-raspberrypi.git board = pico framework = arduino board_build.core = earlephilhower board_build.filesystem_size = 0.5m lib_deps = bodmer/TFT_eSPI@^2.5.21 ; change microcontroller board_build.mcu = rp2040 ; change MCU frequency board_build.f_cpu = 133000000L build_flags = -Os -DUSER_SETUP_LOADED=1 ; Define the TFT driver, pins etc. here: -DTFT_PARALLEL_8_BIT=1 -DRM68120_DRIVER=1 -DRP2040_PIO_CLK_DIV=1 -DTFT_DC=28 -DTFT_WR=22 -DTFT_RST=2 -DTFT_D0=6 -DTFT_D1=7 -DTFT_D2=8 -DTFT_D3=9 -DTFT_D4=10 -DTFT_D5=11 -DTFT_D6=12 -DTFT_D7=13 -DTFT_BL=16 -DTFT_BACKLIGHT_ON=HIGH -DLOAD_GLCD=1 -DLOAD_FONT2=1 -DLOAD_FONT4=1 -DLOAD_FONT6=1 -DLOAD_FONT7=1 -DLOAD_FONT8=1 -DLOAD_GFXFF=1 -DSMOOTH_FONT=1 ``` -------------------------------- ### Generate driver.h Configuration Source: https://github.com/seeed-studio/seeed_gfx/blob/master/index.html This JavaScript code generates the configuration for a `driver.h` file based on user selections from dropdown menus. It handles language switching and dynamically populates the dropdowns with hardware and display options. ```javascript const translations = { en: { title: "Seeed GFX Library - Online Configuration Generator", main_title: "Seeed GFX Library - Online Configuration Generator", step1_title: "Step 1: Select Your Target Hardware", step2_title: "Step 2: Select Your Driver Board", step3_title: "Final step: Copy the Generated Code", final_step_instruction: "Create a driver.h file and paste the following code into it.", output_placeholder: "// Please select a hardware configuration from one of the dropdown menus above.", select_title_hardware: "🔧 Select Integrated Devices or DIY displays", select_title_mono_epaper: "🖥️ OR Select Display Component", select_placeholder_hardware: "-- Please select the Integrated Devices or DIY displays --", select_placeholder_mono_epaper: "-- Please select Display Component --", epaper_option_driver: "ePaper Driver Board for XIAO", epaper_option_breakout: "ePaper Breakout Board for XIAO", epaper_option_monitor: "XIAO ePaper Display Board EE04", }, zh: { title: "Seeed GFX Library - 在线配置生成器 (Online Configuration Generator)", main_title: "Seeed GFX Library - 在线配置生成器", step1_title: "步骤 1: 选择您的硬件或者DIY设备", step2_title: "步骤 2: 选择您的驱动板类型", step3_title: "最后一步: 复制生成的代码", final_step_instruction: "请创建一个名为 driver.h 的文件，并将以下代码粘贴到其中。", output_placeholder: "// 请从上方的某个下拉菜单中选择一个硬件配置。", select_title_hardware: "🔧 选择集成设备或DIY显示屏", select_title_mono_epaper: "🖥️ 或选择显示组件", select_placeholder_hardware: "-- 请从这里选择您的硬件配置 --", select_placeholder_mono_epaper: "-- 请选择您的通用电子墨水屏规格 --", epaper_option_driver: "ePaper Driver Board for XIAO", epaper_option_breakout: "ePaper Breakout Board for XIAO", epaper_option_monitor: "XIAO ePaper Display Board EE04", } }; const optionGroups = { hardware: { selectorId: 'hardwareSelector', placeholderKey: 'select_placeholder_hardware', options: [ { value: "500", text: "Wio Terminal （ILI9341）" }, { value: "501", text: "Round Display for Seeed Studio XIAO （GC9A01)" }, { value: "520", text: "reTerminal E1001 （UC8179）" }, { value: "521", text: "reTerminal E1002 （ED2208）" }, { value: "700", text: "TRMNL 7.5\" (OG) DIY Kit" } ] }, monoEPaper: { selectorId: 'monoEPaperSelector', placeholderKey: 'select_placeholder_mono_epaper', options: [ { value: "502", text: "7.5 inch monochrome ePaper Screen （UC8179）" }, { value: "509", text: "7.3 inch six-color ePaper Screen（ED2208）" }, { value: "503", text: "5.86 inch monochrome ePaper Screen （UC8179）" }, { value: "506", text: "4.26 inch monochrome ePaper Screen （SSD1677）" }, { value: "507", text: "4.2 inch monochrome ePaper Screen （SSD1683）" }, { value: "504", text: "2.9 inch monochrome ePaper Screen （SSD1680）" }, { value: "508", text: "2.13 inch monochrome ePaper Screen （SSD1680）" }, { value: "505", text: "1.54 inch monochrome ePaper Screen （SSD1681）" } ] } }; const allSelectorIds = Object.values(optionGroups).map(group => group.selectorId); function populateDropdowns(lang) { const langStrings = translations[lang]; for (const groupKey in optionGroups) { const group = optionGroups[groupKey]; const selector = document.getElementById(group.selectorId); const currentSelectedValue = selector.value; selector.innerHTML = ''; // Add placeholder option const placeholderOption = document.createElement('option'); placeholderOption.value = ""; placeholderOption.textContent = langStrings[group.placeholderKey]; selector.appendChild(placeholderOption); // Add other options group.options.forEach(opt => { const optionElement = document.createElement('option'); optionElement.value = opt.value; optionElement.textContent = opt.text; selector.appendChild(optionElement); }); selector.value = currentSelectedValue; } } function switchLanguage(lang) { document.documentElement.lang = lang; const langStrings = translations[lang]; document.querySelectorAll('[data-lang-key]').forEach(el => { const key = el.dataset.langKey; if (langStrings[key]) { el.innerHTML = langStrings[key]; } }); document.title = langStrings.title; // Update language switcher active state document.querySelectorAll('.lang-switcher a').forEach(link => { link.classList.remove('active'); }); document.getElementById(`lang-${lang}`).classList.add('active'); populateDropdowns(lang); generateConfig(); // Re-generate code in case placeholder text needs to be shown } function handleSelectionChange(activeSelector) { // If a selection is made, reset and disable other selectors if (activeSelector.value) { allSelectorIds.forEach(id => { const selector = document.getElementById(id); if (selector.id !== activeSelector.id) { selector.value = ""; selector.disabled = true; } }); } else { // If the placeholder ``` -------------------------------- ### JavaScript: Initialize Language and Populate Dropdowns Source: https://github.com/seeed-studio/seeed_gfx/blob/master/index.html This event listener ensures that the script runs after the DOM is fully loaded. It calls a function to set the default language and populate dropdown menus, preparing the UI for user interaction. ```javascript document.addEventListener('DOMContentLoaded', () => { switchLanguage('en'); // Set default language and populate dropdowns }); // Placeholder for switchLanguage function if it's defined elsewhere function switchLanguage(lang) { console.log(`Switching language to: ${lang}`); // Actual implementation to change language and update UI would go here } ``` -------------------------------- ### Integrate Adafruit_TouchScreen Library Fork Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md Instructions for integrating a fork of the Adafruit_TouchScreen library to utilize resistance-based touch screens on TFT display boards. This involves specific modifications and using the provided library fork. ```C++ // Fork of Adafruit library for touch screen support: // https://github.com/s60sc/Adafruit_TouchScreen // Ensure modifications for resistance-based touch screens are applied. ``` -------------------------------- ### JavaScript: Handle Display Selection and Driver Options Source: https://github.com/seeed-studio/seeed_gfx/blob/master/index.html This JavaScript code manages the selection of display boards and dynamically shows or hides e-paper driver options based on the selected value. It also sets a default driver if an e-paper display is chosen and then calls a function to generate the configuration. ```javascript function handleSelectorChange() { const allSelectorIds = ['selector1', 'selector2', 'selector3']; // Example IDs let activeSelector = null; allSelectorIds.forEach(id => { const selector = document.getElementById(id); if (selector && selector.value) { activeSelector = selector; } else if (selector) { selector.disabled = true; } }); if (activeSelector && activeSelector.value === 'someValue') { // Replace 'someValue' with actual condition allSelectorIds.forEach(id => { const selector = document.getElementById(id); if (selector) { selector.disabled = false; } }); } const selectedValue = parseInt(activeSelector.value, 10); const ePaperDiv = document.getElementById('ePaperOptions'); const isEpaperWithDriverChoice = (selectedValue >= 502 && selectedValue <= 509); if (isEpaperWithDriverChoice) { ePaperDiv.style.display = 'block'; } else { ePaperDiv.style.display = 'none'; const defaultDriver = document.querySelector('input[name="driverBoard"][value="driver"]'); if (defaultDriver) { defaultDriver.checked = true; } } generateConfig(); } ``` -------------------------------- ### JavaScript: Generate Configuration Output Source: https://github.com/seeed-studio/seeed_gfx/blob/master/index.html This function generates configuration strings based on selected display values and driver options. It handles a special case for a specific DIY kit and formats the output as `#define` statements. The generated code is then displayed in an output element. ```javascript function generateConfig() { let selectedValue = ''; let selectedText = ''; let activeSelector = null; const allSelectorIds = ['selector1', 'selector2', 'selector3']; // Example IDs const translations = { en: { output_placeholder: 'Select a board' } }; // Example translations allSelectorIds.forEach(id => { const selector = document.getElementById(id); if (selector && selector.value) { selectedValue = selector.value; selectedText = selector.options[selector.selectedIndex].text; activeSelector = selector; } }); const outputElement = document.getElementById('outputCode'); const currentLang = document.documentElement.lang || 'en'; const langStrings = translations[currentLang]; let outputString = ''; if (selectedValue && activeSelector) { if (selectedValue === '700') { // Special case: TRMNL 7.5" (OG) DIY Kit outputElement.textContent = '#define BOARD_SCREEN_COMBO 502 // 7.5 inch monochrome ePaper Screen （UC8179）\n#define USE_XIAO_EPAPER_DISPLAY_BOARD_EE04'; return; } outputString = `#define BOARD_SCREEN_COMBO ${selectedValue} // ${selectedText}`; const ePaperDiv = document.getElementById('ePaperOptions'); if (ePaperDiv && ePaperDiv.style.display === 'block') { const selectedDriver = document.querySelector('input[name="driverBoard"]:checked').value; if (selectedDriver === 'driver') { outputString += '\n#define USE_XIAO_EPAPER_DRIVER_BOARD'; } else if (selectedDriver === 'monitor') { outputString += '\n#define USE_XIAO_EPAPER_DISPLAY_BOARD_EE04'; } else if (selectedDriver === 'breakout') { outputString += '\n#define USE_XIAO_EPAPER_BREAKOUT_BOARD'; } } outputElement.textContent = outputString; } else { outputElement.textContent = langStrings.output_placeholder; } } ``` -------------------------------- ### Color Conversion Utilities Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Includes functions for converting colors between different bit depths (e.g., 565, 8-bit, 24-bit) and performing alpha blending for transparency effects. ```C++ uint16_t color16 = tft.color565(r, g, b); color = tft.alphaBlend(color1, color2, alpha); ``` -------------------------------- ### Adafruit_ILI9341 Library Header Source: https://github.com/seeed-studio/seeed_gfx/blob/master/license.txt This section provides the original header information for the Adafruit_ILI9341 library, detailing its purpose, hardware requirements (SPI, 4-5 pins), and licensing (MIT). It was written by Limor Fried/Ladyada for Adafruit Industries. ```C++ This is our library for the Adafruit ILI9341 Breakout and Shield ----> http://www.adafruit.com/products/1651 Check out the links above for our tutorials and wiring diagrams These displays use SPI to communicate, 4 or 5 pins are required to interface (RST is optional) Adafruit invests time and resources providing this open source code, please support Adafruit and open-source hardware by purchasing products from Adafruit! Written by Limor Fried/Ladyada for Adafruit Industries. MIT license, all text above must be included in any redistribution ``` -------------------------------- ### Touch Input Handling Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Functions for interacting with touch screens. This includes reading raw touch data, converting it to screen coordinates, and calibrating the touch input for accurate interaction. ```C++ touch_point = tft.getTouch(); tft.calibrateTouch(touch_point, rotation); ``` -------------------------------- ### Text Rendering Functions Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Enables rendering text on the TFT display with various customization options. This includes drawing strings, setting text color, size, font, and alignment. ```C++ tft.drawString("Hello", x, y, font); tft.setTextColor(color); tft.setTextSize(size); ``` -------------------------------- ### TFT_eSPI Library FreeBSD License Source: https://github.com/seeed-studio/seeed_gfx/blob/master/license.txt This section details the FreeBSD License applicable to original code within the TFT_eSPI library created by Bodmer. It specifies the conditions for redistribution and use, ensuring the copyright notice and disclaimer are preserved. ```C++ Software License Agreement (FreeBSD License) Copyright (c) 2023 Bodmer (https://github.com/Bodmer) All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. ``` -------------------------------- ### ESP-IDF: Select Port to Use Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/ESP-IDF/Using ESP-IDF.txt This command allows the user to specify the serial port to which the ESP-IDF project will be connected for debugging or uploading. It is essential for ensuring the firmware is sent to the correct device. ```Shell ESP-IDF: Select port to use ``` -------------------------------- ### Adafruit_GFX Library BSD License Source: https://github.com/seeed-studio/seeed_gfx/blob/master/license.txt This snippet contains the Software License Agreement (BSD License) for the Adafruit_GFX library. It outlines the terms for redistribution and use in source and binary forms, emphasizing the need to retain copyright notices and disclaim claim liability. ```C++ Software License Agreement (BSD License) Copyright (c) 2012 Adafruit Industries. All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ``` -------------------------------- ### ESP-IDF Project Reconfiguration Source: https://github.com/seeed-studio/seeed_gfx/blob/master/docs/ESP-IDF/Using ESP-IDF.txt This command is used to reconfigure an ESP-IDF project after making changes to the configuration files, such as selecting a specific LCD or board in the User_Setup_Select.h file. It ensures that the build system picks up the new settings. ```Shell idf.py reconfigure ``` -------------------------------- ### Sprite Class for Off-Screen Rendering Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt The TFT_eSPI_Button class provides functionality for creating and managing interactive buttons on the TFT display. It includes methods for initialization, drawing, and detecting button presses. ```C++ TFT_eSPI_Button myButton; myButton.initButton(tft, x, y, w, h, bgColor, textColor, font, label); ``` -------------------------------- ### TFT_eSPI Supported Display Controllers Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md Lists the display controllers compatible with the TFT_eSPI library. This includes popular controllers like ILI9341, ST7789, and SSD1351. Some controllers have specific notes regarding DMA support or interface limitations. ```Markdown * GC9A01 * ILI9163 * ILI9225 * ILI9341 * ILI9342 * ILI9481 (DMA not supported with SPI) * ILI9486 (DMA not supported with SPI) * ILI9488 (DMA not supported with SPI) * HX8357B (16-bit parallel tested with RP2040) * HX8357C (16-bit parallel tested with RP2040) * HX8357D * R61581 * RM68120 (support files added but untested) * RM68140 * S6D02A1 * SSD1351 * SSD1963 (this controller only has a parallel interface option) * ST7735 * ST7789 * ST7796 ``` -------------------------------- ### JavaScript: Copy Code to Clipboard Source: https://github.com/seeed-studio/seeed_gfx/blob/master/index.html This function copies the text content of the 'outputCode' element to the user's clipboard. It provides visual feedback by changing the opacity of 'copy' and 'check' icons to indicate success. Error handling is included for the clipboard API. ```javascript function copyToClipboard() { const code = document.getElementById('outputCode').textContent; const copyButton = document.getElementById('copyButton'); const copyIcon = copyButton.querySelector('.copy-icon'); const checkIcon = copyButton.querySelector('.check-icon'); navigator.clipboard.writeText(code).then(() => { copyIcon.style.opacity = '0'; checkIcon.style.opacity = '1'; setTimeout(() => { copyIcon.style.opacity = '1'; checkIcon.style.opacity = '0'; }, 1500); }).catch(err => { console.error('Copy failed:', err); }); } ``` -------------------------------- ### Draw Basic Graphics Primitives Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Provides functions for drawing fundamental graphical elements on the TFT display, including pixels, lines, and filled rectangles. These are building blocks for more complex graphics. ```C++ tft.drawPixel(x, y, color); tft.drawLine(x1, y1, x2, y2, color); tft.fillRect(x, y, w, h, color); ``` -------------------------------- ### PowerPoint to Sketch Generator Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md A tool is available that converts graphics and tables from PowerPoint slides into an Arduino sketch. This sketch can then render the designs on a 480x320 TFT display. The tool is based on VB macros. ```Arduino // Example usage of the PowerPoint_to_sketch generator // (Actual sketch generation is external to this library) ``` -------------------------------- ### Font Management Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Enables loading and unloading custom fonts for text rendering. It also provides utilities for font metrics like width and height. ```C++ tft.loadFont(font_name); int width = tft.textWidth("Text"); ``` -------------------------------- ### RP2040 PIO for SPI Displays Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md Enables the RP2040 PIO for SPI interface displays by defining RP2040_PIO_SPI. This allows for overclocking the RP2040 while maintaining high SPI clock rates. Note: Touch screens and pixel read operations are not supported with this interface. Requires Earle Philhower's board package. ```C++ #define RP2040_PIO_SPI ``` -------------------------------- ### CSS Styling for Seeed GFX Generator Source: https://github.com/seeed-studio/seeed_gfx/blob/master/index.html This CSS code defines the visual appearance and layout for the Seeed GFX Library Online Configuration Generator. It includes styling for color schemes, typography, layout containers, form elements, and interactive components like buttons and hover effects. ```CSS :root { --primary-color: #8FC31F; --primary-gradient: linear-gradient(135deg, #8FC31F 0%, #004966 100%); --secondary-color: #004966; --accent-color: #8FC31F; --text-primary: #111827; --text-secondary: #6b7280; --background: #f8fafc; --card-bg: #ffffff; --border-color: #e5e7eb; --shadow: 0 10px 25px -5px rgba(0, 73, 102, 0.15), 0 4px 6px -2px rgba(0, 73, 102, 0.08); --shadow-lg: 0 25px 50px -12px rgba(0, 73, 102, 0.25); --border-radius: 12px; --border-radius-lg: 16px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: var(--text-primary); max-width: 900px; margin: 0 auto; padding: 20px; background: var(--background); background-image: radial-gradient(circle at 25% 25%, rgba(143, 195, 31, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(0, 73, 102, 0.1) 0%, transparent 50%); min-height: 100vh; position: relative; } h1 { color: var(--text-primary); background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 2.5rem; font-weight: 700; text-align: center; margin: 2rem 0; letter-spacing: -0.025em; } h2 { color: var(--text-primary); font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; } h2::before { content: ''; width: 4px; height: 1.5rem; background: var(--primary-gradient); border-radius: 2px; } h3 { color: var(--text-secondary); font-size: 1.125rem; font-weight: 500; margin: 1.5rem 0 0.75rem 0; } .container { background: var(--card-bg); padding: 3rem; border-radius: var(--border-radius-lg); box-shadow: var(--shadow); border: 1px solid var(--border-color); backdrop-filter: blur(10px); transition: var(--transition); } .container:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .logo-container { text-align: center; margin-bottom: 2rem; padding-top: 1rem; } .company-logo { max-height: 80px; height: auto; max-width: 200px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 73, 102, 0.15)); transition: var(--transition); } .company-logo:hover { transform: scale(1.05); filter: drop-shadow(0 4px 12px rgba(0, 73, 102, 0.25)); } .selection-group { margin-bottom: 2rem; } select { width: 100%; padding: 1rem 1.25rem; font-size: 1rem; font-weight: 500; border-radius: var(--border-radius); border: 2px solid var(--border-color); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); color: var(--text-primary); transition: var(--transition); cursor: pointer; margin-bottom: 1.5rem; font-family: inherit; } select:hover { border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(143, 195, 31, 0.15); } select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(143, 195, 31, 0.1); } select:disabled { background: #f9fafb; color: var(--text-secondary); cursor: not-allowed; opacity: 0.6; } .code-container { position: relative; margin-top: 2rem; } pre { background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #e2e8f0; padding: 2rem; border-radius: var(--border-radius); white-space: pre-wrap; word-wrap: break-word; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 0.95rem; line-height: 1.6; min-height: 80px; position: relative; border: 1px solid #475569; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } .copy-btn { position: absolute; top: 1rem; right: 1rem; padding: 0.5rem; border: none; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 0.5rem; cursor: pointer; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); border: 1px solid rgba(255, 255, 255, 0.2); } .copy-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); } .copy-btn svg { width: 1rem; height: 1rem; position: absolute; transition: opacity 0.2s ease-in-out; } .copy-icon { fill: #e2e8f0; opacity: 1; } .check-icon { fill: var(--secondary-color); opacity: 0; } .epaper-options { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border: 2px solid var(--secondary-color); padding: 1.5rem; border-radius: var(--border-radius); margin-top: 1.5rem; position: relative; overflow: hidden; } .epaper-options::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent-color); } .epaper-options label { display: flex; align-items: center; margin-bottom: 1rem; cursor: pointer; font-weight: 500; color: var(--secondary-color); transition: var(--transition); } .epaper-options label:hover { color: #003344; } .epaper-options input[type="radio"] { margin-right: 0.75rem; width: 1.25rem; height: 1.25rem; accent-color: var(--accent-color); } .lang-switcher { position: fixed; top: 2rem; right: 2rem; background ``` -------------------------------- ### DMA-Accelerated Graphics Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Utilizes Direct Memory Access (DMA) for faster graphics rendering, particularly for pushing image data. This improves performance by offloading data transfer from the CPU. ```C++ tft.initDMA(); tft.pushImageDMA(x, y, w, h, data); ``` -------------------------------- ### Define Seeed GFX Fonts Source: https://github.com/seeed-studio/seeed_gfx/blob/master/Fonts/GFXFF/print.txt This snippet defines preprocessor macros for various fonts available in the Seeed GFX library. These macros map symbolic names (e.g., FF1, FF2) to specific font definitions, allowing for easy selection of font styles and sizes within the graphics library. ```c #define TT1 TomThumb #define FF1 FreeMono9pt7b #define FF2 FreeMono12pt7b #define FF3 FreeMono18pt7b #define FF4 FreeMono24pt7b #define FF5 FreeMonoBold9pt7b #define FF6 FreeMonoBold12pt7b #define FF7 FreeMonoBold18pt7b #define FF8 FreeMonoBold24pt7b #define FF9 FreeMonoBoldOblique9pt7b #define FF10 FreeMonoBoldOblique12pt7b #define FF11 FreeMonoBoldOblique18pt7b #define FF12 FreeMonoBoldOblique24pt7b #define FF13 FreeMonoOblique9pt7b #define FF14 FreeMonoOblique12pt7b #define FF15 FreeMonoOblique18pt7b #define FF16 FreeMonoOblique24pt7b #define FF17 FreeSans9pt7b #define FF18 FreeSans12pt7b #define FF19 FreeSans18pt7b #define FF20 FreeSans24pt7b #define FF21 FreeSansBold9pt7b #define FF22 FreeSansBold12pt7b #define FF23 FreeSansBold18pt7b #define FF24 FreeSansBold24pt7b #define FF25 FreeSansBoldOblique9pt7b #define FF26 FreeSansBoldOblique12pt7b #define FF27 FreeSansBoldOblique18pt7b #define FF28 FreeSansBoldOblique24pt7b #define FF29 FreeSansOblique9pt7b #define FF30 FreeSansOblique12pt7b #define FF31 FreeSansOblique18pt7b #define FF32 FreeSansOblique24pt7b #define FF33 FreeSerif9pt7b #define FF34 FreeSerif12pt7b #define FF35 FreeSerif18pt7b #define FF36 FreeSerif24pt7b #define FF37 FreeSerifBold9pt7b #define FF38 FreeSerifBold12pt7b #define FF39 FreeSerifBold18pt7b #define FF40 FreeSerifBold24pt7b #define FF41 FreeSerifBoldItalic9pt7b #define FF42 FreeSerifBoldItalic12pt7b #define FF43 FreeSerifBoldItalic18pt7b #define FF44 FreeSerifBoldItalic24pt7b #define FF45 FreeSerifItalic9pt7b #define FF46 FreeSerifItalic12pt7b #define FF47 FreeSerifItalic18pt7b #define FF48 FreeSerifItalic24pt7b ``` -------------------------------- ### Sprite Class for Off-Screen Rendering Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt The TFT_eSprite class allows for off-screen rendering of graphics, which can then be efficiently pushed to the main display. This is useful for animations and complex UI elements. ```C++ TFT_eSprite sprite(&tft); sprite.createSprite(width, height); sprite.pushSprite(x, y); ``` -------------------------------- ### Smooth Graphics Rendering Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Provides functions for drawing anti-aliased (smooth) graphics, such as circles and rounded rectangles. This enhances the visual quality of graphical elements. ```C++ tft.drawSmoothCircle(x, y, radius, color); tft.fillSmoothRoundRect(x, y, w, h, radius, color); ``` -------------------------------- ### SPI Communication Functions Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Low-level functions for communicating with the TFT display via SPI. This includes writing commands, data, and reading register values. ```C++ tft.spiwrite(byte); tft.writecommand(command); tft.readcommand8(command); ``` -------------------------------- ### Display Rotation and Viewport Control Source: https://github.com/seeed-studio/seeed_gfx/blob/master/keywords.txt Allows changing the display's orientation and managing viewport settings for clipping and drawing within specific screen regions. This is useful for adapting to different display orientations and managing complex layouts. ```C++ tft.setRotation(rotation); tft.setViewport(x, y, w, h); ``` -------------------------------- ### Generate Anti-aliased Fonts with Processing IDE Source: https://github.com/seeed-studio/seeed_gfx/blob/master/OREADME.md This section describes using a sketch provided in the library's Tools folder with the Processing IDE to generate anti-aliased font files (.vlw format). These files can include any 16-bit Unicode characters and can be stored in SPIFFS, LittleFS, or converted to C arrays for direct FLASH storage. ```Processing // Sketch to generate .vlw font files from TrueType fonts // Include any combination of 16-bit Unicode characters // Example: Processing IDE sketch for font generation ```