Provides WiFi connectivity for the NodeMCU with numberous on-screen feedback elements
Table of Contents
Modified UI and logic for the Kube project using the ESP8266 and DHT22 temperature/humidity sensor. A webpage will be served by the unit where you can view sensor data without using the MQTT network.
Below are all the parts, tools libraries and frameworks used in this project. Additional details can be found in the acknowledgements section.
- NodeMCU ESP8266 v0.9
- NodeMCU Breakout Board
- DHT22
- OLED Screen (.96" | 128x64 pixels | Yellow and Blue text)
- 3D Printed Case
- Arduino IDE
- Adafruit Unified Sensor by Adafruit (v 1.0.2 or higher)
- ArduinoOTA by Juraj Andrassy (v 1.0.0 or higher)
- DHT Sensor Library by Adafruit (v 1.3.0 or higher)
- ESP8266 and ESP32 Oled Driver for SSD1306 Display by ThingPulse, Fabrice Weinberg (v 4.0.0 or higher)
- ESP8266_mDNS by Mr. Dunk (v 1.17 or higher)
- WiFiManager by tzapu and maintained by tablatronix (v 0.12.0 or higher)
This repo assumes that you have an ESP8266 housed in a specially configued "Kube" 3D Printed case according to the instructions found on BK Hobby's YouTube page.
-
Download and install the newest version of the Arduino IDE:
Navigate to https://www.arduino.cc/en/software in your preferred web browser, then download and install the Arduino IDE version for your Operating System. -
Add the ESP8266 Board Manager:
Launch the Arduino IDE and open the Preferences menu by navigating to "File" → "Preferences" or by pressing Ctrl + ,. In the "Additional Board Manager URLs" field enter the following URL (note that you can add multiple URLs by separating them with a ,):
https://arduino.esp8266.com/stable/package_esp8266com_index.json
-
Install ESP8266 Board in the Boards Manager:
Open the Boards Manager by clicking on "Tools" → "Boards" → "Boards Manager". In the search field type in "ESP8266" and then click on the "Install" button. Make sure to select your ESP8266 board from the menu after installation.
-
Install the newest versions of all necessary Arduino Libraries (see "Built With" section above for complete list):
Open the Library Manager by clicking on "Tools" → "Manage Libraries", or by pressing Ctrl + Shift + i. In the search field type in "ESP8266" and then click on the "Install" button. Make sure to select your ESP8266 board from the menu after installation.
-
Upload the Arduino sketch to your ESP8266:
Download the Arduino sketch from this Github Repository, open it in your Arduino IDE and modify the pertinent parameters -- WiFi SSID name and password along with the name of the location where the device will live. Connect your ESP8266 to your computer with a USB cable. Determine what port your ESP8266 is occupying on your machine, then choose that port in the Arduino IDE by going to "Tools" → "Port" and clicking on the correct port. Please note that if you are having trouble connecting to the ESP8266 - especially if you are in the Windows OS and see an unknown device in Device Manager - this oddly enough can be caused by the actual USB cable you are using. Try another USB cable until you can confirmation that you can successfully communicate with the ESP8266 in Arduino IDE by clicking on "Tools" → "Get Board Info"
-
Get the IP Address of the Unit:
When the unit powers on it will tell you which Wireless SSID it is attempting to connect to and what IP address it has obtained after connecting. Jot down the IP address. Note that if you either don't want to connect to a WiFi hotspot or for any reason you are unable to you will still be able to see the realtime Temperature and Humidity picked up by the DHT22 via the OLED display. -
Connect to the Unit via Web Browser:
Now you can simply open your preferred web browser and enter the unit's IP address in the address bar.
Because the component parts are inexpensive and building these units is relatively simple, for IT personnel an ideal usecase for this project is to liberally gather temperature and humidity readings of spaces not normally measured. That is to say, multiple locations in server rooms, within server racks and throughout key locations at sensitive sites.
A dashboard could then easily be built to view the aggregate readings.
Please note that modifying the web interface can be done by editing the Skech within the "// Web Server Code" section. Specifically, the String ptr defined in the the String SendHTML block is where the action happens.
HTML pages can be converted to C/C++ strings via various tools like this online string converter at tomeko.net. After converting the HTML you would just need to introduce it to the sketch as the String ptr within the String SendHTML block just like the current page is. Each line is added with ptr += "new line of C/C++ converted string"; with the return ptr; statement finishing things off.
- 0.5.6
- CHANGE: Small fixes to webserver design. Updates to Library requirements.
- 0.5.5
- CHANGE: Substantial modifications to the webserver design.
- 0.5.4
- general optimizations.
- 0.5.3
- Added webserver.
- 0.5.0
- The first proper release.
- 0.1.0
- Work in progress.
- Add Webserver
- Add OLED Screen Info about IP Address
- Add OLED Screen Info about initial SSID Connection Status
- Add Email notifications
- Add Ability to save sensor history
See the open issues for a full list of proposed features (and known issues).
Jacques Laroche – Twitter @jlar0che
Project Link: https://github.com/jlar0che/NodeMCU-Interface
Distributed under the GPLV3 license. See GPLV3 LICENSE DETAILS for more information.
Big thanks to the following makers, resources and tools. Couldn't have built this project without you!
- BK Hobby Github Page for NodeMCU
- BK Hobby YouTube Channel
- BK Hobby's Thingiverse Page for The Kube
- W3Schools CSS Templates
- Tomeko.net Text to C/C++ String Converter
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork it (https://github.com/jlar0che/NodeMCU-Interface)
- Create your feature branch (
git checkout -b feature/Branchname) - Commit your changes (
git commit -am 'Add a message') - Push to the branch (
git push origin feature/Branchname) - Create a new Pull Request