How to create a beautifull interface for your ESP8266 project and change theme dynamically
- Change theme using Bootswatch CDN
- Display DHT22 and BMP180 measures
- Use GPIO from Web Interface (use Leds to simulate for example)
Libraries used: WiFiClient, ESP8266WebServer, DHT and Adafruit_BMP085 Bootswatch CND : https://www.bootstrapcdn.com/
- Any ESP8266 ESP-12 module, for example Wemos D1 mini
- BMP180 : Atmospheric pressure sensor
- DHT22 Temperature and humidity sensor
| Sensor | Pin | ESP8266 Pin |
|---|---|---|
| DHT22 | VCC | 5V |
| GND | G | |
| Data | D4 | |
| BMP180 | VCC | 5V |
| GND | G | |
| SDA | D2 | |
| SCL | D1 |
- Understanding how to program a web server on an ESP8266 : http://www.diyprojects.io/esp8266-web-server-tutorial-create-html-interface-connected-object/
- How to create beautiful interface with Bootstrap : http://www.diyprojects.io/bootstrap-create-beautiful-web-interface-projects-esp8266/
- How to change Boootstrap theme with Bootswatch CDN : http://www.diyprojects.io/bootstrap-web-server-esp8266-use-bootswatch-themes/
Comment créer une interface Web pour vos projets ESP8266
- Changer de thème avec Bootswatch
- Afficher les mesures d'un DHT22 et d'un BMP180
- Comment utiliser le GPIO depuis l'interface Web
- N'importe quel ESP8266 (ESP-12x), par exemple Wemos D1 mini
- BMP180 : Capteur de pression atmosphérique
- DHT22 capteur de température et d'humitité
| Sensor | Broche | Broche ESP8266 |
|---|---|---|
| DHT22 | VCC | 5V |
| GND | G | |
| Data | D4 | |
| BMP180 | VCC | 5V |
| GND | G | |
| SDA | D2 | |
| SCL | D1 |
- Comprendre comment programmer un serveur web sur un ESP8266 : http://www.projetsdiy.fr/esp8266-serveur-web-interface-graphique-html/
- Comment utiliser Bootstrap dans un projet ESP8266 http://www.projetsdiy.fr/bootstrap-esp8266-webserver-interface/
- Comment changer le thème Bootstrap avec les thème Bootswatch : http://www.projetsdiy.fr/bootstrap-bootswatch-webserver-esp8266-personnaliser-theme-defaut/
Licence : MIT
Copyright : www.projetsdiy.fr and www.diyprojects.io