8x8 Painter

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.

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 ;)

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.

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...

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.

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!!

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!!