DEV Community: Diana Regina

Como fazer um pisca-pisca com LED e ArduinoUNO + Thinker Card

Diana Regina — Sun, 11 Oct 2020 23:57:45 +0000

Neste artigo vou mostrar como usar o Arduino UNO para fazer um pisca pisca com um LED e de quebra te apresentar um software bem bacana para montar circuitos caso você não tenha os materiais que mostrarei aqui.

Ou seja, tá fácil brincar com os LED's hoje. Ai que festa!!

Guia

🔍 Lista de Materiais

🔍 Saber disso vai te ajudar

🔍 Lendo o Datasheet

🔍 Montando os componentes no circuito

🔍 Montando os componentes no Thinker Card

🔍 Código no Arduino

Lista de Materiais

🔋 1x LED

🔋 1x Arduino UNO

🔋 2x Jumper's

🔋 1x Resistor de aproximadamente 160Ω (neste artigo usei de 270Ω).

Mas se não tiver esses materiais, clique aqui para ir ao tópico Montando com Thinker Card para simular esses componentes gratuitamente.

Saber disso vai te ajudar

📚 Conhecimentos básicos em eletrônica, mais especificamente saber o que é tensão, corrente, resistência, código de cores dos resistores, etc.

📚 Conhecimentos básicos sobre o que é o Arduíno e a programação usada nele. Ah! Não esqueça de instalar a IDE na sua máquina 😄

Lendo o Datasheet

Para a galera que mexe com eletrônica há algum tempo é fácil pegar um resistor de mais ou menos 270Ω à 390Ω e ligar um LED. Mas na real, de onde vem esse valor? 🤔

Calma, eletrônico não é vidente e muito menos sai chutando valores até dar certo. Eles retiram essas informações de uma especie de documento chamado Datasheet, é a partir dele que sabemos o quanto de corrente um componente precisa pra funcionar e também o quanto suporta para não queimar, por exemplo.

Por isso, recortei para nós uma tabela de um Datasheet para um LED e nele temos algumas informações:

Basicamente, ele nos diz que para um bom funcionamento desse LED precisamos fornecer 5V e cerca de 30mA.

Bom, para fornecer a tensão vamos usar a própria saída digital do Arduino (que já de 5V). Mas e a corrente? Bem, neste caso só calculando o resistor para garantir esse valor.

E para isso usaremos a lei de ohm:

Assim, temos:

R = 5V/30mA => 166,7Ω

Ok Diana, mas fui lá na Efigênia e não achei esse valor de resistência. Tudo bem, podemos usar o mais próximo desse valor como 160Ω, 180Ω, 270Ω e por ai vai. O importante é que não seja muito discrepante, fazendo com o que o LED queime se a resistência por muito baixa ou simplesmente nem funcione se for muito alta.

Montando os componentes no Thinker Card

Caso você ainda não tenha os materiais, é possível usar o software Thinker Card. Com ele você consegue montar e simular diversos circuitos eletrônicos.

Pra quem está começando é ótimo, mas não existem tantos componentes assim caso você estiver em um nível mais avançado.

Para usar é super fácil. É só cadastrar uma conta e começar as montagens. Veja como ficou o meu:

Perceba que o terminal mais longo do LED (anodo) foi conectado na porta D2 do Arduino e o mais curto (catodo) foi conectado ao GND.

Montando os componentes na protoboard

Observando o circuito montado no Thinker Card, podemos fazer a mesma montagem na versão física, ficará mais ou menos assim:

Código no Arduino

Agora vamos para a parte mais legal: escrever o código que vai fazer com que o LED fique piscando

O código que vamos mandar para a placa do Arduino é bem simples:

int output_LED = 2;

void setup()
{
  pinMode(output_LED, OUTPUT);
}

void loop()
{
  digitalWrite(output_LED, HIGH);
  delay(1000);
  digitalWrite(output_LED, LOW);
  delay(1000); 
}

Nele estamos iniciando uma variável que armazena a porta que iremos trabalhar (no caso a porta D2) com int output_LED = 2

Depois, estamos definindo que ela será uma saída com pinMode(output_LED, OUTPUT)

Em seguida, entramos em um loop (ou seja, tudo que está dentro dele será executado sempre), onde o LED começa ligado com digitalWrite(output_LED, HIGH) por 1 segundo (delay(1000))

Depois, o LED apaga por um segundo com digitalWrite(output_LED, LOW) e delay(1000) e assim por diante. Ou seja, fizemos um pisca-pisca de 1s com o LED.

E é isso ai galera, contem nos comentários se vocês gostaram ou não e deixem sugestões com novos temas para falar de eletrônica e programação ❤️

Como ler sinais cerebrais com Mindlfex e Arduino

Diana Regina — Mon, 07 Sep 2020 01:55:19 +0000

Já pensou em coletar os sinais elétricos do seu cérebro de um jeito muito fácil e barato? Se sim, vai ficar muito feliz em conhecer o Mindflex :)

Mind ... o que?

Mindflex é um brinquedo que foi fabricado pela empresa Neurosky em meados de 2009. Como vocês podem ver na imagem, o jogador coloca o dispositivo na cabeça e os sinais elétricos são enviados sem fio para a plataforma.

Basicamente, o jogo consiste em se concentrar no movimento que a bolinha faz. Quanto mais se concentrar, mais alto a bolinha subirá. Enquanto isso, ela percorre os obstáculos da plataforma.

Por baixo dos panos

O fato da bolinha subir e descer com o "poder da sua mente" não é magica. Na verdade, o sensor (eletrodo) faz a leitura dos sinais transmitidos pelo seu cérebro e envia para o circuito eletrônico, realizando cálculos para determinar o seu nível de atenção e meditação. Ou seja, os seus sinais servem como entrada para o dispositivo.

Baseado nesses níveis, o cooler da plataforma (que fica sempre embaixo da bolinha) pode girar com mais ou menos velocidade.

O que importa pra gente?

Não vamos usar a plataforma do brinquedo, já que nossa intensão é apenas ler os dados. Precisaremos na verdade adaptar o capacete para conectar á um outro dispositivo que vai mostrar essa leitura para nós: o Arduíno.

O que é Arduíno

O Arduíno é uma placa eletrônica de baixo custo, open source e com capacidade de conectar outros dispositivos eletrônicos como LEDs, motores e sensores. Por isso, é muito utilizado em pequenos projetos de eletrônica e automação.

Para controlar o funcionamento desses dispositivos, enviamos um código em linguagem C/C++ para ele a partir de um cabo USB conectado de um computador ou Raspberry para a placa.

Existem diversos modelos no mercado, mas o mais comum e que iremos utilizar aqui é Arduíno UNO. Inclusive, vamos precisar de mais algumas coisinhas:

O que vamos precisar:


Materiais	Capacete com pilhas

🔌 Placa Arduino UNO e cabo USB
🔌 Capacete Mindlfex - Manual do brinquedo
🔌 3 pilhas do tipo AAA
🔌 Ferro de solda
🔌 Solda
🔌 2x Jumpers macho-macho
🔌 Chave estrela (cerca de 1/4'')

Preparando o Mindflex

O capacete vem fechado, já que ele foi feito para se conectar com sua plataforma. Mas podemos abrir a placa facilmente e soldar alguns pontos importantes: o ponto de leitura e referencia.

📝 Abra o capacete usando uma chave estrela. Você encontrará algo como:

📝 Encontre os pontos de leitura e referencia da placa:

📝 Solde os pontos indicados com os fios que serão conectados ao Arduíno posteriormente.

📝 Para ligar o Mindflex, encaixe as pilhas e use a chave para ligar e desligar.

Preparando a IDE

Com o nosso Mindflex pronto, está na hora de preparar a placa para coletar os dados. Se você nunca usou o Arduíno, vai precisar fazer o download da IDE clicando aqui.

Se estiver usando Ubuntu, você pode abrir o terminal e rodar esse comando:



$ sudo snap install arduino

Depois de instalar, ao abri-la você vai encontrar uma interface como essa:

Primeiro, vamos precisar instalar uma lib especifica para ler dados dos capacetes na Neurosky: o Brain.

Para importar a lib no Arduíno, siga os passos:

Faça o download da lib pelo Github, gerando um arquivo .ZIP
Pela IDE, abra Sketch > Include Library > Add ZIP library e selecione a pasta ZIP.
De novo, acesse Sketch > Include Library e selecione Brain-master.

Agora, bora pro código:



#include <Brain.h>

Brain brain(Serial);

void setup() {
  Serial.begin(9600);
  delay(10);
}

void loop() {
  if (brain.update()) {
    if(brain.readSignalQuality() <= 60){
       Serial.println(brain.readCSV()); 
    }
  }
}

A partir desse código, estamos importando a biblioteca Brain com #include.

Dentro de void setup() estamos abrindo a comunicação serial com velocidade de 9600 bits por segundo e dando um pequeno delay antes de realizar a primeira leitura. Vale lembrar, que essa parte será realizada apenas uma vez.

O que será executando o tempo todo é código dentro de void loop(). Dentro dele, estamos chamando a função brain.update(), que retorna true se for possível ler os dados.

Depois, chamamos a função brain.readSignalQuality(), que retorna a qualidade dos sinais em um intervalo de 0 á 200.

Ok, mas que sinais são esses?

A leitura do Mindflex vai retornar 11 colunas, que indicam:

Coluna	Significado
Qualidade do Sinal	quanto mais próxima de 0, melhor, quanto mais próxima de 200, pior.
Atenção	retorna uma estimativa de atenção, variando de 0 (mínimo) á 100 (máximo).
Meditação	retorna uma estimativa de meditação, variando de 0 (mínimo) á 100 (máximo).

Os demais sinais são valores referentes aos nossos 5 tipos de ondas cerebrais, que representam resumidamente:

Onda	Significado
Delta	relacionada ao sono profundo sem sonhos.
Theta	relacionada ao sono, reflexão e imaginação.
Alfa Baixo	relacionada com calma e relaxamento.
Alfa Alto	idem, com frequência mais alta.
Beta Baixo	relacionado ao nosso estado de atenção.
Beta Alto	idem, com frequência mais alta.
Gama Baixo	relacionado com estados cognitivos, ou seja, quando estamos aprendendo ou memorizando algo.
Gama Alto	idem, com frequência mais alta.

Pelo nosso código, determinamos que se a qualidade do sinal for menor que 60, os dados serão mostrados na porta serial pela função brain.readCSV(), retornando o valor de cada sinal separado por virgula.

Claro que o ideal seria captar somente os dados em que a qualidade fosse o mais próximo possível de 0, mas outros eletrodomésticos/dispositivos que emitem ondas eletromagnéticas podem influenciar na nossa leitura.

Para conhecer outras funções que essa lib oferece acesse a documentação

Show! Agora conecte o cabo USB na placa e depois na sua máquina. Vá em Tools > Board para selecionar o tipo da placa (no caso, Arduíno UNO) e a porta em Tools > Port, que pode ser algo como AMC0, TTY, etc (pode variar).

Conecte o Mindflex com o Arduíno da seguinte forma:

Show! Agora, vista o headset de modo que o sensor eletrodo fique em contato com a sua testa e conecte os clips em suas orelhas (eles são necessários para referenciar o sinal).

Lendo os dados

Para ver os dados, vá em Tools > Serial Portal

Pronto! Agora conseguimos ver os sinais.

Indo além:

Se ficou interessado no Mindflex e como podemos fazer coisas incríveis com ele, sugiro que de uma olhada nesses materiais:

📚 Monografia de graduação da Tamires dos Santos, atualmente estudante de Mestrado da Universidade Federal do ABC e desenvolvedora de IHR

📚 Minha monografia usando o Mindflex, com foco em automatizar os processos de coleta, tratamento e treinamento da RNA para os dados

📚 Monografia sobre sistema de neurofeedback para análise de nível de concentração

📚 Artigo sobre o uso de ondas cerebrais para o controle de componentes eletrônicos.

📚 How to Hack Mindlex

📚 Tutorial sobre Mindflex

Como escrever um README.md sensacional no Github

Diana Regina — Sun, 03 May 2020 15:16:24 +0000

Depois de desenvolver aquele projeto incrível, ter passado vários perrengues com a aplicação e Git, você abriu no Github para a comunidade.

Mas as suas tarefas não terminaram, está na hora de documentar o seu projeto! E nada melhor do que um bom README.md.

Tópicos deste artigo

O que e o README
Por que usá-lo
Estrutura do README
Titulo e descrição do projeto
Como usar Badges
Funcionalidades da Aplicação
Emojis
Status do projeto
Deploy da aplicação? Oba
Poxa, mas meu projeto ainda não está no ar, e agora?
Imagens
Rodando o seu projeto
Dados, dados e mais dados
Como rodar os testes?
Acabou o projeto?
Não esqueça dos amiguinhos
Dependências e tecnologias
Resolvendo problemas
Fechando com chave de ouro
Deixe a preguiça de lado
Presente

O que é o README

Ele é basicamente um arquivo de texto que pode ser escrito a partir de tags HTML ou Markdown. Pessoalmente costumo misturar os dois pois usando HTML consigo centralizar os elementos. Neste artigo não vou focar muito em como utilizar essas tags e sim na estrutura da documentação em sí. Se quiserem saber como utilizá-las recomendo este artigo excelente do Raul Esteves.

Por que usá-lo

Ele é mais que uma forma de documentação, é o cartão de visita para o seu projeto e vai fazer com que as pessoas que visitem o seu perfil do Github passem mais tempo olhando o você produziu.

Neste artigo eu vou recriar o README.md que fiz para o projeto Certificates for Everyone, mas se você estiver com pressa, já deixo aqui um resumo deste artigo:

Estrutura do README

Titulo
Status
Tabela de Conteúdos
Descrição
Layout ou Deploy da aplicação
Pré-requisitos
Dependências e Libs Instaladas
Como rodar a aplicação
Como rodar os testes
Database
Solução de problemas
Contribuintes
Tarefas em aberto
Licença

A primeira coisa a se pensar é na estrutura dessa documentação, podemos ter algo parecido com:

Titulo e descrição do projeto:

Coloque o nome do seu projeto. Exemplo:



# Titulo 
ou
<h1 align="center"> Titulo </h1>

Seguido de uma descrição breve sobre ele:



## Descrição do Projeto
<p align="justify"> Escrever descrição, que ficará com texto justificado </p>

A tag align é usada para alinhar os elementos e assume left por padrão.

Perceba que aqui eu também inseri uma arte para o meu projeto, que poderia inclusive substituir o titulo. É algo que deixa o README.md mais bonito mas é completamente opcional

Como usar Badges

Badges servem para certificar ou indicar algo do teu projeto como status, licença, linguagens, testes, etc. Para saber mais acessem a documentação.

Para utilizados podemos entrar o site shields.oi. Lá é possível encontrar vários modelos prontos, mas hoje eu vou mostrar com personalizar um.

Podemos fazer isso a partir de uma URL como esta:



https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>&style=<STYLE>&logo=<LOGO>

Onde cada parâmetro significa:

LABEL texto do campo esquerdo
MESSAGE texto do campo direto
COLOR cor do campo direito (as opções podem ser encontradas no site)
STYLE estilo do badge inteiro. Podemos ter: plastic, flat, for-the-badge, social ou flat-square.
LOGO logo do campo esquerdo

Como exemplo, vou escolher os seguintes parâmetros:

LABEL como react
MESSAGE como framework
COLOR como blue
STYLE como for-the-badge
LOGO como REACT

Podemos colocar ele no README assim:



<img src="https://img.shields.io/static/v1?label=react&message=framework&color=blue&style=for-the-badge&logo=REACT"/>

ou ainda:



![Badge](https://img.shields.io/static/v1?label=react&message=framework&color=blue&style=for-the-badge&logo=REACT)

E tcharam!! Temos um badge personalizado

Outra mágica do shields é que podemos copiar a URL do projeto no github e colar no campo de busca do site. Em seguida, ele te dará badges personalizados de acordo com o teu repositório:

Escreva as principais coisas que a sua plataforma pode fazer

Seria bacana listar as principais funcionalidades que sua aplicação oferece a partir de listas, poderíamos fazer de algumas formas:



### Listas não ordenadas
- Cadastro de conta com Google
    - Captura de avatar a partir do login ou registro com google

### Usando um task list, marcando tarefa como completada ou não  

- [X] Cadastro de conta com Google
- [ ] Cadastro de conta com Google

### Lista ordenada
1. Listagem ordenada

Emojis

Para deixar os títulos e listas mais divertidos costumo acompanhá-los com algum emoji que representam aquele tópico. É possível encontrar vários neste repositório. Para usá-los, basta copiar o nome da tag e usar no README.md Exemplo:



## O que a plataforma é capaz de fazer :checkered_flag:

:trophy: Gerar PDF do certificado com as informações preenchidas no formulário para cada participantes para envio de e-mail 

:trophy: Check-list de participantes, permitindo selecionar quem irá receber os certificados 

:trophy: Permite que o organizador do evento escreva sua assinatura digital dentro da plataforma

E teremos como resultado:

Status do projeto

Indique se seu projeto ainda está em desenvolvimento ou concluído, isso ajuda muito quem acompanha o seus trabalhos.



> Status do Projeto: Concluido :heavy_check_mark:

> Status do Projeto: Em desenvolvimento :warning:

Deploy da aplicação? Oba

Se for possível subir a aplicação com Netlify ou outras plataformas que permitem com que as pessoas acessem o seu projeto sem ter o trabalho de rodar em suas maquinas é ótimo, isso poupa tempo e paciência. Se tiver, coloque na documentação:



## Deploy da Aplicação com Netlify: :dash:

/* Aqui estamos usando a tag Quotes do markdown*/

> https://certificates-for-everyone-womakerscode.netlify.app/

Poxa, mas meu projeto ainda não está no ar, e agora?

Já dizia aquele ditado: "Quem não tem cão caça com gato". Aqui é a mesma coisa, coloque prints do layout do projeto (no caso de uma aplicação frontend), assim o visitante já poderá ter uma imagem do que você fez.

Beleza, mas como eu coloco imagens?

Existe o jeito não tão legal de fazer, mas funciona:

Abra uma issue
Insira uma imagem
Um link como este será gerado: ![certificado](https://user-images.githubusercontent.com/46378210/80869186-51d1fd00-8c75-11ea-93d3-25485501aa43.png)
Copie e cole no README.md e tcharam! A imagem irá aparecer!

A forma mais segura de fazer:

Suba no seu repositório a imagem desejada. Ela ficará junto com os outros arquivos de código.
Acesse a imagem e copie a URL, que pode ser algo parecido com: https://github.com/Diana-ops/womakerscodeReact/blob/master/api-cep/src/assets/background.png
Use uma tag img e insira o link em src

Também é possível capturar imagens da própria web, usando a URL assim como nesses passos que eu mostrei, mas isso não é muito seguro, pois a imagem pode ser deletada posteriormente.

E se alguém quiser rodar o projeto na maquina?

Esse é um tópicos mais importantes da documentação, principalmente quando falamos de código open source. O primeiro passo é escrever os pré-requesitos que ele precisa para rodar, como o yarn, npm, gem, bundle, etc.

Depois deixe um passo a passo bem bacana para outros devs, indicando todos os comandos de instalação e execução e em que pasta executa-los.

Dependências e tecnologias

Sobre colocar as linguagens eu já antecipo: depende. O próprio Github já indica as linguagens dos arquivos lá no topo do diretório.

Então se já estiver tudo lá, não há necessidade de colocar de novo. Mas caso tenha usado alguma lib extra como React Routes, React PDF, Antdesign é bacana colocar.

Eu não vejo necessidade em se aprofundar em como instalar cada uma dessas dependências, pois um yarn install ou bundle já irão fazer isso e as instruções para instalar cada uma das libs podem ser encontradas na própria documentação.

O que pode ser feito aqui é utilizar os links dessa forma:



## Linguagens e libs utilizadas :books:

- [React PDF](https://react-pdf.org/): versão xx.xxx

Assim o visitante verá uma lista de todas as dependências e o link já redireciona para a documentação. Se for o caso, indique a versão necessária para rodar o projeto.

Dados, dados e mais dados

Caso a sua aplicação conte com um backend ou JSON você pode deixar uma amostra na documentação. Podemos usar tabelas, que são uteis para organizar diversas outras informações. As colunas são divididas pelas barras e o título principal do conteúdo são separados pelos traços.



### Participante: 
|name|email|present|receiveCertificate|course|
| -------- | -------- | -------- |-------- | -------- |
|Chaiana Hermes|chaiana_hermes@yahoo.com.br|true|false|Bootcamp React|

Como rodar os testes?

Os testes são boas práticas utilizadas em projetos (caso nunca tenha feito, comece já) e independente da linguagem que estiver usando sempre vai ter um comando para executa-los e é importante documentar. Exemplo:



/*Para projetos com React*/
$ npm test

/*Para projetos com Rails*/
$ rspec

Acabou o projeto?

Pode ser que ainda faltem algumas funcionalidades para serem implementadas ou refatorações em alguma parte do código. Aqui é o momento de listar quais tarefas estão abertas em issues ou no próprio README.md caso esteja aberto para receber contribuições e ajuda.

Não esqueça dos amiguinhos

Quando fizer aquele projeto em grupo ou receber alguma Pull Request como contribuição destaque-os. Uma coisa bem bacana aqui é misturar imagens com tabelas:



[<img src="https://avatars2.githubusercontent.com/u/46378210?s=400&u=071f7791bb03f8e102d835bdb9c2f0d3d24e8a34&v=" width=115 > <br> <sub> Diana Regina </sub>](https://github.com/Diana-ops) |
| :---: |

Confuso? Calma que eu explico.

Dentro de || temos uma tag html <img>, nela foi definido o link e o tamanho da imagem com src e width. Aqui foi inserido o avatar do dev.
Depois temos a tag <br>, que faz uma quebra de linha com o próximo elemento colocando-o em baixo da imagem.
Dentro de <sub> colocamos o nome dele.
Em seguida, juntamos a imagem e o nome dentro de [] seguido do link do github em ()
Por fim, os elementos são organizados em uma 'micro tabela', obtendo como resultado algo parecido com:

Para inserir mais devs, basta adicionais mais colunas.

Resolveu perrengues durante a aplicação? Documente!

É inevitável que erros ocorram durante a execução do projeto, a gente se estressa, passa horas no stackoverflow e em issues procurando respostas. Apesar de conseguir resolver, pode ser que alguma hora eles voltem e não existe nada pior do que esquecer de como resolver.

Não passe mais por isso! Quando tiver algum problema abra uma issue, apresente os erros e mostre como resolver, isso vai salvar a sua vida e a de outros devs em outros projetos. É uma forma sensacional de contribuir pra comunidade.

Claro, você pode deixar isso explicado no README.md também:



### Resolvendo problemas

Veja alguns problemas que surgiram no desenvolvimento deste projeto e como os resolvi em [issues](https://github.com/Diana-ops/treina-dev-turma-3/issues)

Ei, posso copiar o seu projeto?

A sua aplicação pode ter algum tipo de licença, que da direitos e restrições ao que as pessoas podem fazer com ele é muito importante que você deixe isso claro.

A licença mais utilizada é a MIT, que permite que qualquer pessoa possa usar, modificar e distribuir o seu projeto, mas te resguarda sob qualquer responsabilidade.

Para inserir, acesse

Insights > Community
Clique em add para licence
Uma PR será aberta e ao aceita-la uma nova branch será criada
Agora, o simbolo de MIT estará no seu diretório

Fechando com chave de ouro

Ufa, depois de ter mais esse trabalhão escrevendo a documentação podemos fazer uma lista de conteúdos (como se fosse um sumário) lá no começo do README.md que irá ajudar o visitante a ir direto ao tópico que ele quer.



### Tabela de Conteúdos
   * [Nome do tópico visivel](#nome-do-tópico)

### Nome do Tópico

⚠️ Para referenciar o tópico substitua letras maiúsculas por minusculas
⚠️ Caso o tópico tenha traços, ponto de interrogação e exclamação escreva como se não tivesse, pois o markdown não consegue encontrar.
⚠️ Caso o tópico esteja acompanhado de um emoji, escreva-o ignorando o simbolo ::

Deixe a preguiça de lado

Não espere o projeto terminar para começar a documentação. Pelo contrário! Deixe isso como a primeira tarefa, assim você pode planejar e documentar ao mesmo tempo.

Lembrando, não é obrigatório colocar todas essas informações e muito menos nessa ordem, tudo vai depender do seu projeto e os tópicos apesentados aqui são apenas sugestões.

Presente

Obrigada por ler até aqui, montei um template no gits com a estrutura de README mostrada neste artigo. Espero que gostem ❤️

Voltar para o inicio do artigo