이번 예제에서는 흑백 비트맵과 8bits/pixel(BGR332 포멧) 비트맵 그림을 LCD에 그리는 방법에 대해 설명하도록 하겠습니다.

 

프로그램 작성시 필요한 아이콘이나 특수문자, 외국어는 물론, 특별한 크기의 한글또한 그림 형태로 화면에 표시하는등 LCD에서는 비트맵 그림을 표현할 일이 자주 생기게 됩니다.

 

기본 소프트웨어는 예제-Demo 화면 그리기 소스 를 사용합니다.

 

1. LCD 화면에 표시할 비트맵 그림을 준비합니다.

 

                              가로 110픽셀 x 세로 170픽셀 크기의 24Bits per pixel 비트맵  그림  다운로드 

 

                          가로 110픽셀 x 세로 170픽셀 크기의 흑백 비트맵 그림  다운로드  

 

 

2. 칼라 비트맵 그림에서 비트맵 데이터를 추출합니다.

 

    칼라 그림의 경우에는 비트맵 데이터양이 많기 때문에 1픽셀당 1 bytes  의 메모리를 할당합니다.

 

    16bits/pixel이나 24bits/pixel 그림 데이터를 사용하면 좀 더 예쁜 색감을 표현할수 있겠지만 조금만 그림 크기가 커져도 data 양이 너무 커져서 MCU 메모리에 저장이 힘들어지기 때문에 BGR332 포멧, 즉 상위 3bits는 Blue, 가운데 3bits는 Green, 하위 2bits는 RED 에 할당하는 방법을 가장 많이 사용하게 됩니다.

  

    BGR332 포멧 상세 설명  

    비트맵 변환기 ezBMP 바로가기 

  

    BGR332 포멧으로 변환된 data :  dog_8bits_110x170.c    < 110 픽셀 x 170 픽셀 = 18,700 bytes. >

 

 

3. 흑백 비트맵 그림에서 비트맵 데이터를 추출합니다.

 

    흑백 그림의 경우에는 1픽셀당 1bit로 표현이 가능하기 때문에 1byte로 8개 픽셀을 표현할수 있어 칼라 비트맵 데이터보다는 아무래도 메모리 사용에 대한 부담이 줄어들게 됩니다.

 

    데이터 변환은 여러 방법이 있겠지만 freeware 인  LCDAssistant.exe  를 사용하는 것을 기준으로 설명 드립니다.

   (2013년 3월 18일 추가) -->   비트맵 변환기 ezBMP 바로가기 를 사용하시면 보다 편리하게 비트맵 변환을 할 수 있습니다.

 

     LCD Assitant를 실행해서 흑백 비트맵 파일을 읽어들이면 아래와 같은 화면이 표시됩니다.

                                                           

 

      Byte Orientation을 "Horizontal"로 바꾸고, Width를 110(픽셀) 보다 큰 8의 배수 112로 바꾸어 준 후 "File-Save Output"을 선택하여 비트맵 data를 만들어 냅니다.

                                                          

 

        8 픽셀 / byte 포멧으로 변환된 data :   dog_bw_110x170.c    < 110 픽셀(14 bytes)  x 170 픽셀 = 2,380 bytes. >

 

 

4.  ez_font.c 파일에 적절한 변수 이름으로 비트맵 data를 추가 합니다.

 

예제에서는 BGR332 칼라 데이터의 경우 아래와 같이 dog_8bits_110x170[18700] 으로 변수 이름을 설정하고,

          prog_uchar dog_8bits_110x170[18700] = {   //110 bytes per line x 170 lines = 18,700 bytes
          0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,

          0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,..........................

          };

 

흑백 data의 경우 dog_bw_110x170[2380)  으로 변수 이름을 설정하였습니다.

          prog_uchar dog_BW_110x170[2380] = {   //14 bytes per line x 170 lines = 2,380 bytes
          0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
          0x00, 0x00, 0x00, 0x07, 0xFF, ..........................

          };

 

***물론 ez_font.h 파일에도 아래와 같이 해당 변수를 선언해 줍니다.

           ////ez_fonts.c////////////////////////////////////
          extern prog_uchar dog_8bits_110x170[18700];  //110 bytes per line x 170 lines = 18,700 bytes
          extern prog_uchar dog_BW_110x170[2380];   //14 bytes per line x 170 lines = 2,380 bytes

          ///////////////////////////////////////////////////
          extern prog_uchar ez_nums_24x30[11][90]; //'0~9, blank' 24x30 font total 990 bytes, 90 bytes each
          extern prog_uchar ez_ascii_5x7[95][7];  // 5x7 ascii font, each character takes 7 bytes, total 665 bytes, draw from top-left to top-right direction.

          .....

          ...

 

 

5. menu_processing.c 파일의 void draw_menu0(void) 함수를 아래와 같이 수정하여 Button등을 그리는 부분을 없애고 BGR332, 흑백 비트맵 data를 화면에 표시할 수 있도록 합니다.

 

   흑백 비트맵은 draw_BWbmp(orientation, data 시작번지, x, y, width, height, 표시칼라, 배경칼라) 함수로 그림을 그릴수 있으며,

   BGR332 칼라 비트맵은 draw_BGR332(orientation, data 시작번지, x, y, width, height) 함수를 이용하여 LCD 상에 표시를 할 수 있습니다.

 

          void draw_menu0(void)
          {
           clear_box(1, 0, 0, 480, 272, color_DCYAN); // (1=landscape, x=0, y=0, width=480, height=272, color) --- faster than draw_box()
           draw_BWbmp(1, &dog_BW_110x170[0], 100, 50, 110, 170, color_WHITE, color_DCYAN); 

           draw_BGR332(1, &dog_8bits_110x170[0], 300, 50, 110, 170);       // (orientation, bmp_data_start_address, x, y, width, height)

          /* 
           //이전화면 지우기
           clear_box(1, 0, 0, 480, 272, color_DCYAN); // (1=landscape, x=0, y=0, width=480, height=272, color) --- faster than draw_box()

          .....

          ...

          */

          } 

 

 WQV43-Touch 비트맵 그림 그리기 예제소스  :       WQV43-Draw_BMP(20120320A).zip

 WV70-Touch    비트맵 그림 그리기 예제소스  :       WV70-Draw_BMP(20120320A).zip