This module has an OLED display with two buttons, 5-way joystick and a 3-axis accelerometer. This is useful in setting up UI for a project.

Hey, what's up guys? Akarsh here from CETech .
Today we are going to take a look at an all-in-one module which is very much usefull in rigging up a quick UI hardware interface for any project that we make in the future. Watch the video on my channel to see the board in action! Let's start with the project now!

Step 1: Parts

To make this you will need an ESP8266 board and you can also add a battery if you want.

You can find the Firebeetle OLED module here .

I suggest to use a board from DFRobot with this module as the pinout will be compatible and you will face no issues anywhere, I used Firebeetle board from DFRobot as it has onboard battery charging and monitoring solution.

Step 2: Get PCBs for Your Project Manufactured

You must check out JLCPCB for ordering PCBs online for cheap!

You get 10 good quality PCBs manufactured and shipped to your doorstep for 2$ and some shipping. You will also get a discount on shipping on your first order. To design your own PCB head over to easyEDA , once that is done upload your Gerber files onto JLCPCB to get them manufactured with good quality and quick turnaround time.

Step 3: Download and Set Up the Arduino IDE

Download the Arduino IDE from here.

1. Install the Arduino IDE and open it.

2. Go to File > Preferences

3. Add http://arduino.esp8266.com/stable/package_esp8266... the Additional Boards Manager URLs.

4. Go to Tools > Board > Boards Manager

5. Search for ESP8266 and then install the board.

6. Restart the IDE.

Step 4: Prepare the Parts

1. Solder the headers on the OLED shield as well as the microcontroller module.

TIP: Use a breadboard to align the headers and then solder the module keeping the headers inserted into the breadboard.

2. Align the Corners with the white colours on the on both the modules and stack them using the headers. Now connect the board to the PC.

Step 5: Coding the Module

1. Download the following libraries:

1.1. https://github.com/akarsh98/DFRobot_OLED12864

1.2. https://github.com/akarsh98/DFRobot_BME280

2. Extract the downloaded libraries, rename them by removing the name "-master" from them.

3. Navigate to the libraries folder in your Arduino IDE and paste both the folders here.

4. Restart the Arduino IDE.

5. Navigate to File>Examples>DFRobot_OLED12864>testall and open this code.

6. Navigate to Tools > Board. Select the appropriate board that you are using, Firebeetle ESP8266 in my case.
7. Select the correct comm. port by going to Tools > Port.

8. Hit the upload button.

9. When the tab says Done Uploading you are ready to use the shield. After uploading open the serial monitor to view the following details.

Step 6: Playing With the Shield

1. Connect the module with a power supply using the micro USB connector on board or just switch on the switch if you have connected a battery.

2. As soon as the module is connected you will see the display coming to life.

3. When you will use the different buttons on the joystick you will see that the display in real time shows what direction have you moved the joystick in.

4. Pressing the button A & B show different types of data as in the pictures below.

5. CONGO! The module is working as expected.