ESP8266 with Arduino 4 – Using Libraries, the SSD1306 OLED Screen, and better Control Stick Handling
Is the screen theres a couple steps here? The first thing is: we need a library to talk to the screen, so were going to go to our sketch, include library and then were going to manage libraries. If we wait a second, it should uh. Why isnt it bringing it up? Oh there goes theyre just being slow dont. They do the same for the update the library index once it brings up, were going to search specifically for the chip name and the display name. So chip is a esp8266 and the display is an ssd 1306, so esp8266. This computer is really slow space um b1306. Any luck they should bring up the exact thing we want so were gon na go scroll down. Looking for aha, there we go esp8266 and esp32 oled driver for ssd or 1306 displays im going to click install. This will take one moment for us to do its thing c. So now lets go to the top of our code and were add and include to give us access to it. So our new pound include quote ssd 1306 dot each quote, and then you need to create an instance of the display that we can talk to so its going to be our keynote 1306 face display and right this way we need to pass it for location and What pins, what its addresses in the pins? The address is: o x, c 3 c, which is a hex address for the i squared c protocol.
Doesnt really matter get these magic numbers and we should have access to it. Im going to go. Look at my code. Further down because im not smart enough to remember all this stuff, so now, im gon na go to my setup and were going to start up the um communication for it so display in it thats going to turn on the display and then were gon na. Do a quick test run, make sure we get something on the screen. So were going to do, display dot, set font im going to use a font, i know works, there might be other ones. We can go look online, but right now lets keep using mt, underscore plane, underscore pen its going to be kind of small because we 10 pixels um tall. We are going to then pass it something this right to the screen, so were going to play, draw string and were going to pass it a coordinate where we want to run. The screen lets go five, comma five, so itd be five pixels in and five pixels down and were gon na draw some vertex im gon na take great hello, green at this point and then to actually display it. We need to display dot play. This actually draws to the screen so set up draw now its not anything loop and we still have our blink stuff in the loop. It doesnt really matter, lets, take and upload it and hope it.
Doesnt have a problem again im going to pause while compiles so responded and ive moved our screen down a little bit with the there. We go hello screen, it actually wrote to it. So now lets do something with the button, so we can actually test stuff. So instead of this were going to say if up is high, lets take and clear the display actually before that lets set the text alignment so before we do. This lets add one more thing i forgot through that display set text alignment text line enter if we are put im going to pause again well, i did have to make one small change. I misspelled i put an h of n here and youll, see it right off the screen, so we have to actually pass at the center of the screen for it to make sense. So i believe this is a 120 by 64.. So were going to pass it x of let me pass this 32 and well come back to that in a moment. Lets continue writing code because i dont feel like watching compile again. So, if up, instead of writing, the led high were going to take and do display clear thats going to wipe this way clean and then were going to display, draw string 32, comma, 5, comma up and lets steal this code from ourselves. Control c control. V now were gon na copy. This code, well see were gon na, do down, select down down, select elect, so this should show us what we press on the screen.
So let us take and re upload at which point ill pause, the video. So i wrote the code ive noticed one mistake where i had an extra swirly bracket here, which i deleted and now i know i have another problem, because thats called display to display also its a 128 by 64 screen. Lift it up. But if i press the up arrow down, nothing happened because i never draw it so lets, go and fix a couple. Things lets make this four 64. and lets add a display that display after each of these. In fact, we probably should do this before delay, because that will make sure that we always update the display, no matter what ill pause the video while compiling. So we have to still have some issues with our thing. So if i press down nothing happens, if i press up so pressing, select, pressing down changes, the down, hmm whats wrong up down, lets, remove the down portion of it and lets be less ambitious. Going to remove were also going to remove this code, so we dont need the green turned on, because right now were just turning. All the time lets make these all low. It might be using the active, low upload again ill pause it while it uploads all right. So were back to having hello screen on our screen and if i press the down button we hit select. If i press up it goes up. If i press down, it goes down, so that goes to the left.
Thats that ones not 64.. All right lets do one last thing we are going to make it so that when we push the up arrow, if the text is going to move up and if we push it down now its going down, so this is a simple exercise. If you want to take and try it yourself, youre there, but im going to write this step wise, so first thing is: were going to int um y equals um 32 thats halfway up the screen and then when we press when up is triggered were going to Before we do anything else to the screen were going to take and go y minus minus and the reason its minus minus is because 0 0 is this top quadrant right here? So up is going to subtract and down is going to add to the y coordinate im going to change this from 5 to y and down is going to be y plus plus thats gon na make it go down. Heres the y and then lets make this um y, its just gon na, say the word select so ill upload, one last time again, im going to pause it while this uploads. So i now have the program loaded im going to press the down arrow. It goes up if i press up, it goes up. If i select it, it will just go where it is. Maybe ill select reset the position, so the last step would be to go to my select method and y equals 1 equals 32, which is the touch of the screen ill, go ahead and pause it one last time so im back to hello screen.
If i press the down arrow, it goes down, it goes up, it goes up. If i push down will go off the screen, i press the select button and go back to the middle, so you can see how this could be used for a lot of different things. We could also only accept buttons being pressed, occasionally ill leave that up to you to get comfortable with how this works.