DIY - ESP8266：SSD1306 0.96吋 OLED 顯示屏模塊顯示圖案（六十）

DIY - ESP8266：SSD1306 0.96吋 OLED 顯示屏模塊顯示圖案（六十）：

在程式執行中，用家都需要獲悉執行的結果或執行過程中的資料，而這些資料或結果會通過文字訊息提供給用家，當然圖像化的顯示，更加令到用家容易閱讀和理解。其實在 LCD / OLED 屏顯示文字和圖像都是使用點來組成，所以要明白 LCD / OLED 屏的顯示方式是很重要。

SSD1306 OLED 顯示屏的圖像顯示

SSD1306 OLED 顯示屏的圖像顯示

基本的圖像顯示功能： 

• 文字（Font）- gfx_drawString("BugWorkShop ESP12Fv31", 0, 0, 1, 1, 0) 
• 直線（Line）- gfx_drawLine(0, 42, 127, 42, 1) 
• 圓圈（Circle）- gfx_Circle(64, 42, 16, 1) 
• 點陣圖（Bitmap）- gfx_drawXbm1( 0, 48, 16, 16, 1, BWS0_16x16)  

文字（Font）顯示功能程式：

void gfx_drawString(char *str, uint16_t posX, uint16_t posY, uint8_t sizeFont, uint16_t colorFont, uint16 colorBackground) {             void gfx_nextString(void)             {                 posX = 0;                 posY += 8 * sizeFont + 1;                 if( (posY + 8 * sizeFont) > (GFX_MAX_TFT_Y + 1) )                 {                         posX = 0;                         posY = 0;                 }             }     while(*str)     {             gfx_drawChar(*str, posX, posY, sizeFont, colorFont, colorBackground);         str++;         posX += GFX_FONT_X * sizeFont; // Move cursor right         if ( (posX + GFX_FONT_X * sizeFont) > (GFX_MAX_TFT_X + 1) )             gfx_nextString();         if (*str == 0x0A)         {             str++;             gfx_nextString();         }     } }

直線（Line）顯示功能程式：

void gfx_drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t *colors) {   int16_t steep = abs(y1 - y0) > abs(x1 - x0);   if (steep) {     _swap_int16_t(x0, y0);     _swap_int16_t(x1, y1);   }   if (x0 > x1) {     _swap_int16_t(x0, x1);     _swap_int16_t(y0, y1);   }   int16_t dx, dy;   dx = x1 - x0;   dy = abs(y1 - y0);   int16_t err = dx / 2;   int16_t ystep;   if (y0 < y1) {     ystep = 1;   } else {     ystep = -1;   }   for (; x0<=x1; x0++) {     if (steep) {             ssd1306_PutPixel(y0, x0, colors);     } else {             ssd1306_PutPixel(x0, y0, colors);     }     err -= dy;     if (err < 0) {       y0 += ystep;       err += dx;     }   } }

圓圈（Circle）顯示功能程式：

void ICACHE_FLASH_ATTR gfx_Circle(int8_t x0, int8_t y0, uint8_t r, uint16_t *colors) {     int8_t x = r;     int8_t y = 1;     int16_t radius_err = 1 - x;     if (r == 0)         return;     ssd1306_PutPixel(x0 - r, y0, colors);     ssd1306_PutPixel(x0 + r, y0, colors);     ssd1306_PutPixel(x0,     y0 - r, colors);     ssd1306_PutPixel(x0,     y0 + r, colors);     while (x >= y)     {         ssd1306_PutPixel(x0 + x, y0 + y, colors);         ssd1306_PutPixel(x0 - x, y0 + y, colors);         ssd1306_PutPixel(x0 + x, y0 - y, colors);         ssd1306_PutPixel(x0 - x, y0 - y, colors);         if (x != y)         {             ssd1306_PutPixel(x0 + y, y0 + x, colors);             ssd1306_PutPixel(x0 - y, y0 + x, colors);             ssd1306_PutPixel(x0 + y, y0 - x, colors);             ssd1306_PutPixel(x0 - y, y0 - x, colors);         }         ++y;         if (radius_err < 0)         {             radius_err += 2 * y + 1;         }         else         {             --x;             radius_err += 2 * (y - x + 1);         }     } }

點陣圖（Bitmap）顯示功能程式：

void gfx_drawXbm1(uint8 x, uint8 y, uint8 width, uint8 height, uint8 sizeFont, const char *xbm) {             uint8 i,j;             uint8 charColumn;             uint8 *dataptr;             uint8 posX, posY;             posX = x;             posY = y;             for (i = 0; i < height/8; i++ ){                                     posX=x;                         for (j = 0; j < width; j++) {                                     unsigned char charColumn = xbm[i*width + j];                                     dataptr = &charColumn;                                     ssd1306_Put8bit(posX, posY,(uint8_t *)dataptr);                                     posX++;                                     }                         posY = posY+8;             } }

2018年 1月 29日 天氣報告

氣溫：9.9度 @ 09:20

相對濕度：百分之 70%

天氣：多雲