diff --git a/frontend/src/data/examples-esp32s3-tft.ts b/frontend/src/data/examples-esp32s3-tft.ts new file mode 100644 index 00000000..90bbc25e --- /dev/null +++ b/frontend/src/data/examples-esp32s3-tft.ts @@ -0,0 +1,82 @@ +import type { ExampleProject } from './examples'; + +/** + * ESP32-S3 + ILI9341 TFT over hardware SPI (GPSPI2 / FSPI). Lightweight draw + * (fill + rounded rect + text) to exercise the S3 GPSPI2 controller -> + * picsimlab_spi -> the TFT decoder on the canvas. + */ +export const esp32s3TftExamples: ExampleProject[] = [ + { + id: 'esp32s3-ili9341-hello', + title: 'ILI9341 TFT Hello — ESP32-S3', + description: + 'Draws a filled screen, a rounded rectangle and text on a 320x240 ' + + 'ILI9341 TFT from an ESP32-S3 over hardware SPI (FSPI / GPSPI2).', + category: 'displays', + difficulty: 'intermediate', + libraries: ['Adafruit ILI9341', 'Adafruit GFX Library'], + tags: ['esp32-s3', 'ili9341', 'tft', 'spi', 'display'], + boards: [ + { + boardKind: 'esp32-s3', + x: 60, + y: 80, + code: `// ILI9341 320x240 TFT on ESP32-S3 hardware SPI (FSPI / GPSPI2) +#include +#include +#include + +#define TFT_SCK 12 +#define TFT_MISO 13 +#define TFT_MOSI 11 +#define TFT_CS 10 +#define TFT_DC 9 +#define TFT_RST 8 + +Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST); + +void setup() { + Serial.begin(115200); + SPI.begin(TFT_SCK, TFT_MISO, TFT_MOSI, TFT_CS); + tft.begin(); + tft.setRotation(1); + + tft.fillScreen(ILI9341_NAVY); + tft.fillRoundRect(20, 30, 280, 90, 10, ILI9341_RED); + + tft.setCursor(38, 55); + tft.setTextColor(ILI9341_WHITE); + tft.setTextSize(4); + tft.println("ESP32-S3"); + + tft.setCursor(38, 150); + tft.setTextColor(ILI9341_YELLOW); + tft.setTextSize(2); + tft.println("TFT via GPSPI2"); + + Serial.println("tft drawn"); +} + +void loop() { + delay(2000); +} +`, + }, + ], + code: '', + components: [ + { type: 'wokwi-ili9341', id: 'tft1', x: 470, y: 70, properties: {} }, + ], + wires: [ + { id: 'w-tft-sck', start: { componentId: 'esp32-s3', pinName: '12' }, end: { componentId: 'tft1', pinName: 'SCK' }, color: '#ff8800' }, + { id: 'w-tft-mosi', start: { componentId: 'esp32-s3', pinName: '11' }, end: { componentId: 'tft1', pinName: 'MOSI' }, color: '#ff8800' }, + { id: 'w-tft-miso', start: { componentId: 'esp32-s3', pinName: '13' }, end: { componentId: 'tft1', pinName: 'MISO' }, color: '#ffaa44' }, + { id: 'w-tft-cs', start: { componentId: 'esp32-s3', pinName: '10' }, end: { componentId: 'tft1', pinName: 'CS' }, color: '#00aaff' }, + { id: 'w-tft-dc', start: { componentId: 'esp32-s3', pinName: '9' }, end: { componentId: 'tft1', pinName: 'D/C' }, color: '#00cc00' }, + { id: 'w-tft-rst', start: { componentId: 'esp32-s3', pinName: '8' }, end: { componentId: 'tft1', pinName: 'RST' }, color: '#cc0000' }, + { id: 'w-tft-led', start: { componentId: 'esp32-s3', pinName: '3V3' }, end: { componentId: 'tft1', pinName: 'LED' }, color: '#ffffff' }, + { id: 'w-tft-vcc', start: { componentId: 'esp32-s3', pinName: '3V3' }, end: { componentId: 'tft1', pinName: 'VCC' }, color: '#ff0000' }, + { id: 'w-tft-gnd', start: { componentId: 'esp32-s3', pinName: 'GND' }, end: { componentId: 'tft1', pinName: 'GND' }, color: '#000000' }, + ], + }, +]; diff --git a/frontend/src/data/examples.ts b/frontend/src/data/examples.ts index cec4ce55..4a582a74 100644 --- a/frontend/src/data/examples.ts +++ b/frontend/src/data/examples.ts @@ -19,6 +19,7 @@ import { retroIntelExamples } from './examples-retro-intel'; import { robotDesktopExamples } from './examples-robot-desktop'; import { microsdExamples } from './examples-storage-microsd'; import { esp32MqttExamples } from './examples-esp32-mqtt'; +import { esp32s3TftExamples } from './examples-esp32s3-tft'; /** Per-board setup for multi-board examples */ export interface ExampleBoard { @@ -9999,6 +10000,7 @@ export const exampleProjects: ExampleProject[] = [ ...robotDesktopExamples, ...microsdExamples, ...esp32MqttExamples, + ...esp32s3TftExamples, ]; // Get examples by category