1. Home
  2. Hardware
  3. ESP8266
  4. Pixel Editor

Pixel Editor

This project involves wiring up an 8x8 LED Matrix to a WeMos Mini D1, and then serving a simple web-application from it.

Point your browser at the IP address of the device and you can interactively use the pixel-editor application to update the display in real-time. There are a couple of default images wired in which you can setup too.

The final output will look something like this:

hardware

Hardware

The hardware for this project is simple:

  • 1 x WeMos Mini D1
    • Approximately cost €2.50.
  • 1 x 8x8 LED Matrix
    • Approximate cost €2.50.

Wiring the merely consists of connecting the display to the Mini D1 board, which is in turn powered by a simple USB-PSU:

  1. Vcc -> Vcc
  2. Group -> Ground
  3. SCL -> WeMos D1 D1
  4. SDA -> WeMos D1 D2

Web Application

The web-application is built using Javascript and HTML, and presents a user-interface like this:

UI

Left-click to set a pixel, right-click to clear one.

Operation

If you've previously configured WiFi details the device will connect automatically, and begin serving the application over HTTP.

If you've never configured the device it will instead notice that, and configure itself as an access-point. This means you can use your mobile phone, or other WiFi-connected device, to connect to this access-point and choose the local access-point it should become a member of.

Once configured the system will:

  • Serve a simple web page via HTTP
    • Including the Javascript which the application requires.
  • Respond to requests to update the LED matrix.

The Code

Several libraries are used, and these are bundled together in a git repository, you can access all the source by cloning the repo involved, and then looking at the project:

In short though the code is pretty simple, the only real magic is that it responds to requests of the form:

  • /?data=d1,d2,d3,d4,d5,d6,d7,d8

These numbers are binary numbers representing which of the eight LEDs on each row should be turned on - so 128 is the left-most value, 1 is the right-most pixel in the given row, etc.