{"id":51833,"date":"2018-02-07T10:39:57","date_gmt":"2018-02-07T10:39:57","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=51833"},"modified":"2019-04-30T14:37:35","modified_gmt":"2019-04-30T14:37:35","slug":"build-an-all-in-one-esp32-weather-station-shield","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/build-an-all-in-one-esp32-weather-station-shield\/","title":{"rendered":"Build an All-in-One ESP32 Weather Station Shield"},"content":{"rendered":"<p>In this project I\u2019ll show you how you can build an all-in-one ESP32 weather station shield and display the sensor readings on a web server. The web server displays data from all the sensors and automatically updates the readings every ten seconds, without the need to refresh the web page.<\/p>\n<p><!--more--><\/p>\n<h2>Watch the Video Tutorial and Project Demo<\/h2>\n<p><em>This guide is available in video format (watch below) and in written format (continue reading).<\/em><\/p>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/m5cS21AAhZo?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h3>JLCPCB<\/h3>\n<p>The previous video was sponsored by <a href=\"https:\/\/jlcpcb.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JLCPCB<\/a>. JLCPCB is a well known PCB prototype company in China. It is specialized in quick PCB prototype and small-batch production. You can order a minimum of 10 PCBs for just $2.<\/p>\n<p><a href=\"https:\/\/jlcpcb.com\/\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-51958 size-full\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/JLC-PCB-header-page.jpg?resize=1200%2C401&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1200\" height=\"401\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/JLC-PCB-header-page.jpg?w=1269&amp;quality=100&amp;strip=all&amp;ssl=1 1269w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/JLC-PCB-header-page.jpg?resize=300%2C100&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/JLC-PCB-header-page.jpg?resize=768%2C257&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/JLC-PCB-header-page.jpg?resize=1024%2C342&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<p>If you want to turn your breadboard circuits into real boards and make your projects look more professional, you just have to upload the Gerber files to order high quality PCBs for low prices. We\u2019ll show you how to do this later in this blog post.<\/p>\n<h2>Resources<\/h2>\n<p>You can find all the resources needed to build this project in the bullets below.<\/p>\n<ul>\n<li><a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/master\/Code\/ESP32_Weather_Station_Shield\/ESP32_Weather_Station_Shield.ino\" target=\"_blank\" rel=\"noopener noreferrer\">Web server code (for Arduino IDE)<\/a><\/li>\n<li><a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/master\/Code\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">HTML page<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/tree\/master\/Images\" target=\"_blank\" rel=\"noopener noreferrer\">Schematic diagram<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/raw\/master\/KiCad_PCB_ESP32_Shield\/GERBERS\/ESP32_Shield_Gerbers.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Gerber files<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/tree\/master\/KiCad_PCB_ESP32_Shield\" target=\"_blank\" rel=\"noopener noreferrer\">KiCad project to edit the PCB<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Click here to download all the files<\/strong><\/a><\/li>\n<\/ul>\n<h2>ESP32 Weather Station Shield Features<\/h2>\n<p>To build this project, I\u2019ve designed a PCB for the ESP32 DEVKIT V1 DOIT board. The PCB I\u2019ve built only works with the version with 30 GPIOs.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-52003\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-devkit-v1-doit.jpg?resize=750%2C545&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"545\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-devkit-v1-doit.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-devkit-v1-doit.jpg?resize=300%2C218&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>I\u2019ve designed the shield to be a compact weather station. The PCB has a lot of features so that it can suit a lot of different projects for different applications. In fact, I didn\u2019t use all the PCB features in this project.<\/p>\n<p>Additionally, this shield can also be used as a learning shield as it comes with some of the most used components when starting to learn how to program the ESP32.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-52002\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-features.jpg?resize=750%2C502&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"502\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-features.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-features.jpg?resize=300%2C201&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>The shield allows you to control:<\/p>\n<ul>\n<li>2x SMD LEDs<\/li>\n<li>1x Pushbutton<\/li>\n<li>1x Trimpot<\/li>\n<li>1x DHT22 temperature and humidity sensor<\/li>\n<li>1x BMP180 barometric sensor<\/li>\n<li>1x Light dependent resistor<\/li>\n<li>1x MicroSD card module<\/li>\n<li>2x Terminal blocks &#8211;&nbsp;that give you access to 3 GPIOs to connect other components<\/li>\n<\/ul>\n<p>The microSD card module is a very interesting addition to the shield: it can be used to store readings if you want to build a data logger, or it can store an HTML file to serve a web page &#8211; as we\u2019ll do in this project. I think this is a better and easier way to build a web server that requires more complex web pages.<\/p>\n<h2>ESP32 Shield Pin Assignment<\/h2>\n<p>The following table describes the pin assignment for each component on the shield:<\/p>\n<table style=\"height: 643px;\" width=\"657\">\n<tbody>\n<tr>\n<td><strong>Component<\/strong><\/td>\n<td><strong>ESP32 Pin Assignment<\/strong><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Pushbutton<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO 33<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Trimpot<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO 32<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Photoresistor (LDR)<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO 4<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">DHT22 data pin<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO 15<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">LED1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO 27<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">LED2<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO 26<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">BMP180<\/span><\/td>\n<td><span style=\"font-weight: 400;\">SDA(GPIO 21); SCL(GPIO 22)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">SD card module<\/span><\/td>\n<td><span style=\"font-weight: 400;\">MOSI(GPIO 23); MISO(GPIO 19): CLK(GPIO 18); CS(GPIO 5)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">Free GPIOs (terminal blocks) <\/span><\/td>\n<td><span style=\"font-weight: 400;\">GPIO14, GPIO13, GPIO12<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Note:<\/strong>&nbsp;there\u2019s a small problem with our pin assignment. Currently the Arduino WiFi library uses GPIO 4 that is connected to the LDR. So, you&#8217;ll probably have trouble taking readings from the LDR when you use the WiFi library. To make it work, you can solder a wire from the LDR to another available GPIO (must support ADC).<\/p>\n<h2>Testing the Circuit on a Breadboard<\/h2>\n<p>Before designing the shield, I\u2019ve assembled the circuit on a breadboard. If you don\u2019t want to make a PCB, you can still follow this project by assembling the circuit on a breadboard.<\/p>\n<h3>Parts Required<\/h3>\n<p>To assemble the circuit on a breadboard you need the following parts:<\/p>\n<ul>\n<li><a href=\"http:\/\/ebay.to\/2EnuzM9\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">ESP32 DOIT DEVKIT V1 Board&nbsp;&#8211; 30 GPIOs<\/a>&nbsp;&nbsp;(read&nbsp;<a href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 development boards comparison<\/a>)<\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 5mm LED<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 330 Ohm resistor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/pushbuttons-kit\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Pushbutton<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x 10k Ohm resistor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/potentiometer-assortment-kit\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x 10k Ohm potentiometer<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/dht22-temperature-humidity-sensor\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x DHT22 temperature and humidity sensor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/bmp180-barometric-sensor\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x BMP180<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x MicroSD card module<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">Breadboard<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<h3>Schematic<\/h3>\n<p>After gathering all the needed parts, you can assemble the circuit by following the next schematic diagram:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-shield-breadboard-schematic_bb.jpg?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-52024 size-full\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-shield-breadboard-schematic_bb.jpg?resize=1000%2C800&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1000\" height=\"800\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-shield-breadboard-schematic_bb.jpg?w=1000&amp;quality=100&amp;strip=all&amp;ssl=1 1000w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-shield-breadboard-schematic_bb.jpg?resize=300%2C240&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-shield-breadboard-schematic_bb.jpg?resize=768%2C614&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p><span style=\"color: #ff0000;\"><strong>Important:<\/strong><\/span>&nbsp;if you&#8217;re using a different board, you need to double-check the pinout.<\/p>\n<p>Here&#8217;s the circuit diagram:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/KiCad-circuit.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52078\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/KiCad-circuit.png?resize=1048%2C794&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1048\" height=\"794\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/KiCad-circuit.png?w=1048&amp;quality=100&amp;strip=all&amp;ssl=1 1048w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/KiCad-circuit.png?resize=300%2C227&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/KiCad-circuit.png?resize=768%2C582&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/KiCad-circuit.png?resize=1024%2C776&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1048px) 100vw, 1048px\" \/><\/a><\/p>\n<h2>Designing the PCB<\/h2>\n<p>After making sure the circuit was working properly, I\u2019ve designed the PCB version on <a href=\"http:\/\/kicad-pcb.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">KiCad<\/a>. KiCad is an open-source software used to design PCBs.<\/p>\n<p>I won\u2019t explore how I\u2019ve designed the PCB, but I provide all the files if you want to modify the PCB for yourself. <a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to download<\/a>&nbsp;the KiCad project files.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52004\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/kicad-view.png?resize=750%2C407&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"407\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/kicad-view.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/kicad-view.png?resize=300%2C163&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h3>Ordering the PCBs<\/h3>\n<p>You don\u2019t need to know how to design the PCB to order one. You just have to:<\/p>\n<p>1. To download the Gerber files,&nbsp;<a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/raw\/master\/KiCad_PCB_ESP32_Shield\/GERBERS\/ESP32_Shield_Gerbers.zip\" target=\"_blank\" rel=\"noopener noreferrer\">click here to download the .zip file<\/a>.<\/p>\n<p>2. Go to <a href=\"https:\/\/jlcpcb.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JLCPCB.com<\/a>, click the &#8220;<strong>QUOTE NOW<\/strong>&#8221; button, and upload the .zip file you&#8217;ve just downloaded.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51963\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/jlcpcb-quote-now.png?resize=700%2C228&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"228\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/jlcpcb-quote-now.png?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/jlcpcb-quote-now.png?resize=300%2C98&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>3. You\u2019ll see a success message at the bottom. Then, you can use the &#8220;Gerber Viewer&#8221; link at the bottom right corner to check if everything went as expected. You can view the top and bottom of the PCB. You can view or hide the solder-mask, silkscreen, copper, etc.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51964\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/upload-success-jlcpcb.png?resize=700%2C406&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"406\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/upload-success-jlcpcb.png?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/upload-success-jlcpcb.png?resize=300%2C174&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">With the default settings, you can order 10 PCBs for just $2. However, if you want to select other settings like a different PCB Color it will cost you a few more dollars. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">When, you\u2019re happy with your order. Click the \u201c<strong>SAVE TO CART<\/strong>\u201d button to complete the order.<\/span><\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-51965\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/save-to-car-jlcpcb.png?resize=361%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"361\" height=\"422\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/save-to-car-jlcpcb.png?w=361&amp;quality=100&amp;strip=all&amp;ssl=1 361w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/save-to-car-jlcpcb.png?resize=257%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 257w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">My PCBs took 1 day to be manufactured and they arrived in 5 business days using DHL delivery option.<\/span><\/p>\n<h2>Unboxing<\/h2>\n<p>After a week, I received my PCBs at my office. Everything came well packed, and I also received a pen from JLCPCB.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52005\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/jlcpcb-pen.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"421\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/jlcpcb-pen.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/jlcpcb-pen.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Taking a closer look at the PCBs, I must say that I\u2019m really impressed with the quality. I don\u2019t think you can get a better PCB service for this price.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52006\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-quality.jpg?resize=750%2C474&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"474\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-quality.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-quality.jpg?resize=300%2C190&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2>Soldering the Components<\/h2>\n<p>The next step was soldering the components to the PCB. I used SMD LEDs and SMD resistors. I know it\u2019s a bit difficult to solder SMD components, but they can save a lot of space on the PCB. I\u2019ve solder header pins to attach the ESP32, and the sensors. This way, I can easily replace the sensors, if needed.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52007\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-parts.jpg?resize=750%2C470&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"470\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-parts.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-parts.jpg?resize=300%2C188&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Here\u2019s a list of all the components you need to solder on the PCB:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/smd-leds\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x SMD LEDs<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/smd-resistors\" target=\"_blank\" rel=\"noopener noreferrer\">2x 330 Ohm SMD resistors<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/smd-resistors\" target=\"_blank\" rel=\"noopener noreferrer\">1x 10k Ohm SMD resistor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/smd-resistors\" target=\"_blank\" rel=\"noopener noreferrer\">1x 4.7k Ohm SMD resistor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/trimpot-kit\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x Trimpot (10k)<\/a><\/li>\n<li><a href=\"http:\/\/shrsl.com\/roqm\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">1x Pushbutton<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/sd-card-module\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x SD card module<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/bmp180-barometric-sensor\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x BMP180 barometric sensor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/dht22-temperature-humidity-sensor\/\" target=\"_blank\" rel=\"noopener noreferrer\">1x DHT22 temperature and humidity sensor<\/a><\/li>\n<li><a href=\"http:\/\/shrsl.com\/roqk\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">2x Screw terminal blocks<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/female-pin-header-socket\" target=\"_blank\" rel=\"noopener noreferrer\">Female pin header socket<\/a><\/li>\n<li>ESP32 DOIT DEVKIT V1 Board (version with 30 GPIOs) &#8211; you can get <a href=\"http:\/\/shrsl.com\/rrbb\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">this board from Banggood<\/a>, or <a href=\"http:\/\/ebay.to\/2EnuzM9\" target=\"_blank\" rel=\"noopener nofollow noreferrer\">from eBay<\/a><\/li>\n<\/ul>\n<p>The following figure shows how the PCB looks like after soldering all the components.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52008\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-soldered.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"421\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-soldered.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/pcb-soldered.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2>Preparing the ESP32 board in Arduino IDE<\/h2>\n<p>In order to upload code to your ESP32 using Arduino IDE, you should install an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow the next tutorial to prepare your Arduino IDE:<\/p>\n<ul>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-the-esp32-board-in-arduino-ide-windows-instructions\/\"><strong>Windows instructions<\/strong>&nbsp;\u2013 Installing the ESP32 Board in Arduino IDE<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-the-esp32-board-in-arduino-ide-mac-and-linux-instructions\/\"><strong>Mac and Linux instructions<\/strong>&nbsp;\u2013&nbsp;Installing the ESP32 Board in Arduino IDE<\/a><\/li>\n<\/ul>\n<p><strong>You also need to install the following libraries:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/adafruit\/DHT-sensor-library\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">DHT sensor&nbsp;library<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/adafruit\/Adafruit-BMP085-Library\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Adafruit BMP085 library<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/adafruit\/Adafruit_Sensor\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Adafruit Unified Sensor Driver<\/a><\/li>\n<\/ul>\n<h2>Code<\/h2>\n<p>The next step is writing the code to read the sensors and build the web server. The code for this project is divided into two parts:<\/p>\n<ul>\n<li>The code in Arduino IDE to read the sensors and host a web server<\/li>\n<li>An HTML file to build the web page. This HTML file should be saved in the microSD card.<\/li>\n<\/ul>\n<p>Copy the code provided to the Arduino IDE. The code for this project is a bit long, but it\u2019s fairly easy to understand. I\u2019ve also added various comments along the code. Don&#8217;t upload the code yet.<\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\n * Rui Santos \n * Complete Project Details http:\/\/randomnerdtutorials.com\n *\/\n\n\/\/ Load required libraries\n#include &lt;WiFi.h&gt;\n#include &quot;SD.h&quot;\n#include &quot;DHT.h&quot;\n#include &lt;Wire.h&gt;\n#include &lt;Adafruit_BMP085.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid     = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ uncomment one of the lines below for whatever DHT sensor type you're using\n\/\/#define DHTTYPE DHT11   \/\/ DHT 11\n\/\/#define DHTTYPE DHT21   \/\/ DHT 21 (AM2301)\n#define DHTTYPE DHT22   \/\/ DHT 22  (AM2302), AM2321\n\n\/\/ GPIO the DHT is connected to\nconst int DHTPin = 15;\n\/\/intialize DHT sensor\nDHT dht(DHTPin, DHTTYPE);\n\n\/\/ create a bmp object\nAdafruit_BMP085 bmp;\n\n\/\/ Web page file stored on the SD card\nFile webFile; \n\n\/\/ Set potentiometer GPIO\nconst int potPin = 32;\n\n\/\/ IMPORTANT: At the moment, GPIO 4 doesn't work as an ADC when using the Wi-Fi library\n\/\/ This is a limitation of this shield, but you can use another GPIO to get the LDR readings\nconst int LDRPin = 4;\n\n\/\/ variables to store temperature and humidity\nfloat tempC;\nfloat tempF;\nfloat humi;\n\n\/\/ Variable to store the HTTP request\nString header;\n\n\/\/ Set web server port number to 80\nWiFiServer server(80);\n\nvoid setup(){    \n  \/\/ initialize serial port\n  Serial.begin(115200); \n\n  \/\/ initialize DHT sensor\n  dht.begin();\n\n  \/\/ initialize BMP180 sensor\n  if (!bmp.begin()){\n    Serial.println(&quot;Could not find BMP180 or BMP085 sensor&quot;);\n    while (1) {}\n  }\n\n  \/\/ initialize SD card\n  if(!SD.begin()){\n      Serial.println(&quot;Card Mount Failed&quot;);\n      return;\n  }\n  uint8_t cardType = SD.cardType();\n  if(cardType == CARD_NONE){\n      Serial.println(&quot;No SD card attached&quot;);\n      return;\n  }\n  \/\/ initialize SD card\n  Serial.println(&quot;Initializing SD card...&quot;);\n  if (!SD.begin()) {\n      Serial.println(&quot;ERROR - SD card initialization failed!&quot;);\n      return;    \/\/ init failed\n  }\n\n  \/\/ Connect to Wi-Fi network with SSID and password\n  Serial.print(&quot;Connecting to &quot;);\n  Serial.println(ssid);\n  WiFi.begin(ssid, password);\n\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    Serial.print(&quot;.&quot;);\n  }\n\n  \/\/ Print local IP address and start web server\n  Serial.println(&quot;&quot;);\n  Serial.println(&quot;WiFi connected.&quot;);\n  Serial.println(&quot;IP address: &quot;);\n  Serial.println(WiFi.localIP());\n  server.begin();\n}\n\nvoid loop(){\n  WiFiClient client = server.available();   \/\/ Listen for incoming clients\n\n  if (client) {  \/\/ if new client connects\n    boolean currentLineIsBlank = true;\n    while (client.connected()) {\n      if (client.available()) {   \/\/ client data available to read\n        char c = client.read(); \/\/ read 1 byte (character) from client\n        header += c;\n        \/\/ if the current line is blank, you got two newline characters in a row.\n        \/\/ that's the end of the client HTTP request, so send a response:\n        if (c == '\\n' &amp;&amp; currentLineIsBlank) {\n          \/\/ send a standard http response header\n          client.println(&quot;HTTP\/1.1 200 OK&quot;);\n          \/\/ Send XML file or Web page\n          \/\/ If client already on the web page, browser requests with AJAX the latest\n          \/\/ sensor readings (ESP32 sends the XML file)\n          if (header.indexOf(&quot;update_readings&quot;) &gt;= 0) {\n            \/\/ send rest of HTTP header\n            client.println(&quot;Content-Type: text\/xml&quot;);\n            client.println(&quot;Connection: keep-alive&quot;);\n            client.println();\n            \/\/ Send XML file with sensor readings\n            sendXMLFile(client);\n          }\n          \/\/ When the client connects for the first time, send it the index.html file\n          \/\/ stored in the microSD card\n          else {  \n            \/\/ send rest of HTTP header\n            client.println(&quot;Content-Type: text\/html&quot;);\n            client.println(&quot;Connection: keep-alive&quot;);\n            client.println();\n            \/\/ send web page stored in microSD card\n            webFile = SD.open(&quot;\/index.html&quot;);\n            if (webFile) {\n              while(webFile.available()) {\n                \/\/ send web page to client\n                client.write(webFile.read()); \n              }\n              webFile.close();\n            }\n          }\n          break;\n        }\n        \/\/ every line of text received from the client ends with \\r\\n\n        if (c == '\\n') {\n          \/\/ last character on line of received text\n          \/\/ starting new line with next character read\n          currentLineIsBlank = true;\n        } \n        else if (c != '\\r') {\n          \/\/ a text character was received from client\n          currentLineIsBlank = false;\n        }\n        } \/\/ end if (client.available())\n    } \/\/ end while (client.connected())\n    \/\/ Clear the header variable\n    header = &quot;&quot;;\n    \/\/ Close the connection\n    client.stop();\n    Serial.println(&quot;Client disconnected.&quot;);\n  } \/\/ end if (client)\n}\n\n\/\/ Send XML file with the latest sensor readings\nvoid sendXMLFile(WiFiClient cl){\n  \/\/ Read DHT sensor and update variables\n  readDHT();\n\n  \/\/ Prepare XML file\n  cl.print(&quot;&lt;?xml version = \\&quot;1.0\\&quot; ?&gt;&quot;);\n  cl.print(&quot;&lt;inputs&gt;&quot;);\n\n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(tempC);\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  \n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(tempF);\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  \n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(humi);\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  \n  float currentTemperatureC = bmp.readTemperature();\n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(currentTemperatureC);\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  float currentTemperatureF = (9.0\/5.0)*currentTemperatureC+32.0;\n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(currentTemperatureF);\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  \n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(bmp.readPressure());\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  \n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(analogRead(potPin));\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n\n  \/\/ IMPORTANT: Read the note about GPIO 4 at the pin assignment \n  cl.print(&quot;&lt;reading&gt;&quot;);\n  cl.print(analogRead(LDRPin));\n  cl.println(&quot;&lt;\/reading&gt;&quot;);\n  \n  cl.print(&quot;&lt;\/inputs&gt;&quot;);\n}\n\nvoid readDHT(){\n  \/\/ Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)\n  humi = dht.readHumidity();\n  \/\/ Read temperature as Celsius (the default)\n  tempC = dht.readTemperature();\n  \/\/ Read temperature as Fahrenheit (isFahrenheit = true)\n  tempF = dht.readTemperature(true);\n\n  \/\/ Check if any reads failed and exit early (to try again).\n  if (isnan(humi) || isnan(tempC) || isnan(tempF)) {\n    Serial.println(&quot;Failed to read from DHT sensor!&quot;);\n    return;\n  }\n\n  \/*Serial.print(&quot;Humidity: &quot;);\n  Serial.print(humi);\n  Serial.print(&quot; %\\t Temperature: &quot;);\n  Serial.print(tempC);\n  Serial.print(&quot; *C &quot;);\n  Serial.print(tempF);\n  Serial.println(&quot; *F&quot;);*\/\n}\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/raw\/master\/Code\/ESP32_Weather_Station_Shield\/ESP32_Weather_Station_Shield.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<p>Before uploading the code, you need to modify the following lines to add your SSID and password.<\/p>\n<pre>\/\/ Replace with your network credentials\nconst char* ssid = \"<strong>REPLACE_WITH_YOUR_SSID<\/strong>\";\nconst char* password = \"<strong>REPLACE_WITH_YOUR_PASSWORD<\/strong>\";<\/pre>\n<p>Then, press the upload button to upload the sketch to your ESP32. Make sure you have the right board and COM port selected.<\/p>\n<p>Create a new file using a text editor, and copy the following code. Alternatively, you can <a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/master\/Code\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">click here<\/a> to download the index.html file.<\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;ESP32 Weather Station&lt;\/title&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n    &lt;link rel=&quot;icon&quot; href=&quot;data:,&quot;&gt;\n    &lt;script&gt;\n      function DisplayCurrentTime() {\n          var date = new Date();\n          var hours = date.getHours() &lt; 10 ? &quot;0&quot; + date.getHours() : date.getHours();\n          var minutes = date.getMinutes() &lt; 10 ? &quot;0&quot; + date.getMinutes() : date.getMinutes();\n          var seconds = date.getSeconds() &lt; 10 ? &quot;0&quot; + date.getSeconds() : date.getSeconds();\n          time = hours + &quot;:&quot; + minutes + &quot;:&quot; + seconds;\n          var currentTime = document.getElementById(&quot;currentTime&quot;);\n          currentTime.innerHTML = time;\n      };\n      function GetReadings() {\n      \tnocache = &quot;&amp;nocache&quot;;\n      \tvar request = new XMLHttpRequest();\n      \trequest.onreadystatechange = function() {\n    \t\t\tif (this.status == 200) {\n    \t\t\t\tif (this.responseXML != null) {\n    \t\t\t\t\t\/\/ XML file received - contains sensor readings\n    \t\t\t\t\tvar count;\n    \t\t\t\t\tvar num_an = this.responseXML.getElementsByTagName('reading').length;\n    \t\t\t\t\tfor (count = 0; count &lt; num_an; count++) {\n    \t\t\t\t\t\tdocument.getElementsByClassName(&quot;reading&quot;)[count].innerHTML =\n    \t\t\t\t\t  this.responseXML.getElementsByTagName('reading')[count].childNodes[0].nodeValue;\n    \t\t\t\t\t}\n    \t\t\t\t}\n    \t\t\t}\n      \t}\n      \t\/\/ Send HTTP GET request to get the latest sensor readings\n      \trequest.open(&quot;GET&quot;, &quot;?update_readings&quot; + nocache, true);\n      \trequest.send(null);\n        DisplayCurrentTime();\n        setTimeout('GetReadings()', 10000);\n      }\n      document.addEventListener('DOMContentLoaded', function() {\n        DisplayCurrentTime();\n        GetReadings();\n      }, false);\n    &lt;\/script&gt;\n    &lt;style&gt;\n      body {\n        text-align: center;\n        font-family: &quot;Trebuchet MS&quot;, Arial;\n      }\n      table {\n        border-collapse: collapse;\n        width:60%;\n        margin-left:auto;\n        margin-right:auto;\n      }\n      th {\n        padding: 16px;\n        background-color: #0043af;\n        color: white;\n      }\n      tr {\n        border: 1px solid #ddd;\n        padding: 16px;\n      }\n      tr:hover {\n        background-color: #bcbcbc;\n      }\n      td {\n        border: none;\n        padding: 16px;\n      }\n      .sensor {\n        color:white;\n        font-weight: bold;\n        background-color: #bcbcbc;\n        padding: 8px;\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;ESP32 Weather Station&lt;\/h1&gt;\n    &lt;h3&gt;Last update: &lt;span id=&quot;currentTime&quot;&gt;&lt;\/span&gt;&lt;\/h3&gt;\n    &lt;table&gt;\n      &lt;tr&gt;\n        &lt;th&gt;SENSOR&lt;\/th&gt;\n        &lt;th&gt;MEASUREMENT&lt;\/th&gt;\n        &lt;th&gt;VALUE&lt;\/th&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;DHT&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Temp. Celsius&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt; *C&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;DHT&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Temp. Fahrenheit&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt; *F&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;DHT&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Humidity&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt; %&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;BMP180&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Temp. Celsius&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt; *C&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;BMP180&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Temp. Fahrenheit&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt; *F&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;BMP180&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Pressure&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt; Pa&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;POT&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Position&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt;\/4095&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;&lt;span class=&quot;sensor&quot;&gt;LDR&lt;\/span&gt;&lt;\/td&gt;\n        &lt;td&gt;Luminosity&lt;\/td&gt;\n        &lt;td&gt;&lt;span class=&quot;reading&quot;&gt;...&lt;\/span&gt;\/4095&lt;\/td&gt;\n      &lt;\/tr&gt;\n    &lt;\/table&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/raw\/master\/Code\/index.html\" target=\"_blank\">View raw code<\/a><\/p>\n<p>This is HTML, and it will build your web page. In this file you can change how your web page looks, the headings, the table, etc&#8230; The ESP32 will send this HTML text to your browser when you make an HTTP request on the ESP32 IP address.<\/p>\n<p>Save the file as index.html. Copy the HTML file to your microSD card, and insert the microSD card into the SD card module.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52009\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/insert-sd-card.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"421\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/insert-sd-card.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/insert-sd-card.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Now, everything should be ready.<\/p>\n<h2>Testing the ESP32 Weather Station Shield Web Server<\/h2>\n<p>Open the serial monitor at a baud rate of 115200, and check the ESP32 IP address.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52010\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ip-address.jpg?resize=701%2C585&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"701\" height=\"585\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ip-address.jpg?w=701&amp;quality=100&amp;strip=all&amp;ssl=1 701w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ip-address.jpg?resize=300%2C250&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/p>\n<p>By the end of the project, you have your own ESP32 weather station web server, and all the hardware is well compacted on a PCB.<\/p>\n<p>Open your browser, type the IP address and you should see a table with the latest sensor readings. The web server displays the DHT22, BMP180, potentiometer and LDR readings. The readings are updated every 10 seconds without the need to refresh the web page.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-52011\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/weather-station-web-server-demo.png?resize=750%2C411&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"750\" height=\"411\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/weather-station-web-server-demo.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/weather-station-web-server-demo.png?resize=300%2C164&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>To update the readings without refreshing the web page, we use AJAX. As you can read&nbsp;<a href=\"https:\/\/www.w3schools.com\/xml\/ajax_intro.asp\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>, AJAX is a developer&#8217;s dream, because it can update the web page without reloading the page, request and receive data from a server, after the page has loaded, and send data to a server in the background.<\/p>\n<p><a href=\"https:\/\/www.w3schools.com\/xml\/ajax_intro.asp\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-51961 size-full\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ajax-developers.png?resize=546%2C184&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"546\" height=\"184\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ajax-developers.png?w=546&amp;quality=100&amp;strip=all&amp;ssl=1 546w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/ajax-developers.png?resize=300%2C101&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><\/a><\/p>\n<h2>Taking it Further<\/h2>\n<p>There\u2019s still room to improve this project, you can use the extra terminals to connect other sensors or a relay. You can also program the ESP32 to trigger an event when a reading is below or above a certain threshold. The idea is that you modify the code provided to use the shield in a way that meets your own specific needs.<\/p>\n<p>If you want to get your own all-in-one ESP32 weather station shield, you just need to upload the .zip file with the <a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-Weather-Shield-PCB\/raw\/master\/KiCad_PCB_ESP32_Shield\/GERBERS\/ESP32_Shield_Gerbers.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Gerber files<\/a> to the <a href=\"https:\/\/jlcpcb.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JLCPCB<\/a> website. You&#8217;ll get high quality PCBs for a very reasonable price.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>I&#8217;m giving away 3 bare PCBs to someone that posts a comment below! <strong>[Update] the giveaway ended and the winners are:&nbsp;Horv\u00e1th Bal\u00e1zs,&nbsp;Sayandeep Nayak, and Achim Kern.<\/strong><\/p>\n<p>We hope you&#8217;ve found this project useful. If you liked this project you may also like other related projects:<\/p>\n<ul>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-esp32\/\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started with ESP32 Dev Module<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-with-bmp180-barometric-sensor\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 with BMP180 Barometric Sensor \u2013 Guide<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-arduino-ide\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP32 Web Server<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\">Home Automation Using ESP8266 Course<\/a><\/li>\n<\/ul>\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this project I\u2019ll show you how you can build an all-in-one ESP32 weather station shield and display the sensor readings on a web server. The web server displays data &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Build an All-in-One ESP32 Weather Station Shield\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/build-an-all-in-one-esp32-weather-station-shield\/#more-51833\" aria-label=\"Read more about Build an All-in-One ESP32 Weather Station Shield\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":52014,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[281,276,277,299,264,257],"tags":[],"class_list":["post-51833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32-project","category-esp32","category-esp32-arduino-ide","category-0-esp32","category-project","category-web-server-2"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2018\/02\/esp32-weather-station-shield-thumbnail-f.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/51833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=51833"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/51833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/52014"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=51833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=51833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=51833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}