로그인

고급 예제

다양한 도구들을 가지고 마음껏 응용해보세요.

OLED LCD

2015-03-24 16:35:46

OLED는 기존 LED와 다르게 유기물질을 이용해 자체 발광이 가능하게 만들어진 다이오드입니다.

 

OLED는 자체 발광형이며, 시야각이 넓고, 응답속도가 빠르며(LED의 1000배) 백라이트가 필요없기 때문에 소비 전력이 적습니다. 

 

또한 유기물질로 이루어져 있어 기존 LED와 다르게 휘어지며, 얇고, 가볍습니다.

 

이러한 특징으로 인해 차세대 디스플레이로 꼽히고 있습니다.(삼성의 플렉서블 스마트폰이나 TV에 사용되는 등 최근 다양한 OLED제품이 나오고 있습니다.)

- 출처 : 위키백과 - OLED의 시야각 우수성

 

이번 컨텐츠에서는 adafruit 에서 개발한 Monochrome 0.96inch 128X64 OLED graphic display를 이용하여 그림과 문자를 출력해 보겠습니다.

* 참고로 adafruit 에서 지원해주는 SSD1306 라이브러리 대신 U8G 라이브러리를 사용하였습니다.

 

 

 

부품 목록

 

NO 부품명 수량 상세설명
1 오렌지 보드 1  
2 Adafruit Monochrome 0.96inch 128X64 OLED graphic display 1 SSD1306 Driver
3 점퍼케이블 7  

 

부품명 오렌지 보드 OLED Graphiic Display 점퍼케이블
파트

 

 

하드웨어 Making

 

회로도

 

브레드보드 레이아웃

 

OLED 연결

 

OLED Graphic Display 오렌지 보드
GND GND
Vin 5V
3v3 X
CS D10
Rst D8
SA0(DC) D9
Clk D13
Data D11

 

 

소프트웨어 Coding

 

아두이노 코드



#include "U8glib.h"
U8GLIB_SSD1306_128X64 u8g(13, 11, 10, 9,8);	// SW SPI Com: SCK = 13, MOSI = 11, CS = 10, A0 = 9

const uint8_t kocoafabMark_data[] U8G_PROGMEM = {
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x80,0x00,0x00,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xE0,0x00,0x03,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xF0,0x00,0x07,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xFC,0x00,0x1F,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xFE,0x00,0x3F,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xFF,0x00,0x7F,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x7F,0x80,0xFF,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x7F,0xC1,0xFF,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x7F,0xE3,0xFE,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x3F,0xFF,0xFE,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x3F,0xFF,0xFC,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x1F,0xFF,0xFC,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x0F,0xFF,0xF8,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x0F,0xFF,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0xFF,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x03,0xFF,0xC0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x01,0xFF,0xC0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x03,0xFF,0xE0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0xFF,0xE0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0xFF,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0x80,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x00,0xE0,0x06,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x01,0xE0,0x06,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x01,0xC0,0x06,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x01,0x80,0x06,0x00,0x00,0x00,
  0x00,0x0C,0xC7,0x83,0xC7,0xC3,0xC3,0xE7,0xC7,0xE0,0x00,0x00,
  0x00,0x0D,0xCF,0xC7,0xEF,0xE7,0xC3,0xE7,0xE7,0xF0,0x00,0x00,
  0x00,0x0F,0x98,0x6C,0x0C,0x60,0x41,0xC0,0x67,0x38,0x00,0x00,
  0x00,0x0E,0x18,0x6C,0x18,0x33,0xE1,0x87,0xE6,0x18,0x00,0x00,
  0x00,0x0F,0x18,0x6C,0x18,0x37,0xE1,0x8F,0xE6,0x18,0x00,0x00,
  0x00,0x0F,0x98,0x6C,0x1C,0x64,0x61,0x8C,0x67,0x38,0x00,0x00,
  0x00,0x0D,0xDD,0xC7,0xEE,0xE6,0xE1,0x8F,0xE7,0xF8,0x00,0x00,
  0x00,0x0C,0xCF,0xC7,0xE7,0xC7,0xE1,0x87,0xE7,0xF0,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
  
};

const uint8_t nepes_data[] U8G_PROGMEM = {
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0C,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x01,0x0E,0x20,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x03,0xCE,0x70,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x03,0xCC,0xF8,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x0F,0x9F,0xE0,0x1F,0xFE,0x01,0xE0,0xF0,0x0F,0xFF,0x03,0xFF,0xE0,0x00,
  0x00,0x0F,0xFF,0xF0,0x7F,0xFF,0x00,0xE0,0xE0,0x3F,0xFF,0x87,0xFF,0xF8,0x00,
  0x00,0x0F,0xFF,0xF8,0x7F,0xFF,0x00,0x00,0x00,0x3F,0xFF,0x87,0xFF,0xF8,0x00,
  0x00,0x0F,0xF1,0xF8,0xF8,0x0F,0x87,0x00,0x18,0x7C,0x07,0xC7,0xC0,0xF8,0x00,
  0x00,0x0F,0xC0,0xF8,0xF8,0x0F,0x8F,0x80,0x3C,0x7C,0x07,0xC7,0xC0,0x00,0x00,
  0x00,0x0F,0x80,0x78,0xFF,0xFF,0x8F,0x80,0x3C,0x7F,0xFF,0xC7,0xFF,0xF0,0x00,
  0x00,0x0F,0x80,0x78,0xFF,0xFF,0x80,0x00,0x00,0x7F,0xFF,0xC7,0xFF,0xF8,0x00,
  0x00,0x0F,0x80,0x78,0xFF,0xFF,0x80,0x00,0xC0,0x7F,0xFF,0xC1,0xFF,0xFC,0x00,
  0x00,0x0F,0x80,0x78,0xF8,0x00,0x00,0x00,0xE0,0x7C,0x00,0x00,0x00,0xFC,0x00,
  0x00,0x0F,0x80,0x78,0xF8,0x0F,0x8F,0x8C,0xF0,0x7C,0x07,0xC7,0xC0,0x7C,0x00,
  0x00,0x0F,0x80,0x78,0x7F,0xFF,0x8F,0x8E,0xF0,0x3F,0xFF,0xC7,0xFF,0xFC,0x00,
  0x00,0x0F,0x80,0x78,0x7F,0xFF,0x0F,0x8E,0x70,0x3F,0xFF,0x87,0xFF,0xF8,0x00,
  0x00,0x0F,0x80,0x78,0x3F,0xFE,0x0F,0x8E,0x00,0x1F,0xFF,0x03,0xFF,0xF0,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x8C,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x0F,0x80,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
};


int temp = 0;

void draw(void) {
  // graphic commands to redraw the complete screen should be placed here  
  if(temp == 0){
    u8g.drawBitmapP(20, 2, 12, 60, kocoafabMark_data);
  }else if(temp == 1){
     u8g.drawBitmapP(5, 15, 15, 47, nepes_data);   
  }else if(temp == 2){
    //u8g.setFont(u8g_font_unifont);
    u8g.setFont(u8g_font_osb18);
    u8g.setFontPosTop();
    u8g.drawStr(5, 20, "KocoaFAB");
  }
}


void setup(void) {
}

void loop(void) {
  // picture loop
  u8g.firstPage();  
  do {
      draw();

  } while( u8g.nextPage() );
  
  temp++;
  
  if(temp == 3){
    temp = 0;
  }
  
  // rebuild the picture after some delay
  delay(1000);
}

 

 

프로세싱 코드(비트맵 변환 코드)

// Convert image to a C header file suitable for the Adafruit_Thermal library.
// This is NOT an Arduino sketch.  Runs in Processing IDE (www.processing.org)

void setup() {
  // Select and load image
  selectInput("Select image file to convert:", "processImage");
}

void processImage(File image) {
  String      filename, basename;
  PImage      img;
  PrintWriter output;
  int         i, x, y, b, rowBytes, totalBytes, lastBit, sum, n;
  println("Loading image...");
  filename = image.getPath();
  img        = loadImage(image.getPath());

  // Morph filename into output filename and base name for data
  x = filename.lastIndexOf('.');
  if(x > 0) filename = filename.substring(0, x);  // Strip current extension
  x = filename.lastIndexOf('/');
  if(x > 0) basename = filename.substring(x + 1); // Strip path
  else      basename = filename;
  filename += ".h"; // Append '.h' to output filename
  println("Writing output to " + filename);

  // Calculate output size
  rowBytes   = (img.width + 7) / 8;
  totalBytes = rowBytes * img.height;
  // Convert image to B&W, make pixels readable
  img.filter(THRESHOLD);
  img.loadPixels();

  // Open header file for output (NOTE: WILL CLOBBER EXISTING .H FILE, if any)
  output = createWriter(filename); 

  // Write image dimensions and beginning of array
  output.println("#ifndef _" + basename + "_h_");
  output.println("#define _" + basename + "_h_");
  output.println();
  output.println("#define " + basename + "_width  " + img.width);
  output.println("#define " + basename + "_height " + img.height);
  output.println();
  output.print("static PROGMEM prog_uchar " + basename + "_data[] = {");

  // Generate body of array
  for(i=n=y=0; y<img.height; y++) { // Each row...
    output.print("\n  ");
    for(x=0; x<rowBytes; x++) { // Each 8-pixel block within row...
      lastBit = (x < rowBytes - 1) ? 1 : (1 << (rowBytes * 8 - img.width));
      sum     = 0; // Clear accumulated 8 bits
      for(b=128; b>=lastBit; b >>= 1) { // Each pixel within block...
        if((img.pixels[i++] & 1) == 0) sum |= b; // If black pixel, set bit
      }
      output.format("0xX", sum); // Write accumulated bits
      if(++n < totalBytes) output.print(',');
    }
  }

  // End array, close file, exit program
  output.println();
  output.println("};");
  output.println();
  output.println("#endif // _" + basename + "_h_");
  output.flush();
  output.close();
  println("Done!");
  exit();
}

 

 

소프트웨어 설명

위 아두이노 코드를 사용하기 위해서는 U8G 라이브러리가 필요합니다.

U8G 라이브러리 내려 받기

위 라이브러리를 설치하고 위의 아두이노 코드를 업로드 하면 밑의 사진과 같이 화면이 나옵니다.

(KocoaFAB 마크 이미지 -> Nepes 마크 이미지 -> KocoaFAB 글자 순으로 계속 반복 합니다.)

 

 

OLED LCD에 출력하기

 

OLED LCD에 이미지를 출력하기 위해 이미지 파일을 변환해야 합니다. 위에 올려놓은 프로세싱 파일을 받아서 실행해줍니다.

(프로세싱으로 실행해야 합니다. 프로세싱 실행법은 링크를 참고하세요.)

 

실행하게 되면 변환할 파일을 선택하는 창이 나옵니다. 변환해줄 이미지를 선택합니다.(위에서 사용한 OLED LCD는 흑백이므로 왠만하면 흑백 구분이 잘되도록 편집해주고, LCD 크기(128X64)에 맞게 수정해 주신 후 변환하시기 바랍니다.

 

변환하시면 이미지명.h 파일이 나옵니다. 이 파일을 sketch 에서 실행 하면 밑에 화면과 같이 나옵니다. 

 

괄호 안에 있는 밑의 네모 부분을 복사하시고(괄호 끝까지 다 복사 하셔야 합니다.)

 

const uint8_t kocoafabMark_data[] U8G_PROGMEM = {
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x80,0x00,0x00,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xE0,0x00,0x03,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xF0,0x00,0x07,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xFC,0x00,0x1F,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xFE,0x00,0x3F,0x80,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0xFF,0x00,0x7F,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x7F,0x80,0xFF,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x7F,0xC1,0xFF,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x7F,0xE3,0xFE,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x3F,0xFF,0xFE,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x3F,0xFF,0xFC,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x1F,0xFF,0xFC,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x0F,0xFF,0xF8,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x0F,0xFF,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0xFF,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x03,0xFF,0xC0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x01,0xFF,0xC0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x03,0xFF,0xE0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0xFF,0xE0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0xFF,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x07,0x80,0xF0,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x00,0xE0,0x06,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x01,0xE0,0x06,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x01,0xC0,0x06,0x00,0x00,0x00,
  0x00,0x0C,0x00,0x00,0x00,0x00,0x01,0x80,0x06,0x00,0x00,0x00,
  0x00,0x0C,0xC7,0x83,0xC7,0xC3,0xC3,0xE7,0xC7,0xE0,0x00,0x00,
  0x00,0x0D,0xCF,0xC7,0xEF,0xE7,0xC3,0xE7,0xE7,0xF0,0x00,0x00,
  0x00,0x0F,0x98,0x6C,0x0C,0x60,0x41,0xC0,0x67,0x38,0x00,0x00,
  0x00,0x0E,0x18,0x6C,0x18,0x33,0xE1,0x87,0xE6,0x18,0x00,0x00,
  0x00,0x0F,0x18,0x6C,0x18,0x37,0xE1,0x8F,0xE6,0x18,0x00,0x00,
  0x00,0x0F,0x98,0x6C,0x1C,0x64,0x61,0x8C,0x67,0x38,0x00,0x00,
  0x00,0x0D,0xDD,0xC7,0xEE,0xE6,0xE1,0x8F,0xE7,0xF8,0x00,0x00,
  0x00,0x0C,0xCF,0xC7,0xE7,0xC7,0xE1,0x87,0xE7,0xF0,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
  
};

 위에 보이는 함수 안에 넣어 줍니다.(중간에 kocoafabMark_data[] 부분이 이름입니다. 이름을 수정하실 경우 여기만 수정해 주세요. 

 

void draw(void) {
  // graphic commands to redraw the complete screen should be placed here  
  if(temp == 0){
    u8g.drawBitmapP(20, 2, 12, 60, kocoafabMark_data);
  }else if(temp == 1){
     u8g.drawBitmapP(5, 15, 15, 47, nepes_data);   
  }else if(temp == 2){
    //u8g.setFont(u8g_font_unifont);
    u8g.setFont(u8g_font_osb18);
    u8g.setFontPosTop();
    u8g.drawStr(5, 20, "KocoaFAB");
  }
}

 

그 다음 draw함수안에 있는 u8g.drawBitmapP(시작x좌표, 시작y좌표, 이미지 가로 크기, 이미지 세로 크기, 이미지 파일)을 자신의 이미지에 맞게 수정해 줍니다. 

* 이미지 가로 크기는 한줄안에 있는 0X00 의 갯수, 세로 크기는 0X00의 세로 갯수 입니다. 밑의 화면에 있는 네모가 1개의 단위 입니다.

(가로 길이는 직접 세보시면 되고 세로 길이는 길면 위에 height라고 나온 값과 같으니 그것을 참고 하셔도 됩니다.)

 

시작 x좌표, y좌표는 이미지의 크기에 맞게 생각 하셔서 정해주시면 됩니다. 가로 128, 세로 64이므로 시작 x좌표와 이미지 가로 크기가 128을 넘거나, 시작 y좌표와 이미지 세로 크기가 64를 넘기게 되면 이미지가 깨져서 출력이 됩니다.

 

    u8g.setFont(u8g_font_osb18);
    u8g.setFontPosTop();
    u8g.drawStr(5, 20, "KocoaFAB");

 

글자 출력은 위 draw함수 안에 있는 위 부분에서 출력합니다.  setFont함수를 이용하여 폰트를 지정해 주시고, setFontPosTop을 이용해 폰트의 위치를 지정해 주신 후(setFontPostTop함수는 base라인이 위에 있도록 세팅해줍니다. setFontPosBottom, setFontBaseline, setFontCenter 함수가 있으니 위치에 맞게 사용하시면 됩니다. 중요한 것은 폰트 base라인이 기준입니다.)

 

그다음 drawStr함수를 사용하여 폰트의 base라인을 지정해주고 출력할 문자를 적어주시면 위에서 지정한 폰트의 글자가 해당 위치에 나오게 됩니다. 

 

 

void loop(void) {
  // picture loop
  u8g.firstPage();  
  do {
      draw();

  } while( u8g.nextPage() );
  
  temp++;
  
  if(temp == 3){
    temp = 0;
  }
  
  // rebuild the picture after some delay
  delay(1000);
}

 

아두이노 Loop구문입니다. temp값을 1씩 증가시켜 주어서 해당 temp값에 맞는 이미지를 1초마다 출력합니다. temp가 2까지 있으니(0, 1, 2) 2를 넘어가면 (3이상 부터) 다시 0으로 돌아오게 하였습니다.

 

이 외에 U8G 라이브러리에 다양한 함수들을 알고 싶으시면 링크에서 확인하시기 바랍니다.

kocoafabeditor

항상 진취적이고, 새로운 것을 추구하는 코코아팹 에디터입니다!

LCD, OLED, 아두이노, 오렌지보드