Automação residencial controlada pela web baseada em Iot usando raspberry pi

Olá pessoal, bem-vindos ao tutorial de hoje, uma das coisas boas do Raspberry Pi é a grande habilidade e facilidade com que ele dá a oportunidade de conectar dispositivos à internet especialmente para projetos relacionados à automação residencial. Hoje vamos explorar a possibilidade de controlar aparelhos de CA com o clique de botões em uma página da web usando a internet. Usando este sistema de automação residencial baseado em IoT, você pode controlar seus eletrodomésticos de qualquer lugar do mundo. Este servidor web pode ser executado a partir de qualquer dispositivo que execute aplicativos HTML, como Smart Phone, tablet, computador etc.

Componentes necessários:

Para este projeto, os requisitos cairão em duas categorias, Hardware e Software:

I. Requisitos de hardware:

1. Raspberry Pi 3 (qualquer outra versão será bom)
2. Cartão de memória de 8 ou 16 GB executando Raspbian Jessie
3. Relés 5v
4. 2n222 transistores
5. Diodos
6. Jumper Wires
7. Blocos de conexão
8. LEDs para teste.
9. Lâmpada AC para testar
10. Placa de ensaio e cabos jumper
11. Resistor de 220 ou 100 ohms

II. Requisitos de software:

Além do sistema operacional Raspbian Jessie rodando no raspberry pi, também usaremos o frame work WebIOPi, notepad ++ rodando em seu PC e filezila para copiar arquivos do PC para o raspberry pi, especialmente os arquivos de aplicativos da web.

Além disso, você não precisa codificar em Python para este projeto de automação residencial, o WebIOPi fará todo o trabalho.

Preparando o Raspberry Pi:

É algum tipo de hábito para mim e acho que é bom, a primeira coisa que faço cada vez que quero usar o Raspberry Pi é atualizar o PI. Para este projeto, esta seção incluirá os procedimentos de atualização do Pi e a instalação do framework WebIOPi que nos ajudará a lidar com a comunicação da página da web para o pi do raspberry. Eu provavelmente deveria afirmar que isso também pode ser feito de uma maneira indiscutivelmente mais fácil usando o trabalho de estrutura do Flask python, mas uma das coisas interessantes sobre DIY é quando você dá uma olhada sob o capô e torna o trabalho difícil. É aí que vem toda a alegria do DIY.

Para atualizar os comandos do raspberry Pi abaixo e reinicie o RPi;

sudo apt-get update sudo apt-get upgrade sudo reboot

Feito isso, o próximo passo é instalarmos o framework webIOPi.

Certifique-se de que está no diretório inicial usando;

cd ~

Use o wget para obter o arquivo da página do sourceforge;

wget

Quando o download estiver concluído, extraia o arquivo e vá para o diretório;

tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /

Neste ponto, antes de executar o setup, precisamos instalar um patch, pois esta versão do WebIOPi não funciona com o raspberry pi 3 que estou usando e não consegui encontrar uma versão do WebIOPi que funcione expressamente com o Pi 3.

Os comandos abaixo são usados ​​para instalar o patch enquanto ainda está no diretório WebIOPi, execute;

wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch

Em seguida, podemos executar a instalação de configuração do WebIOPi usando;

sudo./setup.sh

Continue dizendo sim se for solicitado a instalar quaisquer dependências durante a instalação da configuração. Quando terminar, reinicie seu pi;

sudo reboot

Teste a instalação do WebIOPi:

Antes de pular para os esquemas e códigos, com o Raspberry Pi de volta, precisaremos testar a instalação do WebIOPi para ter certeza de que tudo funciona bem como desejado.

Execute o comando;

sudo webiopi -d -c / etc / webiopi / config

Após emitir o comando acima no pi, aponte o navegador da web do seu computador conectado ao pi do raspberry para http: // raspberrypi. mshome.net:8000 ou http; // thepi'sIPaddress: 8000. O sistema solicitará o nome de usuário e a senha.

Nome de usuário é webiopi Senha é framboesa

Este login pode ser removido posteriormente, se desejado, mas até mesmo seu sistema de automação residencial merece algum nível extra de segurança para evitar que qualquer pessoa com os aparelhos de controle IP e dispositivos IOT em sua casa.

Após o login, olhe ao redor e clique no link do cabeçalho GPIO.

Para este teste, conectaremos um LED ao GPIO 17, então vá em frente e defina o GPIO 17 como uma saída.

Feito isso, conecte o led ao seu raspberry pi conforme mostrado nos esquemas abaixo.

Após a conexão, volte para a página da web e clique no botão do pino 11 para ligar ou desligar o LED. Desta forma, podemos controlar o Raspberry Pi GPIO usando WebIOPi.

Após o teste, se tudo funcionou conforme descrito, podemos voltar ao terminal e parar o programa com CTRL + C. Se você tiver algum problema com esta configuração, entre em contato por meio da seção de comentários.

Mais informações sobre o Webiopi podem ser encontradas em sua página Wiki (http://webiopi.trouch.com/INSTALL.html)

Com o teste concluído, estamos prontos para iniciar o projeto principal.

Construindo o aplicativo da web para automação residencial Raspberry Pi:

Aqui iremos editar a configuração padrão do serviço WebIOPi e adicionar nosso próprio código para ser executado quando chamado. A primeira coisa que faremos é instalar o filezilla ou qualquer outro software de cópia FTP / SCP em nosso PC. Você vai concordar comigo que a codificação no pi através do terminal é bastante estressante, portanto, o filezilla ou qualquer outro software SCP será útil neste estágio. Antes de começarmos a escrever os códigos de script html, css e java para este aplicativo da Web de automação residencial IoT e movê-los para o Raspberry Pi, vamos criar a pasta do projeto onde todos os nossos arquivos da web estarão.

Certifique-se de estar no diretório inicial usando, em seguida, crie a pasta, vá para a pasta criada e crie a pasta html no diretório:

cd ~ mkdir webapp cd webapp mkdir html

Crie uma pasta para scripts, CSS e imagens dentro da pasta html

mkdir html / css mkdir html / img mkdir html / scripts

Com nossos arquivos criados, vamos passar a escrever os códigos em nosso PC e, a partir de então, passar para o Pi via filezilla.

O código JavaScript:

O primeiro código que escreveremos é o do javascript. É um script simples para se comunicar com o serviço WebIOPi.

É importante observar que, para este projeto, nosso aplicativo da web consistirá em quatro botões, o que significa que planejamos controlar apenas quatro pinos GPIO, embora controlaremos apenas dois relés em nossa demonstração. Confira o vídeo completo no final.

webiopi (). ready (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); botão = webiopi (). createGPIOButton (17, "Relay 1"); content.append (botão); botão = webiopi (). createGPIOButton (18, "Relé 2"); content.append (botão); botão = webiopi (). createGPIOButton (22, "Relé 3"); content.append (botão); botão = webiopi ().createGPIOButton (23, "Relé 4"); content.append (botão);});

O código acima é executado quando o WebIOPi está pronto.

Abaixo, explicamos o código JavaScript:

webiopi (). ready (function (): Isso apenas instrui nosso sistema a criar esta função e executá-la quando o webiopi estiver pronto.

webiopi (). setFunction (23, "fora"); Isso nos ajuda a dizer ao serviço WebIOPi para definir GPIO23 como saída. Temos quatro botões aqui, você poderia ter mais se estivesse implementando mais botões.

var conteúdo, botão; Esta linha diz ao nosso sistema para criar uma variável chamada content e tornar a variável um botão.

content = $ ("# content"); A variável de conteúdo ainda será usada em nosso html e css. Portanto, quando nos referimos a #content, o framework WebIOPi cria tudo associado a ele.

botão = webiopi (). createGPIOButton (17, "Relé 1"); O WebIOPi pode criar diferentes tipos de botões. O trecho de código acima nos ajuda a dizer ao serviço WebIOPi para criar um botão GPIO que controla o pino GPIO, neste caso, 17 rotulado como “Relé 1”. O mesmo vale para os outros.

content.append (botão); Anexe este código a qualquer outro código para o botão criado no arquivo html ou em outro lugar. Mais botões podem ser criados e todos terão as mesmas propriedades deste botão. Isso é especialmente útil ao escrever CSS ou Script.

Depois de criar os arquivos JS, nós os salvamos e então copiamos usando filezilla para webapp / html / scripts se você criou seus arquivos da mesma forma que eu fiz os meus.

Feito isso, passamos para a criação do CSS. Você pode baixar o código inteiro no link fornecido na seção Código no final.

O código CSS:

O CSS nos ajuda a deixar nossa página da web de automação residencial IoT Raspberry Pi bonita.

Eu queria que a página da web se parecesse com a imagem abaixo e, portanto, tive que escrever a folha de estilo smarthome.css para conseguir isso.

Abaixo, explicamos o código CSS:

O script CSS parece muito pesado para ser incluído aqui, então vou apenas pegar uma parte dele e usá-la para a divisão. Você pode baixar o arquivo CSS completo aqui. CSS é fácil e você pode entendê-lo apenas examinando o código CSS. Você pode facilmente pular esta parte e usar nosso código CSS imediatamente.

A primeira parte do script representa a folha de estilo do corpo do aplicativo da web e é mostrado abaixo;

corpo {cor de fundo: #ffffff; imagem de fundo: url ('/ img / smart.png'); repetição de fundo: sem repetição; posição de fundo: centro; tamanho do fundo: capa; fonte: negrito 18px / 25px Arial, sem serifa; cor: LightGray; }

Eu quero acreditar que o código acima é autoexplicativo, nós definimos a cor de fundo como #ffffff que é branco, então adicionamos uma imagem de fundo localizada naquele local de pasta (lembra de nossa configuração de pasta anterior?), Garantimos que a imagem não t repita definindo a propriedade background-repeat como sem repetição e, a seguir, instrua o CSS a centralizar o segundo plano. Em seguida, passamos a definir o tamanho, a fonte e a cor do fundo.

Com o corpo pronto, escrevemos o css para os botões ficarem bonitos.

botão {display: block; posição: relativa; margem: 10px; preenchimento: 0 10px; alinhamento de texto: centro; decoração de texto: nenhum; largura: 130px; altura: 40px; fonte: negrito 18px / 25px Arial, sem serifa; cor preta; sombra do texto: 1px 1px 1px rgba (255,255,255, 0,22); -webkit-border-radius: 30px; -moz-border-radius: 30px; raio da borda: 30px;

Para ser breve, todas as outras coisas no código também foram feitas para que pareça bom. Você pode alterá-los para ver o que acontece, acho que é chamado de aprendizado por tentativa e erro, mas uma coisa boa sobre CSS são as coisas sendo expressas em inglês simples, o que significa que são muito fáceis de entender. A outra parte do bloco do botão tem poucos extras para a sombra do texto no botão e na sombra do botão. Ele também tem um leve efeito de transição que ajuda a ter uma aparência agradável e realista quando o botão é pressionado. Eles são definidos separadamente para webkit, firefox, opera etc, apenas para garantir que a página da web tenha um desempenho ideal em todas as plataformas.

O próximo bloco de código é para o serviço WebIOPi informar que se trata de uma entrada para o serviço WebIOPi.

i nput {display: block; largura: 160px; altura: 45px; }

A última coisa que queremos fazer é dar algum tipo de indicação quando o botão foi pressionado. Assim, você pode olhar para a tela e a cor dos botões permite que você saiba o estado atual. Para fazer isso, a linha de código abaixo foi implementada para cada botão.

# gpio17.LOW {cor de fundo: cinza; cor preta; } # gpio17.HIGH {background-color: Red; cor: LightGray; }

As linhas de código acima simplesmente mudam a cor do botão com base em seu estado atual. Quando o botão está desligado (BAIXO) a cor de fundo do botão fica cinza para mostrar que está inativo e quando está ligado (ALTO) a cor de fundo do botão torna-se VERMELHA.

CSS na bolsa, vamos salvar como smarthome.css, então mova-o via filezilla (ou qualquer outro software SCP que você queira usar) para a pasta de estilos em nosso raspberry pi e conserte a peça final, o código html. Lembre-se de baixar o CSS completo aqui.

Código HTML:

O código html reúne tudo, javascript e a folha de estilo.

Botão de apertar; receber bacon

Dentro da tag head existem alguns recursos muito importantes.

A linha de código acima permite que o aplicativo da web seja salvo em uma área de trabalho móvel usando o Chrome ou safari móvel. Isso pode ser feito por meio do menu do cromo. Isso dá ao aplicativo uma sensação de inicialização fácil na área de trabalho móvel ou em casa.

A próxima linha de código abaixo fornece algum tipo de capacidade de resposta ao aplicativo da web. Permite ocupar a tela de qualquer dispositivo em que for lançado.

A próxima linha de código declara o título mostrado na barra de título da página da web.

Cada uma das próximas quatro linhas de códigos desempenha a função de vincular o código html a vários recursos necessários para funcionar conforme desejado.

A primeira linha acima chama o JavaScript do framework WebIOPi principal, que é codificado na raiz do servidor. Isso precisa ser chamado sempre que o WebIOPi for usado.

A segunda linha aponta a página html para nosso script jQuery, a terceira aponta na direção de nossa folha de estilo. Por último, a última linha ajuda a configurar um ícone para ser usado na área de trabalho do celular, caso decidamos usá-lo como um aplicativo da web ou como um favicon da página da web.

A seção do corpo do código html contém apenas tags de quebra para garantir que os botões estejam alinhados corretamente com a linha abaixo, informando ao nosso código html para exibir o que está escrito no arquivo JavaScript. O id = ”content” deve lembrá-lo da declaração de conteúdo para o nosso botão anteriormente no código JavaScript.

Você conhece o procedimento, o código html como index.html e vá para a pasta html no Pi via filezilla. Você pode baixar todos os arquivos CSS, JS e HTML aqui.

Edições do servidor WebIOPi para automação residencial:

Neste estágio, estamos prontos para começar a criar nossos esquemas e testar nosso aplicativo web, mas antes disso precisamos editar o arquivo de configuração do serviço webiopi para que seja indicado o uso de dados de nossa pasta html em vez dos arquivos de configuração que vêm com ele.

Para editar a configuração, execute o seguinte com permissão de root;

sudo nano / etc / webiopi / config

Procure a seção http do arquivo de configuração, verifique na seção onde você tem algo como #Use doc-root para alterar o HTML padrão e a localização dos arquivos de recursos

Comente qualquer coisa abaixo dele usando # então se sua pasta estiver configurada como a minha, aponte seu doc-root para o caminho do seu arquivo de projeto

doc-root = / home / pi / webapp / html

Salvar e sair. Você também pode alterar a porta de 8000, caso tenha outro servidor rodando no pi usando essa porta. Se não, salve e saia, à medida que avançamos.

É importante observar que você pode alterar a senha do serviço WebIOPi usando o comando;

sudo webiopi-passwd

Ele solicitará um novo nome de usuário e senha. Isso também pode ser removido totalmente, mas a segurança é importante, certo?

Por último, execute o serviço WebIOPi emitindo o comando abaixo:

sudo /etc/init.d/webiopi start

O status do servidor pode ser verificado usando;

sudo /etc/init.d/webiopi status

Sua execução pode ser interrompida usando;

sudo /etc/init.d/webiopi stop

Para configurar o WebIOPi para ser executado na inicialização, use;

sudo update-rc.d webiopi defaults

Se você quiser reverter e interromper a execução na inicialização, use;

sudo update-rc.d webiopi remove

Diagrama de circuito e explicação:

Com a configuração do nosso software concluída, estamos prontos para começar a criar os esquemas para este projeto de eletrodomésticos controlado pela web.

Embora eu não pude colocar minhas mãos em módulos de relé, que eu sinto que são mais fáceis de trabalhar para amadores. Portanto, estou desenhando aqui os esquemas para relés 5v simples e autônomos comuns.

Conecte seu circuito conforme mostrado no circuito de fricção acima. Você deve observar que COM, NO (normalmente aberto) e NC (normalmente fechado) de seu próprio relé podem estar localizados em lados / pontos diferentes. Use um milímetro para testá-lo. Saiba mais sobre retransmissão aqui.

Com nossos componentes conectados, acione seu servidor, a partir de uma página web, vá ao IP do seu Raspberry Pi e indique a porta conforme descrito anteriormente, faça o login com seu nome de usuário e senha, e você deverá ver uma página que se parece exatamente com a imagem abaixo.

Agora você pode controlar facilmente quatro aparelhos AC Home de qualquer lugar sem fio, apenas clicando nos botões. Isso funcionará com celular, tablet etc. e você pode adicionar mais botões e relés para controlar mais dispositivos. Confira o vídeo completo abaixo.

É isso, pessoal, obrigado por ficar por aqui. Se você tiver alguma dúvida, coloque-as na caixa de comentários.