DisplayKit
by CiferTech
Tools
🧩
PixelForge (Image Converter)
🎞️
BitCanvas Studio (Animation)
🖼️
TFT GIF Converter (Points)
UI Examples
Add a ready-made screen layout (non-destructive).
TFT
OLED
Prev
Page 1 / 1
Next
Icon List
Clear
Icon size
All sizes
16x16
32x32
0 icons
Refresh
Export TFT (RGB565)
Export U8g2 (XBM)
Prev
Page 1 / 1
Next
Click an icon to add it as an element. Shift+Click also copies its path.
Assets
Import PNGs to reuse across screens (images/icons).
Clear
Embed in JSON
Import
Clean
Workflow tips
Use Snap-to-grid for pixel-perfect layouts.
Duplicate elements to iterate fast.
Export JSON often for versioning.
Basic Shapes
Triangle
Polygon
Arc
Gauge
Rect
Round
Circle
Line
Divider
UI Elements
Text
Label
Button
Progress
Slider
Toggle
Card
Header
Image
Layers
Order = draw order (top is front). Drag to reorder.
Select all
Clear
TFT_eSPI · 240x320 px
Multi-screen · Drag to position · Click to edit
Space+Drag to pan
Ctrl/Cmd+Wheel to zoom
Ctrl/Cmd+drag: no snap
Select
Hand
GitHub
Patreon
🌙
Undo
Redo
Duplicate
Zoom
%
Reset
Fit
Selection
Export JSON
Import JSON
Project
Selection
Code
Project
Project settings live here (screens, display, scene, grid).
Display
Width
Height
Driver
TFT_eSPI
U8g2 OLED
Apply
TFT Display Settings
Rotation
0° (Portrait)
90° (Landscape)
180° (Portrait)
270° (Landscape)
Color Depth
16-bit RGB565
18-bit RGB666
24-bit RGB888
Backlight Control
None
PWM Pin
Manual
Touch Support
No Touch
Resistive
Capacitive
OLED Display Settings
U8g2 Display Model
Rotation
0° (Normal)
90° (Clockwise)
180° (Upside Down)
270° (Counter-clockwise)
Contrast (0-255)
127
Flip Mode
Normal
Horizontal Flip
Vertical Flip
Both
Font Rendering
Transparent Background
Solid Background
Inverse Colors
Power Save Mode
Always On
Auto Sleep
Manual Control
Screens
Current screen
Function name
Scene
Background
Black
White
Dark gray
Light gray
Custom
Grid & Snap
Snap to grid
Grid size (px)
Use sprite (TFT_eSprite) for screens
Clear all (screen)
Selected Element
No element selected
Type
X
Y
W
H
Rotate °
Text
Text size (TFT)
Line height
Auto-size
Alignment
Left
Center
Right
Top
Middle
Bottom
Font
Value / Level (0–100)
Colors
Fill
Stroke
Text
Fill Transparency
100%
Filled
On click
None
Go to screen…
Target screen
Icon tint
Enable
Tint
Tip: in OLED mode, tint helps icons match the cyan display style.
Align to screen
Left
H-Center
Right
Top
V-Center
Bottom
Distribute
Horizontal
Vertical
Constraints (on resize)
Left
Right
Top
Bottom
Tip: set both Left+Right to stretch horizontally; Top+Bottom to stretch vertically.
Delete
Generated Code (TFT_eSPI / U8g2)
Copy
Duplicate
Delete
Group
Ungroup
Bring to front
Send to back
Lock/Unlock
Hide/Show
Tools
🧩 PixelForge
🎞️ BitCanvas
🖼️ TFT GIF
Action
Open in new tab
Back to DisplayKit