Repository files navigation

Interactively draw pattern on decoration objects which are lit up using LED strips (e.g., WS2812B).It could be used for example for season related objects like Easter eggs, Christmas trees, ...

• Mouse and Touch support (draw, zoom, move)
• Different pen sizes
• Predefined color palette
• Responsive design
• Runs completely on an ESP32 board

1. Compile and flash your ESP32 board usingPlatformIO
2. Connect the LED strip (use pin 12 as data line for the LED strip or adjust the DATA_PIN define in main.cpp)
3. Power up the EPS32 board
4. It will create a Wi-Fi "LightDraw_xxxxx" (where xxxxx is a board dependent identifier)
5. Connect to the Wi-Fi using password "light_draw"
6. Open the web browser and visithttp://192.168.100.1
7. Select your home Wi-Fi and enter the password
8. The board will connect to your home Wi-Fi and will get a new IP address.
9. Connect to the web interfacehttp://xxx.xxx.xxx.xxx (you can get the new IP most likely from your routers web interface)

The project is not yet optimized to easily customize the model, but if you are willing to adapt a JavaScript class you can proceed as follows:

The model is defined in a JavaScript classLEDModel which is located in the filehtml\interface.html.It provides three methods:

• getDimensions()
• getLEDs()
• drawModel(context)

The object is drawn to a HTML5 canvas element using JavaScript. Drawing is implemented in thedrawModel(context) method, which gets a drawing context (CanvasRenderingContext2D).You can find the basics on how to draw 2D elements in the following tutorial:Mozilla Developer Network Canvas Tutorial.

getDimensions() shall return the height and width of the bounding box for the drawing, e.g.return { height: 500, width: 300 };

The LEDs are defined on top of the drawing by specifying their ID (starting with 0) and the coordinates on the canvas.getLEDs() has to return an array of all LEDs with id, (x,y) coordinates and initial color as hex value (should be #000000), e.g.

return[{x:150,y:70,id:0,color:'#000000'},{x:173,y:75,id:25,color:'#000000'},{x:208,y:93,id:24,color:'#000000'},[...]];

The project usesPlatformIO an open-source ecosystem for IoT development.If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

MIT