Neste post explicarei como fazer com que a IDE do Arduino carregue um arquivo na memoria SPIFFS diretamente pela IDE usando a ferramente ESP8266 SKETCH DATA UPLOAD no menu de ferramentas do Arduíno.

Inicialmente precisamos lembrar das limitações do sistema FS

Limitações do sistema de arquivos:

A implementação do sistema de arquivos para o ESP8266 teve que acomodar as restrições do chip, entre as quais sua RAM limitada. Foi utilizado o sistema de arquivos SPIFFS devido ao tamanho físico do programa ser reduzido, custando menos memória e com isso, houve a necessidade de atender a algumas restrições do sistema.

O SPIFFS não suporta diretórios, apenas armazena uma lista “plana” de arquivos.

Mas ao contrário dos sistemas de arquivos convencionais, podemos utilizar o caractere ‘/’, permitindo que funções façam buscas na memoria indexando a busca pelo uso do mesmo, como por exemplo a função openDir(“/arquivo1”) basicamente o sistema filtra os nomes de arquivos e mantêm os que começam com o prefixo /arquivo1.

Existe tambem um limite de 32 caracteres no total para nomes de arquivos. Um '\0'char é reservado para a terminação de string C, o que nos deixa com 31 caracteres utilizáveis.

Isso significa que é aconselhável manter nomes de arquivos curtos e não usar diretórios profundamente aninhados, já que o caminho completo de cada arquivo (incluindo diretórios, '/'caracteres, nome base, ponto e extensão) deve ter 31 caracteres no máximo. Por exemplo, o nome do arquivo /ntronics/texto/post_informacoes_utes_spiffspossui 44 caracteres e causará problemas se usado.

Aviso : Esse limite é facilmente alcançado e, se ignorado, os problemas podem passar despercebidos porque nenhuma mensagem de erro aparecerá na compilação nem no tempo de execução.

Para obter mais detalhes sobre os componentes internos da implementação do SPIFFS, consulte o arquivo leia-me DOCUMENTACAO DO SISTEMA FS .

Com essas restrições ao uso do SPIFFS bem observadas, podemos construir bons programas aproveitando o tamanho generoso da memoria inclusa no modulo do ESP8266.

Podemos cria mais de um arquivo no sistema SPIFFS, e com isso, se houver necessidade de criar varios arquivos no sistema mesmo sem organiza-los em pseudo-diretorios, podemos faze-lo. Ex:

                             wFile = SPIFFS.open(“/LOG1.txt”, “w+”);

Acima usamos a funcao SPIFFS.opem( para criar um arquivo chamado LOG1. Podemos utilizar a mesma funcao novamente para criar o LOG2, LOG2 e assim por diante.

                             wFile = SPIFFS.open(“/LOG2.txt”, “w+”);

                             wFile = SPIFFS.open(“/LOG3.txt”, “w+”);

Assim teremos a quantidade de arquivos que precisarmos.

Fazendo upload de arquivos para o sistema de arquivos:

Uma opção EXTREMAMENTE interessante no sistema de memoria SPIFFS é que podemos gravar na memória flash do ESP8266 na própria compilação do sketch qualquer informação na memoria FS utilizando uma ferramenta (ESP8266FS) que podemos instalar para tal  na IDE do Arduíno.

O ESP8266FS é uma ferramenta que se integra ao IDE do Arduíno. Ele adiciona um item de menu ao menu Ferramentas para carregar o conteúdo do diretório de dados do esboço no sistema de arquivos flash ESP8266.

Abaixo está o passo a passo para utilizar essa ferramenta:

• Precisamos fazer o download da ferramenta para escrita no Github, clique no link a seguir para fazer o download: https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.3.0/ESP8266FS-0.3.0.zip.
• Após fazermos o download, precisamos abrir a pasta onde esta a IDE do Arduíno esta configurada para salvar seus sketchs, varia um pouco dependendo de como foi feita a instalação da IDE no seu computador mas por default essa pasta costuma estar na pasta DOCUMENTOS do windows. Entrando nesta pasta, crie uma pasta chamada tools, e dentro desta pasta copie o arquivo .rar que você baixo no link acima, descompacte ele nessa pasta. Será gerado uma pasta ESP8266FS. O caminho gerado ficara:  C:\Users\nelso\Documents\Arduino\tools\ESP8266FS\tool\EPS8266FS.jar

• Feito a criação da pasta e o descompactamento do arquivo ESP8266FS, devemos fechar a IDE do Arduíno se a mesma estiver aberta e reabri-la. Em seguida precisamos abrir um sketch qualquer que tenhamos ou criar um novo. Após isso, vá em sketck e clique em Mostrar pagina do sketch ou simplesmente abra a pasta onde o arquivo source do seu programa esta salvo. Dentro dessa pasta, crie outra pasta chamada data em minusculo exatamente como esta escrito aqui.

• Após criada a pasta data coloque nessa pasta os arquivos que deseja que sejam gravados na memoria SPIFFS do ESP8266, em seguida vá para a IDE do Arduíno e, com o programa salvo onde você criou esta pasta, vá na aba Ferramentas e em seguida em ESP8266 Sketch data Upload lembrando que o seu ESP8266 deve estar ligado ao computador para receber a gravação do dado. A imagem abaixo mostra onde fica a opção de gravação:

• Feitos os passos acima, a IDE do Arduino irá gravar o arquivo na pasta data na memoria SPIFFS do ESP8266. Lembre-se de observar o tamanho do nome do arquivo para que não estoure o limite de 31 bytes.

Este post fica por aqui, dúvidas e sugestões deixe um comentário que  responderemos o mais rápido possível.

Fontes/Referencias: Site ESP8266 Arduino Core

https://arduino-esp8266.readthedocs.io/en/latest/index.html

https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html

O post SPIFFS – COMO CARREGAR DADOS NA MEMÓRIA FLASH DO ESP8266 apareceu primeiro em NTRONICS.

SOBRE O ESP 8266 12F:

Primeiramente vamos falar sobre o microcontrolador ESP8266 12 F.

Microcontrolador com excelente tamanho de memoria RAM e Flash,  permite que ampliemos bastante a inserção de comandos e opções em 1 único  programa com 1 único microcontrolador, sem a necessidade de anexar uma memória externa pois o próprio modulo do microcontrolador já possui uma memoria flash integrada onde fica armazenado o Firmware com as instruções que nos colocamos nele.

Apesar de ele conter uma quantia de memória MONSTRUOSA comparado a outros microcontroladores do mercado, temos que ter o cuidado de manter o controle do fluxo do programa para não TRAVARMOS o wifi.

O grande segredo para que o nosso MENU WiFi funcione bem e de maneira estável, principalmente para os dispositivos Iphone, é sempre cuidar pra não prendermos o programa em algum looping que o faca parar de responder o atendimento do wifi ( função server.handleClient(); na IDE do Arduíno).

Outra preocupação que devemos ter é em sempre fazer com que o sistema do ESP8266 execute suas funções que rodam em background.

ESTABILIDADE DO SISTEMA ( função yield() )

Existe uma função  construída especificamente para fazer com que o firmware execute essas rotinas de background, essa função se chama yield().

A função yield  faz com que o programa pare naquele ponto em que a encontrou, execute as rotinas de background como resetar o WacthDog do sistema e funções internas do WiFi, e em seguida retorna a continuação do programa.

FINALMENTE AO PROJETO

Para realizar esse pequeno projeto, serão necessários os seguintes itens:

• 2 Módulos de rele 1 canal ou 1 modulo 2 canais high level trigger;
• 1 Módulo Nodemcu;
• 1 cabo USB V8 para alimentação e gravação do Nodemcu;

O layout de ligação do sistema segue abaixo:

EXPLICAÇÃO DO LAYOUT:

Como visto no layout acima, os reles são ligados diretamente as entradas D0 e D6 do Nodemcu, ao analisarmos o datasheet do microcontrolador ESP8266 vemos que o GPIO 16, referente a saída D0 deve ser usado com cuidado, propositalmente, utilizamos essa porta nesse projeto para chamar a atenção a certos detalhes no uso das GPIO’s do ESP8266 que equipa o Nodemcu. Esta saída é utilizada no sistema de gravação do firmware na memoria do ESP portanto, nunca devemos cola-la em PullDown, senão podemos impedir a gravação do firmware no ESP. Também essa GPIO sempre eleva-se a estado HIGH ao reiniciar ou ligar o Nodemcu, portanto, se o rele for ser utilizado em uma situação onde ele não deve ativar quando o sistema é reiniciado, troque a saída D0 por uma das demais saídas, com exceção da saída D8 que sofre de uma condição especial semelhante.

Observando os cuidados com a GPIO 16, podemos iniciar a programação do nosso projeto.

EXPLICANDO A PROGRAMAÇÃO:

Utilizamos a IDE de programação Arduíno para este projeto:

Vou explicar passo a passo o código e pra quem quiser o código completo para abrir no seu computador, disponibilizei nesse link em formato txt, basta fazer o download, copiar o texto e colar na tela do seu programador Arduíno:

exemplo_menu_com_botoes_acionando_rele  << DOWNLOAD DO ARQUIVO FONTE

/// para o funcionamento das funções WebServer do ESP8266 é necessário incluirmos as seguintes bibliotecas

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Definições de pinos do sistema. Normalmente essas definições já estão nas bibliotecas de inclusão do ESP8266 na IDE Arduíno
// Costumo utilizar essas definições abaixo para facilitar casos em que se faca necessário redefinir algum pino.

#define D0 16 //Utilizado neste exemplo como RELE 1
#define D1 5 //
#define D2 4 //
#define D3 0 //
#define D4 2 //
#define D5 14 //
#define D6 12 //Utilizado neste exemplo como RELE 2
#define D7 13 //
#define D8 15 //

 

Após definirmos as bibliotecas utilizadas neste projeto, iremos declarar as variáveis:

//como este projeto é bem simples, utilizaremos apenas estas variáveis.

char *ssid = “MEU_MENU”;     /// Esta variável é responsável pelo nome da ACESS POINT gerado pelo Nodemcu
char *password = “padrao1234”;  /// Esta variável é responsável pela senha para acessar o ACESS POINT
bool rele1 = false;
bool rele2 = false;

Ao declararmos as variáveis ssid e password , estamos dizendo ao sistema qual será o nome da rede wifi que o nosso Nodemcu vai gerar e a senha que ele vai exigir para  que alguém conecte-se a essa rede.

Se não quisermos que a rede peça alguma senha, basta não criarmos essa variável e mais adiante na função que inicializa o wifi darei as duas opções de inicialização, com e sem senha.

//  Declaracao das instancias das bibliotecas 
ESP8266WebServer server(80);       //ativa servidor web

 

Este setor do programa inicializa a biblioteca do Webserver do Nodemcu.

void setup() {
//PARTE DE CONFIGURAÇÃO DO SISTEMA 

Serial.begin(57600); // Iniciamos a seria para podermos debugar o programa no terminal serial do Arduíno.

WiFi.softAP(ssid, password, 11); // Esta função inicializa o ACESS POINT com o nome e senha que determinamos na criação das variáveis ssid e
// password e o valor 11 refere-se ao canal utilizado pelo wifi

IPAddress myIP; // Declaração da variável myIP do tipo que recebe um numero de IP já no formato correto ***Dica: Se precisarmos
// usar o numero do IP em outros lugares do programa, declarem essa variável antes do setup pra que ela se torne
// global.

myIP = WiFi.softAPIP(); // Aqui adquirimos o ip do acess point ( por padrao se nao o pre-definirmos, ele assume 192.168.4.1
Serial.print(“Acess point criado. Ip: “); // Exibe no terminal serial o numero do ip confirmando a criacao do acess point
Serial.println(myIP);

pinMode(D0, OUTPUT); // rele 1
pinMode(D6, OUTPUT); // rele 2

digitalWrite(D0,rele1); //desliga o rele 1 pois a variavel rele1 foi criada com valor “false”
digitalWrite(D6,rele2); //desliga o rele 2 pois a variavel rele2 foi criada com valor “false”

Conforme havia prometido, para deixar o ACESS POINT livre, sem exigir senha, basta declara a funcao que inicializa o mesmo da seguinte forma: WiFi.softAP(ssid);

server.on(“/”, MENU); //Esta função responde nossa requisição no ip do servidor, enviando de volta os códigos HTML que carregam nosso menu
server.on(“/ATIVA_R1”,ATIVA_R1); //quando clicarmos no botão ATIVA RELE 1 essa função será chamada, ligando o rele 1 e escrevendo uma pagina resposta pra nos no browser
server.on(“/DESATIVA_R1”,DESATIVA_R1); //quando clicarmos no botão DESATIVA RELE 1 essa função será chamada, desligando o rele 1 e escrevendo uma pagina resposta pra nos no browser
server.on(“/ATIVA_R2”,ATIVA_R2); //quando clicarmos no botão ATIVA RELE 2 essa função será chamada, ligando o rele 2 e escrevendo uma pagina resposta pra nos no browser
server.on(“/DESATIVA_R2”,DESATIVA_R2); //quando clicarmos no botão DESATIVA RELE 2 essa função será chamada, desligando o rele 2 e escrevendo uma pagina resposta pra nos no browser

server.begin(); //Apos declarar todos os caminhos de nosso menu WIFI, essa função ativa nosso servidor local no Nodemcu

Esta parte do código é especialmente importante, é o ponto do programa onde o ACESS POINT busca as funções que respondem ao aperto dos botoes na tela do navegador no celular conectado ao Nodemcu. Também são essas funções que formam o texto que é enviado ao Browser para formar a pagina HTML e nesse texto podemos formatar o forma, cor, tamanho, fonte, alinhamento e todas as outras características que o HTML nos permite moldar.

LOOPING PRINCIPAL DO PROGRAMA.

void loop() {
yield(); // Funcao extremamente importante no ESP8266, ela garante que o sistema atenda todas as funcoes que
// correm por traz do nosso programa, garantindo estabilidade do sistema.

server.handleClient(); // FUNCAO DA BIBLIOTECA webServer que “ATENDE” a nossa requisicao quando acessamos o ip do webserver criado
// pelo nosso Nodemcu.

digitalWrite(D0,rele1); // Dentro das funcoes “ATIVA_R1” e “DESATIVA_R1” o valor da variavel rele1 pode ser mudado de falso para verdadeiro e vice versa,
// ligando ou desligando o rele 1.

digitalWrite(D6,rele2); // Dentro das funcoes “ATIVA_R2” e “DESATIVA_R2” o valor da variavel rele1 pode ser mudado de falso para verdadeiro e vice versa,
// ligando ou desligando o rele 2

}

Dentro do looping, o sistema passa pela função server.handleClient(); que faz exatamente o ATENDIMENTO das requisições vindas pela rede wifi. Essas requisições são exatamente as operações de clicar que fazemos na tela do celular ao pressionar os botoes.

Devemos SEMPRE manter essa função próxima da execução instantânea, sempre sendo acessada pelo looping do sistema com o menor tempo possível. Quando menor o tempo par o looping passar por essa função, mais rápido e estável será a navegação pelo meni wifi gerado pelo ESP8266.

Continuado,

void MENU(){
// HTML da pagina principal >> Este primeiro trecho em html forma as informacoes que carregarao o tipo de letra cores e ect de nossa pagina web
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #FF0000; “; //Somente como exemplo, aqui mudamos a cor de fundo de nosso menu
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #FFFFFF; }</style>”;
html += “</head><body>”;

html += “<h1><center>NOSSO PRIMEIRO MENU</center></h1>”;

//============================================================== BOTAO DO RELE 1 =====================================================================//

// Neste if-else definimos se vamos carregar na pagina o botao “LIGAR RELE” ou o botao “DESLIGAR RELE” baseado no estado atual do rele. Uma simples logica de inversao.
if(rele1 == false){
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/ATIVA_R1”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao ATIVA_R1 que criamos aqui, ligando o rele.
html += “<p><a href=/ATIVA_R1><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>ATIVAR RELE 1</h1></b></button></center></a></p>”;
}
else
{
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/ATIVA_R1”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao DESATIVA_R1 que criamos aqui, desligando o rele.
html += “<p><a href=/DESATIVA_R1><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>DESATIVAR RELE 1</h1></b></button></center></a></p>”;
}

//============================================================== BOTAO DO RELE 2 =====================================================================//

// Neste if-else definimos se vamos carregar na pagina o botao “LIGAR RELE” ou o botao “DESLIGAR RELE” baseado no estado atual do rele. Uma simples logica de inversao.
if(rele2 == false){
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/ATIVA_R2”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao ATIVA_R2 que criamos aqui, ligando o rele.
html += “<p><a href=/ATIVA_R2><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>ATIVAR RELE 2</h1></b></button></center></a></p>”;
}
else
{
// NA PROXIMA LINHA ABAIXO, LOGO DEPOIS DE “href=” colocamos o nome de chama da funcao server.on(“/DESATIVA_R2”, assim o sistema quando receber
// esse dado do browser do nosso celular ativara a funcao DESATIVA_R2 que criamos aqui, desligando o rele.
html += “<p><a href=/DESATIVA_R2><center><button style=’background-color:#0000FF; height:100px; width:250px; type=’button’><b><h1>DESATIVAR RELE 2</h1></b></button></center></a></p>”;
}
html += “<p><center><b>”;

html += “</body></html>”;
// Enviando HTML para o cliente
server.send(200, “text/html”, html); // Esta funcao server.send eh a responsavel em enviar para o browser do celular o arquivo de texto gerado acima
// com as informacoes para criar a pagina no navegador do nosso celular.

}

void ATIVA_R1(){
// HTML para formar a pagina de confirmacao do rele ativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 1 FOI ATIVADO COM SUCESSO!</center></h1>”;
rele1 = true; // Finalmente ativando o RELE 1

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);

}

void ATIVA_R2(){
// HTML para formar a pagina de confirmacao do rele ativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 2 FOI ATIVADO COM SUCESSO!</center></h1>”;
rele2 = true; // Finalmente ativando o RELE 2

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);
}

void DESATIVA_R1(){
// HTML para formar a pagina de confirmacao do rele desativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 1 FOI DESATIVADO COM SUCESSO!</center></h1>”;
rele1 = false; // Finalmente desativando o RELE 1

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);
}

void DESATIVA_R2(){
// HTML para formar a pagina de confirmacao do rele desativado no navegador do nosso celular
String html = “<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′><html><head><title>MENU WIFI NTRONICS</title>”;
html += “<style>body { background-color: #cccccc; “;
html += “font-family: Arial, Helvetica, Sans-Serif; “;
html += “Color: #000088; }</style>”;
html += “</head><body>”;

html += “<h1><center>O RELE 2 FOI DESATIVADO COM SUCESSO!</center></h1>”;
rele2 = false; // Finalmente desativando o RELE 2

// ESTE SETOR DO CODIGO ABAIXO CRIA UM BOTAO DE VOLTAR NA NOSSA TELA

html += “<center><form method=’GET’ action=’/’>”;
html += “<p><input name=button2 type=submit value=Voltar /></p>”;
html += “</form></center>”;
html += “</body></html>”;
// Enviando HTML para o servidor
server.send(200, “text/html”, html);
}

Agora seguem imagens de cada tela formada pelo programa acima:

Existem muitas  formas de configurar o html da pagina gerada nesse método de programação utilizado. Podemos fazer com que os botoes troque de cor ao serem pressionados, podemos exibir mensagens de alerta, carregar diferentes modelos depois de cliques, gerar um texto em uma caixa de texto na tela informando as acoes, enfim, praticamente tudo que se pode fazer em HTML pode ser criado nesse menu WiFi.

Espero que este tutorial venha a lhes ajudar, duvidas, elogios e criticas??? Deixe um comentario!

Autor: Nelson Bordin Junior – CEO Ntronics

O post Tutorial para criar um menu wifi no NodeMCU apareceu primeiro em NTRONICS.

Exemplo de sistemas IOT em industrias são sensores de temperatura que captam dados e os retransmitem através de um sistema cabeado ou wirelless.

Esses dados são normalmente transmitidos a um servidor na “nuvem” que retem os dados e o disponibilizam ao administrador da rede, com esse dados pode-se por exemplo melhorar a eficiência de uma linha de produção.

EXEMPLOS DE IOT

Exemplo de sistemas IOT em nossa vida cotidiana são por exemplo sensores de presença em residencias que, ao detectar a presença de uma pessoa não autorizada disparam um alerta que é transmitido ao proprietário através de um aplicativo no celular.

Outro exemplo são sensores de umidade em plantas que nos enviam a umidade de período em período a um servidor, onde podemos consultar se nossa plantinha em casa está com água o suficiente!

Enfim, exemplos são infinitos e as possibilidades também.

Em breve estaremos postando exemplos de sistemas IOT com códigos em C para plataformas de programação como a IDE Arduino, MikroC, Mplab e muitos outros.

Este post é uma apresentação do que virá!

Aguardem.

Obrigado por ler esse post e espero que gostem de nossos artigos que serão postados em breve!

Nelson Bordin Junior

CEO – Ntronics

O post SOLUÇAO IOT – O QUE É IOT E PARA QUE SERVE? apareceu primeiro em NTRONICS.