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.
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
- Connect DHT11 sensor pin [VCC] to the Development Board pin [VCC] see attached picture
- Connect Oled Display pin [VCC] to the Development Board pin [VCC] see attached picture
Step 4: Start Visuino, and Select the Generic ESP8266 Board Type
The Visuino: https://www.visuino.eu 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
- Select the Generic ESP8266 Board and in the Properties window expand “I2C Channels” > “I2C” and set “SCL” to 14 and “SDA” to 2
Note: Your ESP8266 IoT Development Board might have a different SCL & SDA pins so check your board specification
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
If you power the ESP8266 IoT Development Board, the Display will start to show the current Temperature and Humidity.
Congratulations! You have completed your project with Visuino. Also attached is the Visuino project, that I created for this Tutorial, you can download it and open it in Visuino
Download ESP8266-DEV-MODULE-DHT.zip