Pixel-Art

Watch Pixel-Art-App ↗ live.

Pixel-Art-App is a Progressive Web App to draw pictures on a Neopixel matrix. Size of the matrix is alterable in the source files. App can be served directly from ESP8266 with SPIFFS.

Features

• Use a Progressive Web App as controller. Add it without further installation to your homescreen.
• Use Web standard communication with WebSockets
• Use cheap hardware components

Hardware listing

• (NodeMCU) ESP8266
• Neopixel matrix (e.g. TODO)
• A bunch of wires

Pictures of hardware assembling

TODO

Impressions

TODO

Build Web-App with Polymer 3.0

Prerequisition: Polymer CLI

1. Install all dependencies - Go to folder pixel-art-app:

$ polymer install

2. Test app locally in your browser.

$ polymer serve --open

Note: By design this app runs locally on ESP8266 and depends on a WebSocket served by the WebServer of the ESP. For production adjust the WS endpoint.

3. Prepare for production

$ polymer build

4. Upload app to ESP8266

Finally upload app from ESP8266/data/www folder to your ESP8266. Go to Arduino IDE Tools > ESP8266 Sketch Data Upload

Note: Close Serial Monitor of Arduino IDE before uploading data. Otherwise upload will interrupt.

Compile & upload C++ code to ESP8266

Load sketch ESP8266.ino from ESP8266 folder in Arduino IDE.

Verify dependencies:

TODO

You can manage your additional includes by Arduino IDE Sketch > Include Library > Manage Libraries or you checkout dependencies yourself by git clone in your library folder of your Arduino sketchbook location.

Using git allows you to easily update all libraries at once:

ls | xargs -I{} git -C {} pull

With all dependencies provided the code should compile and is ready for upload.

5. Browse to http://esp8266.local/ to load the app.