a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: update DynamicComponent to check if simulation is running before attaching events; enhance TFT display example with Adafruit libraries and improved UI elements

This commit is contained in:
David Montero Crespo 2026-03-05 02:09:30 -03:00
parent efd4c11e03
commit 13cf7be465
3 changed files with 35 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/DynamicComponent.tsx
View File

@ -186,7 +186,7 @@ export const DynamicComponent: React.FC<DynamicComponentProps> = ({
const logic = PartSimulationRegistry.get(metadata.id || id.split('-')[0]); const logic = PartSimulationRegistry.get(metadata.id || id.split('-')[0]);
let cleanupSimulationEvents: (() => void) | undefined; let cleanupSimulationEvents: (() => void) | undefined;
if (logic && logic.attachEvents && simulator) { if (logic && logic.attachEvents && simulator && running) {
// Helper to find Arduino pin connected to a component pin // Helper to find Arduino pin connected to a component pin
const getArduinoPin = (componentPinName: string): number | null => { const getArduinoPin = (componentPinName: string): number | null => {
const wires = useSimulatorStore.getState().wires.filter( const wires = useSimulatorStore.getState().wires.filter(

68
frontend/src/data/examples.ts
View File

@ -596,14 +596,15 @@ void loop() {
{ {
id: 'tft-display', id: 'tft-display',
title: 'TFT ILI9341 Display', title: 'TFT ILI9341 Display',
description: 'Color TFT display demo: fills, text, and a bouncing ball animation using the Arduino TFT library', description: 'Color TFT display demo: fills, text, and a bouncing ball animation using the Adafruit ILI9341 library (240x320)',
category: 'displays', category: 'displays',
difficulty: 'intermediate', difficulty: 'intermediate',
code: `// TFT ILI9341 Display Demo code: `// TFT ILI9341 Display Demo (240x320)
// Library: TFT by Arduino, Adafruit // Library: Adafruit ILI9341 + Adafruit GFX
// Connect: CS=10, DC/RS=9, RST=8, LED=7, MOSI=11(SPI), SCK=13(SPI) // Connect: CS=10, DC/RS=9, RST=8, LED=7, MOSI=11(SPI), SCK=13(SPI)
#include <TFT.h> #include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <SPI.h> #include <SPI.h>
#define TFT_CS 10 #define TFT_CS 10
@ -611,66 +612,65 @@ void loop() {
#define TFT_RST 8 #define TFT_RST 8
#define TFT_LED 7 #define TFT_LED 7
TFT TFTscreen = TFT(TFT_CS, TFT_DC, TFT_RST); Adafruit_ILI9341 tft(TFT_CS, TFT_DC, TFT_RST);
int ballX = 64, ballY = 90; // Background color: dark blue
#define BG_COLOR 0x0006
// Ball state
int ballX = 120, ballY = 200;
int ballDX = 3, ballDY = 2; int ballDX = 3, ballDY = 2;
const int BALL_R = 8; const int BALL_R = 10;
// Play-field boundaries
const int FX = 5, FY = 110, FW = 230, FH = 200;
void drawStaticUI() { void drawStaticUI() {
// Background tft.fillScreen(BG_COLOR);
TFTscreen.background(0, 0, 50);
// Title // Title
TFTscreen.setTextSize(2); tft.setTextSize(3);
TFTscreen.stroke(255, 220, 0); tft.setTextColor(tft.color565(255, 220, 0));
TFTscreen.text("WOKWI TFT", 5, 5); tft.setCursor(20, 10);
tft.print("WOKWI TFT");
// Subtitle // Subtitle
TFTscreen.setTextSize(1); tft.setTextSize(2);
TFTscreen.stroke(180, 180, 255); tft.setTextColor(tft.color565(180, 180, 255));
TFTscreen.text("ILI9341 Demo", 12, 28); tft.setCursor(30, 50);
tft.print("ILI9341 Demo");
// Color palette bars // Color palette bars
TFTscreen.noStroke(); tft.fillRect(10, 82, 70, 18, tft.color565(220, 50, 50));
TFTscreen.fill(220, 50, 50); tft.fillRect(85, 82, 70, 18, tft.color565(50, 200, 50));
TFTscreen.rect(5, 45, 36, 14); tft.fillRect(160, 82, 70, 18, tft.color565(50, 100, 240));
TFTscreen.fill(50, 200, 50);
TFTscreen.rect(45, 45, 36, 14);
TFTscreen.fill(50, 100, 240);
TFTscreen.rect(85, 45, 36, 14);
// Play-field border // Play-field border
TFTscreen.stroke(80, 80, 130); tft.drawRect(FX, FY, FW, FH, tft.color565(80, 80, 130));
TFTscreen.noFill();
TFTscreen.rect(2, 68, 124, 88);
} }
void setup() { void setup() {
pinMode(TFT_LED, OUTPUT); pinMode(TFT_LED, OUTPUT);
digitalWrite(TFT_LED, HIGH); // Backlight on digitalWrite(TFT_LED, HIGH);
TFTscreen.begin(); tft.begin();
drawStaticUI(); drawStaticUI();
} }
void loop() { void loop() {
// Erase old ball // Erase old ball
TFTscreen.noStroke(); tft.fillCircle(ballX, ballY, BALL_R, BG_COLOR);
TFTscreen.fill(0, 0, 50);
TFTscreen.circle(ballX, ballY, BALL_R);
// Update position // Update position
ballX += ballDX; ballX += ballDX;
ballY += ballDY; ballY += ballDY;
// Bounce off field borders // Bounce off field borders
if (ballX < 3 + BALL_R || ballX > 124 - BALL_R) ballDX = -ballDX; if (ballX < FX + BALL_R + 1 || ballX > FX + FW - BALL_R - 1) ballDX = -ballDX;
if (ballY < 69 + BALL_R || ballY > 155 - BALL_R) ballDY = -ballDY; if (ballY < FY + BALL_R + 1 || ballY > FY + FH - BALL_R - 1) ballDY = -ballDY;
// Draw ball // Draw ball
TFTscreen.fill(255, 140, 0); tft.fillCircle(ballX, ballY, BALL_R, tft.color565(255, 140, 0));
TFTscreen.circle(ballX, ballY, BALL_R);
delay(30); delay(30);
} }

7
frontend/src/services/ComponentRegistry.ts
View File

@ -145,13 +145,6 @@ export class ComponentRegistry {
await this.load(); await this.load();
} }
/**
* Check if registry is loaded
*/
isLoaded(): boolean {
return this.loaded;
}
/** /**
* Get component count * Get component count
*/ */