Linhas, retângulos e círculos
Desenhe formas para criar uma interface simples.
Linhas, retângulos e círculos é uma aula grátis de Arduino & IoT Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Arduino & IoT Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Arduino & IoT Academy inclui 4 aulas no total.
Além do texto
Somente texto pode ficar monótono. A biblioteca GFX também desenha formas, permitindo enquadrar dados, criar medidores e projetar uma pequena interface de verdade. 🎨
A grade de pixels
Toda forma fica em uma grade de coordenadas. O ponto (0,0) é o canto superior esquerdo; x aumenta para a direita e y aumenta para baixo, assim como o cursor de texto que você já usou.
Desenhe um único pixel
A menor marca é um ponto. drawPixel recebe um x, um y e uma cor, iluminando exatamente um ponto da tela.
display.drawPixel(10, 10, WHITE);Desenhe uma linha
drawLine conecta dois pontos. Informe o x e o y iniciais, o x e o y finais e uma cor para traçar uma linha reta entre eles.
display.drawLine(0, 0, 127, 63, WHITE);Contorne um retângulo
drawRect precisa do x e do y do canto superior esquerdo, seguidos da largura e da altura. Ele desenha apenas a borda, sendo ideal para enquadrar um valor ou uma seção.
display.drawRect(0, 0, 60, 30, WHITE);Preencha um retângulo
Troque para fillRect com os mesmos argumentos para preencher toda a caixa. Barras preenchidas são a base de medidores e indicadores de progresso.
display.fillRect(0, 0, 60, 30, WHITE);Contorne um círculo
drawCircle recebe o x e o y do centro, além do raio. Ele desenha um anel, útil para mostradores, indicadores de estado ou ícones arredondados.
display.drawCircle(64, 32, 20, WHITE);Preencha um círculo
Use fillCircle para criar um disco sólido. Um pequeno círculo preenchido funciona como um indicador claro de ligado/desligado, fácil de ler rapidamente.
display.fillCircle(64, 32, 5, WHITE);Retângulos arredondados
Para obter uma aparência mais suave, drawRoundRect acrescenta um raio aos cantos depois da largura e da altura. Caixas arredondadas deixam botões e cartões mais amigáveis.
display.drawRoundRect(0, 0, 60, 30, 8, WHITE);Combine formas e texto
A ordem é importante: as formas desenhadas depois ficam por cima. Desenhe primeiro uma caixa preenchida e depois imprima o texto sobre ela para criar o efeito de um selo identificado.
display.fillRect(0, 0, 50, 16, WHITE);
display.setTextColor(BLACK);Depois, envie para a tela
Como sempre, todo o desenho preenche o buffer. Termine o trabalho com formas usando display.display(), para que a imagem composta inteira apareça de uma vez.
display.display();Verificação rápida
Você quer uma barra sólida que mostre o quanto um tanque está cheio.
Recapitulação
Agora você pode desenhar pixels, linhas, retângulos e círculos, além de combinar formas com texto. Esses elementos básicos são tudo de que você precisa para compor uma interface real.
Perguntas Frequentes
A aula “Linhas, retângulos e círculos” é grátis?
Sim — o texto completo de “Linhas, retângulos e círculos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Arduino & IoT Academy, atualize para CoddyKit PRO. O curso de Arduino & IoT Academy inclui 4 aulas no total.
O que vou aprender em “Linhas, retângulos e círculos”?
Desenhe formas para criar uma interface simples. Você pratica Arduino & IoT Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Arduino & IoT Academy?
Nenhuma experiência prévia é necessária. Arduino & IoT Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Linhas, retângulos e círculos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Arduino & IoT Academy?
Sim. Cada aula de Arduino & IoT Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Conecte e inicialize um OLED SSD1306
- Desenhe texto em vários tamanhos
- Linhas, retângulos e círculos
- Anime um gráfico de barras