Arduino GFX Simulator

JC3248W535

Click on screen to simulate touch

Cursor: 0, 0 | TextSize: 1 | Color: WHITE | Touch: — ● EDIT MODE

Properties —

Code editor

sketch.ino

⚙ config

❔ help

🔧 tools

📂 load

📎 .h

💾 save

Drawing Commands

`fillScreen(color)`	Fill entire screen with a solid color
`fillRect(x, y, w, h, color)`	Draw a filled rectangle. x,y = top-left corner, w,h = width/height
`drawRect(x, y, w, h, color)`	Draw rectangle outline (1px border)
`fillRoundRect(x, y, w, h, r, color)`	Filled rectangle with rounded corners. r = corner radius
`drawRoundRect(x, y, w, h, r, color)`	Rounded rectangle outline
`drawLine(x1, y1, x2, y2, color)`	Draw line from point (x1,y1) to (x2,y2)
`drawCircle(x, y, r, color)`	Circle outline. x,y = center, r = radius
`fillCircle(x, y, r, color)`	Filled circle
`drawTriangle(x0,y0,x1,y1,x2,y2,color)`	Triangle outline with 3 vertices
`fillTriangle(x0,y0,x1,y1,x2,y2,color)`	Filled triangle
`drawPixel(x, y, color)`	Draw a single pixel
`drawBitmap(x, y, bitmap, w, h, color)`	Draw a 1-bit monochrome bitmap. bitmap = byte array, w/h = size in pixels. Set bits drawn in color, unset bits transparent
`drawBitmap(x, y, bitmap, w, h, color, bg)`	Same but unset bits drawn in bg color
`draw16bitRGBBitmap(x, y, bitmap, w, h)`	Draw a 16-bit RGB565 color bitmap. Load .h file with 📎 button, use #include "file.h"
`drawFastHLine(x, y, w, color)`	Fast horizontal line. x,y = start, w = width
`drawFastVLine(x, y, h, color)`	Fast vertical line. x,y = start, h = height
`drawEllipse(x, y, rx, ry, color)`	Ellipse outline. x,y = center, rx = horizontal radius, ry = vertical radius
`fillEllipse(x, y, rx, ry, color)`	Filled ellipse
`drawArc(x, y, r, r2, start, end, color)`	Arc outline. r = outer radius, r2 = inner radius, start/end = angles in degrees (0–360)
`fillArc(x, y, r, r2, start, end, color)`	Filled arc sector. r2=0 for pie slice

gfx->fillRect(10, 50, 200, 30, RGB565_GREEN); gfx->drawCircle(240, 160, 80, RGB565_CYAN); gfx->drawLine(0, 0, 479, 319, RGB565_RED);

Text Commands

setTextSize(n) Set text scale factor (1 = 6×8px, 2 = 12×16px, 3 = 18×24px…). Range: 1-10

setTextSize(sx ,sy) Set text scale factor. sx = X scale, sy = Y scale. Char size = (6×sx) × (8×sy) px. Range: 1-10

setTextColor(fg) Set text foreground color

setTextColor(fg, bg) Set text foreground + background color (fills behind text)

setCursor(x, y) Set text cursor position (top-left of next character)

print("text") Print a string at cursor. Cursor advances after printing

println("text") Print string + move cursor to next line (x=0, y+=charH)

write(code) Print one CP437 character by code. write(0xF8) = °, write(0xB1) = ▒

📋 CP437 Character Table

Dec	Hex	Chr	Dec	Hex	Chr	Dec	Hex	Chr	Dec	Hex	Chr
0	00	NUL	64	40	@	128	80	Ç	192	C0	└
1	01	☺	65	41	A	129	81	ü	193	C1	┴
2	02	☻	66	42	B	130	82	é	194	C2	┬
3	03	♥	67	43	C	131	83	â	195	C3	├
4	04	♦	68	44	D	132	84	ä	196	C4	─
5	05	♣	69	45	E	133	85	à	197	C5	┼
6	06	♠	70	46	F	134	86	å	198	C6	╞
7	07	•	71	47	G	135	87	ç	199	C7	╟
8	08	◘	72	48	H	136	88	ê	200	C8	╚
9	09	○	73	49	I	137	89	ë	201	C9	╔
10	0A	◙	74	4A	J	138	8A	è	202	CA	╩
11	0B	♂	75	4B	K	139	8B	ï	203	CB	╦
12	0C	♀	76	4C	L	140	8C	î	204	CC	╠
13	0D	♪	77	4D	M	141	8D	ì	205	CD	═
14	0E	♫	78	4E	N	142	8E	Ä	206	CE	╬
15	0F	☼	79	4F	O	143	8F	Å	207	CF	╧
16	10	►	80	50	P	144	90	É	208	D0	╨
17	11	◄	81	51	Q	145	91	æ	209	D1	╤
18	12	↕	82	52	R	146	92	Æ	210	D2	╥
19	13	‼	83	53	S	147	93	ô	211	D3	╙
20	14	¶	84	54	T	148	94	ö	212	D4	╘
21	15	§	85	55	U	149	95	ò	213	D5	╒
22	16	▬	86	56	V	150	96	û	214	D6	╓
23	17	↨	87	57	W	151	97	ù	215	D7	╫
24	18	↑	88	58	X	152	98	ÿ	216	D8	╪
25	19	↓	89	59	Y	153	99	Ö	217	D9	┘
26	1A	→	90	5A	Z	154	9A	Ü	218	DA	┌
27	1B	←	91	5B	[	155	9B	¢	219	DB	█
28	1C	∟	92	5C	\	156	9C	£	220	DC	▄
29	1D	↔	93	5D	]	157	9D	¥	221	DD	▌
30	1E	▲	94	5E	^	158	9E	₧	222	DE	▐
31	1F	▼	95	5F	_	159	9F	ƒ	223	DF	▀
32	20	(sp)	96	60	`	160	A0	á	224	E0	α
33	21	!	97	61	a	161	A1	í	225	E1	ß
34	22	"	98	62	b	162	A2	ó	226	E2	Γ
35	23	#	99	63	c	163	A3	ú	227	E3	π
36	24	$	100	64	d	164	A4	ñ	228	E4	Σ
37	25	%	101	65	e	165	A5	Ñ	229	E5	σ
38	26	&	102	66	f	166	A6	ª	230	E6	µ
39	27	'	103	67	g	167	A7	º	231	E7	τ
40	28	(	104	68	h	168	A8	¿	232	E8	Φ
41	29	)	105	69	i	169	A9	⌐	233	E9	Θ
42	2A	*	106	6A	j	170	AA	¬	234	EA	Ω
43	2B	+	107	6B	k	171	AB	½	235	EB	δ
44	2C	,	108	6C	l	172	AC	¼	236	EC	∞
45	2D	-	109	6D	m	173	AD	¡	237	ED	φ
46	2E	.	110	6E	n	174	AE	«	238	EE	ε
47	2F	/	111	6F	o	175	AF	»	239	EF	∩
48	30	0	112	70	p	176	B0	░	240	F0	≡
49	31	1	113	71	q	177	B1	▒	241	F1	±
50	32	2	114	72	r	178	B2	▓	242	F2	≥
51	33	3	115	73	s	179	B3	│	243	F3	≤
52	34	4	116	74	t	180	B4	┤	244	F4	⌠
53	35	5	117	75	u	181	B5	╡	245	F5	⌡
54	36	6	118	76	v	182	B6	╢	246	F6	÷
55	37	7	119	77	w	183	B7	╖	247	F7	≈
56	38	8	120	78	x	184	B8	╕	248	F8	°
57	39	9	121	79	y	185	B9	╣	249	F9	·
58	3A	:	122	7A	z	186	BA	║	250	FA	·
59	3B	;	123	7B	{	187	BB	╗	251	FB	√
60	3C	<	124	7C	\|	188	BC	╝	252	FC	ⁿ
61	3D	=	125	7D	}	189	BD	╜	253	FD	²
62	3E	>	126	7E	~	190	BE	╛	254	FE	■
63	3F	?	127	7F	⌂	191	BF	┐	255	FF

begin() Initialize display (logs "Init screen")

setRotation(0-3) Screen rotation: 1=normal, 0=90°, 2=270°, 3=180°

width() Returns screen width (480)

height() Returns screen height (320)

flush() Flush display buffer (ignored in simulator)

gfx->setTextSize(2); gfx->setTextColor(RGB565_WHITE, RGB565_BLUE); // white on blue gfx->setCursor(100, 50); gfx->print("Hello!"); gfx->write(0xF8); // prints °

printf() — Formatted Print

Works like C printf. Format specifiers in the string are replaced by values.

`%d`	Integer (decimal) — `printf("tension: %d volts", 42)` → tension: 42 volts
`%f`	Float (6 decimals) — `printf("%f", 3.14)` → 3.140000
`%.1f`	Float (1 decimal) — `printf("%.1f", 21.5)` → 21.5
`%.2f`	Float (2 decimals) — `printf("%.2f", 3.1)` → 3.10
`%.0f`	Float (no decimals) — `printf("%.0f", 1250.7)` → 1251
`%x`	Hex lowercase — `printf("%x", 255)` → ff
`%X`	Hex UPPERCASE — `printf("%X", 255)` → FF
`%02X`	Hex padded 2 digits — `printf("%02X", 10)` → 0A
`%02d`	Integer padded 2 digits — `printf("%02d", 5)` → 05
`%s`	String — `printf("%s", "OK")` → OK
`%c`	Character from code — `printf("%c", 65)` → A
`%%`	Literal % sign — `printf("%d%%", 85)` → 85%

// Multiple values in one call: gfx->printf("T:%.1f°C P:%dW", state.temperature, state.production); // Result: "T:21.5°C P:1250W" // Hex display: gfx->printf("Color: 0x%04X", 0xFF00); // Result: "Color: 0xFF00" // Time formatting: gfx->printf("%02d:%02d:%02d", 14, 5, 9); // Result: "14:05:09"

Touch Screen

Click on the LCD canvas to simulate a finger touch. The code re-executes on each click.

`getTouchPoint(touchX, touchY)`	Returns true if screen was touched, false otherwise. Updates touchX and touchY with coordinates
`touchX`	X coordinate of last touch (0-479). Only valid after getTouchPoint() returns true
`touchY`	Y coordinate of last touch (0-319). Only valid after getTouchPoint() returns true
`wakeUp()`	Wake screen from sleep mode (turns backlight on, resets activity timer)
`enterSleep()`	Put screen to sleep (fills black, turns backlight off)
`screenSleeping`	Boolean — true if screen is currently sleeping
`lastActivityTime`	Timestamp (ms) of last touch or wake event. Use with millis() for auto-sleep

                            // Basic touch detection:
                            if (getTouchPoint(touchX, touchY)) {
                               gfx->fillCircle(touchX, touchY, 5, RGB565_RED);
                               gfx->setCursor(10, 300);
                               gfx->printf("Touch: %d, %d", touchX, touchY);
                            }

                            // Auto-sleep after 30 seconds of inactivity:
                            if (millis() - lastActivityTime > 30000) {
                              enterSleep();
                            }
                            if (getTouchPoint(touchX, touchY)) {
                               wakeUp();                  // handle touch...
                            }

                            // Button detection (check if touch is in a rectangle):
                            if (getTouchPoint(touchX, touchY)) {
                               if (touchX > 50 && touchX < 200 && touchY > 100 && touchY < 140) {
                                  // Button pressed!
                                  gfx->fillRect(50, 100, 150, 40, RGB565_GREEN);
                               }
                            }

Color Constants

You can also use numeric RGB565 values: 0xF800 = red, 0x07E0 = green, 0x001F = blue

Helper Functions

`map(val, inMin, inMax, outMin, outMax)`	Linear mapping — remap a value from one range to another
`constrain(val, min, max)`	Clamp value between min and max
`random(max)`	Random integer from 0 to max-1
`random(min, max)`	Random integer from min to max-1
`millis()`	Time in milliseconds since page loaded
`delay(ms)`	Async pause — use with Loop mode or animations
`abs(v)`	Absolute value
`min(a,b)` / `max(a,b)`	Minimum / maximum of two values
`sqrt(v)` / `pow(a,b)`	Square root / power
`sin(v)` / `cos(v)` / `tan(v)`	Trigonometry (radians)
`String(number)`	Convert number to string
`sprintf(fmt, ...args)`	Format string (same as printf but returns string)

//Serial input string Serial.println("Enter your name:"); while (Serial.available() == 0) { delay(100); } name = Serial.readStringUntil('\n'); name.trim(); Serial.println("Name: " + name); //Serial input number Serial.println("Enter your age:"); while (Serial.available() == 0) { delay(100); } age = Serial.parseInt(); Serial.printf("Age: %d\n", age); // Map production (0-6000W) to bar width (0-460px): int barW = map(constrain(state.production, 0, 6000), 0, 6000, 0, 460); gfx->fillRect(10, 100, barW, 12, RGB565_GREEN); // Draw circle with trigonometry: for (int a = 0; a < 360; a += 10) { float rad = a * DEG_TO_RAD; int px = 240 + cos(rad) * 100; int py = 160 + sin(rad) * 100; gfx->drawPixel(px, py, RGB565_YELLOW); }

Math Constants

`PI`	3.14159… (π)
`TWO_PI`	6.28318… (2π)
`HALF_PI`	1.57079… (π/2)
`DEG_TO_RAD`	0.01745… — multiply degrees to get radians
`RAD_TO_DEG`	57.2957… — multiply radians to get degrees

Edit values in the ⚙ config tab

C++ Syntax Supported

`int x = 10;`	Variable declaration (int, float, double, uint16_t, bool, String, byte…)
`for (int i=0; i<10; i++)`	For loop
`if / else if / else`	Conditionals
`switch (x) { case 1: case 2: f(); break; case 3: g(); break; default: h(); break; }`	Switch/case on int or char. Multiple `case` without `break` = fall-through
`while (cond) { }`	While loop
`do { } while (cond);`	Do…while loop
`void setup() / void loop()`	Arduino functions (code runs inline)
`#define NAME value`	Preprocessor constant → converted to `const`
`#define NAME(a,b) expr`	Macro with parameters → converted to `function`
`Serial.print() / println()`	Output to Serial Monitor
`Serial.available()`	Returns number of bytes waiting in input buffer
`Serial.read()`	Read one byte from input (-1 if empty)
`Serial.readString()`	Read all available input as String
`Serial.parseInt()`	Read and parse integer from input
GPIO / PWM
`pinMode(pin, mode)`	Set pin mode (INPUT, OUTPUT) — ignored in simulator
`digitalRead(pin)`	Read digital input (0/1) — interactive toggle in GPIO popup
`analogRead(pin)`	Read analog input (0–4095) — interactive slider in GPIO popup
`digitalWrite(pin, val)`	Set digital output HIGH/LOW — LED indicator in GPIO popup
`analogWrite(pin, val)`	PWM output (0–255) — LED brightness + % in GPIO popup
`ledcSetup(ch, freq, res)`	Configure LEDC channel (frequency, resolution in bits)
`ledcAttachPin(pin, ch)`	Attach pin to LEDC channel
`ledcWrite(ch, duty)`	Write duty cycle to LEDC channel — LED + % in GPIO popup

int centerX = 240; float angle = 0.0; String label = "Test"; #define MAX_BARS 7 for (int i = 0; i < MAX_BARS; i++) { if (i % 2 == 0) { gfx->fillRect(10, 50 + i*20, 100, 15, RGB565_GREEN); } else { gfx->fillRect(10, 50 + i*20, 100, 15, RGB565_YELLOW); } } Serial.println("Done: " + String(MAX_BARS) + " bars"); switch (x) { case 1: case 2: Serial.println("1 ou 2"); // si x==1 OU x==2 break; case 3: Serial.println("3"); // si x=3 break; default: // code si aucun case ne correspond Serial.println("le reste"); break; }

📎 Header files (.h)

`📎 .h`	Load a `.h` file containing bitmap data or constants. Auto-inserts `#include` in your code
`#include "file.h"`	Include a loaded header. Content is inlined at compile time
`const uint8_t name[]`	1-bit bitmap — 1 bit per pixel, packed in bytes (MSB first). Use with `drawBitmap()`
`const uint16_t name[]`	16-bit bitmap — one RGB565 value per pixel. Use with `draw16bitRGBBitmap()`

// === myicon.h === // 8x8 monochrome icon (1 bit/pixel) const uint8_t myIcon[] = { 0x3C, 0x42, 0xA5, 0x81, 0xA5, 0x99, 0x42, 0x3C }; // 16-bit RGB565 bitmap (draw16bitRGBBitmap) const uint16_t myImage[] = { 0xF800, 0x07E0, 0x001F, 0xFFFF, 0x0000, 0xF800, 0x07E0, 0x001F }; // === usage in sketch === #include "myicon.h" gfx->drawBitmap(10, 10, myIcon, 8, 8, RGB565_WHITE);

Keyboard Shortcuts

`Ctrl+Enter`	Run code
`Ctrl+Scroll`	Zoom LCD screen
`Tab`	Insert 2 spaces
`Pinch (mobile)`	Zoom LCD screen
`2-finger drag`	Pan/scroll zoomed screen

Edit Mode ✏️

After running code, click ✏️ Edit to visually manipulate objects:

Select	Click on an object → yellow dashed frame + handles
Move	Drag selected object to reposition
Resize	Drag corner/edge handles ■
Properties	Edit x, y, w, h, color in the panel below the screen
Groups	Objects from loops are grouped — moving one moves all
+ Add	Add a new graphical object and insert it in the code immediately
🗑 Delete	Remove selected object (comments out source line)

Debug lines

● GFX Simulator ready

GFX_SIM

GFX_SIM // Arduino_GFX Simulator