Welcome to the KYWY Graphics Editor
This is a specialized pixel art editor designed for creating graphics for the KYWY device (144ร168 monochrome display).
The editor exports Arduino/C++ code that can be directly used in your KYWY projects.
๐ฅ๏ธ Interface Overview:
- Left Panel (Tools): Your main drawing tools including pen, shapes, fill, selection, and text tools.
Select colors (black/white), adjust brush size, and choose drawing modes here.
- Center (Canvas): Your drawing area. Use mouse wheel to zoom, middle-click to pan.
The canvas displays your current frame and shows helpful overlays like grid lines and onion skin.
- Right Panel (Export & Frames): Export your artwork as Arduino code in various formats (Single Frame, Animation, or Layers).
Below the export section is the frame list where you can manage animation frames, duplicate frames, and navigate through your animation.
- Bottom Panel (Layers & Animation): Enable layers to work with multiple composited layers per frame.
Animation controls let you preview animations, adjust frame rates, and enable onion skinning. Grid controls help with pixel-perfect alignment.
๐ฌ Basic Workflow:
- Start Drawing: Select a tool (press P for pen) and draw on the canvas
- Create Animation: Click "+ Add Frame" to create multiple frames for animation
- Use Layers (Optional): Check "Enable Layers" at the bottom to work with multiple layers per frame
- Export Code: Click "Generate Code" on the right panel to create Arduino/C++ code
- Copy & Use: Copy the generated code and paste it into your KYWY Arduino project
๐ก Pro Tips:
- Use Ctrl+Wheel to quickly adjust brush size or polygon sides
- Press F7 to quickly toggle the layer panel on/off
- Hold Shift while drawing with pen for straight lines
- Use onion skin to see previous/next frames while animating
- The grid helps align pixels - toggle it with the Grid checkbox
- Import images and convert them to 1-bit graphics with various dithering options
- Layers support transparency modes (white or black transparent) for advanced compositing
๏ฟฝ๐ง Tools
PPen Tool (Freehand)
LLine Tool
GGrid Pen Mode
SSpray Tool
CCircle Tool
RRectangle/Square Tool
YPolygon Tool
FFill/Bucket Tool
ESelect Tool
H or MHand Tool (Pan/Move)
TText Tool
BBlack Color
WWhite Color
๐จ Tool Modifiers
1-9Brush Size / Polygon Sides / Fill Mode
Ctrl+WheelChange Brush Size / Polygon Sides / Text Size
Shift+DragDraw Straight Line (Pen)
Shift+DragPerfect Circle (from center)
Shift+DragPerfect Square (from center)
๐ File Operations
Ctrl+NNew Drawing
Ctrl+SSave Drawing
Ctrl+OOpen Drawing
DelClear Canvas
โ๏ธ Edit Operations
Ctrl+CCopy Selection
Ctrl+VPaste Selection
Ctrl+XCut Selection
๐ฌ Animation
โPrevious Frame
โNext Frame
SpacePlay/Pause Animation
๐จ Layers
F7Toggle Layer Panel
Ctrl+Shift+LAdd New Layer
Ctrl+Shift+NAdd New Layer
Ctrl+IToggle White/Black Transparency
[Select Previous Layer
]Select Next Layer
๐ View Controls
+Zoom In
-Zoom Out
0Fit to Screen
1Actual Size (1:1 - Physical KYWY size)
.Center Canvas
1-9Set Brush Size
Middle ClickPan/Drag Canvas
?Show/Hide Help
Note: Max zoom is 10,000% for detailed pixel work. The "1:1" button shows the canvas at actual physical KYWY screen size (1.5" diagonal).
๐ Gradient Fill Behaviors
The Fill Tool (F) supports advanced gradient patterns with intelligent preview system:
๐ Gradient Types:
- Linear Gradients: Straight-line transitions from one side to another
- Radial Gradients: Circular transitions from center outward
๐จ Gradient Styles:
- Stipple: Dotted pattern that creates visual gradients through spacing
- Dither: Checkered pattern for smooth gradient appearance
โ๏ธ Gradient Controls:
- Angle: Direction of linear gradients (0-360ยฐ)
- Position: Center point for gradients (X/Y coordinates)
- Radius: Size of radial gradients
- Steepness: How sharp the gradient transition is
- Contrast: Controls stipple/dither density
๐๏ธ Smart Preview System:
- Red Editing Mode: When adjusting gradient settings, preview shows in red to indicate editing state
- Full Canvas Preview: When mouse is away from canvas, shows complete gradient effect
- Targeted Preview: When mouse is on canvas, shows exactly what area will be filled
- Persistent Preview: Red preview stays visible while editing until you interact with the canvas
- Live Updates: Preview updates instantly as you adjust any gradient setting
๐ฑ๏ธ Usage Tips:
- Select gradient type (Linear/Radial) then choose style (Stipple/Dither)
- Adjust settings while watching the red preview update in real-time
- Move mouse over canvas to see exactly where the fill will be applied
- Move mouse away from canvas to see the full gradient effect
- Click when satisfied with the preview to apply the gradient fill
๐ก Tips
- Hold Shift while drawing to draw straight lines
- Circle tool: Normal = ellipse (corner to corner), Shift = circle (center to radius)
- Rectangle tool: Normal = rectangle (corner to corner), Shift = square (center outward)
- Use onion skinning to see previous/next frames
- Export as Animation HPP for Kywy displays
- Use selection tool to copy/move parts of your drawing
- 144ร168 is the native Kywy display resolution
๐ Layer System
- Enable Layers: Check "Enable Layers" to activate the layer system for advanced compositing
- Multiple Layers: Each frame can have multiple layers that are composited together
- Transparency Modes: Each layer (except Layer 0) can use white or black as transparent color
- Layer 0: The bottom layer is always opaque and shows fully - no transparency
- Upper Layers: Layers above the bottom use transparency to show through to layers below
- White Transparency: White pixels become transparent, black pixels are opaque
- Black Transparency: Black pixels become transparent, white pixels are opaque
- Toggle Transparency: Click the transparency button (โช/โซ) or press Ctrl+I on current layer
- Layer Visibility: Toggle eye icon to show/hide layers without deleting them
- Solo Mode: Click S to view only one layer at a time for editing
- Merge Down: Combine current layer with the layer below it
- Copy to Frames: Duplicate a layer to multiple frames at once
- Export Layers: Use "Layers HPP" format to export each layer as separate bitmaps
- Undo Support: All layer operations (add, delete, merge, transparency changes) are undoable
๐ป Script API Reference
The editor includes a powerful scripting system that allows you to programmatically create drawings, animations, and complex patterns. Scripts are executed through the Script Editor panel (check box on bottom bar). Note that it is possible to get into an infinite loop and lose your work!! Save before running scripts you have not tested before.
โ๏ธ Basic Drawing Functions:
- setPixel(x, y, color)
Draw a single pixel at coordinates
- drawLine(x1, y1, x2, y2, color)
Draw a line between two points
- drawRect(x, y, w, h, filled, color)
Draw a rectangle (filled or outline)
- drawCircle(x, y, radius, filled, color)
Draw a circle (filled or outline)
- drawEllipse(x, y, rx, ry, filled, color)
Draw an ellipse with horizontal/vertical radii
- drawPolygon(x, y, radius, sides, rotation, filled, color)
Draw a polygon (triangle, pentagon, etc.)
- drawText(text, x, y, color)
Draw text at position
- floodFill(x, y, color)
Fill a connected region with color
๐จ Canvas & Color Functions:
- getPixel(x, y)
Get color of pixel ('black', 'white', or 'transparent')
- setColor(color)
Set current drawing color ('black' or 'white')
- getColor()
Get current drawing color
- clear()
Clear entire canvas to white
- fillCanvas(color)
Fill entire canvas with specified color
- invert()
Invert all colors on canvas (black โ white)
- invertCanvas()
Invert canvas colors (same as invert())
- hFlipCanvas()
Flip canvas horizontally
- vFlipCanvas()
Flip canvas vertically
- lRotateCanvas()
Rotate canvas left (counter-clockwise, 90ยฐ)
- rRotateCanvas()
Rotate canvas right (clockwise, 90ยฐ)
- getWidth()
Get canvas width in pixels (144)
- getHeight()
Get canvas height in pixels (168)
๐ฌ Animation Functions:
- getCurrentFrame()
Get current frame index (0-based)
- setCurrentFrame(index)
Switch to specific frame
- getFrameCount()
Get total number of frames
- addFrame()
Create a new frame, returns frame index
- deleteFrame()
Delete current frame
- duplicateFrame()
Duplicate current frame, returns new index
๐ Layer Functions:
- getCurrentLayer()
Get current layer index (0-based)
- setCurrentLayer(index)
Switch to specific layer
- getLayerCount()
Get total number of layers in current frame
- addLayer()
Create a new layer, returns layer index
- deleteLayer(index)
Delete layer by index
- setLayerVisibility(index, visible)
Show/hide layer (true/false)
- getLayerVisibility(index)
Check if layer is visible
- setLayerOpacity(index, transparency)
Set layer transparency mode ('white', 'black', 'default')
- getLayerOpacity(index)
Get layer transparency mode
Transparency Modes: 'white' = white pixels transparent, 'black' = black pixels transparent, 'default' = no transparency
โ๏ธ Selection & Clipboard Functions:
- selectRect(x1, y1, x2, y2)
Create rectangular selection
- clearSelection()
Remove current selection
- hasSelection()
Check if selection exists
- getSelection()
Get selection bounds {x1, y1, x2, y2}
- copySelection()
Copy selection to clipboard
- cutSelection()
Cut selection to clipboard
- paste(x, y)
Paste clipboard at position
- rotateSelection(degrees)
Rotate selection (-180 to 180)
- mirrorSelectionH()
Mirror selection horizontally
- mirrorSelectionV()
Mirror selection vertically
๐จ Fill Pattern Functions:
- setFillPattern(pattern)
Set fill pattern for shapes
- getFillPattern()
Get current fill pattern
Available patterns: 'solid', 'stipple25', 'stipple50', 'stipple75', 'checkerboard', 'diagonal', 'crosshatch', 'dots'
๐ข Utility Functions:
- random(min, max)
Get random integer between min and max (inclusive)
- map(value, inMin, inMax, outMin, outMax)
Map value from one range to another
- constrain(value, min, max)
Limit value between min and max
๐ค Output & Interaction Functions:
- print(...args)
Output messages to script console
- alert(...args)
Show popup alert dialog
- prompt(message, defaultValue)
Show text input dialog. Returns user input string or null if cancelled
- confirm(message)
Show yes/no confirmation dialog. Returns true/false
- onClick(callback)
Register click handler function(x, y)
- noTimeout()
Disable 15-second script timeout (use with caution! Save your work first!)
- new()
Create new drawing (clears all)
โ ๏ธ Important Notes:
- Colors: Only 'black' and 'white' are supported (monochrome display)
- Coordinates: Origin (0,0) is top-left corner
- Bounds: Canvas is 144ร168 pixels (KYWY display size)
- Animation Pause: Animations automatically pause during script execution
- Undo Support: Entire script execution is one undo operation
- Layer System: Scripts can work with layers when enabled
- Click Handlers: Only one click handler can be active at a time
- Script Timeout: Scripts automatically timeout after 15 seconds to prevent browser freezing
- Dialog Timeout: Time spent in alert(), prompt(), and confirm() dialogs does not count toward the 15-second timeout
- Timeout Bypass: Call
kde.noTimeout() to disable timeout for long-running scripts (use with caution!)
- Error Handling: Script errors are shown in console and stop execution
Issues
- If you have an bugreports, issues, or features requests, please use the github: KYWY github page
Additional help
-
If you need help, please visit the KOINSLOT Discord server (with a parent or guardian if you are under 13):
KOINSLOT Discord
Credit
- Developed by KOINSLOT Inc. (https://koinslot.com)
- Original concept and design by Joe Lannan
- Special thanks to the KYWY community for feedback and testing