在程式執行中，用家都需要獲悉執行的結果或執行過程中的資料，而這些資料或結果會通過文字訊息提供給用家，當然圖像化的顯示，更加令到用家容易閱讀和理解。其實在 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%
天氣：多雲
