Workshop de Domótica #CPBR8

Apresentação usada no workshop ministrado durante a Campus Party Brasil de 2015, no sábado 07/02/15. Os arquivos HTML e Arduino podem ser encontrados acessando www.robocore.net > Forum > Tutoriais > Domótica #CPBR8

Transcript

1. Atenção: Se você ainda não tem o programa Arduino instalado em seu computador, baixe agora de www.arduino.cc Atenção: Para edição das páginas em HTML, CSS e JavaScript, sugerimos baixar o editor Sublime
2. agenda  Domótica e Internet of Things (IoT)  Objetivo do workshop  Modos de usar um Arduino para exibir uma página  Introdução a HTML, CSS & JavaScript  Materiais que serão usados  Lendo sensores com Arduino  Criando sua página web para exibição dos dados  Usando a mesma página dentro do Arduino  Interfaceando Arduino com a página  Introdução ao AJAX  Implementando os botões e finalização
3. Domótica e Internet of Things (IoT)  Domótica automação residencial leitura de sensores atuação em equipamentos  Internet of Things coleta de dados globais solução de problemas! análise de dados
4. Exemplo Clássico - Internet of Things (IoT) ACIDENTE À FRENTE USE DESVIO UTILIZE SEMPRE CINTO DE SEGURANÇA
5. Objetivo do Workshop  Criar uma página web para medição de dois sensores, a qual também servirá para atuação de duas cargas  Iremos fazer o sensoriamento de: - Temperatura (em ºC) - Luminosidade (em %)  Iremos fazer o acionamento de carga através de botões na interface, os quais acionarão dois relés
6. Modos de usar um Arduino para exibir uma página  Existem 3 opções: - Hospedar a página diretamente no código do Arduino - Hospedar a página em um cartão MicroSD - Hospedar a página em um servidor externo Ponto Positivo: não precisa de internet / não precisa de cartão mSD Ponto Negativo: dificuldade de visualização do código / fácil estouro da memória RAM da placa / limitações gerais da placa Ponto Positivo: código HTML / maior independência da memória Ponto Negativo: limitação do cartão (uso de mídia) / velocidade do sistema de comunicação do microSD com Arduino Ponto Positivo: independe do tamanho dos arquivos / processamento independe da placa (maior performance) Ponto Negativo: precisa de conexão com a internet
7. Introdução (rápida) de HTML, CSS & JavaScript  HTML - HyperText Markup Language: - não é linguagem de programação, é uma linguagem de marcação - conjunto de “palavras chave” (TAGs) – Ex.: <span> <a href> ... - seu navegador de internet (browser) interpreta da seguinte forma: <b><i>negrito e itálico</i></b> negrito e itálico  CSS - Cascading Style Sheets: - dá o estilo para nosso site, sem ele todos os sites seriam feios! - querem ver? Browser!
8. Introdução (rápida) de HTML, CSS & JavaScript  JavaScript: - é linguagem de programação - não confundir com Java! - é o que dá funcionalidade para o site - através de eventos, algo acontece no site!  Uso de HTML, CSS & JavaScript no mundo: - 100% das webpages usam HTML ou XHTML - 90% de todas as webpages usam CSS - 89% de todas as webpages usam JavaScript fonte: W3Techs
9. Materiais que serão usados  BlackBoard V1.0  Arduino Shield – Ethernet R3  Cartão de Memória MicroSD  Sensor de Temperatura LM35  Sensor de Luminosidade LDR + Resistor  Módulos Relé  Protoboard para prototipagem  Jumpers para fazer ligações
10. - Conectar o Cabo USB AB na placa e no computador - Aguardar o driver ser instalado (se não for, baixar o driver da FTDI) - Abrir o programa do Arduino - Selecionar a placa Arduino UNO em Tools > Board - Selecionar a porta COM correta em Tools > Serial Port - Passar o example BLINK para a placa, que pode ser encontrado em File > Examples > 01.Basics > Blink Dúvidas? Programando a BlackBoard
11.  Faça a montagem ao lado na protoboard: LDR: pino A0 LM35: pino A1 Lendo os Sensores
12.  Código sugerido para leitura dos sensores: Lendo os Sensores Continuação:
13. - Como resultado você irá ver algo como: Lendo os Sensores Apontando uma lanterna para o LDR:
14. Criando sua página web para exibição dos dados  Deverá possuir 4 informações: - Mostrar a variável temperatura - Mostrar a variável luminosidade - Ter dois botões para acionar as duas cargas  Algumas dicas: - Nomeie sua página como index.htm (não é .html, é .htm mesmo!) - Use um bom título em um header na parte superior da página para saber do que se trata (padronização); - Para os botões, evite usar a TAG HTML <button>, lembre-se que qualquer elemento em seu site poderá se comportar como um botão usando JavaScript; - Não esqueça de dar estilo a sua página usando CSS!
15. Criando sua página web para exibição dos dados  Página para baixar os arquivos do workshop: > www.robocore.net > Fórum > Tutoriais > Domótica #CPBR8
16. Usando a mesma página dentro do Arduino  Grave o arquivo index.htm no cartão de memória  Utilizar o código do Arduino carrega-pelo-arduino-1.ino  Altere as variáveis MAC e IP Address antes de gravar no Arduino  O valor de MAC pode ser encontrado na parte de baixo do shield Ethernet  O IP Address será fornecido pelos palestrantes  Se tudo estiver certo, acesse o IP Address no browser e veja a página!
17. Interfaceando o Arduino com a página  Objetivo: visualizar os valores dos sensores na página!  Unir o código de leitura de sensores com o de visualização da página no Arduino com suas devidas modificações.  Fazer alterações no código HTML para aceitar os valores do Arduino, além de ter um botão para atualizar os mesmos.  Este botão funciona através de JavaScript  Abrir o arquivo index.htm presente na pasta 03.pagina-com-sensores-1  Excluir o arquivo atual do seu cartão de memória e salvar o novo index.htm  Nesta nova página, usamos AJAX
18. Introdução ao AJAX  Significado: Asynchronous JavaScript and XML  Usado para atualizar apenas algumas informações em uma página, sem a necessidade de carregar toda a página toda vez que algo precisar ser atualizado  Benefício: consome consideravelmente menos dados, já que atualiza apenas algum ponto do site  Em nosso caso, iremos usar apenas a parte de JavaScript assíncrono, mas poderíamos usar a parte de XML sem problemas  AJAX pode cuidar sozinho da atualização da página, sem nós precisarmos pressionar um botão: use o index.htm presente na pasta: 04.pagina-com-sensores-automatica
19. Implementando os botões para os relés  No HTML: - Os elementos que serão os botões devem executar alguma função quando clicamos neles. Para isso usamos a propriedade onclick - Definimos no onclick a função que cada botão vai chamar quando for pressionado, então precisamos criar as funções na seção do JavaScript - As funções simplesmente enviarão uma determinada palavra para o servidor (Arduino), para que ele faça algo  No Arduino: - Trataremos o que vai acontecer se na request chegar as palavras que determinamos no HTML - Precisamos informar ao Arduino que teremos duas saídas digitais - Precisamos criar as funções que acionarão e desacionarão a carga HTML e Código Arduino disponíveis na pasta 05.pagina-com-botoes-1
20. Estados dos Botões  Forma de saber se a carga está acionada ou desacionada  O que muda no código do Arduino: - Usaremos as variáveis flag1 e flag2 para que o JavaScript do site saiba se as cargas estão ativadas ou desativadas. Então temos que enviar estas informações para a página da mesma forma que enviamos a leitura de sensores. O que muda no código do HTML: - Temos que alterar a cor de fundo dos elementos botões, conforme recebemos os valores das flags. Para isso, recebemos os dados da mesma forma que recebemos os valores dos sensores, e criamos condicionais para alterar o backgroundColor (o JavaScript não aceita o comando background-Color como o CSS, tome cuidado com o hífen). HTML e Código Arduino disponíveis na pasta 06.pagina-com-estados
21. www.robocore.net info@robocore.net