Novos redatores

Bussola Eletrônica com Arduino

Eletrogate 30 de março de 2023

O sensor magnetômetro

Magnetômetro é um dispositivo sensível a campos eletromagnéticos. Os magnetômetros podem medir a intensidade, variações e até o sentido de campos eletromagnéticos. Podemos usar esse efeito de orientação a campos eletromagnéticos para criar diversas aplicações. Uma delas é o que faremos hoje: uma bússola digital. Para isso, usaremos o sensor HMC5883L.

eletrogate

Primeiro, precisamos falar dos dois tipos que temos no mercado. Este sensor pode ser encontrado com dois tipos diferentes de CI (Circuito Integrado), o HMC5883L e o QMC5883L. Geralmente, as placas vêm com a descrição do HMC5883L, mas nem todas têm realmente esta CI, pois o QMC5883L é mais barato. A maioria dos sensores é feita com ele. É importante falar disso, pois o funcionamento de cada um é diferente e usaremos uma biblioteca para desenvolver o projeto com esse sensor. Desenvolveremos com a QMC5883L, mais comum no mercado. Mas não se preocupe: deixaremos as duas bibliotecas aqui, caso você tenha o HMC5883L.


Inicianiando o Projeto

Neste projeto seguiremos este fluxo:

As informações magnéticas serão recebidas pelo sensor, interpretadas e enviadas como comandos de teclado pela Arduino Leonardo, recebidas pelo computador e interpretadas pela página web. Primeiramente, precisamos falar que usaremos uma biblioteca na Leonardo que controla o computador. Por isso, é muito IMPORTANTE ter uma função de interrupção deste código. Imagine que você programou a Leonardo para escrever a letra “x” a cada 1 segundo em seu computador e agora você deseja alterar este código. Abrindo o IDE com a placa conectada você não conseguirá escrever outro código, pois a letra “x” estará sendo escrita várias vezes dentro do IDE e se você desconectar a placa não conseguirá carregar outro código nela, pois precisa estar conectada para ser gravada novamente. Então, para que você não tenha que regravar o firmware de sua placa, SEMPRE se certifique de ter uma função de segurança em códigos de controle de computador na Leonardo.

Criaremos um código de controle dentro de nosso projeto que seguirá uma estrutura semelhante a essa:

/*-----------------------------------------------------------------------------------------------------------------
                            - Exemplo de função de segurança para Arduino Leonardo -
 Ligar um Jumper entre o Pino 8 e o pino GND para PARAR o código principal.
 Desconectar O jumper para rodar o código principal.
-----------------------------------------------------------------------------------------------------------------*/
int rodando = 8;// variável de verificação

void setup() {
  //configuração  a variável de controle para receber dados.
  pinMode(rodando, INPUT_PULLUP);
  //configuração do led da placa.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  if(digitalRead(rodando) == HIGH){
    // Se a variável rodando receber um sinal HIGH: Roda o código principal e ativa o led da placa.
    digitalWrite(LED_BUILTIN,HIGH);
  }
  else{
    //Se não: Interrompe o código principal e desativa o led da placa.
     digitalWrite(LED_BUILTIN,LOW);}
}

Seguindo este código, toda vez que um jumper é conectado entre a porta 8 e GND na Leonardo, o código principal é interrompido e o led da placa é apagado. Se desconectarmos o jumper, o código principal roda e o led da placa acende.

Instale a biblioteca keyBoard para usar as funções de telado da Leonardo. Para isso, basta ir ao seu gerenciador de bibliotecas, procurar por keyboard e instalar a biblioteca.

Agora instale a biblioteca zip do sensor QMC5883L.

Bibliotecas do sensor:

QMC5883L

HMC5883L

Caso você não lembre como instala a biblioteca, basta seguir esses passos dentro de seu IDE Arduino: SKETCH > INCLUIR BIBLIOTECA > ADICIONAR BIBLIOTECA ZIP. Selecione a biblioteca desejada na tela que será aberta e, se tudo der certo, você verá uma mensagem de sucesso no canto inferior esquerdo de seu IDE. Também usaremos a biblioteca Wire para fazer a comunicação I₂C, mas esta já vem instalada no IDE. Caso você tenha dúvida se está instalada, é só pesquisar por ela no gerenciador de bibliotecas, como fizemos com a Keyboard.

Com todas as bibliotecas prontas, vamos ao hardware!


Montando o Circuito

Este é o circuito usado:

A ligação é simples: GND conectado ao GND, VCC conectado ao 5V, SCL conectado ao SCL e SDA conectado ao SDA. Também temos um jumper amarelo entre o GND e o pino 8. Este é o nosso pino de segurança para podermos reprogramar a Leonardo e parar o uso do teclado quando necessário. Se o jumper for desconectado, o código principal inicia. Observe que este sensor pode ter um quinto pino chamado de DRDY. Mas não se preocupe: não utilizaremos ele aqui.

Com tudo montado no seu devido lugar, vamos à programação!


A Parte do Software

Vamos começar com o código da Leonardo:

/*-----------------------------------------------------------------------------------------------------------------
                            - Bússola com Ardiono Leonardo e sensor QMC5883 -
  @Autor:Abraão da Silva
  @Blog: Eletrogate
  @versão: 1.0
  @descrição: O Arduino recebe os valores do sensor magnetômetro e envia para uma aplicação web ao assumir 
  o teclado do computador. 
  IMPORTANTE: Sempre que utilizar funções que assumem o teclado e mouse do computador
  verifique se existe uma lógica de interrupção de controle no Arduilo Leonardo. 
-----------------------------------------------------------------------------------------------------------------*/
//Bibliotecas
#include <Wire.h> //Comunicação I2C
#include <MechaQMC5883.h> //Sensor magnetômetro
#include <Keyboard.h> // teclado 

//Variável de interrupção do Leonardo
int rodar = 8;

//Objeto do magnetômetro
MechaQMC5883 bussola;

//variáveis do magnetômetro
float graus = 0.0;
int grauAnterior = 0;
int x, y, z;
float azimuth;
float declinacao = -17; //⬅COLOQUE AQUI A SUA DECLINAÇÃO MAGNÉTICA

void setup() {
  Keyboard.begin(); // Inicializa o teclado do LEONARDO
  Wire.begin();//Inicializando a comunicação I2C
  bussola.init();//Inicializando a bussola
  pinMode(rodar, INPUT_PULLUP);//Definindo o pino interrupção do Leonardo
  pinMode(LED_BUILTIN, OUTPUT);//Habilitando o led da placa
}

void loop() {
  //sem o jumber entre d8 e gnd
  if (digitalRead(rodar)== HIGH) {
    digitalWrite(LED_BUILTIN, HIGH);
    bussola.read(&x, &y, &z, &azimuth);//lendo os valores do sensor e guardando o resultado nas variáveis.

    //melhorando os valores
    /*Aqui são feitas 100 leituras e aplicado a  média aritmética simples para melhorar
      a resolução da leitura final e por fim é contabilizado o valor da declinação magnética.
      Observe que obtemos o valor da leitura através do valor passado para a variável azimuth, ou seja, chamamos a variável 100 vezes e o método read da    bussola atualiza as informações da variável azimuth.*/
    for (int i = 0; i < 100; i++) {graus += azimuth;}
    graus = (graus / 100) - declinacao;
    
    //convertendo o valor para inteiro
    int  imprimir = (int)graus;
    
    //Imprimindo o valor no teclado 
    Keyboard.print(imprimir); 
    //Precionando a tecla Enter
    Keyboard.write(KEY_RETURN); 
    //intervalo de escrita
    delay(1200);
  }
  else {
     //com o jumber entre d8 e gnd
    digitalWrite(LED_BUILTIN, LOW); 
  }
} /*fim do código :)*/

O código foi bem comentado para você entender o que cada parte faz e conseguir fazer suas adaptações. Aqui, temos que nos atentar em uma variável chamada de “declinacao”. Esta variável é usada para corrigir a nossa posição em relação ao norte geográfico da terra, pois a orientação do sensor é o norte magnético da terra que não é o mesmo que o norte geográfico. Então, precisamos encontrar a nossa declinação magnética para corrigir isso.

Neste site, podemos encontrar nossa declinação magnética.

https://www.magnetic-declination.com/#

No campo lateral esquerdo digite a sua cidade, paiss e aperte Search map. Após isso, aparecerá a cidade no mapa. O que nos interessa é os graus, indicados em azul:

https://www.magnetic-declination.com/#

Colocaremos este valor dentro de nossa variável declinacao e pronto! Nosso código para a Leonardo está finalizado. Se você carregar o código verá que nada acontece, pois precisamos desconectar o jumper de parada para começar a escrever em nosso computador.

Vamos fazer um teste em um editor de texto:

Ao remover o jumper, temos a escrita dos ângulos conforme a orientação magnética da terra e, ao conectar novamente, a escrita é interrompida. O eixo do sensor que é usado como direção é o x. Então atente para apontar ele para a direção que você deseja verificar. Agora, daremos um passo além: vamos desenvolver a aplicação web que irá interagir com esses dados de ângulos, dando sentido visual ao que fizemos. Se você é novo(a) na programação web, não se assunte com a quantidade de arquivos ou códigos. Deixaremos aqui os arquivos desenvolvidos como referência para você usar, testar e aprimorar. Basta extrair o arquivo zip e abrir o arquivo index.

Basicamente, temos 3 arquivos de criação da aplicação e uma pasta com as imagens usadas.

O primeiro arquivo é o index.html. Ele é o esqueleto de nossa aplicação. Podemos ver  a aplicação web clicando nele. Ele abre diretamente no navegador, pois é do tipo html.

Segue o código HTML comentado:

<!-- ARQUIVO HTML -   Este é o esqueleto da aplicação web         -->

<!DOCTYPE html> <!-- Tipo de arquivo-->
<html lang="pt-br"> <!-- linguagem -->
    <!-- Cabeçalho de informações para o navegador e para a aba do navegador -->
    <head> 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./style.css"><!-- adicionando a folha de estilo -->
        <link rel="shortcut icon" href="imagem/iconeBussola.ico" ><!-- icone da aba da página -->
        <title>Bússola com Arduino</title><!-- Título da aba da página -->
       
    </head>

    <!-- Corpo da aplicação que aparece dentro do navegador -->
    <body>

        <!-- tag de formulário usado para capturar a entrada de dados do arduino através da tag input -->
        <form action="">
            <input type="number" autofocus="true">
        </form>

        <!-- itens da página -->
            <div class="fundo">
             <div class="bussola">
              <img  class = "ponteiro"src="imagem/ponteiro.png" alt="">
             </div>
            <div>
    </body>
    <script src="./script.js"></script><!-- Adicionando o arquivo de código Java Script -->
</html>
<!-- fim do HTML :) -->


<!-------------------------------------------------------------------------------------------------- 
  @Autor:Abraão da Silva
  @Blog: Eletrogate
  @versão: 1.0
 -------------------------------------------------------------------------------------------------->

O segundo arquivo é o Script. É nele que criamos toda a lógica da aplicação em linguagem Java Script.

/*                                     ARQUIVO DE "CÓDIGO"                                           
Neste arquivo as propriedades lógicas de código como pegar os valores e passar os valores são desenvolvidas*/


//Pegamos os valores das variáveis criadas no arquivo HTML
let pagina = document.querySelector("html")
let ponteiro  = document.querySelector(".ponteiro")
let entrada = document.querySelector("input")
let formulario = document.querySelector("form") 

/*Evento que pega a entrada de dados do formulário (que são os valores vindo do arduino)
Toda vez que a tecla "enter" é precionada na aplicação web essa função é chamada e os valores são recebidos*/
formulario.onsubmit = (event)=>{

    event.preventDefault() //inpedindo a página de recarregar
    
    //Lógica para passar os ângulos para a aplicação web rotacionar corretamente
    let grau = 0
    let calculo = grau - entrada.value
    let sentido = calculo * (-1)
    //passando o ângulo de correção para a aplicação
    ponteiro.style.transform = `rotate(${sentido}deg)`
    //guardando o valor anterior para usar na lógica
    grau = entrada.value
    //apagando o valor anterior para receber o novo valor
    entrada.value = null 
}
/*fim do script :)*/


/*****************************************************************************************************
    @Autor:Abraão da Silva
    @Blog: Eletrogate
    @versão: 1.0
******************************************************************************************************/

E o terceiro arquivo é o style.css, usado para fazer todos os estilos gráficos de nossa aplicação.

/*                                     FOLHA DE ESTILO                                            */
/*Neste arquivo as propriedades gráficas como cor e tamanho dos elementos são definidas.         */


/*ZERANDO ESTILOS JÁ FEITOS PELO NAVEGADOR ➡ Removemos os estilos que o navegador já têm para criar tudo do zero*/
*{
    padding: 0ch;
    margin: 0%;
    box-sizing: border-box; 
}

/*CORPO DA APLICAÇÃO ➡ Definimos aqui o tamanho da página, plano de fundo e alinhamentos*/
body{
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(imagem/arduino.jpg);
    display:flex;
    align-items: center;
    justify-content: center;
}

/*FUNDO DA BUSSOLA ➡ Definimos aqui as propriedades do círculo, quase transparente, que envolve a bússola */
.fundo{
    height:450px;
    width:450px;
    border-radius: 100%;
    position: fixed;
    background-color: rgba(21, 29, 41, 0.271);
}

/*iMAGEM DA BÚSSOLA ➡ Estilização da imagem branca que é a bússola*/
.bussola{
    display: flex;
    justify-content: center;
    height:450px;
    width:450px;
    background-image: url(imagem/bussola.png);
    background-size: cover;
}

/*PONTEIRO DA BÚSSOLA ➡ Limitamos o tamanho da imagem do ponteiro da bússola*/
.ponteiro{height:460px;}

/*CAMPO DE NÚMEROS ➡ Estilo do campo que recebe os dados digitados no teclado pelo Arduino Leonardo*/
input{
    height: 100vh;
    width: 100vw;
    opacity: -2;
}

/*fim das estilizações :)*/

/****************************************************************************************************
    @Autor:Abraão da Silva
    @Blog: Eletrogate
    @versão: 1.0
****************************************************************************************************/

E, por fim, temos a pasta das imagens. Esta pasta contem arquivos de imagens usados pelo html e css para dar mais visual a nossa aplicação. Desenvolvemos a parte web de forma a simplificar a compreensão, mas fique à vontade para testar novos parâmetros dentro da aplicação. Alguns efeitos podem ficar surpreendentes e engraçados.

Agora, a Arduino Leonardo já envia informações para o computador e a aplicação web pega esses valores e move o ponteiro de nossa bussola digital.

Uma bússola sempre aponta para o Norte, independente da direção girada, mas, essa, aponta (indicador vermelho) para a direção que você apontar. Ou seja, se apontar para o Norte, verá a direção Norte, se apontar para o Leste, verá a direção Leste. Assim, a direção que você escolher sempre será o foco do ponteiro.

Olha só como ficou:


Finalizando

É interessante falar que, por este sensor usar campos eletromagnéticos, ele sofre a interferência de qualquer dispositivo que emite esses campos (no nosso caso, a câmera que estava gravando). Tente aproximar um celular do sensor para você ver como fica a orientação da bússola. Isso pode ser interessante em projetos onde desejamos saber se existe uma interferência eletromagnética ou não.


Sobre o Autor


Abraão da Silva

Estudante de Engenharia da Computação, especializado em curiosidades aparentemente aleatórias e desenvolvimento de software. Se eu não estiver pedalando agora estou estudando ou tentando aproveitar a energia dos raios.


Eletrogate

30 de março de 2023

A Eletrogate é uma loja virtual de componentes eletrônicos do Brasil e possui diversos produtos relacionados à Arduino, Automação, Robótica e Eletrônica em geral.

Tenha a Metodologia Eletrogate dentro da sua Escola! Conheça nosso Programa de Robótica nas Escolas!

Eletrogate Robô

Cadastre-se e fique por
dentro de novidades!