Inicio └Sistema de Riego Inteligente └Código del Sistema de Riego

Sistema de Riego Inteligente

0 %
Contenido del curso

Código del Sistema de Riego

Anterior Fijar como hecho Siguiente
Pantalla completa

                                    Inicio del Código

                                     

                                    A continuación, veremos qué aspectos necesitamos conocer para programar el kit, así como los requisitos para diseñar una página web interactiva. Más adelante, te mostraremos algunos códigos de ejemplo de funcionamiento del sistema.

                                    Librerías

                                    Las librerías de C++ a utilizar serán las siguientes:

                                     

                                    Recuerda que, si no reconoce la librería, siempre puedes añadirla desde el propio software de Arduino IDE a través de Sketch > Incluir biblioteca > Gestionar bibliotecas, y buscando la que necesites.

                                    Creación del Servidor Web

                                    Para crear el servido web utilizamos el comando   WiFiServer y nombramos al servidor como  server(80) . 
                                    Recuerda que, el "80" dentro del paréntesis, es el puerto en el que estará alojado el servidor. Quedando la línea tal que:

                                    WiFiServer server(80);

                                    Credenciales del Wifi

                                    Para poder acceder a la página web, es necesario conectar el dispositivo a la misma red Wifi desde el cual nos conectaremos. Para conseguir esto, es necesario crear unas variables de credenciales, las cuales serán:

                                    • const char* ssid = "MiFibra-Wifi"; Donde pondremos el nombre de la conexión Wifi que utilizaremos.

                                    • const char* password = "Contraseña"; Donde pondremos la contraseña necesaria para acceder al Wifi.

                                    Variables

                                    Es necesario crear diferentes variables para el correcto funcionamiento del código, estas variables son:

                                    • int contconexion = 0; Variable para gestionar el timeout de conexión a la red WiFi.

                                    • String header; Variable para guardar la petición HTTP.

                                    • También crearemos una variable relativa con la salida del relé:

                                      • const int rele = 4;

                                    • Y utilizaremos variables para los pines, donde estarán los sensores de lluvia, humedad del suelo y luminosidad

                                      • const int sensorLluvia = 32;

                                      • const int sensorHumedadSuelo = 33;

                                      • const int sensorLuz = 34;

                                    Interfaz del Servidor Web

                                    Para crear la interfaz del servidor se utiliza código HTML (HyperText Markup Language), que es el lenguaje de marcado utilizado para estructurar y presentar contenido en la web. Este código es enviado por el servidor web al navegador del usuario, el cual lo interpreta y muestra como una página web:

                                    String inicioPagina = "<!DOCTYPE html>"
                                        "<html>"
                                        "<head>"
                                        "<meta charset='utf-8' />"
                                        "<title>Servidor Web ESP32</title>"
                                        "</head>"
                                        "<body>"
                                        "<center>";

                                    String finPagina = "</center></body></html>";


                                    En esta parte del código hay que tener en cuenta lo siguiente:

                                    • Cuando iniciamos la página debemos declarar el tipo de documento, en este caso será HTML5. Escribiendo "<!DOCTYPE html>" se indica al navegador que el contenido que sigue está escrito en el estándar HTML5.

                                    • Cuando utilizamos la etiqueta "<html>", que es la raíz del documento HTML, indicamos que todo el contenido del sitio web estará dentro de esta etiqueta.

                                    • Se utiliza "<head>" para indicar que en esta sección se incluyen metadatos del documento, como el título de la página, codificación de caracteres, enlaces a hojas de estilo o scripts, etc.

                                    • Especificamos la codificación de caracteres UTF-8, el cual es un estándar de codificación de texto que puede representar prácticamente cualquier carácter de cualquier idioma (incluidos emojis y caracteres especiales), utilizando un sistema eficiente, en "<meta charset='utf-8' />". Esto asegura que los caracteres especiales se rendericen correctamente.

                                    • "<title>Servidor Web ESP32</title>" Define el título de la página web que aparecerá en la pestaña del navegador o en el marcador si se guarda. En este caso, el título es "Servidor Web ESP32".

                                    • "</head>" se utiliza para cerrar la etiqueta "<head>". Todo lo que pertenece a los metadatos ya se definió.

                                    • La etiqueta "<body>" contiene el contenido visible de la página web (lo que verá el usuario en el navegador).

                                    • "<center>" centra todo el contenido dentro de ella. Esto significa que, el contenido posterior, aparecerá alineado al centro de la página

                                    • Finalmente, se crea una variable tipo string para cerrar las etiquetas que quedan por cerrar, las cuales son:

                                      • "</center>"

                                      • "</body>"

                                      • "</html>"

                                    Vistas
                                    1 Número de vistas
                                    1 Vistas de miembros
                                    0 Vistas públicas
                                    Acciones
                                    0 Gustos
                                    0 No me gusta
                                    0 Comentarios
                                    Compartir en redes sociales
                                    Compartir enlace
                                    Compartir por correo

                                    Por favor iniciar sesión para compartir esto webpage por correo.

                                    Anterior Fijar como hecho Próxima