fbpx
Back to Curso

Curso de Python - Edición 2

0% Complete
0/51 Steps
En Progreso
Clase 12, Tema 23
En Progreso

Desafío Grupal Copy

Vamos a agregar una función más a nuestro robot, y es la de control de velocidad. Esto lo vamos a hacer con tres botones en la web que van a modificar la velocidad del robot mediante PWM (analogWrite();).

Además de esto, vamos a utilizar CSS para embellecer nuestro control remoto. Cambiando los colores y alineando los elementos.

Resumiendo:
– Agregar 3 botones de velocidad.
– Cambiar la velocidad del robot con los botones.
– Que arranque con la velocidad intermedia.
– Agregar CSS a gusto para dejar bonita la página.

⚠️ Aquí abajo se encuentra la solución al desafío ⚠️

Ejemplo

Código

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include <mi_wifi.h>

ESP8266WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);

const int MOTOR_A_En = D1;
const int MOTOR_A_Dir = D3;
const int MOTOR_B_En = D2;
const int MOTOR_B_Dir = D4;

int velocidad = 900;

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED:
      Serial.println("cliente desconectado");

      break;
    case WStype_CONNECTED:
      Serial.println("cliente conectado");

      break;
    case WStype_TEXT:
      String dato = (char*)payload;
      Serial.print("Dato recibido: ");
      Serial.println(dato);

      if (dato == "adelante") {
        digitalWrite(MOTOR_A_Dir, HIGH);
        analogWrite(MOTOR_A_En, velocidad);
        digitalWrite(MOTOR_B_Dir, HIGH);
        analogWrite(MOTOR_B_En, velocidad);

      } else if (dato == "atras") {
        digitalWrite(MOTOR_A_Dir, LOW);
        analogWrite(MOTOR_A_En, velocidad);
        digitalWrite(MOTOR_B_Dir, LOW);
        analogWrite(MOTOR_B_En, velocidad);

      } else if (dato == "izquierda") {
        digitalWrite(MOTOR_A_Dir, LOW);
        analogWrite(MOTOR_A_En, velocidad);
        digitalWrite(MOTOR_B_Dir, HIGH);
        analogWrite(MOTOR_B_En, velocidad);

      } else if (dato == "derecha") {
        digitalWrite(MOTOR_A_Dir, HIGH);
        analogWrite(MOTOR_A_En, velocidad);
        digitalWrite(MOTOR_B_Dir, LOW);
        analogWrite(MOTOR_B_En, velocidad);

      } else if (dato == "detener") {
        analogWrite(MOTOR_A_En, 0);
        analogWrite(MOTOR_B_En, 0);

      } else if (dato == "1") {
        velocidad = 700;
      } else if (dato == "2") {
        velocidad = 900;
      } else if (dato == "3") {
        velocidad = 1023;
      } 

      break;
  }
}
const String pagina = R"====(
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Control</title>
    <style>

    body {
            text-align: center;
            color: #05F283;
            background-color: #000000;
        }

        .flecha {
            width: 60px;
            height: 60px;
            border-radius: 20px;
            color: #177348;
            background-color: #05F283;
            font-size: 40px;
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }

    </style>

    <script>
        var canal = new WebSocket('ws://' + location.hostname + ':81/', ['arduino']);

        function enviarESP(comando) {
            canal.send(comando);
        }
        
    </script>
</head>
<body>

<h1>Control remoto</h1>

<button class="flecha" type="button" onmousedown="enviarESP('adelante')" onmouseup="enviarESP('detener')" ontouchstart="enviarESP('adelante')" ontouchend="enviarESP('detener')" onmouseout="enviarESP('detener')">&uArr;</button>
<br>
<button class="flecha" type="button" onmousedown="enviarESP('izquierda')" onmouseup="enviarESP('detener')" ontouchstart="enviarESP('izquierda')" ontouchend="enviarESP('detener')" onmouseout="enviarESP('detener')">&lArr;</button>
&emsp;&emsp;&emsp;
<button class="flecha" type="button" onmousedown="enviarESP('derecha')" onmouseup="enviarESP('detener')" ontouchstart="enviarESP('derecha')" ontouchend="enviarESP('detener')" onmouseout="enviarESP('detener')">&rArr;</button>
<br>
<button class="flecha" type="button" onmousedown="enviarESP('atras')" onmouseup="enviarESP('detener')" ontouchstart="enviarESP('atras')" ontouchend="enviarESP('detener')" onmouseout="enviarESP('detener')">&dArr; </button>
<br>
<br>
<br>
<h1>Velocidades</h1>
<button class="flecha" type="button" onclick="enviarESP('1')" >1</button>
<button class="flecha" type="button" onclick="enviarESP('2')" >2</button>
<button class="flecha" type="button" onclick="enviarESP('3')" >3</button>

</body>
</html>

)====";

void setup() {
  Serial.begin(115200);

  pinMode(MOTOR_A_Dir, OUTPUT);
  pinMode(MOTOR_B_Dir, OUTPUT);

  WiFi.mode(WIFI_STA);

  WiFi.begin(ssid, password);

  Serial.println("");
  Serial.println("");
  Serial.print("Conectando a WiFi ");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }


  Serial.println("Conectado!");
  Serial.print("Nuestra IP es: ");
  Serial.println(WiFi.localIP());

  server.on("/", []() {
    server.send(200, "text/html", pagina);

  });

  webSocket.begin();
  webSocket.onEvent(webSocketEvent);

  server.begin();
  Serial.println("Servidor iniciado");
}

void loop() {
  webSocket.loop();
  server.handleClient();

}

Responses

[uo_login_ui]