• Skip to primary navigation
  • Skip to main content

IoTmaker

사물인터넷에 대한 모든 것 여기서 해결하셔요!

  • 홈
  • 책:마이크로파이썬을 활용한 사물인터넷
  • 책:따라 하면서 배우는 사물인터넷
  • 온라인 교육 코스
  • 새로운 소식
  • 의견보내기
  • 내 수강정보
  • 로그인
  • 회원가입

XBM형식의 이미지 파일을 만드는 방법

책에서 사용하는 부품 구입하기

XBM이란?

비트맵 이미지를 프로그램 소스 형식으로 표현하는 방식을 XBM(X Windows Bit Map)이라고 합니다.

XBM 형식으로 이미지를 활용하는 절차

  • 이미지 편집 툴인 GIMP에서 한글 텍스트 이미지를 만듭니다.
  • 한글 이미지를 .xbm 형식의 파일로 내 보냅니다.
  • 아두이노 프로그램에 .xbm 텍스트를 붙여 넣습니다.
  • u8g2 라이브러리의 drawXBM 메쏘드를 이용해 이미지를 표시합니다
GIMP에서 한글 텍스트를 이미지로 만들기
GIMP는 무료 이미지 편집툴인데, 작업 결과를 .xbm형식으로 내보낼 수 있습니다.

GIMP 설치하기
01 GIMP 다운로드 누르면 다음 그림이 나타납니다. 그림의 Download GIMP….. 버튼중 두번째를 눌러서 다운로드를 시작합니다.

02 설치파일의 다운로드가 완료되면 실행하여 설치를 시작합니다. 화면의 안내를 따라 설치합니다.

한글 텍스트 이미지 만들기
01 GIMP를 실행합니다.

02 파일–새 이미지
너비와 높이는 각각 사용할 기기의 화면 크기(예:128과 64)로 지정하면 편합니다.

03 보기–확대
400%로 확대하여 보는게 편합니다.

04 도구–텍스트
도구 박스에서 폰트 종류와 크기를 정할 수 있습니다.이 때 ‘부드럽게 하기’는 체크 해제해야 선명한 이미지를 얻을 수 있습니다.기본 폰트인 ‘Gulim’, ‘GulimChe’, ‘Dotum’, ‘DotumChe’, ‘Gungsuh’, ‘GungsuChe’ 중에서 선택하고 폰트 크기를 지정합니다. 캔버스의 원하는 위치에 문자를 입력합니다.

05 이미지–Crop to Content
글자만 표시되어 내보낼 준비가 됩니다.

이미지 만들기

한글 텍스트 이미지가 아니라면, 이미지를 캔버스에 직접 그려야 합니다. 이미지를 그리는 방법은 여기서는 안내하지 않습니다.

XBM형식의 파일로 내보내기
GIMP에서 작성한 이미지를 XBM 형식의 외부파일로 내보내는 절차입니다.

XBM 형식의 파일로 내보내기
01 파일–Export As…
파일 이름과 폴더를 선택합니다.

02 좌측 하단의 파일 유형 선택(확장자로) 누름
‘ X 비트맵 이미지’를 선택합니다.

03 내보내기를 누릅니다.

아두이노 프로그램에 .xbm 파일 포함하기

다음은 한글 이미지를 XBM 형식으로 내보낸 파일입니다.
원래 파일에서는

static unsigned char hangeul_bits[]
인 것을
const unsigned char hangeul_bits[] PROGMEM
으로 변경하였습니다. 이렇게 하면 이미지 데이터를 외부의 프로그램 보관영역에 두고 필요할 때만 메모리에 불러서 사용할 수 있습니다. 이미지 데이터가 많아지면 이처럼 PROGMEM을 사용하여 데이터용 메모리를 줄이는 것이 좋습니다.

아두이노에서 사용하기 위하여 원래 파일의 확장자 .xbm은 .h로 바꾸었습니다.

hangeul.h
#define hangeul_width 58
#define hangeul_height 11
// static unsigned char hangeul_bits[] = {
const unsigned char hangeul_bits[] PROGMEM = {
   0x0e, 0x11, 0x10, 0x0e, 0x01, 0x10, 0x00, 0x00, 0x11, 0x11, 0x1e, 0x00,
   0x81, 0x10, 0xfc, 0x00, 0x11, 0x11, 0x90, 0x3f, 0x81, 0x10, 0x02, 0x01,
   0x11, 0x17, 0x1e, 0x00, 0x81, 0x1c, 0x02, 0x01, 0x11, 0xf1, 0x13, 0x0e,
   0x81, 0x10, 0x02, 0x01, 0x0e, 0x01, 0x10, 0x11, 0x47, 0x11, 0xfc, 0x00,
   0x00, 0x01, 0x00, 0x11, 0x41, 0x1d, 0x48, 0x00, 0x00, 0xc1, 0x0f, 0x11,
   0x21, 0x12, 0x48, 0x00, 0x02, 0x20, 0x10, 0x0e, 0x11, 0x12, 0x48, 0x00,
   0x02, 0x20, 0x10, 0x00, 0x01, 0x10, 0xff, 0x03, 0xfe, 0xc1, 0x0f, 0x00,
   0x01, 0x10, 0x00, 0x00 };
아두이노 프로그램에서 .xbm 파일 내용을 디스플레이에 표시하기
위 파일을 이용하여 이미지를 표시하는 아두이노 프로그램입니다.

display_image_progmem.h

#include <AimTimer.h>
AimTimer timerOled(5);

#include "hangeul_progmem.h"
#include <Aims_oled_shield.h>
Aims_oled  oled;

void setup() {
  Serial.begin(115200);
  Serial.println();
}

void loop() {
  if (timerOled.isOn()) {
    displayOled();
  }
}

void displayOled() {
  cnt++;
  u8g2.firstPage();
  do {
    oled.drawXBM((64-hangeul_width)/2,0,hangeul_width,hangeul_height,hangeul_bits);
    oled.printStr(FONT_22 ,46,String(cnt));  
  } while(u8g2.nextPage());
}

Copyright © 2025 ·로그인