Programação em BASIC para o PIC

Projetos com Display Gráfico

Vitor Amadeu Souza

Introdução

No artigo desta edição, veremos os passos para controlar um dispaly

gráfico de 128 x 64 pixels. A idéia será apresentar uma imagem neste display.
Estes displays são utilizados hoje por exemplo em celulares e uma das grandes
vantagens da utilização deles é o fato dos mesmos funcionarem por pixels ao
invés de caracteres definidos. Desta forma, podemos imaginar que podemos
formar qualquer caractere de qualquer fonte assim como tamanho. O display
gráfico utilizado está apresentado na figura 1. Observe que o mesmo é composto
de 128 x 64 pixels, ou seja, ele tem o comprimento de 128 pixels e a altura de 64
pixels.

Figura 1 – Display gráfico de 128 x 64 pixels

Este display apresenta a pinagem apresentada na figura 2. Observe que

temos 8 vias de dados e 6 de controle, além da parte de alimentação do display
assim como a de controle do backlight (luz de fundo).

Figura 2 – Pinagem do display gráfico

A função destes pinos podem ser vistos com mais detalhes na tabela 1.
Pino Descrição
1 (Vss) Terra da alimentação do display
2 (Vdd) Alimentação positiva de 5 V
3 (Vo) Ajuste do contraste do display
4 (RS) Controle de envio de dados ou
programa para o display
5 (RW) Controle de escrita ou leitura no display
6 (E) Envio de pulso de habilitação do display
7 – 14 (DB0 a DB7) Barramento de dados do display
15 (CS1) Seleção do circuito de varredura da
coluna 0 a 63
16 (RST) Reset do display
17 (Vee) Saída de tensão para ajuste do
contraste
18 (CS2) Seleção do circuito de varredura da
coluna 64 a 127
19 (K) Cátodo do backlight
20 (A) Ânodo do backlight
Tabela 1 – Função dos pinos do display

Para executarmos esta experiência, faremos uso da placa PIC MASTER

desenvolvida pela Cerne Tecnologia (www.cerne-tec.com.br). Observe esta
placa na figura 3.

Figura 3 – Placa PIC MASTER desenvolvida pela Cerne Tecnologia

As características desta placa podem ser observadas na tabela 2.

 Display Gráfico de 128 x 64 pixels
Display LCD 16x2
Display de 7 segmentos
Comunicação RS232
Comunicação RS485
Varredura de Leds
Comunicação USB 2.0
Comunicação com teclado PS2
Acionamento de Relé
Gravador On-Board

Tabela 2 – Características da placa PIC MASTER

Iremos utilizar no exemplo de hoje, o recurso display gráfico da placa

PIC MASTER. Esta placa pode ser adquirida pela página da Cerne Tecnologia, no
endereço www.cerne-tec.com.br ou através de nossa central de atendimento, no
telefone (21)3064-4526.

Recursos de Hardware

O esquema elétrico de funcionamento deste exemplo está apresentado na

figura 4. Note que o barramento de dados do display está integralmente
conectado ao PORTD do microcontrolador PIC18F442. Já as linhas de controle
RS, RW, EN, CS2, RST e CS1 estão conectadas ao PORTB, nos pinos 2, 3, 4, 5,
6 e 7 deste PORT respectivamente.

Figura 4 – Esquema Elétrico

Fluxograma

O fluxo de funcionamento deste exemplo está apresentado na figura 5. Note

que logo no início do programa, o display gráfico é configurado e logo em seguida
é carregada uma imagem neste dispositivo.

Início

Configura PORTB e PORTD

como saída
Inicializa display gráfico
Carrega imagem no display

Fim

Figura 5 – Fluxograma do Exemplo

Recursos de Software

A intenção deste projeto é poder carregar uma imagem no display gráfico.

Existem basicamente duas funções que permitem com que esta operação seja
feita. Observe a tabela 3.

glcd_init (porta de controle, CS2, CS1, RS, RW, RST, EN, porta de dados)
glcd_Image (imagem a ser carregada)
Tabela 3 – Funções de acesso ao LCD

A primeira função configura os pinos onde estão ligados os pinos de

controle e de dados do display. Conforme o esquema elétrico apresentado na
figura 4, este comando ficaria da forma apresentada na tabela 4.

glcd_init(portb,5,7,2,3,6,4,portd)
Tabela 4 – Inicializando o display

Já a segunda função tem a incumbência de carregar uma imagem no

display. Desta forma, devemos informar o vetor que mantêm a imagem para esta
função.
Software

O mikroBASIC disponibiliza uma ferramenta muito importante que será de

suma importância para execução deste exemplo. Após criar o projeto para o
microcontrolador PIC18F442, vá no menu Tools e abra a opção Glcd Bitmap
Editor. A tela da figura 6 surgirá.

Figura 6 – Abrindo o GLCD Image

Note que destarte, o programa mostra o display utilizado em nosso projeto.

Existem outros tamanhos de display, porém por enquanto vamos nos ater ao
display de 128 x 64 pixels. Para carregar uma imagem a ser apresentada no
display, clique em Load BMP Picture. Surgirá a tela da figura 7.
 Figura 7 – Carregando uma imagem no display gráfico

Repare que existem algumas pastas relativas a displays de diversas

dimensões. No nosso caso, clique na pasta de 128x64. Abrindo esta pasta, você
notará uma série de figura já prontas que podem ser utilizadas para carregar uma
imagem no display. Vamos utilizar uma delas, clique por exemplo no arquivo
truck.bmp. Nada impede que você utilize outras imagens. A única exigência é que
as mesmas tenham a dimensão adotada pelo display. O resultado será agora o
que está apresentado na figura 8.

Figura 8 – Resultado após carregar a imagem

 Observe que a imagem apresentada já é uma amostra do que será visto
assim que o programa for gravado no microcontrolador. Você também pode
inverter o estado dos pixels, deixando o que está aceso apagado e vice-versa.
Para isso, clique no botão Invert Picture. O resultado será como o que está
apresentado na figura 9.

Figura 9 – Resultado após inverter o estado dos pixels

De acordo com a figura carregada, o mikroBASIC gera um vetor que é a

imagem que será carregada pela função glcd_image. Vamos copiar este vetor
para o nosso programa. Para isso, clique no option button chamado mikroBASIC
code e logo em seguida em Copy CODE to Clipboard. Feito esta operação, esta
janela pode ser fechada. Agora voltando ao mikroBASIC, cole este vetor que está
salvo na memória logo abaixo da linha program. O código completo que permitirá
carregar a imagem está apresentado no box 1.
program display

' ------------------------------------------------------
' GLCD Picture name: truck.bmp
' GLCD Model: KS0108 128x64
' ------------------------------------------------------

const truck_bmp as byte[1024] = (

0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,128,128,128,128,
128, 64, 64, 64, 64, 64, 64, 32, 32, 32, 32, 32, 32, 32, 32, 32,
32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,
32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32,
32, 32,160,160,160, 96,224,224, 96, 96, 96, 32, 0, 32, 32, 32,
32, 32, 32, 32, 32, 32, 0, 0, 64, 64, 64, 0,128, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0,254, 0, 1, 1, 1, 1, 1,253,253,253,253,
1, 1, 1, 1, 1, 1,253,253,253,253, 1, 1, 1, 1,253,253,
253,253,249,241,225,193,129,193,225,249,253,253,253,253,253, 1,
1, 1, 1,253,253,253,253,221,221,221, 29, 17, 1,255, 1, 1,
1, 1, 0,254, 1,168, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8,
8, 8, 8, 8, 16,224, 24, 36,132, 0, 2,130, 5, 81, 68,112,
160,192, 96, 96, 32, 0,128,128,192,192,192, 64, 0, 0, 0, 0,
0,128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 63, 96, 96, 96,224, 96, 96,127,127,127,127,
124,124,124,124, 96, 96,127,127,127,127, 96, 96, 96, 96,127,127,
127,127, 97,103,111,127,127,111,103, 99, 97,127,127,127,127, 96,
96, 96, 96,127,127,127,127,125,125,125,124,116, 96,127, 64, 64,
64,160, 96,252,246, 1, 14, 6, 6, 2, 2, 2, 2, 2, 2, 2,
2, 2, 2, 2, 2, 66,114, 60, 32, 16, 16, 0, 4, 2, 3, 2,
0, 0, 0, 4, 4, 4, 4, 20, 16, 16, 16, 16, 16, 9, 9, 41,
112, 32, 67, 5,240,126,174,128, 56, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1,
1, 1,127,127,127,127,255,255,247,251,123,191, 95, 93,125,189,
189, 63, 93, 89,177,115,243,229,207, 27, 63,119,255,207,191,255,
255,255,255,255,255,255,255,127,127,127,127,127,127,127,127,255,
255,255,127,127,125,120,120,120,120,120,248,120,120,120,120,120,
120,248,248,224,135, 0, 0, 0, 0, 0, 0, 0, 0,128,240,248,
120,188,220, 92,252, 28, 28, 60, 92, 92, 60,120,248,248, 96,192,
143,168,216,136, 49, 68, 72, 2,160, 96, 0, 0, 0, 0, 0, 0,
0, 0, 0,128,192,248,248,248,248,252,254,254,254,254,254,254,
254,254,254,254,254,255,255,255,255,255,246,239,208,246,174,173,
169,128,209,208,224,247,249,255,255,252,220,240,127,255,223,255,
255,255,255,255,255,254,254,255,255,255,255,255,255,255,254,255,
255,255,255,255,255,255,254,254,254,254,254,254,254,254,254,254,
254,254,254,254,255,255,255,255,255,255,254,255,190,255,255,253,
240,239,221,223,254,168,136,170,196,208,228,230,248,127,126,156,
216,224,240,240,242,242,240,177, 32, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 1, 1, 1, 1, 3, 3, 3, 7, 7, 7, 7, 7, 15,
15, 15, 7, 15, 15, 15, 7, 7, 15, 14, 15, 13, 15, 47, 43, 43,
43, 43, 43, 47,111,239,255,253,253,255,254,255,255,255,255,255,
191,191,239,239,239,191,255,191,255,255,255,255,255,255,255,255,
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
255,255,255,255,127,127,127,127,255,255,191,191,191,191,255,254,
255,253,255,255,255,251,255,255,255,127,125, 63, 31, 31, 31, 31,
31, 31, 63, 15, 15, 7, 7, 3, 3, 3, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0,
1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1,
1, 1, 1, 1, 3, 3, 3, 11, 11, 11, 11, 7, 3, 14, 6, 6,
6, 2, 18, 19, 19, 3, 23, 21, 21, 17, 1, 19, 19, 3, 6, 6,
14, 15, 15, 7, 15, 15, 15, 11, 2, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
)

main:
trisb=0
trisd=0
glcd_init(portb,5,7,2,3,6,4,portd)
glcd_image(truck_bmp)

end.
 Box 1 – Programa Completo do Exemplo

Vamos desmistificar melhor este código. Logo após a declaração de

program display está declarado o vetor que é a imagem propriamente dita que
será carregada no display. Em seguida os pinos onde está ligado o display são
configurados como saída e o display é inicializado pela função glcd_init.
Finalmente a imagem é carregada pela função glcd_image, que carrega o vetor de
constantes criado pela ferramenta Glcd Image e copiado logo abaixo da linha
program.
Após o desenvolvimento e compilação deste programa, grave o arquivo hex
no microcontrolador que está na placa didática PIC MASTER da Cerne Tecnologia
e comprove o funcionamento.

Conclusão

Os displays gráficos estão cada dia mais presentes nos projetos

eletrônicos. Nos equipamentos de suporte à vida, eles são utilizados por exemplo
para mostrar a pulsação de um paciente. Saber utilizar estas IHMs é importante
para o desenvolvimento de projetos eletrônicos que venham a necessitar de sua
utilização.