Introduction: 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.
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:
- 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!!