Hackeo de hardware con JavaScript

 

 

 

Sobre los autores


Índice
  1. Empezando
    1. Los fundamentos de la electricidad y los circuitos.
  2. Hola Mundo
    1. El hardware
    2. El software
  3. Monitoreo del hogar
    1. El hardware
    2. Servidores y enchufes
    3. La interfaz
  4. Conclusión
    1. Recursos

James Miller es un líder técnico independiente y tecnólogo creativo al que le encanta jugar con nuevas tecnologías web y construir su propio hardware (...

 

Más sobre James Miller ↬

  • Listas de verificación de diseño de interfaz inteligente
  • Typography Masterclass, with Elliot Jay Stocks
  • En este artículo, James Miller y Mate Marschalko cubren los conceptos básicos sobre cómo comenzar a construir sus propios dispositivos IoT usando JavaScript. Al construir dispositivos de IoT, la tarea generalmente se divide entre dos roles: un ingeniero de hardware crea el dispositivo físico y un desarrollador el ecosistema. Sin embargo, esto no siempre es necesario. En el caso de JavaScript, su naturaleza isomórfica permite utilizar un lenguaje en múltiples plataformas, incluido el hardware. Si bien la perspectiva de construir su propio hardware puede ser desalentadora, con suerte, después de trabajar con estos dos ejemplos, ya estará pensando en las posibilidades y planificando su próximo proyecto. Muchos componentes son compatibles con la biblioteca Johnny-Five, lo que significa que el único límite es tu imaginación.

    El Internet de las cosas (IoT) ha permitido que Internet vaya más allá del navegador. Compuestas por dispositivos conectados electrónicamente en red, estas "cosas" pueden interactuar con el mundo físico a través de sensores que alimentan los datos que capturan en sus ecosistemas.

    Actualmente, estos dispositivos son en su mayoría productos diseñados con un propósito específico en mente, un ejemplo típico es una pulsera de fitness que rastrea la actividad. Informa la información recopilada a una aplicación, que luego puede analizar los datos y ofrecer sugerencias y motivación para impulsar al usuario a llegar más lejos.

     

    Al construir dispositivos de IoT, la tarea generalmente se divide entre dos roles: un ingeniero de hardware crea el dispositivo físico y un desarrollador el ecosistema. Sin embargo, esto no siempre es necesario. En el caso de JavaScript, su naturaleza isomórfica permite utilizar un lenguaje en múltiples plataformas, incluido el hardware.

    Este es George, la planta parlante, una incorporación (bastante gruñona) al Internet de las cosas. Sus sensores recopilan datos sobre su entorno, incluido el nivel de humedad del suelo, la temperatura ambiente y la intensidad de la luz. Con su cara LED de 8 × 8, puede visualizar su disgusto y, utilizando la API Web Speech de HTML5, responder sarcásticamente a sus preguntas mundanas. George es un gran ejemplo de cómo es posible utilizar tecnologías web, fusionadas con hardware, para ofrecer experiencias nuevas y atractivas.

    Este artículo cubre los conceptos básicos sobre cómo comenzar a construir sus propios dispositivos IoT usando JavaScript .

    Empezando

    Construir prototipos de hardware y dispositivos conectados a Internet ha sido tradicionalmente algo que sólo los ingenieros eléctricos habrían intentado. Esto cambió con la aparición de placas de desarrollo como Arduino UNO, Particle (antes Spark Core) y Raspberry Pi.

    Las placas de desarrollo imitan la placa base de una computadora. Disponen de tomas de entrada y salida, como USB y alimentación, además de tableros de pines que permiten añadir componentes externos. Un chip microcontrolador actúa como procesador, ejecuta el código de la aplicación y se comunica con las entradas y salidas. Este chip es relativamente lento y está diseñado específicamente para realizar tareas simples como leer datos de sensores. Sin embargo, también tiene la capacidad de conmutar, lo que permite cambiar la fuente de alimentación de luces, motores y muchos más componentes.

    El movimiento maker ha ido ganando terreno en los últimos años y la construcción de dispositivos IoT se ha convertido en un gran negocio. Esto ha ampliado el mercado de placas de desarrollo y ahora se ofrece una amplia gama, cada una con sus propias características. La competencia ha hecho que muchos se centren en puntos de venta únicos, como la comunicación inalámbrica (con chips Wi-Fi y Bluetooth), el tamaño y la duración de la batería. Al diseñar sus propios dispositivos, deberá considerar qué atributos físicos necesita . Asimismo, el software también influirá en la decisión, como el lenguaje de programación que puedes ejecutar en la placa. Investiga a fondo y elige la placa que mejor se adapta a tus necesidades.

    En los ejemplos que se muestran aquí, utilizamos Arduino UNO. Esta placa de desarrollo en particular es probablemente la más popular del mercado porque es muy fácil de usar. Si recién estás comenzando, te recomendamos comprar un kit de inicio, algo similar a lo que ofrece Arduino . Vendrá con componentes compatibles para la placa de desarrollo que elija y, por lo general, mucha documentación para ayudarle a comenzar.

     

    Los fundamentos de la electricidad y los circuitos.

    Como sugiere el nombre, un circuito electrónico es circular. Los electrones fluyen desde el extremo positivo de la fuente de energía (por ejemplo, una batería) alrededor del circuito hasta el extremo negativo de la misma fuente de energía.

    La forma más sencilla de comprender la física de lo que sucede dentro de un circuito eléctrico es compararlo con un sistema de tanque de agua. El agua en una tubería fluye igual que los electrones en un cable . Estos electrones son los que forman la corriente eléctrica que alimenta los componentes del circuito.

    Así como la cantidad de agua almacenada en el tanque afecta la presión del grifo, cuantos más electrones hay en la fuente de energía, más carga está. Este es el voltaje . Cuanto mayor es el voltaje, más presión eléctrica existe entre los polos negativo y positivo, controlando la velocidad de los electrones alrededor del circuito.

    Al igual que un volumen de agua que fluye a través de una tubería, la corriente de un circuito se refiere a la cantidad de electrones que fluyen a través del cable. Esto es importante al construir un circuito porque deberá asegurarse de que cada componente reciba lo suficiente para realizar su tarea. La corriente se mide en amperios o amperios (A) y puede darnos información sobre la cantidad de electrones utilizados. Por ejemplo, si un motor consume 100 miliamperios (mA) y una batería tiene una capacidad de 1000 miliamperios por hora (mAh), entonces podremos hacer funcionar el motor durante 10 horas con una sola carga.

    Cuando los componentes de un circuito requieren menos corriente para funcionar que la que hay en el circuito, pueden recibir demasiada energía y romperse. En esta situación, es necesario introducir resistencia para evitar que esto suceda. Usando nuestra analogía con el agua, el diámetro de una tubería limitará la cantidad de agua que puede fluir a través de ella, al igual que la resistencia limita el flujo de electrones.

    Las resistencias son los componentes utilizados para reducir la corriente. Varían en la cantidad de resistencia que aplican, como se muestra mediante las bandas de colores en el exterior de la resistencia. Los diferentes colores representan diferentes números, y la suma de estas bandas revelará la resistencia de esa resistencia en particular. (¡ Hay calculadoras disponibles !) Cuanto mayor sea el valor, más resistencia se aplica al circuito y es menos probable que cause daños a su componente. Usando la ley de Ohm (la resistencia es igual al voltaje dividido por la corriente (o R = V / I)), puedes calcular la resistencia exacta necesaria en un circuito.

    Hola Mundo

    Una vez cubiertos los conceptos básicos, podemos ver un ejemplo sencillo para visualizar cómo encaja todo. Realizaremos el “Hola Mundo” del desarrollo de hardware: hacer que un LED parpadee.

    Como se mencionó, puede utilizar cualquiera de las múltiples placas de desarrollo. En este ejemplo, usaremos Arduino UNO. También usaremos una Mac con Mac OS X, pero todos los ejemplos también deberían ejecutarse en Windows.

     

    El hardware

    Necesitará:

    • 1 × Arduino UNO
    • 1 × placa de pruebas sin soldadura
    • 1 × LED estándar
    • Resistencia de 1 × 220 ohmios
    • 2 × cables de puente

    Esto incluye algunos componentes que aún no se han mencionado:

    • Los cables de puente se utilizan para dirigir el flujo de electrones , tal como se utiliza cualquier cable en un circuito.
    • LED es la abreviatura de diodo emisor de luz , que es esencialmente una pequeña bombilla . Tiene una pata larga y otra corta. El tramo más largo significa por dónde debe entrar el flujo positivo del circuito y el tramo más corto, la salida negativa. Si los hace al revés, el LED no se encenderá.
    • Una placa de pruebas sin soldadura (el bloque blanco con agujeros) es una herramienta de creación de prototipos que permite la creación de circuitos sin necesidad de soldar, permitiendo cambiar y corregir fácilmente un circuito , así como reutilizar componentes. Estos vienen en muchas formas y tamaños diferentes, pero todos desempeñan la misma función.

    La siguiente imagen muestra el flujo de corriente. Se pueden utilizar componentes para unir secciones, como lo hacen el LED y la resistencia en el siguiente ejemplo. En placas de pruebas más grandes, las líneas verticales exteriores se usan comúnmente para conectar los cables de puente positivo y negativo para separar el circuito que está diseñando.

    Inserte sus componentes como se detalla en el siguiente esquema: haciendo coincidir pin por pin. Esto facilitará las cosas al continuar en la siguiente sección.

    Para iniciar el circuito, conecte un cable de puente desde el pin 10 del Arduino. Este es el punto en el que Arduino comienza a comunicarse con el circuito. Puedes usar cualquier pin numerado del lado derecho del Arduino; solo asegúrate de que tu código haga referencia al correcto.

    Para asegurarse de que fluya la cantidad ideal de corriente a través del LED, se necesita la resistencia. A diferencia del LED, no importa de qué manera se inserte en el circuito.

    Si el pin 10 permite el paso de corriente o no (controlado por su código) determinará si el LED está encendido o apagado.

    Luego, otro cable de puente se conecta al lado negativo del LED y regresa a tierra para completar el circuito. ¡Simple!

    Una vez completado, su circuito debería parecerse a la imagen a continuación. Conéctelo a su computadora a través de USB. La siguiente tarea es configurar Arduino para que funcione con JavaScript.

    Antes de escribir cualquier software, debemos asegurarnos de que Arduino tenga el firmware correcto para que funcione con JavaScript. Básicamente, el firmware expone una API para la computadora, de modo que el código pueda interactuar con la placa a través del puerto USB.

    Descargue e instale el entorno de desarrollo integrado (IDE) desde el sitio web de Arduino. Luego abra el IDE, asegurándose de que su Arduino esté conectado mediante USB.

    Antes de ejecutar cualquier cosa, también debes comprobar que tienes el puerto USB correcto. Vaya a "Herramientas" → "Puerto". Los nombres pueden diferir, por lo que una buena regla es elegir un puerto que tenga “tty” y “usb” en su nombre en Mac OS X y “COM” en Windows.

     

    Una vez completado, ahora puede cargar el firmware. Seleccione “Archivo” → “Ejemplos” → “Firmata” → “Firmata estándar”. Una vez hecho esto, seleccione "Archivo" → "Cargar en Mac" (o "Sketch" → "Cargar en Windows").

    ¡Ahora es el momento de escribir algo de JavaScript!

    El software

    Para controlar el LED con JavaScript, necesitaremos usar una biblioteca creada para Node.js llamada Johnny-Five . Básicamente, es una biblioteca creada por el equipo de Bocoup para hacer que la construcción de hardware sea más accesible para la comunidad web. Si no sabe qué es Node.js o cómo usarlo, Elliot Bonneville tiene una excelente introducción en este mismo sitio web .

    Debido a que el núcleo de nuestro ejemplo utiliza un Arduino, esta biblioteca permite que nuestra máquina se conecte al hardware a través del puerto USB.

    Para comenzar, necesitarás tener instalado Node.js. Si no es así, puede descargarlo desde el sitio web de Node.js. Esto también instalará Node Package Manager (npm), que usaremos para instalar todas las dependencias de la aplicación. El ejemplo se ejecuta en una Mac, utilizando Terminal como herramienta de línea de comandos; sin embargo, debido a que Node.js es multiplataforma, puede funcionar en cualquier máquina.

    Todo el código que aparece en este artículo está disponible en GitHub .

    Para instalar todas las dependencias necesarias para este proyecto, deberá crear un package.jsonarchivo, que puede obtenerse del siguiente código. Esta es una lista de compras de las bibliotecas necesarias para ejecutar el ejemplo. Cuando installse inicializa el comando, npm saldrá y obtendrá todos los ingredientes necesarios para que todo se ejecute. Este archivo debe estar en su carpeta raíz.

    { "name": "Hardware-Hacking-with-JavaScript", "description": "Smashing Magazine - Hardware Hacking with JavaScript", "version": "0.0.1", "homepage": "https://www.james-miller.co.uk/", "keywords": ["arduino","tutorial","hardware"], "author": { "name":"James Miller Mate Marschalko" }, "repository": { "type": "git", "url": "git://github.com/jimhunty/Hardware-Hacking-with-JavaScript.git" }, "bugs": "https://github.com/jimhunty/Hardware-Hacking-with-JavaScript/issues", "license": "MIT", "dependencies": { "johnny-five": "^0.9.13" }}

    En su herramienta de línea de comandos, asegúrese de estar en la misma carpeta que creó para este ejemplo con el package.jsonarchivo; entonces corre npm install. Si no tiene los permisos para instalar estos paquetes, utilícelos sudo npm installen su lugar.

    Ahora, necesita crear el código de la aplicación para ejecutar nuestro ejemplo. Hemos nombrado este archivo blink-led.js. Los comentarios detallan lo que está pasando. Blog quiniela

    // Johnny-Five is our JavaScript framework for accessing Arduino.var jfive = require("johnny-five");var board, led;board = new jfive.Board();// Similar to jQuery, we wait for the board to be ready.board.on("ready", function() { // 10 represents the pin number that the LED is plugged into. led = new jfive.Led(10) // The LED blinks (i.e. turns on and off) every 1000 milliseconds. led.blink(1000);});

    Primero, se cargan las bibliotecas, luego se inicializan las variables. Se crea una nueva Boardinstancia utilizando el constructor y la on readyfunción calentará el tablero y lo preparará para recibir instrucciones. Debido a que conectó el cable de puente que se conecta al LED en el pin 10, es necesario definirlo en la ledvariable. Luego, el blinkmétodo se utiliza para encender y apagar la luz, en fases de 1 segundo.

     

    Ahora tienes todo lo que necesitas para comenzar este espectáculo de luces: ¡sube el volumen de la música! Asegúrese de que su Arduino esté enchufado y que el circuito esté configurado. En la línea de comando, ejecute node blink-led.js, reemplazando el nombre del archivo con el nombre que haya llamado a su código. Ahora deberías tener una luz parpadeante.

    Intente modificar el código para que la luz parpadee más rápido o más lento. Cada vez que lo haga, deberá reiniciar su código en la Terminal. Quizás quieras intentarlo led.pulse(); esto hará que el LED aparezca y se apague, en lugar de simplemente cambiar sin transición.

    Monitoreo del hogar

    ¡Ya has aprendido mucho! Ahora puede poner en práctica este conocimiento y crear un sistema sencillo de vigilancia del hogar , similar a productos comerciales como Nest y Hive.

    Esta vez, utilizarás un sensor de temperatura, conectado al Arduino desde el servidor Node.js. El sensor leerá la temperatura y la introducirá en un navegador que mostrará los datos en una página web sencilla.

    El hardware

    Necesitará:

    • 1 × Arduino UNO
    • 1 × placa de pruebas sin soldadura
    • 1 × sensor de temperatura TMP36
    • 3 × cables de puente

    El sensor de temperatura elegido para este ejemplo está disponible en la mayoría de los kits de inicio y es increíblemente económico comprarlo individualmente.

    Con el ejemplo anterior de parpadeo del LED, configura la conexión entre el servidor Node.js que se ejecuta en la computadora y Arduino. Esta conexión también se puede utilizar para leer datos de sensores conectados al Arduino.

    Arriba está el circuito completo. Intenta hacer coincidir este pin con pin.

    Tenga cuidado al manipular el sensor de temperatura porque es fácil que se mezclen las piernas. El lado plano del componente es el frente y debe mirar hacia usted mientras conecta el sensor. Debido a que cada una de las tres patas tiene un propósito diferente, cablearlas incorrectamente significará que su circuito no funcionará.

    Los pines de entrada analógica son los cinco pines alineados a lo largo del lado izquierdo de la placa. El Arduino tiene pines tanto analógicos como digitales, tanto de entrada como de salida. Digital significa que solo hay dos estados: encendido y apagado (o señal eléctrica y sin señal eléctrica) y son excelentes para botones y otros interruptores binarios que interpretan solo dos estados. La entrada analógica, por otro lado, puede representar un rango de valores , y los pines de entrada analógica del Arduino pueden medir cualquier voltaje entre 0 y 5 voltios (y producir un valor de 10 bits de esa lectura). La lectura de temperatura del sensor se devolverá en una medición de resistencia variable que es proporcional a la temperatura del aire.

     

    Conecte el pin de señal en el centro del sensor a la entrada analógica A0. Conecte el pin izquierdo al pin de 5 V (positivo) y el pin derecho a tierra (negativo) para completar el circuito.

    Su circuito ahora debería parecerse a la imagen de arriba. A continuación, debe crear un nuevo archivo para leer el sensor de temperatura. Este archivo comenzará de la misma manera que en el ejemplo anterior, cargando la biblioteca Johnny-Five, inicializando una nueva instancia de placa y luego agregando un on readydetector de eventos.

    var jfive = require("johnny-five");board = new jfive.Board();board.on("ready", function() { // We create a new sensor instance and define the sensor type and the pin it’s connected to. var tempSensor = new jfive.Thermometer({ controller: "TMP36", pin: "A0" }); // We add an event listener to the sensor and handle the incoming data. tempSensor.on("data", function() { // The data object also has a fahrenheit property, if that’s what we are after. console.log(this.celsius + "°C"); }); });

    Guarde este fragmento de código como temperature.jsy ejecútelo desde la consola escribiendo node temperature.js.

    Debido a console.logque se usó en el código, las lecturas se enviarán a la Terminal para su depuración.

    Servidores y enchufes

    Ahora tiene un termómetro funcionando ejecutándose en Node.js. Este simple ejemplo por sí solo abre toda una gama de posibilidades si considera todos los diferentes módulos de Node.js disponibles para procesar y usar estos datos. Puede guardar esto en una hoja de cálculo de Google, twittear o escribir sobre ello, o incluso transmitir estos datos al navegador en tiempo real con WebSockets, ¡que es lo que hará a continuación!

    Para establecer la conexión con el navegador y transmitir los datos del sensor, necesitaremos iniciar un servidor HTTP Node.js para entregar nuestro documento HTML y luego abrir la conexión WebSocket entre ellos. Iniciar un servidor web en Node.js es relativamente sencillo con la biblioteca Express . Primero, instálalo desde la Terminal:

    npm install --save express

    Una vez instalado, estas líneas de código crearán una instancia del servidor:

    // Load libraries and then initialize the server.var app = require('express')();var http = require('http').Server(app);// When the user requests the root of the page (/), we respond with index.html.app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});// We listen for connections on port 3000.http.listen(3000, function(){ console.log('listening on *:3000');});

    Guarde esto como un server.jsarchivo.

    En este código de servidor, las dos primeras líneas cargan las bibliotecas necesarias y crean una instancia de servidor HTTP. A continuación, una lógica de enrutamiento simple entrega el index.htmlarchivo desde la carpeta del proyecto cuando el usuario solicita la raíz ( /). Finalmente, el puerto 3000escucha las conexiones.

    Para probar esto, cree un index.htmlarchivo estándar en la raíz de la carpeta del proyecto. En la línea de comando, navegue hasta la carpeta de su proyecto y escriba node server.js. Si luego escribe https://localhost:3000la dirección IP de su máquina y el puerto (por ejemplo, https://190.140.0.00:3000) en un navegador, debería ver su index.htmlpágina estándar. Esto significa que su servidor está todo configurado.

     

    ¡Esto fue definitivamente más fácil que configurar un servidor Apache!

    Antes de fusionar este fragmento de código con el temperature.jsarchivo, configuraremos la conexión WebSocket.

    Un WebSocket permite abrir una sesión de comunicación entre el navegador y el servidor. Con esta API, puede enviar mensajes bidireccionales en tiempo real y recibir respuestas basadas en eventos sin tener que realizar una encuesta para obtener una respuesta. Socket.IO es el módulo Node.js que utilizará para establecer y manejar esta conexión. Instale Socket.IO tal como instaló Express y Johnny-Five:

    npm install --save socket.io

    ¿Observa cómo su package.jsonarchivo ahora se actualiza con Express y Socket.IO bajo dependencias? Esto significa que quien desee ejecutar su aplicación desde su máquina puede simplemente ejecutarla npm instally todas las dependencias del módulo que cargó se instalarán a la vez. ¡Lindo! Ahora puede agregar la funcionalidad WebSocket al server.jscódigo de trabajo. A continuación se muestra el ejemplo completo:

    var app = require('express')();var http = require('http').Server(app);// Load the Socket.IO library.var io = require('socket.io')(http);app.get('/', function(req, res){ res.sendfile('index.html');});// Establish the WebSocket connection with the browser.io.on('connection', function(socket){ console.log('a user connected');});http.listen(3000, function(){ console.log('listening on *:3000');});

    Primero, se carga Socket.IO y luego on connectionse crea un detector de eventos. Esto se activará cuando un usuario cargue el index.htmlarchivo.

    En la index.htmlpágina, es necesario inicializar la biblioteca del lado del cliente Socket.IO para poder comunicarse con el servidor. Para preparar su archivo HTML para esto, agregue el siguiente fragmento de código justo antes de la bodyetiqueta de cierre:

    script src="https://cdn.socket.io/socket.io-1.2.0.js"/scriptscript var socket = io();/script

    La conexión ahora debería estar configurada y debería ver el mensaje "Un usuario se ha conectado" en la línea de comando al cargar la página de índice a través del enlace localhost.

    Ahora puedes enviar mensajes al navegador desde el servidor con la socket.emit()función. Puedes hacer esto reemplazando la función anterior en server.js:

    io.on('connection', function(socket){ console.log('a user connected'); socket.emit('Server message', “Hello from the server!”);});

    Así es como debes modificar index.htmlpara recibir el mensaje:

    script src="https://cdn.socket.io/socket.io-1.2.0.js"/scriptscript var socket = io(); socket.on('Server message’, function (message) { console.log(message); });/script

    Si ha hecho todo correctamente, debería ver el mensaje "¡Hola desde el servidor!" mensaje en la consola de su navegador. ¡Felicidades! ¡Esto significa que ha configurado una conexión WebSocket en tiempo real entre un servidor HTTP Node.js y un navegador!

     

    Esto es realmente muy útil, y no sólo para este proyecto. Se puede utilizar una conexión WebSocket para comunicarse entre múltiples navegadores para crear aplicaciones de chat, juegos multijugador y mucho más.

    Ahora es el momento de fusionar el temperature.jsarchivo, que maneja la comunicación con Arduino, con nuestro nuevo código de servidor WebSocket, que es responsable de conectarse al navegador.

    Esto requiere extender server.js:

    var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);var jfive = require("johnny-five");var board = new jfive.Board();var board, socket, connected = false;app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html');});io.on('connection', function(s){ console.log('A user has connected'); // Tracking connection connected = true; // Saving this for the board on ready callback function socket = s;});board.on("ready", function() { console.log('board has connected'); var tempSensor = new jfive.Thermometer({ controller: "TMP36", pin: "A0" }); tempSensor.on("data", function() { // We send the temperature when the browser is connected. if(connected) socket.emit('Temperature reading', this.celsius); }); });http.listen(3000, function(){ console.log('listening on *:3000');});

    Aquí, simplemente ha copiado temperature.jsla línea que carga Johnny-Five e inicializa la placa, así como toda la board on readyfunción.

    También agregó dos nuevas variables: una para realizar un seguimiento de las conexiones WebSocket y otra para almacenar la instancia del socket para que otras funciones sean accesibles (en este caso, para la board on readyfunción que la usa para enviar y recibir mensajes).

    Ahora, el index.htmlarchivo debe actualizarse para manejar los datos que llegan a través de la conexión del socket Temperature reading. El siguiente código debe agregarse al documento HTML dentro de los elementos del script donde Server messageexistía anteriormente el controlador.

    socket.on('Temperature reading', function (message) {console.log(message);});

    La interfaz

    Lo último que debe hacer es agregar algunas líneas de HTML y CSS para index.htmlmostrar la lectura de temperatura de una manera fácil de usar. También actualizarás el color de fondo, haciéndolo cambiar entre azul (frío) y naranja (caliente), según la temperatura. El HTML es muy simple: sólo un h1elemento para contener el número.

    Es necesario agregar lo siguiente al body.

    h10ºC/h1

    Un tipo de letra grande y delgado debería funcionar muy bien con los números; prueba Lato, una fuente gratuita de la biblioteca de Google Fonts. Cargue esto en la headsección del documento:

    link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'

    El estilo es mínimo en este ejemplo. El único problema es la forma en que temperaturese carga la etiqueta. Toma el nombre de la clase con la contentpropiedad CSS y lo agrega al :beforepseudoelemento.

    body { background-color: hsl(0, 60%, 65%); transition: background-color 1s;}h1 { font-family: 'Lato', sans-serif; font-size: 120px; font-weight: 100; color: white; text-align: center; margin: 60px;}h1:before{ content: attr(class) ":"; font-size: 22px; position: relative; top: -69px; left: 0; text-transform: uppercase;}

    ¡Esto ya se ve bonito!

    Para finalizar, agregue unas líneas de JavaScript para actualizar los valores al recibir el mensaje WebSocket y cambiar el color de fondo.

    script src="https://cdn.socket.io/socket.io-1.2.0.js"/scriptscript var socket = io(), temperature = document.querySelector(".temperature"); socket.on('Temperature reading', function(message) { // Rounding down the decimal values and adding ºC temperature.innerHTML = parseInt(message) + "ºC"; // Calculating the hue for the background color and changing it var hue = 200 - (parseInt(message) * 5); document.body.style.backgroundColor = "hsl(" + hue + ", 60%, 65%)"; });/script

    ¡Ya terminaste! Las lecturas de temperatura de Arduino ahora se mostrarán en tiempo real en el navegador.

    Conclusión

    Si bien la perspectiva de construir su propio hardware puede ser desalentadora, es de esperar que, después de trabajar con estos dos ejemplos, ya esté pensando en las posibilidades y planificando su próximo proyecto. Muchos componentes son compatibles con la biblioteca Johnny-Five, lo que significa que el único límite es tu imaginación.

    Recursos

    Hackeo de hardware con JavaScript

    Hackeo de hardware con JavaScript

    Sobre los autores Índice Empezando Lo

    programar

    es

    https://pseint.es/static/images/programar-hackeo-de-hardware-con-javascript-885-0.jpg

    2024-04-04

     

    Hackeo de hardware con JavaScript
    Hackeo de hardware con JavaScript

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20