Página que muestra datos ambientales

Se trata de crear un servidor web que muestre datos de temperatura ambiente.

La placa ESP32 Plus STEAMaker sobre la que se ha colocado una IMAGINA TdR STEAM que dispone del sensor de temperatura y humedad, está programada desde el entorno SteaMakersBlocks.

El programa que corresponde a la imagen anterior que muestra la página pruebas.local es el que se muestra a continuación:

En el bloque inicializar existe una parte del código que nos permite conocer la IP que ha asignado el router a nuestro ESP32, aunque no nos va a ser necesaria para nada ya que establecemos un nombre mDNS, que en este caso es pruebas y que determina la página que hemos de buscar en el navegador y que es pruebas.local. Al recibir la solicitud GET podríamos enviar directamente el contenido web desde este bloque, pero lo hemos hecho a través de la función hacer algo.

  

Hemos incluido un bloque de error para el caso de que al servidor llegue una solicitud que no ha sido prevista. En el bloque Bucle no hemos colocado nada.

 

La función hacer algo es la que contiene la página web que se mostrará en el navegador. Además se encarga de ir incrementando el valor de la variable contador y asigna a la variable temperatura el valor proporcionado por el sensor DHT-11.

 

Cuando al servidor web de la ESP32 llega una solicitud GET pruebas.local/cero se incrementa en una unidad el valor de la variable contador, y mediante un código de JavaScript se vuelve de nuevo a la página pruebas.local.

 

Poner a cero una variable y volver a la página anterior

Con la solicitud GET pruebas.local/cero cambiamos el valor de la variable contador y lo ponemos a cero y también enviamos el contenido de una página web con un código que nos devuelve a la página de la que habíamos salido para hacer esa solicitud GET.

La página pruebas.local/cero solamente tiene una etiqueta de texto con el código siguiente:

Con este código volvemos a la página anterior, es decir a pruebas.local, después de dos segundos.

<p>Volviendo a la página anterior en 2 segundos...</p>

<script>

    setTimeout(() => history.back(), 2000);

</script>

Si en vez de 2000 milisegundos se ponen 20 no se llegará a ver el texto y se volverá a la página anterior igualmente.

<p>Volviendo a la página anterior en 2 segundos...</p>

<script>

    setTimeout(() => history.back(), 20);

</script>

Recargar la página web para obtener nuevos valores de los sensores

Con este código podemos recargar automáticamente la página pruebas.local cada 2 segundos. Se ha de colocar al final del código del Body.

<script>

    setTimeout(() => location.reload(), 2000);

    // 2000 ms = 2 segundos

</script>

Botón para volver a la página anterior 

Este código nos crea un botón, que una vez presionado nos envía a la página anterior.

<h2>Volver a cargar esta página</h2> 

<button onclick="history.back()">Volver atrás</button>

Botón para recargar la página

Este código nos crea un botón, que una vez presionado nos recarga la misma página pruebas.local.

<h2>Volver a cargar esta página</h2> 

<button onclick="location.reload()">Recargar página</button>

Botón que nos dirige a otra página

Este es el código para enlazar un texto escrito sobre un rectángulo de color de forma que nos dirigimos a la página pruebas.local/cero. Al hacer esto, como vimos anteriormente, ponemos a cero la variable contador. En este código podemos modificar varias características que modifican el aspecto en cuanto a colores de fondo y de texto y tamaños de letra y del recuadro, aparte del redondeado de las esquinas. 

<h2>Borrar el contador</h2>

  <a href="cero" 

     style="display: inline-block; padding: 12px 24px; 

            background-color: #4CAF50; color: white; 

            text-decoration: none; border-radius: 6px; 

            font-size: 16px;">

    Poner a cero

  </a>

Otro botón con enlace a otra página

El cuarto botón de la página siguiente es el que nos envía a la página pruebas.local/cero, de la misma forma que lo hace el botón verde que tiene sobre él.

Este es el código que permite modificar el aspecto del botón:

<h2>Borrar el contador</h2>

<input onClick="window.location.href='cero' " type=button value="Borrar el contador" name="boton"

style="BORDER: rgb(128,128,128) 1px dashed; FONT-SIZE: 8pt; FONT-FAMILY: Verdana; 

BACKGROUND-COLOR: rgb(233,233,233)">