Hacking de hardware com JavaScript
Publicados: 2022-03-10A Internet das Coisas (IoT) permitiu que a Internet alcançasse além do navegador. Compostas por dispositivos em rede eletronicamente, essas “coisas” são capazes de interagir com o mundo físico por meio de sensores que alimentam os dados que capturam de volta em seus ecossistemas.
Atualmente, esses dispositivos são principalmente produtos, projetados com um propósito específico em mente, um exemplo típico é uma banda de fitness que rastreia a atividade. Ele relata as informações coletadas para um aplicativo, que é capaz de analisar os dados e oferecer sugestões e motivação para impulsionar o usuário ainda mais.
Leitura adicional no SmashingMag:
- Escolhendo a ferramenta de prototipagem certa
- Como prototipar experiências de IoT: construindo o hardware
- Protótipos de experiências de IoT: configurando o software
- Prototipagem iOS com TAP e Adobe Fireworks
Ao construir dispositivos IoT, a tarefa normalmente é dividida entre duas funções: um engenheiro de hardware cria o dispositivo físico e um desenvolvedor o ecossistema. No entanto, isso nem sempre é necessário. No caso do JavaScript, sua natureza isomórfica permite que uma linguagem seja usada em várias plataformas – incluindo hardware.
Este é George, a planta falante, uma adição (bastante mal-humorada) à Internet das Coisas. Seus sensores coletam dados ao seu redor, incluindo o nível de umidade do solo, temperatura ambiente e intensidade da luz. Com seu rosto de LED 8 × 8, ele é capaz de visualizar seu descontentamento e, usando a API Web Speech do HTML5, responder sarcasticamente às suas perguntas mundanas. George é um ótimo exemplo de como é possível usar tecnologias da Web, combinadas com hardware, para oferecer experiências novas e envolventes.
Este artigo aborda os conceitos básicos de como começar a criar seus próprios dispositivos IoT usando JavaScript .
Começando
Construir protótipos de hardware e dispositivos conectados à Internet tem sido tradicionalmente algo que apenas engenheiros elétricos teriam tentado. Isso mudou com o aparecimento de placas de desenvolvimento como Arduino UNO, Particle (anteriormente Spark Core) e Raspberry Pi.
Placas de desenvolvimento imitam uma placa-mãe em um computador. Eles possuem soquetes de entrada e saída, como USB e alimentação, além de placas de pinos que permitem adicionar componentes externos. Um chip microcontrolador atua como processador, executando o código do aplicativo e se comunicando com as entradas e saídas. Este chip é relativamente lento, projetado especificamente para executar tarefas simples, como ler dados do sensor. No entanto, também tem a capacidade de comutação, tornando possível alterar a fonte de alimentação de luzes, motores e muitos outros componentes.
![Placas de desenvolvimento de protótipos Prototype development boards](/uploads/article/1286/pDax2pAvt4twAZbc.jpg)
O movimento maker vem ganhando força nos últimos anos, e a construção de dispositivos IoT se tornou um grande negócio. Isso expandiu o mercado de placas de desenvolvimento, e agora há uma ampla variedade em oferta, cada uma com suas próprias características. A concorrência fez com que muitos se concentrassem em pontos de venda exclusivos, como comunicação sem fio (com chips Wi-Fi e Bluetooth), tamanho e duração da bateria. Ao arquitetar seus próprios dispositivos, você precisará considerar quais atributos físicos são necessários . Da mesma forma, o software também influenciará na decisão, como a linguagem de programação que você pode executar na placa. Pesquise bem e escolha a prancha que melhor se adapta às suas necessidades.
Nos exemplos apresentados aqui, estamos usando o Arduino UNO. Esta placa de desenvolvimento em particular é provavelmente a mais popular no mercado porque é muito fácil de usar. Se você está apenas começando, recomendamos comprar um kit inicial, algo na linha do que é oferecido pelo Arduino. Ele virá com componentes compatíveis para a placa de desenvolvimento escolhida e geralmente muita documentação para ajudá-lo a começar.
Noções básicas de eletricidade e circuitos
Como o nome sugere, um circuito eletrônico é circular. Os elétrons fluem da extremidade positiva da fonte de alimentação (por exemplo, uma bateria) ao redor do circuito para a extremidade negativa da mesma fonte de alimentação.
A maneira mais fácil de entender a física do que está acontecendo dentro de um circuito elétrico é compará-lo a um sistema de tanque de água. A água em um cano flui exatamente como os elétrons em um fio . Esses elétrons são o que formam a corrente elétrica que alimenta os componentes do circuito.
![Sistema de tanque de água. Water tank system.](/uploads/article/1286/6aMrRPjZHmXXxoKT.png)
Assim como a quantidade de água armazenada no tanque afeta a pressão na torneira, quanto mais elétrons houver na fonte de energia, mais ela será carregada. Esta é a voltagem . Quanto maior a tensão, mais pressão elétrica existe entre os pólos negativo e positivo, controlando a velocidade dos elétrons ao redor do circuito.
Assim como um volume de água fluindo através de um cano, a corrente de um circuito refere-se ao número de elétrons que flui através do fio. Isso é importante ao construir um circuito porque você precisa ter certeza de que cada componente está recebendo o suficiente para realizar sua tarefa. A corrente é medida em amperes, ou amperes (A), e pode nos dar informações sobre a quantidade de elétrons usados. Por exemplo, se um motor consome 100 miliamperes (mA) e uma bateria tem capacidade de 1.000 miliamperes por hora (mAh), podemos fazer o motor funcionar por 10 horas com uma única carga.
![LED aceso. LED alight.](/uploads/article/1286/icNOvXZXvskdZXn1.jpg)
Quando os componentes de um circuito requerem menos corrente para funcionar do que existe no circuito, eles podem receber muita energia e quebrar. Nessa situação, a resistência precisa ser introduzida para evitar que isso aconteça. Usando nossa analogia da água, o diâmetro de um cano limitará a quantidade de água que pode fluir através dele, assim como a resistência limita o fluxo de elétrons.
Os resistores são os componentes usados para reduzir a corrente. Eles variam na quantidade de resistência que aplicam, mostradas pelas faixas coloridas na parte externa do resistor. As cores diferentes representam números diferentes, e somar essas bandas revelará a resistência desse resistor em particular. (Calculadoras estão disponíveis!) Quanto maior o valor, mais resistência é aplicada ao circuito e menor a probabilidade de você causar danos ao seu componente. Usando a lei de Ohm - resistência é igual a tensão dividida pela corrente (ou R = V / I
) - você pode calcular o resistor exato necessário em um circuito.
Olá Mundo
Com o básico coberto, podemos ver um exemplo simples para visualizar como tudo se encaixa. Estaremos realizando o “Hello World” de desenvolvimento de hardware: fazendo um LED piscar.
Como mencionado, você pode usar qualquer uma das várias placas de desenvolvimento. Neste exemplo, usaremos o Arduino UNO. Também usaremos um Mac executando o Mac OS X, mas todos os exemplos também devem ser executados no Windows.
O Hardware
Você vai precisar de:
- 1 × Arduino UNO
- 1 × placa de ensaio sem solda
- 1 × LED padrão
- 1 × resistor de 220 Ohm
- 2 × cabos de ligação
![componentes Hello World Hello World components](/uploads/article/1286/kCO9lbGIgaV9Vt9E.jpg)
Isso inclui alguns componentes que ainda não foram mencionados:
- Cabos jumper são usados para direcionar o fluxo de elétrons , assim como qualquer fio é usado em um circuito.
- LED é a abreviação de diodo emissor de luz, que é essencialmente uma pequena lâmpada . Tem uma perna longa e uma perna curta. A perna mais longa significa onde o fluxo positivo do circuito deve entrar e a perna mais curta a saída negativa. Se você fizer isso ao contrário, o LED não acenderá.
- Uma breadboard sem solda (o bloco branco com furos) é uma ferramenta de prototipagem que permite a criação de circuitos sem a necessidade de solda, possibilitando a fácil alteração e correção de um circuito , bem como a reutilização de componentes. Estes vêm em muitas formas e tamanhos diferentes, mas todos desempenham o mesmo papel.
A imagem abaixo mostra o fluxo de corrente. Os componentes podem ser usados para conectar as seções, como o LED e o resistor fazem no exemplo a seguir. Em protoboards maiores, as linhas verticais externas são comumente usadas para conectar os cabos de jumper positivo e negativo para separar o circuito que você está projetando.
![Protoboard sem solda Solderless breadboard](/uploads/article/1286/ufdwYQyb6W4AgyRY.png)
Insira seus componentes conforme detalhado no esquema abaixo – pino a pino correspondente. Isso facilitará as coisas ao continuar na próxima seção.
![Esquema de LED piscando Blinking LED schematic](/uploads/article/1286/x5SwBcd7ksb3Bo49.png)
Para iniciar o circuito, conecte um fio jumper do pino 10 no Arduino. Este é o ponto em que o Arduino começa a falar com o circuito. Você pode usar qualquer pino numerado do lado direito do Arduino - apenas certifique-se de que seu código se refira ao correto.
Para garantir que a quantidade ideal de corrente flua através do LED, o resistor é necessário. Ao contrário do LED, não importa de que maneira ele é inserido no circuito.
Se o pino 10 está permitindo a passagem de corrente ou não (controlado pelo seu código) determinará se o LED está ligado ou desligado.
Outro fio jumper se conecta ao lado negativo do LED e retorna ao terra para completar o circuito. Simples!
Depois de concluído, seu circuito deve se parecer com a imagem abaixo. Conecte-o ao seu computador via USB. A próxima tarefa é configurar o Arduino para trabalhar com JavaScript.
![Circuito Hello World na vida real Hello World circuit in real life](/uploads/article/1286/rJffGFBE3zrmt7om.jpg)
Antes de escrever qualquer software, precisamos ter certeza de que o Arduino possui o firmware correto para que funcione com JavaScript. O firmware expõe essencialmente uma API para o computador, para que o código possa interagir com a placa através da porta USB.
Baixe e instale o ambiente de desenvolvimento integrado (IDE) do site do Arduino. Em seguida, abra o IDE, garantindo que seu Arduino esteja conectado via USB.
Antes de executar qualquer coisa, você também precisa verificar se possui a porta USB correta. Vá para “Ferramentas” → “Porta”. Os nomes podem diferir, então uma boa regra é escolher uma porta que tenha “tty” e “usb” em seu nome no Mac OS X e “COM” no Windows.
Depois de concluído, agora você pode fazer o upload do firmware. Selecione “Arquivo” → “Exemplos” → “Firmata” → “Firmata padrão”. Uma vez feito isso, selecione “Arquivo” → “Carregar no Mac” (ou “Esboço” → “Carregar no Windows”).
![Captura de tela da IDE do Arduino Arduino IDE screenshot](/uploads/article/1286/ESrpiNGsvdZ2NtQ1.png)
Agora é hora de escrever algum JavaScript!
O software
Para controlar o LED com JavaScript, precisaremos usar uma biblioteca criada para Node.js chamada Johnny-Five. Basicamente, é uma biblioteca construída pela equipe do Bocoup para tornar a construção de hardware mais acessível à comunidade da web. Se você não sabe o que é o Node.js ou como usá-lo, Elliot Bonneville tem uma ótima introdução neste mesmo site.
Como o núcleo do nosso exemplo usa um Arduino, essa biblioteca permite que nossa máquina se conecte ao hardware através da porta USB.
Para começar, você precisará ter o Node.js instalado. Se não for, você pode baixá-lo do site Node.js. Isso também instalará o Node Package Manager (npm), que usaremos para instalar todas as dependências do aplicativo. O exemplo é executado em um Mac, usando o Terminal como ferramenta de linha de comando; no entanto, como o Node.js é multiplataforma, isso pode funcionar em qualquer máquina.
Todo o código apresentado neste artigo está disponível no GitHub.
Para instalar todas as dependências necessárias para este projeto, você precisará criar um arquivo package.json
, que pode ser obtido a partir do código abaixo. Esta é uma lista de compras das bibliotecas necessárias para executar o exemplo. Quando o comando de install
for inicializado, o npm sairá e obterá todos os ingredientes necessários para que tudo funcione. Este arquivo deve estar em sua pasta raiz.
{ "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" } }
Em sua ferramenta de linha de comando, certifique-se de estar na mesma pasta que criou para este exemplo com o arquivo package.json
; em seguida, execute npm install
. Se você não tiver permissões para instalar esses pacotes, use sudo npm install
.
Agora, você precisa criar o código do aplicativo para executar nosso exemplo. Chamamos esse arquivo blink-led.js
. Os comentários detalham o que está acontecendo.
// 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 (ie turns on and off) every 1000 milliseconds. led.blink(1000); });
Primeiro, as bibliotecas são carregadas, depois as variáveis são inicializadas. Uma nova instância Board
é criada usando o construtor, e a função on ready
deixará a placa aquecida e pronta para receber instruções. Como você conectou o cabo jumper que se conecta ao LED no pino 10, ele precisa ser definido na variável led
. O método de blink
é então usado para ligar e desligar a luz, em fases de 1 segundo.
![](https://s.stat888.com/img/bg.png)
Agora você tem tudo o que precisa para começar esse show de luzes - aumente a música! Verifique se o seu Arduino está conectado e o circuito está tudo configurado. Na linha de comando, execute node blink-led.js
, substituindo o nome do arquivo pelo que você chamou de código. Agora você deve ter uma luz piscando.
Tente modificar o código para fazer a luz piscar mais rápido ou mais devagar. Cada vez que você fizer isso, você precisará reiniciar seu código no Terminal. Você pode tentar led.pulse()
; isso fará o LED acender e apagar, em vez de apenas alternar sem transição.
Monitoramento Doméstico
Já aprendeu muito! Agora você pode colocar esse conhecimento em prática e construir um sistema simples de monitoramento doméstico , semelhante a produtos comerciais como Nest e Hive.
Desta vez, você usará um sensor de temperatura, conectado ao Arduino a partir do servidor Node.js. A temperatura será lida pelo sensor e alimentada em um navegador que exibirá os dados em uma página web simples.
![Como ficará a interface How the interface will look](/uploads/article/1286/FHnHs9w82ViU1MLd.jpg)
O Hardware
Você vai precisar de:
- 1 × Arduino UNO
- 1 × placa de ensaio sem solda
- 1 × sensor de temperatura TMP36
- 3 × cabos de ligação
O sensor de temperatura escolhido para este exemplo está disponível na maioria dos kits iniciais e é incrivelmente barato para comprar individualmente.
![Componentes do projeto de monitoramento doméstico Home-monitoring project components](/uploads/article/1286/7jZ1cbiQ8PqD1875.jpg)
Com o exemplo anterior de piscada de LED, você configura a conexão entre o servidor Node.js em execução no computador e o Arduino. Essa conexão também pode ser usada para ler dados de sensores conectados ao Arduino.
![Esquema do circuito de monitoramento doméstico Home-monitoring circuit schematic](/uploads/article/1286/7ZFxzQoStzn7QKx5.png)
Acima está o circuito completo. Tente combinar este pino com pino.
Tenha cuidado ao manusear o sensor de temperatura, pois é fácil confundir as pernas. O lado plano do componente é a frente e deve estar voltado para você enquanto você conecta o sensor. Como cada uma das três pernas tem uma finalidade diferente, conectá-las incorretamente significa que seu circuito não funcionará.
Os pinos de entrada analógica são os cinco pinos alinhados ao longo do lado esquerdo da placa. O Arduino possui pinos analógicos e digitais, tanto de entrada quanto de saída. Digital significa que existem apenas dois estados – ligado e desligado (ou sinal elétrico e nenhum sinal elétrico) – e são ótimos para botões e outras chaves binárias que interpretam apenas dois estados. A entrada analógica, por outro lado, pode representar uma faixa de valores , e os pinos de entrada analógica no Arduino podem medir qualquer tensão entre 0 e 5 volts (e produzir um valor de 10 bits dessa leitura). A leitura de temperatura do sensor será retornada em uma medição de resistência variável que é proporcional à temperatura do ar.
Conecte o pino de sinal no meio do sensor à entrada analógica A0. Conecte o pino esquerdo ao pino de 5V (positivo) e o pino direito ao terra (negativo) para completar o circuito.
![Circuito de monitoramento doméstico na vida real Home-monitoring circuit in real life](/uploads/article/1286/G6tu7IR1MQ4GYkhb.jpg)
Seu circuito agora deve se parecer com a imagem acima. Em seguida, você precisa criar um novo arquivo para ler o sensor de temperatura. Este arquivo será iniciado da mesma forma que no exemplo anterior, carregando a biblioteca Johnny-Five, inicializando uma nova instância de placa e adicionando um ouvinte on ready
.
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"); }); });
Salve este trecho de código como temperature.js
e execute-o no console digitando node temperature.js
.
Como console.log
foi usado no código, as leituras serão enviadas ao Terminal para depuração.
![Terminal mostrando dados de temperatura Terminal showing temperature data](/uploads/article/1286/9jmIrpW1KCcnzmYy.png)
Servidores e Soquetes
Agora você tem um termômetro funcionando em execução no Node.js. Este simples exemplo por si só abre toda uma gama de possibilidades se você considerar todos os diferentes módulos Node.js disponíveis para processar e usar esses dados. Você pode salvar isso em uma planilha do Google, twittar ou escrever sobre isso, ou até mesmo transmitir esses dados para o navegador em tempo real com WebSockets - que é o que você fará a seguir!
![Diagrama de fluxo mostrando a movimentação de dados Flow diagram showing data movement](/uploads/article/1286/20j4OheI7AfPeDm2.png)
Para estabelecer a conexão com o navegador e transmitir os dados do sensor, precisaremos iniciar um servidor HTTP Node.js para servir nosso documento HTML e, em seguida, abrir a conexão WebSocket entre eles. Iniciar um servidor web no Node.js é relativamente simples com a biblioteca Express. Primeiro, instale-o a partir do Terminal:
npm install --save express
Uma vez instalado, estas linhas de código instanciarão o 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'); });
Salve isso como um arquivo server.js
.
Nesse código de servidor, as duas primeiras linhas carregam as bibliotecas necessárias e criam uma instância de servidor HTTP. Em seguida, a lógica de roteamento simples serve o arquivo index.html
da pasta do projeto quando o usuário solicita a raiz ( /
). Finalmente, a porta 3000
escuta conexões.
Para testar isso, crie um arquivo index.html
padrão na raiz da pasta do projeto. Na linha de comando, navegue até a pasta do seu projeto e digite node server.js
. Se você digitar https://localhost:3000
ou o endereço IP de sua máquina e a porta (por exemplo, https://190.140.0.00:3000
) em um navegador, deverá ver sua página index.html
padrão. Isso significa que seu servidor está configurado.
Isso foi definitivamente mais fácil do que configurar um servidor Apache!
Antes de mesclar este trecho de código com o arquivo temperature.js
, vamos configurar a conexão WebSocket.
Um WebSocket possibilita abrir uma sessão de comunicação entre o navegador e o servidor. Com essa API, você pode enviar mensagens bidirecionais em tempo real e receber respostas orientadas a eventos sem precisar pesquisar uma resposta. Socket.IO é o módulo Node.js que você usará para estabelecer e manipular essa conexão. Instale o Socket.IO como você instalou o Express e Johnny-Five:
npm install --save socket.io
Observe como seu arquivo package.json
agora é atualizado com Express e Socket.IO sob dependências? Isso significa que quem deseja executar seu aplicativo a partir de sua máquina pode simplesmente executar npm install
, e todas as dependências do módulo que você carregou serão instaladas de uma só vez. Agradável! Agora você pode adicionar a funcionalidade WebSocket ao código server.js
de trabalho. Abaixo segue o exemplo 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'); });
Primeiro, o Socket.IO é carregado e, em seguida, um ouvinte de eventos on connection
é criado. Isso será acionado quando um usuário carregar o arquivo index.html
.
Na página index.html
, a biblioteca do lado do cliente Socket.IO precisa ser inicializada para se comunicar com o servidor. Para preparar seu arquivo HTML para isso, adicione o código abaixo logo antes da tag de fechamento do body
:
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); </script>
A conexão agora deve ser configurada e você deve ver a mensagem “Um usuário se conectou” na linha de comando ao carregar a página de índice por meio do link localhost.
Agora, você pode enviar mensagens para o navegador do servidor com a função socket.emit()
. Você pode fazer isso substituindo a função anterior em server.js
:
io.on('connection', function(socket){ console.log('a user connected'); socket.emit('Server message', “Hello from the server!”); });
É assim que você precisa modificar index.html
para receber a mensagem:
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> var socket = io(); socket.on('Server message', function (message) { console.log(message); }); </script>
Se você fez tudo corretamente, deverá ver a mensagem “Hello from the server!” mensagem no console do seu navegador. Parabéns! Isso significa que você configurou uma conexão WebSocket em tempo real entre um servidor HTTP Node.js e um navegador!
Isso é realmente muito útil, e não apenas para este projeto. Uma conexão WebSocket pode ser usada para se comunicar entre vários navegadores para criar aplicativos de bate-papo, jogos multiplayer e muito mais!
![Captura de tela habilitada para WebSockets WebSockets enabled screenshot](/uploads/article/1286/sxl3KkMXAAXwHHWk.png)
Agora é hora de mesclar o arquivo temperature.js
, que trata da comunicação com o Arduino, com nosso novo código de servidor WebSocket, responsável pela conexão com o navegador.
Isso requer estender 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'); });
Aqui, você simplesmente copiou de temperature.js
a linha que carrega Johnny-Five e inicializa a placa, assim como toda a board on ready
.
Você também adicionou duas novas variáveis: uma para acompanhar as conexões do WebSocket e outra para armazenar a instância do socket para que outras funções fiquem acessíveis — neste caso, para a função board on ready
que a utiliza para enviar e receber mensagens.
Agora, o arquivo index.html
precisa ser atualizado para lidar com os dados que chegam pela conexão do Temperature reading
. O código abaixo precisa ser adicionado ao documento HTML dentro dos elementos de script onde o manipulador de Server message
existia anteriormente.
socket.on('Temperature reading', function (message) { console.log(message); });
A interface
A última coisa a fazer é adicionar algumas linhas de HTML e CSS ao index.html
para exibir a leitura da temperatura de maneira amigável. Você também vai atualizar a cor de fundo, fazendo com que ela mude entre azul (frio) e laranja (quente), de acordo com a temperatura. O HTML é muito simples: apenas um elemento h1
para conter o número.
O seguinte precisa ser adicionado ao body
.
<h1 class="temperature">0C</h1>
Um tipo de letra grande e fino deve funcionar muito bem com os números; experimente a Lato, uma fonte gratuita da biblioteca do Google Fonts. Carregue isso na seção head
do documento:
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
O estilo é mínimo neste exemplo. A única parte complicada é a maneira como o rótulo de temperature
é carregado. Ele pega o nome da classe com a propriedade CSS content
e o adiciona ao pseudo-elemento :before
.
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; }
![Navegador mostrando dados de temperatura Browser showing temperature data](/uploads/article/1286/11MYLc1Ne3Q7UIAQ.png)
Isso já está lindo!
Para finalizar, adicione algumas linhas de JavaScript para atualizar os valores ao receber a mensagem WebSocket e para alterar a cor de fundo.
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script> 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>
Você Terminou! As leituras de temperatura do Arduino agora serão exibidas em tempo real no navegador.
Conclusão
Embora a perspectiva de construir seu próprio hardware possa ser assustadora, esperamos que, depois de trabalhar com esses dois exemplos, você já esteja pensando nas possibilidades e planejando seu próximo projeto. Muitos componentes são compatíveis com a biblioteca Johnny-Five, o que significa que o único limite é a sua imaginação.
Recursos
- “Hardware Hacking com JavaScript”, James Miller e Mate Marschalko, GitHub
Todo o código necessário para este projeto - Johnny-Five, Rick Waldron, GitHub
Uma “estrutura de programação de robótica JavaScript” - Web em Dispositivos, Mate Marschalko
Um site sobre hackers eletrônicos com JavaScript e outras tecnologias da web - Fazer
Uma revista online da Maker Media voltada para os makers, oferecendo novos projetos e dicas - Guia do experimentador do Arduino para Node.js
Mais projetos JavaScript e Arduino com Johnny-Five