{"id":2697,"date":"2019-05-06T13:44:08","date_gmt":"2019-05-06T13:44:08","guid":{"rendered":"https:\/\/blog.usinainfo.com.br\/?p=2697"},"modified":"2019-08-08T00:10:21","modified_gmt":"2019-08-08T03:10:21","slug":"programando-o-display-do-nodemcu-esp32-oled","status":"publish","type":"post","link":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/","title":{"rendered":"ESP32 Display Oled: Programando o Display do NodeMCU ESP32"},"content":{"rendered":"<p>Em um contexto onde a IoT tem sido foco de desenvolvimento, diversas placas embarcadas entraram no mercado com o enfoque de possibilitar a conex\u00e3o WiFi de maneira acess\u00edvel. Entre elas, destacam-se as diversas placas ESP e, ainda mais especificamente, o modelo <strong>ESP32<\/strong>. Nesse artigo, exploraremos os detalhes da vers\u00e3o <strong><a href=\"https:\/\/www.usinainfo.com.br\/nodemcu\/nodemcu-esp32-oled-iot-com-wifi-e-bluetooth-5318.html\" target=\"_blank\" rel=\"noopener noreferrer\">Nodemcu ESP32 OLED<\/a><\/strong> , que possibilita a visualiza\u00e7\u00e3o de dados de maneira integrada \u00e0 placa, sem a necessidade de fazer conex\u00f5es com jumpers. Na figura abaixo verifica-se a estrutura f\u00edsica do m\u00f3dulo.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/nodemcu-esp32-oled-iot-com-wifi-e-bluetooth-1.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2698\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/nodemcu-esp32-oled-iot-com-wifi-e-bluetooth-1.jpg\" alt=\"\" width=\"569\" height=\"325\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/nodemcu-esp32-oled-iot-com-wifi-e-bluetooth-1.jpg 700w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/nodemcu-esp32-oled-iot-com-wifi-e-bluetooth-1-300x171.jpg 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/a><\/p>\n<p>Inicialmente, podemos destacar a sua quantidade de portas GPIO, que somam 36 pinos. Outra caracter\u00edstica muito interessante \u00e9 a possibilidade de que algumas portas atuem como sensores capacitivos, ou seja, sensores de toque (veja as portas <em>Touch<\/em>, em laranja, na figura acima). Um dos maiores diferenciais dessa placa \u00e9, com certeza, o fato do ESP32 possuir display integrado. Isso \u00e9 de grande valia para o desenvolvimento de projetos que requeiram uma forma de sa\u00edda de dados mais direta e sem muita conex\u00e3o de fios.<\/p>\n<p>Esse display do Nodemcu ESP32 OLED, que exibe caracteres de cor branca, possui uma resolu\u00e7\u00e3o de 128&#215;64 pixels. Dessa maneira, pode-se criar figuras b\u00e1sicas e at\u00e9 mesmo anima\u00e7\u00f5es simples. As fun\u00e7\u00f5es de escrita na tela, que ser\u00e3o vistas nesse tutorial, possibilitam desenvolvimento de um variado conjunto de efeitos. Antes, por\u00e9m, \u00e9 necess\u00e1rio configurar o ambiente do Arduino para que possamos, de fato, programar nessa placa. Veremos isso na se\u00e7\u00e3o seguinte.<\/p>\n<p>&nbsp;<\/p>\n<h2>Primeiros passos com o Display da Nodemcu\u00a0ESP32 OLED \u00a0no IDE do Arduino<\/h2>\n<p>De maneira a desenvolver projetos com esse m\u00f3dulo, necessitaremos fazer duas configura\u00e7\u00f5es. A primeira, bem trivial, corresponde a instala\u00e7\u00e3o da biblioteca no Arduino. A segunda refere-se \u00e0 instala\u00e7\u00e3o do driver no Sistema Operacional Windows 10, que j\u00e1 fora abordado no <a href=\"https:\/\/www.usinainfo.com.br\/blog\/esp32-nodemcu-tutorial-com-primeiros-passos\/\" target=\"_blank\" rel=\"noopener noreferrer\">tutorial \u201cPrimeiros passos com o NodeMCU ESP-32\u201d.\u00a0<\/a><\/p>\n<h3>Instala\u00e7\u00e3o da Biblioteca<\/h3>\n<p>Para instalar a biblioteca, basta acessar o menu \u201cFerramentas\u201d, na IDE do Arduino, e clicar em \u201cGerenciar Bibliotecas&#8230;\u201d. Uma janela, ilustrada abaixo, ir\u00e1 aparecer. No canto superior esquerdo, digite \u201cESP32 OLED\u201d e pressione \u201cEnter\u201d, no teclado. Assim que o gerenciador encontrar a biblioteca que precisamos, ele a exibir\u00e1 conforme ilustrado abaixo. Por fim, clique em \u201cInstalar\u201d e aguarde o t\u00e9rmino do processo.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem2-1.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2743\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem2-1.jpg\" alt=\"\" width=\"647\" height=\"128\" \/><\/a><\/p>\n<h5><\/h5>\n<h5><\/h5>\n<h3>Testando a biblioteca<\/h3>\n<p>Para verificar se esses passos foram executados corretamente, conecte a sua NodeMCU ESP32 OLED ao seu computador. Agora, iremos carregar um c\u00f3digo de exemplo para ela. Clique em \u201cArquivo\u201d, \u201cExemplos\u201d, e procure o item \u201cESP8266 and ESP32 Oled Driver for SSD1206 Display\u201d. Dentro dele, abra o exemplo \u201cSSD1306DrawingDemo\u201d, ilustrado na figura abaixo.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem3-1.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2744\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem3-1.jpg\" alt=\"\" width=\"556\" height=\"541\" \/><\/a><\/p>\n<p>Com ele aberto, necessitaremos modificar apenas dois par\u00e2metros da linha n\u00famero 65. Onde diz \u201cSSD1306Wire display(0x3c, D3, D5);\u201d, substitua o \u201cD3\u201d por 5 e o \u201cD5\u201d por 4. Esses s\u00e3o os n\u00fameros relativos ao SDA e SCL. O primeiro par\u00e2metro, \u201c0x3c\u201d \u00e9 o endere\u00e7o do display, em hexadecimal. No final, ficar\u00e1 assim: \u201cSSD1306Wire display(0x3c, 5, 4);\u201d.<\/p>\n<p>Agora, vamos selecionar a placa Nodemcu ESP32 OLED . Clique em \u201cFerramentas\u201d e, em seguida, em \u201cPlaca:\u201d. Selecione a placa \u201cWEMOS LOLIN 32\u201d, como ilustrado na figura abaixo.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem4-1.jpg\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2746\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem4-1.jpg\" alt=\"\" width=\"555\" height=\"488\" \/><\/a><\/p>\n<p>O pr\u00f3ximo \u00e9 selecionar a porta, que ir\u00e1 depender do seu computador. No caso do exemplo, \u00e9 a porta \u201cCOM 13\u201d, mas para voc\u00ea pode ser diferente. Caso voc\u00ea n\u00e3o saiba, desconecte a NodeMCU, conecte-a novamente e verifique qual porta ir\u00e1 surgir. A porta que aparecer ser\u00e1 a porta que voc\u00ea deve selecionar.<\/p>\n<h5><\/h5>\n<h3>Fazendo o upload do c\u00f3digo na Nodemcu ESP32 OLED<\/h3>\n<p>Clique no bot\u00e3o em formato de seta para a esquerda, denominado \u201cCarregar\u201d, na IDE do Arduino. Muita aten\u00e7\u00e3o nessa etapa! Assim que o c\u00f3digo for verificado e, n\u00e3o havendo erros no c\u00f3digo, ele come\u00e7ar\u00e1 a ser enviado para a placa. Ir\u00e1 aparecer as seguintes mensagens no log da IDE:<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem5.jpg\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2686\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem5.jpg\" alt=\"\" width=\"278\" height=\"66\" \/><\/a><\/p>\n<p>Assim que a \u00faltima linha aparecer (\u201cConnecting&#8230;\u201d), mantenha pressionado o bot\u00e3o \u201cBoot\u201d na placa. S\u00f3 ent\u00e3o o c\u00f3digo come\u00e7ar\u00e1 a ser escrito na placa, conforme ilustrado na figura abaixo:<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem6.jpg\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2687\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/imagem6.jpg\" alt=\"\" width=\"608\" height=\"104\" \/><\/a><\/p>\n<p>Aguarde o t\u00e9rmino do processo de upload para ent\u00e3o soltar o bot\u00e3o. Com ele carregado, solte esse bot\u00e3o e ent\u00e3o pressione o bot\u00e3o \u201cEN\u201d apenas uma vez para executar o c\u00f3digo. Se tudo foi feito corretamente, ent\u00e3o linhas come\u00e7ar\u00e3o a surgir na tela, de diversas formas e tamanhos, apenas para ilustrar o funcionamento do c\u00f3digo e da placa. Essa etapa de pressionar o bot\u00e3o deve ser executada sempre ao passar um c\u00f3digo para a placa! Confira no gif abaixo o resultado desse c\u00f3digo!<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/GIF1.gif\" data-rel=\"lightbox-image-6\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2834 size-full\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/GIF1.gif\" alt=\"\" width=\"600\" height=\"337\" \/><\/a><\/p>\n<p>Na pr\u00f3xima se\u00e7\u00e3o, iremos demonstrar a programa\u00e7\u00e3o do display de maneira a personalizar o seu conte\u00fado.<\/p>\n<h3><\/h3>\n<h2>Utilizando as fun\u00e7\u00f5es da biblioteca SSD1306<\/h2>\n<p>De modo a demonstrar as fun\u00e7\u00f5es usadas para o desenho na tela, dividimos essa se\u00e7\u00e3o em algumas, a primeira para explicar como desenhar pixels individuais, a segunda para desenhar formas e, por fim, a terceira para escrever textos.<\/p>\n<h4><\/h4>\n<h3>Pixels<\/h3>\n<p>Este primeiro c\u00f3digo tem o prop\u00f3sito situar o programador no espa\u00e7o do display esp32. Inicialmente, devemos incluir a biblioteca SSD1306, como escrito na linha 1. Em seguida, h\u00e1 uma declara\u00e7\u00e3o do objeto display, o qual passamos os par\u00e2metros para a conex\u00e3o, que s\u00e3o o endere\u00e7o do display e os pinos SDA e SCL.<\/p>\n<pre class=\"lang:csharp decode:1 \">\r\n#include \"SSD1306.h\"\r\n\r\nSSD1306 display(0x3c, 5, 4);\r\n\r\nvoid setup() {\r\nSerial.begin(115200);\r\ndisplay.init();\r\ndisplay.clear();\r\n}\r\n\r\nvoid loop()\r\n{\r\n\/\/Pixel A\r\ndisplay.setPixel(0, 0);\r\n\r\n\/\/ Pixel B\r\ndisplay.setPixel(127, 0);\r\n\r\n\/\/Pixel C\r\ndisplay.setPixel(127, 63);\r\n\r\n\/\/ Pixel D\r\ndisplay.setPixel(0, 63);\r\n\r\ndisplay.display();\r\ndelay(10);\r\n}\r\n\r\n<\/pre>\n<p>Dentro do void setup, iniciamos a comunica\u00e7\u00e3o serial (linha 6) e inicializamos o display (linha 7). A fun\u00e7\u00e3o da linha 8, \u201cdisplay.clear()\u201d, serve para limpar a tela de quaisquer pixels que haviam sido programados anteriormente. No void loop encontram-se quatro comandos que desenham 4 pixels, um em cada aresta do display (cujo formato \u00e9 um ret\u00e2ngulo). A origem se encontra no pixel A.<\/p>\n<p>Para desenharmos no Nodemcu ESP32 OLED, utilizamos a fun\u00e7\u00e3o display.setPixel(x, y). Sendo que x e y s\u00e3o as coordenadas do plano cartesiano e devem, por se tratarem de pixels, ser um n\u00famero inteiro. Vimos, na introdu\u00e7\u00e3o, que esse se trata de um painel de 128&#215;64 pixels. Teremos, portanto, uma varia\u00e7\u00e3o de 0 a 127 pixels para x e de 0 a 63 para o y. Dessa maneira, escrevemos os 4 pixels das arestas do display. Conforme ilustrado na figura abaixo, que desenvolvi utilizando uma matriz de 128&#215;64 para que fique mais claro a no\u00e7\u00e3o de pixels. Importante notar que os pixels s\u00f3 ser\u00e3o exibidos com a fun\u00e7\u00e3o \u201cdisplay.display()\u201d, conforme escrito na linha 25.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/4pixels.jpg\" data-rel=\"lightbox-image-7\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2747\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/4pixels-1024x535.jpg\" alt=\"\" width=\"446\" height=\"233\" \/><\/a><\/p>\n<h4><\/h4>\n<h3>Formas<\/h3>\n<p>Antes de desenhar uma forma geom\u00e9trica, que seria a liga\u00e7\u00e3o entre 3 ou mais arestas, vamos primeiro desenhar linhas, ou seja, a jun\u00e7\u00e3o entre dois pontos distintos. Para tanto, usaremos a fun\u00e7\u00e3o da linha 15. Nela definimos dois pontos. \u201cx0\u201d e \u201cy0\u201d s\u00e3o as coordenadas x e y referentes ao ponto inicial. \u201cx1\u201d e \u201cy1\u201d s\u00e3o as coordenadas referentes ao ponto final. Essa fun\u00e7\u00e3o, portanto, escreve pixels do ponto inicial at\u00e9 o final, formando uma linha. D\u00ea uma olhada no c\u00f3digo abaixo.<\/p>\n<pre class=\"lang:csharp decode:1 \">\r\n#include \"SSD1306.h\"\r\n\r\nSSD1306 display(0x3c, 5, 4);\r\n\r\nvoid setup() {\r\nSerial.begin(115200);\r\ndisplay.init();\r\ndisplay.clear();\r\n}\r\n\r\nvoid loop()\r\n{\r\n\/\/Linha\r\n\/\/(x0, y0, x1, y1)\r\ndisplay.drawLine(0, 0, 127, 63);\r\n\r\n\/\/ Ret\u00e2ngulo\r\n\/\/(x0, y0, x1, y1)\r\n\/\/display.drawRect(10, 10, 117, 53);\r\n\r\n\/\/ C\u00edrculo\r\n\/\/(x0, y0, x1, raio)\r\n\/\/display.drawCircle(128\/2, 64\/2, 20);\r\n\r\n\/\/ Linha horizontal\r\n\/\/(x0, y0, tamanho)\r\n\/\/display.drawHorizontalLine(0, 0, 127);\r\n\r\n\/\/ Linha vertical\r\n\/\/(x0, y0, tamanho)\r\n\/\/display.drawVerticalLine(0, 0, 63);\r\n\r\n\/\/Inverte a tela \"verticalmente\"\r\n\/\/display.flipScreenVertically();\r\n\r\ndisplay.display();\r\ndelay(10);\r\n}\r\n\r\n<\/pre>\n<p>Para visualizar cada forma, iremos retirar as barras duplas de uma ou mais linhas e fazer o upload do c\u00f3digo.<\/p>\n<h5><\/h5>\n<p>&nbsp;<\/p>\n<h3>Linha<\/h3>\n<p>A figura abaixo ilustra o resultado do c\u00f3digo da linha 15: uma linha que vai da origem at\u00e9 o ponto m\u00e1ximo dos eixos x e y.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/05.jpg\" data-rel=\"lightbox-image-8\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2844\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/05-1024x683.jpg\" alt=\"\" width=\"524\" height=\"350\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/05-1024x683.jpg 1024w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/05-300x200.jpg 300w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/05-768x512.jpg 768w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/05.jpg 1620w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/a><\/p>\n<h5><\/h5>\n<h3>Ret\u00e2ngulo<\/h3>\n<p>Para desenhar um ret\u00e2ngulo no Nodemcu ESP32 OLED, devemos utilizar a fun\u00e7\u00e3o da linha 19. Um ret\u00e2ngulo pode ser desenhado a partir de dois pontos (que seriam duas de suas arestas). Portanto, basta indicar dois pontos de arestas n\u00e3o consecutivas (ou seja, opostos um ao outro) na fun\u00e7\u00e3o. A figura abaixo ilustra o resultado da linha 19.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/04.jpg\" data-rel=\"lightbox-image-9\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2845\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/04-1024x683.jpg\" alt=\"\" width=\"528\" height=\"353\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/04-1024x683.jpg 1024w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/04-300x200.jpg 300w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/04-768x512.jpg 768w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/04.jpg 1620w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/a><\/p>\n<h5><\/h5>\n<h3>C\u00edrculo<\/h3>\n<p>J\u00e1 para um c\u00edrculo, podemos desenh\u00e1-lo com a fun\u00e7\u00e3o na linha 23, passando como par\u00e2metros o ponto do centro e o seu raio. Tenha em vista que a tela tem 128&#215;64 pixels, ou seja, o raio m\u00e1ximo que conseguiremos utilizar ser\u00e1 de 32 (que resulta em um di\u00e2metro de 64), quaisquer valores acima disso n\u00e3o ser\u00e1 poss\u00edvel exibir um c\u00edrculo completo. A figura abaixo ilustra o resultado da linha 23.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/03.jpg\" data-rel=\"lightbox-image-10\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2846\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/03-1024x683.jpg\" alt=\"\" width=\"541\" height=\"361\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/03-1024x683.jpg 1024w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/03-300x200.jpg 300w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/03-768x512.jpg 768w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/03.jpg 1620w\" sizes=\"auto, (max-width: 541px) 100vw, 541px\" \/><\/a><\/p>\n<h5><\/h5>\n<h3>Outros recursos<\/h3>\n<p>Tamb\u00e9m podemos escrever linhas horizontais e verticais no Nodemcu ESP32 OLED, a partir de um dado ponto e tamanho. Para isso, as fun\u00e7\u00f5es das linhas 27 e 31 s\u00e3o usadas de modo a ilustrarem o eixo x e y, respectivamente. \u00c9 dado o ponto inicial em ambas, que seria a origem, e o tamanho delas, que no caso do eixo x ser\u00e1 127 e o do eixo y ser\u00e1 63. A figura abaixo ilustra o resultado das linhas 27 e 31.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/01.jpg\" data-rel=\"lightbox-image-11\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2847\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/01-1024x683.jpg\" alt=\"\" width=\"548\" height=\"365\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/01-1024x683.jpg 1024w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/01-300x200.jpg 300w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/01-768x512.jpg 768w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/01.jpg 1620w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/a><\/p>\n<p>Caso voc\u00ea queira, \u00e9 poss\u00edvel inverter o desenho verticalmente. A fun\u00e7\u00e3o da linha 34 demonstra isso. Ao utiliz\u00e1-la, os eixos x e y ir\u00e3o deslocar-se para o lado oposto ao anterior. A figura abaixo ilustra esse resultado.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/02.jpg\" data-rel=\"lightbox-image-12\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2848\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/02-1024x683.jpg\" alt=\"\" width=\"595\" height=\"397\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/02-1024x683.jpg 1024w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/02-300x200.jpg 300w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/02-768x512.jpg 768w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/02.jpg 1620w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/a><\/p>\n<p>Com isso, encerramos a parte de desenho de formas simples no display. A pr\u00f3xima etapa se refere \u00e0 escrita de textos.<\/p>\n<h4><\/h4>\n<h4><\/h4>\n<h3>Textos<\/h3>\n<p>A biblioteca SSD1306 nos fornece duas fun\u00e7\u00f5es bem interessantes para a escrita de palavras. A primeira \u00e9 para a formata\u00e7\u00e3o da fonte, que pode ser definida com um de tr\u00eas par\u00e2metros poss\u00edveis. A fun\u00e7\u00e3o 13, 16 e 19, \u201cdisplay.setFont\u201d, recebe como par\u00e2metro o tamanho da fonte. No c\u00f3digo abaixo, iremos escrever tr\u00eas linhas, uma com cada varia\u00e7\u00e3o dessa fonte, para ilustrar a sua diferen\u00e7a.<\/p>\n<pre class=\"lang:csharp decode:1\">\r\n#include \"SSD1306.h\"\r\n\r\nSSD1306 display(0x3c, 5, 4);\r\n\r\nvoid setup() {\r\nSerial.begin(115200);\r\ndisplay.init();\r\ndisplay.clear();\r\n}\r\n\r\nvoid loop() \r\n{ \r\ndisplay.setFont(ArialMT_Plain_24);\r\ndisplay.drawString(0, 0, \"Usinainfo\");\r\n\r\ndisplay.setFont(ArialMT_Plain_16);\r\ndisplay.drawString(0, 30, \"ESP32 OLED\");\r\n\r\ndisplay.setFont(ArialMT_Plain_10);\r\ndisplay.drawString(0, 50, \"www.www.usinainfo.com.br\/blog\/\");\r\n\r\ndisplay.display();\r\ndelay(10);\r\n}\r\n\r\n<\/pre>\n<p>S\u00e3o tr\u00eas possibilidades: \u201cArialMT_Plain_10\u201d, \u201cArialMT_Plain_16\u201d ou \u201cArialMT_Plain_24\u201d. Ap\u00f3s definido a fonte, utilizamos a fun\u00e7\u00e3o \u201cdisplay.drawString\u201d, como visto nas linhas 14, 17 e 20, para especificar o ponto de origem do texto e, inclusive, o texto, que deve ir entre aspas (ou, caso voc\u00ea queira usar uma vari\u00e1vel, essa dever\u00e1 ser do tipo String). O resultado desse c\u00f3digo est\u00e1 ilustrado na imagem abaixo.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/IMG_2322.jpg\" data-rel=\"lightbox-image-13\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2849\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/IMG_2322-1024x683.jpg\" alt=\"\" width=\"542\" height=\"362\" srcset=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/IMG_2322-1024x683.jpg 1024w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/IMG_2322-300x200.jpg 300w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/IMG_2322-768x512.jpg 768w, https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/IMG_2322.jpg 1620w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><strong>Projeto com\u00a0Nodemcu ESP32 OLED<\/strong><\/h2>\n<p>Para finalizar, vamos fazer agora um projeto envolvendo a fun\u00e7\u00e3o de toque capacitivo dessa placa. Para o hardware, necessitamos apenas de um jumper conectado na porta 14 e um LED, juntamente com um resistor de 220 ohm, conectados entre o GND e a porta 16, conforme ilustra a figura abaixo.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/diagrama1-1.jpg\" data-rel=\"lightbox-image-14\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2748\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/diagrama1-1.jpg\" alt=\"\" width=\"388\" height=\"240\" \/><\/a><\/p>\n<p>O c\u00f3digo a ser usado \u00e9 bem simples. No in\u00edcio temos a inclus\u00e3o da biblioteca assim como a declara\u00e7\u00e3o do esp32 display, j\u00e1 visto em etapas anteriores. Da linha 5 at\u00e9 a linha 7 declaramos vari\u00e1veis para armazenar, respectivamente, o valor do sensor de toque (0 at\u00e9 100, aproximadamente), a porta de conex\u00e3o do sensor e a porta da LED.<\/p>\n<pre class=\"lang:csharp decode:1  \">\r\n#include \"SSD1306.h\"\r\n\r\nSSD1306 display(0x3c, 5, 4);\r\n\r\nint TouchSensorValue;\r\nint TouchSensorGPIO = 14; \/\/Referente ao sensor Touch6\r\nint LedGPIO = 16;\r\n\r\nvoid setup() {\r\nSerial.begin(115200);\r\ndisplay.init();\r\ndisplay.clear();\r\n\r\npinMode(LedGPIO, OUTPUT);\r\ndigitalWrite (LedGPIO, LOW);\r\n\r\n}\r\n\r\nvoid loop() \r\n{ \r\nTouchSensorValue = touchRead(TouchSensorGPIO);\r\n\r\ndisplay.clear();\r\ndisplay.setFont(ArialMT_Plain_24);\r\ndisplay.drawString(0, 0, (String)TouchSensorValue);\r\n\r\nif (TouchSensorValue &lt;= 20)\r\ndigitalWrite (LedGPIO, HIGH);\r\nelse\r\ndigitalWrite (LedGPIO, LOW);\r\n\r\ndisplay.display();\r\ndelay(100);\r\n}\r\n\r\n<\/pre>\n<p>No void setup inclu\u00edmos, al\u00e9m dos comandos j\u00e1 usados anteriormente, a fun\u00e7\u00e3o de pinMode (na linha 14) para dizer ao ESP que a porta 16 (LedGPIO) \u00e9 uma porta de sa\u00edda de dados. Na linha 14, deixamos o LED apagado.<\/p>\n<p>No void loop, primeiramente faz-se uma leitura do estado do pino 14, que varia de 0 at\u00e9 aproximadamente 70~100. Em seguida, o display \u00e9 limpo, configurado a fonte a ser usada e ent\u00e3o escrito o valor lido anteriormente. Em seguida, h\u00e1 uma estrutura condicional que verifica se esse valor \u00e9 menor que 20. Se for, ele acender\u00e1 a LED, caso contr\u00e1rio, manter\u00e1 apagada. No gif abaixo voc\u00ea confere o c\u00f3digo funcionando.<\/p>\n<p><a href=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/GIF2.gif\" data-rel=\"lightbox-image-15\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2835 size-full\" title=\"\" src=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/GIF2.gif\" alt=\"\" width=\"600\" height=\"337\" \/><\/a><\/p>\n<h4><\/h4>\n<h4><\/h4>\n<h2>Conclus\u00e3o<\/h2>\n<p>Neste artigo apresentamos a placa <a href=\"https:\/\/www.usinainfo.com.br\/nodemcu\/nodemcu-esp32-oled-iot-com-wifi-e-bluetooth-5318.html\" target=\"_blank\" rel=\"noopener noreferrer\">NodeMCU ESP32 OLED<\/a>, uma varia\u00e7\u00e3o das ESP32 com display integrado. Foi mostrado como realizar a instala\u00e7\u00e3o da biblioteca SSD1306 e, com isso, demonstrado de maneira pr\u00e1tica como utilizar diversas fun\u00e7\u00f5es para programar o display.\u00a0 Al\u00e9m disso, vimos como realizar leituras do sensor touch e acionar um LED, como exemplo simples de projeto. Diante disso, um leque de caminhos a serem seguidos se abrem com o uso dessa placa, desde aplica\u00e7\u00f5es na IoT, em projetos rob\u00f3ticos e at\u00e9 mesmo automa\u00e7\u00e3o residencial.<\/p>\n<p>Se quiser conhecer outros modelos de m\u00f3dulos ESP32, acesse o<a href=\"https:\/\/www.usinainfo.com.br\/esp32-611\" target=\"_blank\" rel=\"noopener noreferrer\">\u00a0site da Usinainfo<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Em um contexto onde a IoT tem sido foco de desenvolvimento, diversas placas embarcadas entraram no mercado com o enfoque de possibilitar a conex\u00e3o WiFi de maneira acess\u00edvel. Entre elas, destacam-se as diversas placas ESP e, ainda mais especificamente, o modelo ESP32. Nesse artigo, exploraremos os detalhes da vers\u00e3o Nodemcu ESP32 OLED , que possibilita a visualiza\u00e7\u00e3o de dados de maneira integrada \u00e0 placa, sem a necessidade de fazer conex\u00f5es com jumpers. Na figura abaixo verifica-se a estrutura f\u00edsica do m\u00f3dulo. Inicialmente, podemos destacar a sua quantidade de portas GPIO, que somam 36 pinos. Outra caracter\u00edstica muito interessante \u00e9 a possibilidade de que algumas portas atuem como sensores capacitivos, ou seja, sensores de toque (veja as portas Touch, em laranja, [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":2906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-2697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Nodemcu ESP32 OLED Programando o Display ESP32<\/title>\n<meta name=\"description\" content=\"Tutorial ESP32 Display como Programar o Nodemcu ESP32 OLED na IDE Arduino Voc\u00ea Confere no Blog da UsinaInfo. Vem Aprender com a Gente. Confira Agora.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nodemcu ESP32 OLED Programando o Display ESP32\" \/>\n<meta property=\"og:description\" content=\"Tutorial ESP32 Display como Programar o Nodemcu ESP32 OLED na IDE Arduino Voc\u00ea Confere no Blog da UsinaInfo. Vem Aprender com a Gente. Confira Agora.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Usinainfo\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/pt-br.facebook.com\/faceusinainfo\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-06T13:44:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-08T03:10:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/blog1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gustavo Teixeira\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Teixeira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Nodemcu ESP32 OLED Programando o Display ESP32","description":"Tutorial ESP32 Display como Programar o Nodemcu ESP32 OLED na IDE Arduino Voc\u00ea Confere no Blog da UsinaInfo. Vem Aprender com a Gente. Confira Agora.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/","og_locale":"pt_BR","og_type":"article","og_title":"Nodemcu ESP32 OLED Programando o Display ESP32","og_description":"Tutorial ESP32 Display como Programar o Nodemcu ESP32 OLED na IDE Arduino Voc\u00ea Confere no Blog da UsinaInfo. Vem Aprender com a Gente. Confira Agora.","og_url":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/","og_site_name":"Blog Usinainfo","article_publisher":"https:\/\/pt-br.facebook.com\/faceusinainfo\/","article_published_time":"2019-05-06T13:44:08+00:00","article_modified_time":"2019-08-08T03:10:21+00:00","og_image":[{"width":1620,"height":1080,"url":"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/blog1.jpg","type":"image\/jpeg"}],"author":"Gustavo Teixeira","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Gustavo Teixeira","Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/","url":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/","name":"Nodemcu ESP32 OLED Programando o Display ESP32","isPartOf":{"@id":"https:\/\/www.usinainfo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/#primaryimage"},"image":{"@id":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/#primaryimage"},"thumbnailUrl":"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/blog1.jpg","datePublished":"2019-05-06T13:44:08+00:00","dateModified":"2019-08-08T03:10:21+00:00","author":{"@id":"https:\/\/www.usinainfo.com.br\/blog\/#\/schema\/person\/e562b515fae72a8e6663629d55466c6b"},"description":"Tutorial ESP32 Display como Programar o Nodemcu ESP32 OLED na IDE Arduino Voc\u00ea Confere no Blog da UsinaInfo. Vem Aprender com a Gente. Confira Agora.","breadcrumb":{"@id":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/#primaryimage","url":"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/blog1.jpg","contentUrl":"https:\/\/www.usinainfo.com.br\/blog\/wp-content\/uploads\/2019\/04\/blog1.jpg","width":1620,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.usinainfo.com.br\/blog\/programando-o-display-do-nodemcu-esp32-oled\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.usinainfo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"ESP32 Display Oled: Programando o Display do NodeMCU ESP32"}]},{"@type":"WebSite","@id":"https:\/\/www.usinainfo.com.br\/blog\/#website","url":"https:\/\/www.usinainfo.com.br\/blog\/","name":"Blog Usinainfo","description":"Usinainfo","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.usinainfo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.usinainfo.com.br\/blog\/#\/schema\/person\/e562b515fae72a8e6663629d55466c6b","name":"Gustavo Teixeira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.usinainfo.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d3d23c5cd03ce9d8ef47bc68b083dc7e5f94b7b022f5059e668bf9439c9d4709?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d3d23c5cd03ce9d8ef47bc68b083dc7e5f94b7b022f5059e668bf9439c9d4709?s=96&d=mm&r=g","caption":"Gustavo Teixeira"},"description":"Bacharel em Ci\u00eancia da Computa\u00e7\u00e3o pela URI \u2013 Campus de Santo \u00c2ngelo, com experi\u00eancia no desenvolvimento de pesquisas em Rob\u00f3tica e prototipa\u00e7\u00e3o de Sistemas Rob\u00f3ticos.","url":"https:\/\/www.usinainfo.com.br\/blog\/author\/gustavo-teixeira\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/posts\/2697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2697"}],"version-history":[{"count":29,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/posts\/2697\/revisions"}],"predecessor-version":[{"id":3691,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/posts\/2697\/revisions\/3691"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/media\/2906"}],"wp:attachment":[{"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.usinainfo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}