Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/victor-lis/wifi_e_leds
https://github.com/victor-lis/wifi_e_leds
esp32 html-css-javascript leds robotics
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/victor-lis/wifi_e_leds
- Owner: Victor-Lis
- Created: 2023-11-15T19:55:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-18T03:00:31.000Z (about 1 year ago)
- Last Synced: 2024-10-06T12:41:57.319Z (4 months ago)
- Topics: esp32, html-css-javascript, leds, robotics
- Language: C++
- Homepage:
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Conectando Wifi e alternando Leds
Esse é um projeto que pra mim foi muito divertido de construir, pois interliguei um código compilado no esp32, que cria um servidor com base no próprio IP dele e na minha rede Wifi e através desse servidor, que eu enviei um site, consigo alternar leds!
## Desafios
Acredito que meus principais desafios nesse projeto foram:
- Primeira vez utilizando o ESP(no caso o ESP32).
- Primeira vez trabalhando com as entradas do ESP.
- Primeira vez mexendo com Wifi.
- Conectando Wifi na rede local.
- Enviando informações via rede local.
## Aprendizados
Por final aprendi algumas coisas interessantes como:
### Conectando o Esp32 ao meu Wifi
```c++
#include
const char* ssid = "------"; // Your Network
const char* password = "******"; // Your Network Password
const int ledBlue = 26; // the number of the BLUE LED pin
const int ledRed = 27; // the number of the RED LED pin
WiFiServer server(80);
void setup()
{
pinMode(ledBlue, OUTPUT); // Starting the PIN of blue led
pinMode(ledRed, OUTPUT); // Starting the PIN of red led
Serial.begin(115200);
delay(10);
// We start by connecting to a WiFi network
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password); // Starting connection
while (WiFi.status() != WL_CONNECTED) {
// Loop while is connecting
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
```
### Estilizando o site
Nesse trecho eu coloquei todo o código html da pasta "Site" em uma linha e printei ela no meu "client", ou seja, meu ip.
```c++
void loop(){
...
client.print("Leds* {margin: 0;padding: 0;border: 0;font-family: sans-serif;}body {background-color: #202020;display: flex;flex-direction: column;align-items: center;justify-content: space-around;min-height: 80vh;padding: 10vh 0;}a {text-decoration: none;text-transform: uppercase;padding: 35px 50px;border: 2px solid #fff;font-size: 20px;color: #fff;transition: 0.25s;&:hover {opacity: 0.75;cursor: pointer;transition: 0.5s;}} .blue {border: 2px solid rgb(0, 15, 255);&:hover {background-color: rgb(0, 15, 255);}}.blue-active {background-color: rgb(0, 15, 255);}.red {border: 2px solid rgb(255, 15, 0);&:hover {background-color: rgb(255, 15, 0);}}.red-active {background-color: rgb(255, 15, 0);} Blue Red let currentURL = window.location.href;if (currentURL.includes('blue')) {document.querySelector('.blue').classList.add('blue-active');}if (currentURL.includes('red')) {document.querySelector('.red').classList.add('red-active');}");
...
}
```
### Recebendo valores da web
No trecho abaixo eu verifico se a url passa o parâmetro para o led "red"(ligando o led vermelho) ou "blue"(ligando o led azul).
```c++
void loop(){
...
if (currentLine.endsWith("GET /?led=blue")) {
Serial.println("Blue");
digitalWrite(ledBlue, HIGH);
digitalWrite(ledRed, LOW);
}
if (currentLine.endsWith("GET /?led=red")) {
Serial.println("Red");
digitalWrite(ledBlue, LOW);
digitalWrite(ledRed, HIGH);
}
...
}
```
# Resultado
[Ver vídeo do projeto funcionando!](https://www.youtube.com/watch?v=S7EanehuTS0)
## Autores
- [@Victor-Lis](https://github.com/Victor-Lis)