Início / Projetos Arduino / Projetos Squids / Básico / Projeto 94 - Simulando um botão giratório no display OLED - Arduino

---

Projeto 94 - Simulando um botão giratório no display OLED - Arduino

Angelo Luis Ferreira | 26/02/2021 Acessos: 3.949

Objetivo

O objetivo deste projeto é simular um botão de controle no display OLED. O botão servirá para controlar a iluminação de um led através de um potenciômetro. Assim, quando girarmos o eixo do potenciômetro, veremos no display o ponteiro girando de forma correspondente. Vamos também simular um botão digital que exibirá no display uma barra de controle e o valor PWM na saída do Arduino que irá aumentar ou diminuir o brilho do led.

Obs: O desenho e o funcionamento do botão simulado foi adaptado do projeto Projeto 93 - Criando um relógio de estilo analógico com OLED SSD1306, módulo DS3231 e Arduino.

Definições

Display OLED (Organic Light-Emitting Diode, ou Diodo Emissor de Luz Orgânico): Display gráfico com alto contraste, excelente nitidez, leve e muito econômico, pois como possui luz própria não precisa de backlight utilizado nas telas de LCD ou LED, por exemplo. Outra grande vantagem do display OLED é possibilidade de gerar imagens. Como desvantagens, o display possui uma vida útil menor (entre 10mil e 40mil horas de uso) e não deve ser utilizado em locais úmidos, pois a água danifica facilmente o componente. Para saber mais leia Projeto 90 - Como controlar um Display OLED SSD1306 com Arduino - biblioteca Adafruit. No tutorial você saberá como usar todos os recursos do display OLED SSD1306 via I2C.

Atenção: Não utilize o display em locais molhados ou úmidos, pois a água pode danificar o componente.

Aplicação

Para fins didáticos e projetos onde é necessária a exibição de figuras plotadas a partir de uma imagem em bitmap (telas iniciais de logotipos de empresa e gráficos para exibir informações).

Componentes necessários

Referência	Componente	Quantidade	Imagem	Observação
Protoboard	Protoboard 830 pontos	1		No mínimo utilizar protoboard com 830 pontos
Jumpers	Kit cabos ligação macho / macho	1
Display OLED	Display OLED SSD1306	1		– Tensão de operação: 3,3-5V – Controlador: SSD1306 – Cor: Azul e Amarelo – Comunicação: I2C – Resolução: 128×64 – Dimensões: 30 x 27mm Você também poderá utilizar na cor azul, branco ou colorido. A comunicação poderá ser I2C ou SPI
Potenciômetro	Potenciômetro 10K	1		O valor do potenciômetro aumenta quando giramos o eixo do componente na direção do polo negativo para o polo positivo.
Push Button	Push button 6X6X5mm	1
Led difuso 5mm	Led 5mm	1		Utilizar led de qualquer cor
Resistor	Resistor de 150 Ω ou maior	1		Se precisar usar outros valores, calcule o resistor apropriado para o led ou barra grafica utilizada
Arduino UNO R3	Arduino UNO	1		Você poderá utilizar uma placa Arduino UNO original ou similar

Montagem do Circuito

Conecte os componentes no Protoboard como mostra a figura abaixo (display OLED com comunicação I2C). Verifique cuidadosamente os cabos de ligação antes de ligar seu Arduino. Lembre-se que o Arduino deve estar totalmente desconectado da força enquanto você monta o circuito.

Atenção

1. Para a montagem do display OLED SSD1306 via protocolo I2C, verifique a "pinagem" do módulo com comunicação I2C:

Observações:

a. Em algumas marcas os pino Vcc e GND estão invertidos. Portanto, preste muita atenção antes de fazer a conexão com o Arduino.

b. Caso o utilize um display OLED por comunicação via serial SPI veja como é feita a conexão no Projeto 90 - Como controlar um Display OLED SSD1306 com Arduino - biblioteca Adafruit.

1.1. Faça a conexão dos pinos SCL e SDA com o Arduino da seguinte forma:

1.2. No nosso projeto utilizamos um display OLED SSD1306 I2C e Arduino Uno. Veja abaixo como fizemos a conexão.

2. Lembre-se que o LED tem polaridade: O terminal maior tem polaridade positiva e o lado do chanfro tem polaridade negativa.

3. Determinamos o valor do resistor através da tabela prática: Tabela prática de utilização de leds 3mm e 5mm. Entretanto, o mais correto é sempre verificar o datasheet do fabricante do LED para você ter os exatos valores de tensão e corrente do mesmo - leia Como calcular o resistor adequado para o led e Leds ligados em série e em paralelo.

Obs.: Resistores superiores a 150 Ω poderão ser utilizados em LEDs de todas as cores para um circuito com tensão igual ou inferior a 5V.

3.1. Valores utilizados para nossos projetos: LEDs difusos ou de alto brilho: Vermelho, Laranja e Amarelo: 150 Ω | Led Verde e Azul: 100 Ω

4.  Veja na figura abaixo como deve ser montado o potenciômetro. Observe a ligação do cabo positivo e negativo no potenciômetro. O cabo amarelo (pino de centro) se conecta com o pino analógico do Arduino. Nesta montagem, quando girarmos o eixo do potenciômetro no sentido horário, o o brilho do led aumentará.

4. Monte o botão (push button) sem o resistor, pois através da programação vamos habilitar o resistor pull-up interno do arduino. Desta forma, quando o botão estiver pressionado, o Arduino retornará "LOW" ou "0". Para saber mais sobre botões,assista o vídeo Arduino: Botão e Resistor de Pull Up Interno ou leia os artigos: Projeto 04a - Push Button como interruptor - liga e desliga (padrão para pull-down ou pull-up) e Como usar push button com Arduino (programação).

5. A montagem do nosso exemplo foi realizada em um protoboard com 400 pontos e com um display OLED SSD1306 com comunicação via protocolo I2C. Verifique sempre se o seu protoboard possui linhas de alimentação contínuas ou separadas.

Incluindo as bibliotecas Adafruit SSD1306 e Adafruit GFX

Para utilizar o controlador SSD1306 vamos incluir a biblioteca Adafruit SSD1306. Esta biblioteca foi escrita para resolver a complexidade do controlador SSD1306, oferecendo comandos simples para facilitar o controle de operação do display OLED. Para obtermos uma experiência completa, precisamos instalar também a biblioteca Adafruit GFX para exibir elementos gráficos primitivos como pontos, linhas, círculos, retângulos, etc.

Instalação das bibliotecas

1. No IDE do Arduino, acesse a aba Sketch, selecione [Incluir Biblioteca] e depois [Gerenciar Bibliotecas...].

2. No campo de pesquisa digite ssd1306 adafruit. Localizada a biblioteca Adafruit SSD1306 clique no botão [Instalar].

3. Na janela "Dependencies for library Adafruit SSD1306..." clique no botão [Install all]. Desta forma, instalaremos as bibliotecas Adafruit SSD1306, Adafruit GFX library e Adafruit BusIO todas juntas automaticamente.

4. Após a instalação, observe que aparecerá a informação que as bibliotecas foram instaladas. (Lembre-se que precisaremos das bibliotecas Adafruit SSD1306 e Adafruit GFX Library para controlar nosso display OLED)

Definindo coordenadas para o botão do display

1. Centro do nosso botão para um display 64px (height) X 128px (width)

Obs.: Utilizamos para o nosso projeto o desenho de um relógio que aproveitamos do projeto Criando um relógio de estilo analógico com OLED SSD1306, módulo DS3231 e Arduino.

1.1. Raio máximo = 64px / 2 = 32px

1.2. Calculando as coordenadas do centro do círculo: clock_center_x = 64px e clock_center_x = 32px

2- Cálculo das coordenadas para marcadores e ponteiro do botão

2.2. Cálculo das coordenadas dos ponteiros

Fonte: https://www.youtube.com/watch?v=cxcGwRSEVLE

Código do Projeto (Sketch)

1. Faça o download e abra o arquivo projeto94.ino no IDE do Arduino: DOWNLOAD - projeto94.ino

2. Se preferir, copie e cole o código abaixo no IDE do Arduino:

/*******************************************************************************

     Projeto 94 - Simulando botão em um display OLED
     Criado por: Angelo Luis Ferreira
     Data: 16/02/2020
             http://squids.com.br/arduino

*******************************************************************************/
#include <SPI.h> // caso utilize comunicação SPI
#include <Wire.h> // biblioteca requerida para I2C
#include <Adafruit_GFX.h> // biblioteca OLED
#include <Adafruit_SSD1306.h> // biblioteca OLED

// configuração do display OLED
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// definição pino conexão led e push button
const byte ledPin = 3; //(PWM)
const byte butPin = 12;
// definição do potenciômetro
const byte potPin = A0;

// variável para alterar tipo de botão
boolean typeButton = 1; // 1 = analógico e 0 = digital

// leitura do potenciômentro
int potValue;

// ================ variáveis para o analog clock ================================
// variáveis para o relógio tipo analógico
const float pi = 3.14159267;
const int clock_center_x=64;
const int clock_center_y=32;
int o=1;

// variáveis para o cálculo das coordenadas dos pontos no círculo
int x;
int y;
int x1;
int y1;

// variáveis para armazenar valores lidos potenciômetro
int minutes;

// variáveis para pegar valor posição ponteiro
int minuto;


// ==============================================================================

void setup() {
  Serial.begin(9600); // inicializa o monitor serial (usado para testes)
  
  // define pino led como saída do Arduino
  pinMode(ledPin, OUTPUT);
  // define pino push button como entrada do Arduino
  pinMode(butPin, INPUT_PULLUP); // pull up interno  

  display.begin(SSD1306_SWITCHCAPVCC, 0x3C); // inicializa a comunicação I2C do OLED end 0X3C

  // Clear the buffer e inicializa o relógio analógico
  display.clearDisplay();
  draw_clock_face();   
  display.display();
  }

void loop() {
  potValue = analogRead(potPin); // lê potenciômetro
  dimmerLed(); // gera brilho no led
  Serial.println(minuto);
  setTypeButton(); // define o tipo do botão
  if(typeButton == true) {
    draw_clock_face();   
    analogButton();
 } else digitalButton();
}

// ======================= funcionalidades =================================

// altera tipo do relógio
void setTypeButton() {
  if (!digitalRead(butPin)) {
    typeButton = !typeButton;
    while(!digitalRead(butPin)) {}    
    delay(50);
  }
}

// define brilho do led (PWM)
void dimmerLed() {
  analogWrite(ledPin, map(potValue,0,1023,0,255)); //converte valores proporcionalmente
}

// ============================== analogicButton ==============================

// analogClock
void analogButton() {
    // get posição do botão  
    minuto = map(potValue,0,1023,0,55); // converte os valores de 0 a 55
    // exibe no oled chamando as funções
    draw_minute(minutes,0);
    draw_minute(minuto,1);
    display.display();

    // atribui valores às variáveis 
    minutes = minuto;
    redraw_clock_face_elements();
}  

// exibe ponteiro do botão
void draw_minute(int minute, int mode) {
   y= (24*cos(pi-(2*pi)/60*minute))+clock_center_y;
   x =(24*sin(pi-(2*pi)/60*minute))+clock_center_x;
   if (mode==1)display.drawLine(clock_center_x,clock_center_y,x,y,WHITE); 
   else display.drawLine(clock_center_x,clock_center_y,x,y,BLACK);
}

// desenha a face do botão 
void draw_clock_face(void) {
  // desenha o centro do relógio
  display.drawCircle(clock_center_x, clock_center_y,3, WHITE);
  display.fillCircle(clock_center_x, clock_center_y,3, WHITE);

  // desenha as marcações do botão
  for (int i=0;i<12;i++){
     y= (32*cos(pi-(2*pi)/12*i))+clock_center_y;
     x =(32*sin(pi-(2*pi)/12*i))+clock_center_x;
     y1= (28*cos(pi-(2*pi)/12*i))+clock_center_y;
     x1 =(28*sin(pi-(2*pi)/12*i))+clock_center_x;
     display.drawLine(x1,y1,x,y,WHITE);
  }
  // imprime 0 no topo da face do botão
  display.drawCircle(26*sin(pi)+clock_center_x, (26*cos(pi))+clock_center_y, 6, BLACK);
  display.fillCircle(26*sin(pi)+clock_center_x, (26*cos(pi))+clock_center_y, 5, BLACK);
  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(WHITE);        // Draw white text
  display.setCursor(clock_center_x-3,0);             // Start at top-left corner
  display.print("0");
}

// redesenha os elementos
void redraw_clock_face_elements(void) {
    display.drawCircle(clock_center_x, clock_center_y,3, WHITE);
    display.fillCircle(clock_center_x, clock_center_y,3, WHITE);
    display.setCursor(clock_center_x-3,0);             
    display.print("0");
}

// =============================== digalButton ================================
 void digitalButton() {

  // calcula a largura do botão
  byte widthButton = map(potValue,0,1023,0,128);
  
  // Desenha botão digital
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.fillRect(0, 0, widthButton, 13, WHITE);

  // Desenha borda do relógio (com cantos arredondados)
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.drawRoundRect(0, 16, 128, 45, 8, WHITE);

  // Imprime o nome do relógio
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(33, 25);
  display.print("Brilho do Led");

  // Imprime valor lido no potenciômetro
  display.setTextSize(2);
  display.setTextColor(WHITE);
  display.setCursor(50, 40);
  display.print(map(potValue,0,1023,0,255));
  //display.print(potValue);

  // exibe no display
  display.display();
  
  // limpa o display
  display.clearDisplay();
 }

Comentários