Paso 4: Lado de cliente (el navegador)
Ahora trabajaremos con nuestro /public carpeta, allí, vamos a añadir el índice de nuestra aplicación y los archivos JS que serán dinámica, así que vamos:
En primer lugar, cree una carpeta denominada 'activos' y dentro de ella, crear dos más llamado 'lib' y 'estilos', en la carpeta lib, poner bootstrap, jquery y los archivos de p5, estas nos ayudarán a acercarnos a nuestro objetivo, sistema de arranque suave y p5 y jquery para agregar funcionalidad personalizada y una tabla de seguimiento de la temperatura de la casa.
Luego, en la carpeta principal (/ público) crear un archivo llamado index.html, puede verificar la mina y pega si quieres y después de terminar el instructable personalizarlo para usted y divertirse!
Después de tener su archivo de índice tiene que haber también dos archivos javascript, uno de ellos para el control de la interfaz con jquery y otra para crear un gráfico que muestra la temperatura en tiempo real. También, vamos a empezar trabajando con socket.io en este momento.
Socket.IO es una potente librería JS para construir en tiempo real de aplicaciones web, se aprovecharlo y utilizarlo para emitir eventos desde el servidor de Arduino al cliente y viceversa, puede comprobar aquí la documentación de socket.io y también hay muchos ejemplos de cómo usarlo. Vamos a continuar nuestros archivos antes mencionados.
Se llamará un archivo script.js y debe contener lo siguiente:
Aquí estamos manejando los eventos de interfaz de usuario (haga clic en el y un slider) y con ellos emitir mensajes mediante casquillos que serán recibidos en el servidor y harán Arduino basada en ellos.
En el otro archivo, que te nombre 'temperature_canvas_sketch' nos mostrará los datos que recibimos del sensor de temperatura con la ayuda de p5.js, una gran librería JS basada en procesamiento de lang. Así que en nuestro fichero temperature_canvas_sketch.js vamos a agregar esto:
Este se encargará de dibujar un gráfico con los datos que enviamos, es en este caso para mostrar la temperatura en nuestro hogar.
Pero ahora tenemos sockets en el cliente y no en el servidor, necesitamos volver y que funcione correctamente, así que ir agregar.
