FonteO
post anterior sobre a combinação de FLProg e ESP8266 foi uma revisão e agora consideraremos trabalhar em um programa com esse controlador com mais detalhes.
Como no arduino, o trabalho em um projeto começa com a escolha de um controlador. Diferentemente das versões anteriores, para conveniência dos usuários, os controladores foram movidos para a estrutura em árvore das pastas.
Ao escolher um controlador ou placa específica, você pode ver sua imagem, pinagem e especificações técnicas.
O principal trabalho ao criar a interface de configuração da web é realizado na árvore do projeto.
Primeiro, configure o ponto de acesso.
Abrimos a árvore do projeto até o ponto “
Access Point ” inclusive e, clicando duas vezes na ramificação “
Disabled ”, ativamos o ponto de acesso para o trabalho.
Nas ramificações abertas, defina as configurações do ponto de acesso. Para alterar o parâmetro necessário, clique duas vezes na ramificação correspondente.
Nome da rede (SSID) - O nome da rede que o ponto de acesso organizará.
Senha para conexão - senha para conectar-se ao ponto de acesso. Se deixado em branco, o ponto de acesso ficará sem uma senha com uma conexão gratuita.
Endereço IP -
endereço IP que o controlador terá na rede criada pelo ponto de acesso. Nesse endereço, você pode se conectar ao controlador.
Os parâmetros restantes (
Máscara de sub -
rede e
Gateway de rede ) serão preenchidos automaticamente após a configuração do endereço IP, mas, se necessário, poderão ser alterados se forem necessários valores fora do padrão.
O resultado deve ser algo assim.
Terminamos o ponto de acesso, podemos recolher este nó e acessar o cliente. Também expandimos seu nó e o ativamos clicando duas vezes no ramo "
Desconectado "
Personalize o cliente. Existem duas opções para configurar o cliente. Configuração direta das configurações de rede e configurações de recebimento via DHCP. Para começar, usamos a segunda opção.
Observe que, por motivos de segurança, a senha da conexão não é mostrada na árvore do projeto.
Com a configuração das interfaces Wi-Fi concluídas. Desativamos (se necessário) o nó do cliente e prosseguimos para definir o modo de atualização de firmware Wi-Fi (se necessário). Este nó aparece apenas quando o cliente está ativado.
Ativamos esse modo clicando duas vezes no ramo "
Desativado "
Definimos os parâmetros necessários (a alteração do valor dos parâmetros é feita clicando duas vezes no ramo correspondente).
Senha - ao definir uma senha antes de preencher um novo firmware, você precisará digitá-la.
Nome do dispositivo - Este nome aparecerá no nome da porta de conexão no IDE do Arduino.
Leia mais sobre o modo OTA do Arduino
aqui .
Agora, prosseguimos diretamente para a criação da interface de configuração da web. Abra o nó "
Interface de configuração da Web " e ative-o clicando duas vezes na ramificação "
Desativado "
A interface de configurações da Web é um conjunto de páginas com parâmetros. Se houver mais de uma página, um menu será gerado automaticamente para acessá-las. Para cada página, você pode definir seus próprios estilos CSS se usar estilos comuns para toda a interface de configurações da Web.
Para configurar estilos CSS comuns para toda a interface da web, clique duas vezes na ramificação "
General Style "
A janela de configurações gerais de estilo é aberta.
Na guia "
Descrição dos estilos ", há um campo de entrada diretamente para a descrição dos estilos aplicados a todas as páginas de configurações. Por padrão, esse campo já está preenchido com estilos para criar uma interface padrão. Mas se você quiser alterar o design das páginas, poderá alterá-las.
Na guia "
Estilos ", você pode especificar os nomes dos estilos usados para elementos específicos da página.
Essa guia também é preenchida por padrão.
Na guia "
Textos ", você pode inserir os textos dos principais elementos usados na página.
Para restaurar todos os valores dessa caixa de diálogo com os valores padrão, você pode usar o botão "
Padrão ".
As configurações de estilo e texto especificadas nos estilos gerais são aplicadas em todas as páginas de configurações, se não forem bloqueadas pelas configurações de estilo de uma página específica (consideraremos abaixo)
As páginas são mostradas no nó "
Páginas de configurações ". Nós revelamos isso.
Por padrão, sempre há uma página. Depois de abrir seu nó, obtemos acesso às suas configurações.
Endereço da
página inicial - endereço da página principal de configurações. Por padrão,
host é o endereço do controlador na rede. Se necessário, você pode mudar. Altere-o para o endereço de
host / configuração (clique duas vezes neste ramo).
Nome da página - O nome da página no menu. Deixe com o nome - "
Casa "
Estilo da página - clicar duas vezes nesse ramo abre a caixa de diálogo de configurações de estilo dessa página em particular.
Nesta caixa de diálogo, você pode adicionar estilos CSS adicionais para esta página e atribuir estilos e textos para elementos de design. Você também pode redefinir os estilos descritos na caixa de diálogo de estilos gerais.
No nó "
Parâmetros ", os
parâmetros exibidos na página são definidos. Na página principal, definiremos a exibição do endereço IP recebido do roteador via DHCP em texto sem formatação. O parâmetro é adicionado clicando duas vezes no ramo "
Adicionar parâmetro "
A caixa de diálogo para criar um novo parâmetro é aberta. Nele, para iniciantes, pressione o botão para selecionar o parâmetro do sistema.
Uma lista de parâmetros do sistema disponíveis é aberta. Selecione o parâmetro "
cliente Wi-Fi - endereço IP ".
No campo rótulo, insira os rótulos de texto para este parâmetro e, no campo tipo de parâmetro, selecione "
Texto "
Após criar o parâmetro, aparecerá um novo nó da árvore do projeto, no qual você pode configurar o estilo para esse parâmetro, alterar as configurações do parâmetro ou excluí-lo.
Os nós
“Botão Salvar” e
“Botão Reiniciar” especificam a disponibilidade dos botões de salvar dados e restaurar o controlador na página. Como não temos dados alteráveis na página principal, desative esses botões na página clicando duas vezes no ramo "
Usado " (por padrão, os botões estão presentes na página).
Adicione uma nova página clicando duas vezes no ramo "
Adicionar página "
A caixa de diálogo para criar uma nova página será aberta. Nele, preencha o nome da página (como será chamado no menu da interface de configurações) e o endereço. Os endereços da subpágina sempre vão para o endereço da página inicial. Nesta página, definiremos as configurações do ponto de acesso.
Assim como na página principal, no novo nó da página, você pode alterar o endereço da página, nome, definir estilos para esta página específica, definir os parâmetros exibidos e a presença de botões. Bem, além disso, há a capacidade de excluir a página.
Adicione o parâmetro "
ponto de acesso Wi-Fi - nome da rede (SSID) " à página
E selecionaremos o tipo "
Campo de entrada " para ele e o rótulo "
Nome da rede "
Da mesma maneira, adicione os demais parâmetros do ponto de acesso.
Se houver mais de um parâmetro na página, as ramificações aparecerão nos nós dos parâmetros para alterar a ordem em que os parâmetros são exibidos na página.
Como existem parâmetros variáveis na página, deixaremos os botões de salvar e redefinir o controlador.
Para esta página na caixa de diálogo de estilos, defina o título para esta página.
No mesmo cenário, crie uma página com as configurações do cliente. Para o parâmetro "
cliente Wi-Fi - obter IP sobre DHCP ", definimos o tipo do parâmetro "
Caixa de seleção"
Se houver mais de duas páginas na interface nos nós da página, também aparecerão ramificações que controlam a posição das páginas no menu da interface. Mas a página principal sempre permanece a primeira.
No momento, o acesso à interface e a todas as páginas é gratuito. Nós introduzimos uma restrição de acesso. Para fazer isso, clique duas vezes na ramificação "
Acesso gratuito " do nó "
Acesso à interface "
Agora você precisará fazer login para acessar a interface. O tempo de autorização ativo pode ser definido. Por padrão, são 15 minutos. Após esse período, após a última atividade do usuário, o usuário atual será redefinido automaticamente. Esse tempo pode ser alterado clicando duas vezes no ramo correspondente.
No nó "
Usuários ", você pode definir o número necessário de usuários. Sempre há um super usuário (o login padrão é
admin ). Todas as páginas e parâmetros estão sempre disponíveis para ele. Como para qualquer usuário, você pode especificar um nome de usuário e senha em seu site.
Crie um novo usuário que tenha o direito de configurar o ponto de acesso. Para fazer isso, clique duas vezes no ramo "
Adicionar usuário ". A caixa de diálogo Adicionar usuário é aberta. Nele, definiremos o nome de usuário e a senha do novo usuário
E crie outro usuário que possa configurar o cliente.
Após ativar o acesso por login e senha, o botão “
Sair ” apareceu em todas as páginas, o que serve para sair do usuário atual. Deixe em todas as páginas.
Agora configure o acesso às páginas. A página principal está sempre disponível para todos os usuários. E nos nós das páginas restantes, um novo ramo "
Access " apareceu. Clique duas vezes nesta ramificação no nó da página "
Ponto de acesso ".
Uma caixa de diálogo será aberta para selecionar usuários para acessar a página. Por padrão, o acesso é aberto a todos os usuários.
Desmarque o usuário "
User_Client ", limitando assim o acesso a esta página.
Da mesma forma, restringimos o acesso à página de configurações do cliente ao usuário "
User_Tochka "
Vamos criar outra página para definir nomes de usuário e senhas
Adicione a esta página parâmetros de login e senha para todos os usuários. Esses parâmetros apareceram na lista de parâmetros do sistema após ativar o acesso por login e senha.
Para esta página, não configuraremos a restrição de acesso, mas a restrição diretamente nos parâmetros. As ramificações das configurações de acesso apareceram nos nós dos parâmetros, semelhantes às configurações de acesso à página.
Negar o acesso a ambos os usuários pelos parâmetros do administrador e deixamos o acesso aos parâmetros do usuário apenas ao usuário a quem esses parâmetros pertencem.
Sobre isso, consideramos a configuração da interface da web completa.
Pressione o botão “Compilar projeto” na interface principal do programa e obtenha um esboço pronto no IDE do Arduino.
No Arduino IDE, selecionamos nossa placa.
E a porta à qual o controlador está conectado
Em seguida, preencha o firmware no controlador
Então, o que conseguimos ...
Após o download, um novo ponto de acesso é exibido.
Estamos conectados a ele e vamos para o endereço definido por nós no projeto. A página de login é exibida.
Digite a senha e o login do administrador e acesse a página principal
Vemos todas as páginas no menu
E na página de login e senha todos os parâmetros.
Saímos e
efetuamos login em
User_Tochka . Vemos apenas páginas acessíveis no menu e apenas nosso nome de usuário e senha
Estamos logados em User_Client e a imagem é apropriada - vemos apenas o que é suposto
Abrimos o IDE do Arduino e, nas configurações da porta, vemos que o controlador está pronto para atualizar o firmware "over the air".
Isso é tudo por hoje.
Na próxima lição, consideraremos os parâmetros do sistema do usuário e a sincronização com os servidores de horário exato. Faça o download do projeto criado nesta lição
aqui .
UPD
Esta lição foi criada para a versão 3.1.4, que está agora em teste de pré-lançamento. Você pode baixá-lo
aqui . Você pode aprender mais sobre o projeto FLProg
no blog da empresa no hub ,
no site do projeto e no
fórum . Além disso, no canal
ArduinoProm ,
você pode assistir a uma enorme variedade de vídeo aulas.