Introduction: 8x8 Painter

About: Hard- and Software developer. Knows his way around servers, clients and all that internetz stuff. Sleeps a lot.

A simple tool for creating graphics on an 8x8 LED module.

Guys - I'm bad. No - really, really bad when it comes to drawing icons. Especially drawing icons on an 8x8 grid, like those little WEMOS Matrix Displays for a WEMOS D1. On top of that, I suck at counting rows and transforming those into a binary representation.

So i cheated - and created this little thing called 8x8 painter.

Step 1: What's That?

The ESP8266 hosts a webpage that represents the 8x8 grid of the matrix display - click one of these dots and it turns red/on, click again and it turns off/black. Your display does the same thing, so you can check out your artwork in realtime on real hardware. I still suck at drawing anything on that, but now I know pretty early when I suck :)

On the right side of the grid (on your screen) you'll find the copy&paste-ready binary representation in form of a byte array (stored in progmem) - just grab it and paste it into your code. Feel free to adapt the array-name, and if progmem won't work for you: that's 8 bytes - so it will probably not overload your memory ;)

Step 2: What Do You Need?

This is designed with a WEMOS D1 in mind, so you need the D1 and a LOLIN Matrix LED shield:
D1:
https://www.aliexpress.com/item/32651747570.html

Matrix LED Shield:
https://www.aliexpress.com/item/33046133551.html

- these are no afliliate links - this is just where I get my stuff. Feel free to buy anywhere else.

Step 3: Software?

Download the project here:
http://esp.detlefamend.de/8x8Painter.zip

The project comes in two files - one's the sketch, the second one contains the webpage your ESP will send.

If you're not comfortable downloading some unknown ZIP: here's the main sketch:
https://pastebin.com/MzGQW51h

...and the webpage:
https://pastebin.com/jAs8Jtz9

If you don't use the ZIP: both files go into one folder. The Webpage-Part should be in a file called "index_html.h" - the sketch can be called anything, as long as the folder name is the same as the INO's one. Yeah, Arduino...

Step 4: Libraries?

Sure. To compile, you need to have these libraries installed:

Wifi Manager
https://github.com/tzapu/WiFiManager

..and the library for the LED matrix:
https://github.com/thomasfredericks/wemos_matrix_...
..wich will ask you to install the Adafruit GFX library.

Both (all three?) libraries can be obtained via the good old Library Manager.

Step 5: So - How Do We Get This Thing to Work?

After uploading the code, your LED Display does a little animation - telling you, that it wants to connect to your Wifi. So grab your fone, open your WLAN's - look for a new WLAN named

8x8painter CONFIG

- connect to the new WLAN - your fone should ask, if you want to connect to that WIFI (sorry, german fone here - not sure what the english message says) - tap that. If no such message appears: open a browser (on your fone that is connected to the ESP's WiFi) and head over to "http://1.2.3.4".

White screen, big blue buttons? That's the Wifi Manager.

Tap "Configure Wifi", select your wifi and type your password. Hit save - the animation should stop (the matrix goes black); the ESP is now connected to your wifi.

Open a browser of your choice and use this adress:

http://8x8painter

- that's it: you should now see the main interface - happy icon building!!

Step 6: Notes

Not only I suck at drawing icons - I although suck at commenting. I normally go for expressive variable names - so the sketch should not be so hard to follow.

Yeah, I love my functions - the easyest way to read the sketch is to collapse all and check the separate functions.

I left some Serial.print statements in the code for debugging - checking the serial console while running may be a good idea :)

The Webpage is stored in one long string - hell and damnation -- Strings! How could I? Well, I have the space for it, I don't change it at all (Globals From Hell) - so I don't really care. If you do: go ahead, make it better. That's the beauty of programming.

The Webpage does pretty much everything in JavaScript - sorry for that; it was the most compact solution I could come up with. The communication between ESP and the browser could be done way better with webSockets - but doing GET-Strings was the thing on my mind while writing - remember: never touch a running system :)

The Webpage was build using Firefox - lazy me, I didn't test out chrome/edge/opera/whateverYouUse. If something breaks.. try Firefox.

2020 by Detlef Amend. Free Software - have fun with it!!