En este proyecto se ha de crear un servidor web en una placa ESP32 Plus STEAMaker sobre la que se ha colocado una IMAGINA TdR STEAM que dispone del sensor de temperatura y humedad DHT-11. Está programada desde el entorno SteaMakersBlocks. El programa se puede descargar del entorno STEAMakersBlocks. Las imágenes que se mostrarán en el canvas se han de cargar en la tarjeta micro SD.
A continuación se muestran las tres imágenes utilizadas para poder descargarlas si se quiere reproducir el proyecto. La primera es termometrodial.png.
Y la tercera termometroaguja2.png.
A continuación vamos a ir viendo como está construido el programa.
En el conjunto Inicializar se encuentra el bloque que configura el Punto de acceso Wifi al que nos habremos de conectar para ver la página alojada en el servidor web que crearemos a continuación. Su nombre (SSID) es ABLOCKS_AP, su contraseña 0123456789 y su dirección IP (puerta de enlace) 192.168.4.1 Esta dirección la habremos de escribir en la barra de direcciones del navegador, una vez conectados a esta red wifi. A continuación se configura el puerto del servidor web y se estable el nombre mDNS de esa página alojada en 192.168.4.1 que en este caso es termohigrometro Si colocamos este nombre en la barra de direcciones del navegador también habríamos de ver la página alojada en el servidor web.
En el conjunto Bucle asignamos el valor de la temperatura y humedad a las variables correspondientes.
A continuación vemos el conjunto que muestra el contenido de la página alojada en el servidor web.
Para empezar se cargan desde la tarjeta micro SD las tres imágenes que necesitaremos para el canvas en donde se mostrará el termohigrógrafo.
A continuación se ve el contenido de la cabecera (Head) de la página web.
El contenido de la etiqueta Meta es el que se muestra a continuación:
http-equiv="Refresh" content="8" charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1.0"
El primer código permite recargar automáticamente la página para mostrar los nuevos datos de temperatura y humedad, si es que han cambiado. El valor content indica el valor del tiempo de espera entre recargas.
Para poder mover las agujas del higrómetro dentro del canvas necesitamos tener en el código de la página web dos variables llamadas temperatura y humedad que contengan el valor de la temperatura y humedad y a las que le asignaremos el valor desde las variables del mismo nombre del entorno de programación STEAMakersBlocks, tal como se muestra a continuación.
El código contenido en las etiquetas de texto es el siguiente.
<p id="temperatura"></p> <script> let temperatura =
en medio lleva:
; document.getElementById("temperatura").textContent = "La temperatura es: " + temperatura + " °C"; </script>
<p id="humedad"></p> <script> let humedad =
en medio lleva:
; document.getElementById("humedad").textContent = " La humedad es: " + humedad + " %"; </script>
A continuación se crean tres imágenes y el canvas en donde se mostraran. El código contenido en las etiquetas de texto es el siguiente.
<img src="/foto" style="display:none" id="dial">
<img src="/foto1" style="display:none" id="aguja">
<img src="/foto2" style="display:none" id="aguja1">
<canvas width="425" height="425" id="miPanel" style="border:1px solid #000000;"></canvas>
A continuación se introduce el código en JavaScript para el canvas.
El código contenido en las etiquetas de texto es el siguiente.
<script>
var canvas = document.getElementById('miPanel');
var miImagen=document.getElementById("dial");
var miImagen1=document.getElementById("aguja");
var miImagen2=document.getElementById("aguja1");
lapiz = canvas.getContext('2d');
window.onload = function(){
lapiz.drawImage(miImagen, 0, 0);
lapiz.translate(218, 188);
lapiz.rotate((temperatura*3.1-51)*Math.PI/180);
lapiz.drawImage(miImagen1, -11, -118);
lapiz.resetTransform();
lapiz.translate(220, 270);
lapiz.rotate((humedad*3.15-156)*Math.PI/180);
lapiz.drawImage(miImagen2, -13, -55);
lapiz.beginPath(); }
</script>
A continuación se ve el código para crear cuatro botones en la página web que enciendan y apaguen los leds rojo y azul de la IMAGINA TdR STEAM, recarguen la página y abran el programa en la página de STEAMakersBlocks.
El código contenido en las etiquetas de texto es el siguiente.
<h2>Encender rojo</h2> <input onClick="window.location.href='rojo' " type=button value="LED rojo" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 18pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
<h2>Encender azul</h2> <input onClick="window.location.href='azul' " type=button value="LED azul" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 18pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
<h2>Recargar datos</h2> <input onClick="location.reload();" type=button value="RECARGAR" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 18pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
<h2>Programa en SteamakersBlocks</h2> <input onClick=" window.open('https://www.steamakersblocks.com/web/project/2825866', '_blank')" type=button value="SteamakersBlocks" name="boton" style="BORDER: #FF6347 3px outset; border-radius: 8px; FONT-SIZE: 18pt; FONT-FAMILY: Verdana; Color: #0066CC; font-weight: bold; BACKGROUND-COLOR: #DCD618">
A continuación se muestra el conjunto que enciende el led rojo y apaga el azul.
Para volver al instante a la página anterior el código de la etiqueta de texto que forma parte del Body de la página 192.168.4.1/rojo es el siguiente.
<p>Volviendo a la página anterior en 2 segundos...</p> <script> setTimeout(() => history.back(), 20); </script>
A continuación se muestra el conjunto que enciende el led azul y apaga el rojo.
Para volver al instante a la página anterior el código de la etiqueta de texto que forma parte del Body de la página 192.168.4.1/azul es el siguiente.
<p>Volviendo a la página anterior en 2 segundos...</p> <script> setTimeout(function(){javascript:history.go(-1); location.reload();}, 20); </script>
Si nos conectamos a la red wifi ABLOCKS_AP y entramos en la página 192.168.4.1 podemos ver lo que se muestra a continuación.
No hay comentarios:
Publicar un comentario