ESP8266 IoT Development Board Weather Station Using DHT11 Sensor & OLED Display

In this tutorial you will learn how to make a simple weather station using a ESP8266 IoT Development Board with DHT11 Sensor & OLED Display. We are going to make all this using a Visuino program.

You will also learn how to set the I2C pins for any board in Visuino, this is very useful when you have a board with different I2C pins as the supported ones.

Watch the video.

Step 1: What You Will Need

• ESP8266 IoT Development Board Link
• DHT11 Temperature & Humidity sensor (usually comes with the ESP8266 IoT Development Board)
• OLED Display (usually comes with the ESP8266 IoT Development Board)
• Visuino program: Download Visuino

Step 2: Brought by PCBWay

Thank you PCBWay for supporting this tutorial and helping users learn more about electronics.

NEW! Now you can get Aluminum PCB & FLEX PCB in their Special Offer!

What I like about the PCBWay is that you can get 10 boards for approximately $5 which is really cost effective for professional made boards, not to mention how much time you save!

Go check them out here. They also offer a lot of other stuff in case you might need it like assembly, 3D printing, CNC machining and a lot more.

Step 3: The Circuit

Step 4: Start Visuino, and Select the Generic ESP8266 Board Type

The Visuino: https://www.visuino.com also needs to be installed. Download Free version or register for a Free Trial.

Start Visuino as shown in the first picture Click on the “Tools” button on the Arduino component (Picture 1) in Visuino When the dialog appears, select “Generic ESP8266” as shown on Picture 2

Step 5: In Visuino Set I2C Pins

Step 6: In Visuino Add Components

• Add “OLED I2C” component
• Add “DHT11” component

Note: in case you have any other DHT sensor, Select “HumidityThermometer1” component and in the properties window elect the type of your DHT sensor either DHT11 or DHT22,etc

Step 7: In Visuino Set Components

Double click on the “DisplayOLED1” component and in the “Elements” window

• drag “Draw Text” to the left side & in the properties window set size to 2, “Text” to TEMP
• drag another “Draw Text” to the left side & in the properties window set size to 2, “Text” to HUM & “Y” to 40
• drag “Text Field” to the left side & in the properties window set size to 2, and “X” to 60
• drag another “Text Field” to the left side & in the properties window set size to 2, and “X” to 60 and “Y” to 40
• Close the “Elements” window

Step 8: In Visuino Connect Components

• Connect “HumidityThermometer1” pin [Temperature] to “DisplayOLED1” > “TextField1” pin [In]
• Connect “HumidityThermometer1” pin [Humidity] to “DisplayOLED1” > “TextField2” pin [In]
• Connect “HumidityThermometer1” pin [Sensor] to “Generic ESP8266 Board” GPIO pin [5]
• Connect “DisplayOLED1” pin I2C [Out] to “Generic ESP8266 Board” I2C pin [In]

Step 9: Generate, Compile, and Upload the Arduino Code

In Visuino, at the bottom click on the “Build” Tab, make sure the correct port is selected, then click on the “Compile/Build and Upload” button.

Step 10: Play