https://github.com/projetsdiy/esp8266webserver-bootstrap-bootswatch

ESP8266 Web Server + Bootstrap + Bootswatch
https://github.com/projetsdiy/esp8266webserver-bootstrap-bootswatch

bmp180 bootstrap bootswatch-theme dht22 esp8266 webserver

Last synced: 30 days ago
JSON representation

ESP8266 Web Server + Bootstrap + Bootswatch

• Host: GitHub
• URL: https://github.com/projetsdiy/esp8266webserver-bootstrap-bootswatch
• Owner: projetsdiy
• License: mit
• Created: 2017-02-21T17:46:40.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-22T16:20:19.000Z (almost 8 years ago)
• Last Synced: 2023-10-20T08:08:46.893Z (about 1 year ago)
• Topics: bmp180, bootstrap, bootswatch-theme, dht22, esp8266, webserver
• Language: Arduino
• Homepage: http://www.diyprojects.io/bootstrap-web-server-esp8266-use-bootswatch-themes/
• Size: 63.5 KB
• Stars: 36
• Watchers: 8
• Forks: 21
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ESP8266 WebServer + Bootstrap + Bootswatch

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/

## Equipment used

* Any ESP8266 ESP-12 module, for example Wemos D1 mini

* BMP180 : Atmospheric pressure sensor

* DHT22 Temperature and humidity sensor

## Wiring

|Sensor |Pin |ESP8266 Pin|

|-------|----|----------:|

|DHT22  |VCC |5V         |

|       |GND |G          |

|       |Data|D4         |

|BMP180 |VCC |5V         |

|       |GND |G          |

|       |SDA |D2         |

|       |SCL |D1         |

## More info

 - 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/

 

# Interface Bootstrap pour vos projets ESP8266 

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

## Matériel utilisé

* 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é

## Cablage

|Sensor |Broche |Broche ESP8266|

|-------|-------|-------------:|

|DHT22  |VCC    |5V            |

|       |GND    |G             |

|       |Data   |D4            |

|BMP180 |VCC    |5V            |

|       |GND    |G             |

|       |SDA    |D2            |

|       |SCL    |D1            |

## Tutoriels en Français

* 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