ESP8266 Weather Station with SPIFFS

SparkFun Atmospheric Sensor Breakout - BME280

NodeMCU ESP8266 Breakout Board

Jumper wires (generic)

Visual Studio Code Extension for Arduino

Arduino IDE

<h3 >Introduction</h3><p ><span >In this project we use ESP8266 in its </span><a href="https://espressif.com/sites/default/files/documentation/0a-esp8266ex_datasheet_en.pdf">ESP8266 </a><span > in its NodeMCU form factor which reads the temperature and humidity values from </span><a href="https://cdn-shop.adafruit.com/datasheets/BST-BME280_DS001-10.pdf">BME280</a><span > and plots them as chart on webserver. This tutorial would also teach you about the SPIFFS of ESP8266 and its uses and working.</span></p><h3 >What is SPIFFS?</h3><p >SPIFFS is the original filesystem and is ideal for space and RAM constrained applications that utilize many small files and care about static and dynamic wear levelling and don’t need true directory support. Filesystem overhead on the flash is minimal as well. On the NodeMCU we have 4MB of flash out of which we can the size of the SPIFFS filesystem. In this project all the webserver files including html, css, and javascript are saved on a folder named data which is the folder name required for uploading to ESP8266 with SPIFFS uploader.</p><figure><img src=https://projects.arduinocontent.cc/fe879390-ac14-4c06-98ad-21dd74fe531b.jpg /><figcaption>SPIFFS Memory Sizes</figcaption></figure><h3 >How to Upload to SPIFFS?</h3><p >There is a plugin for the Arduino IDE that allows you to upload files directly to the ESP8266 filesystem from a folder in your computer but we need to install it manually. Lets install it!</p><ul ><li ><span >Download the Files from </span><a href="https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.5.0/ESP8266FS-0.5.0.zip">Github</a><span >.</span></li></ul><ul ><li >Extract it.</li></ul><ul ><li >Copy it and paste it in tools folder of Arduino IDE.</li></ul><p >Done we succesfully installed it. Tutorial below ⬇</p><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/poPoHdS-j-w" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div><h3 >Hardware Setup</h3><ul ><li >Start by placing the NodeMCU on a breadboard.</li></ul><figure><img src=https://projects.arduinocontent.cc/1572fa8c-ac9d-45ea-9e28-a472028a4656.png /><figcaption> </figcaption></figure><ul ><li >Place the BME280 sensor on the breadboard.</li></ul><figure><img src=https://projects.arduinocontent.cc/e4c4cc38-0437-4cbe-86d5-c5c70c3b4a5b.png /><figcaption> </figcaption></figure><ul ><li >Make the following connections.</li></ul><p >3V3V ➡ VCC</p><p >GND ➡ GND</p><p >SDA  ➡ D2</p><p >SCL   ➡ D1</p><figure><img src=https://projects.arduinocontent.cc/48dad393-f7c9-4a17-83fb-b4464c5c5606.png /><figcaption> </figcaption></figure><h3 >Software Setup</h3><ul ><li ><span >Visit my </span><a href="https://github.com/rahuladitya303/ESP8266_BME280_Web_Server/releases">GitHub</a><span > page and download the necessary files.</span></li></ul><ul ><li >Download Adafruit libraries from library manager.</li></ul><ul ><li >Extract it and open it.</li></ul><ul ><li >Make the changes in code.</li></ul><ul ><li >Compile and upload it.</li></ul><ul ><li >Go to tools and use ESP8266 Sketch Data Upload tool to upload sketch data.</li></ul><p ><strong >Change</strong><span > </span><strong >these</strong><span > </span><strong >lines</strong><span > </span><strong >of</strong><span > </span><strong >code:</strong></p><p ><code >const char *ssid = &#34;REPLACE_WITH_YOUR_SSID&#34;;</code></p><p ><code >const char *password = &#34;REPLACE_WITH_YOUR_PASSWORD&#34;; </code></p><p >See the tutorial given below ⬇</p><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/-TZmGP77UwI" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div><h3 >Final Working</h3><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/CSZnYyjnSZ0" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe></figure></div><p ><span >GitHub Repository Link: </span><a href="https://github.com/rahuladitya303/ESP8266_BME280_Web_Server/">https://github.com/rahuladitya303/ESP8266_BME280_Web_Server/</a></p><p ><span >Must read </span><a href="https://rahuladitya303.github.io/ESP8266_BME280_Web_Server/">Readme.md</a><span > file!</span></p>

ESP8266 Weather Station with SPIFFS

In this project, ESP8266 reads the temperature and humidity values from BME280 and plots them as chart on webserver stored on SPIFFS.