Arduino #39 使用 u8g2 庫在 SSD1306 OLED 上動態繪製骰子 (Draw dynamic dice on SSD1306 OLED with u8g2 library)

The next video is planned to transfer the dice points from App Inventor 2 to the OLED on ESP32 for display in real time. In this way, we can learn how to communicate from mobile App to ESP32. Stay tuned!

References:
* u8g2 font reference: https://github.com/olikraus/u8g2/wiki…
* u8g2 Github: https://github.com/olikraus/u8g2

If you don’t have enough time, you can also choose the part you want to watch from the timeline below!

Video timeline:
00:00 start
00:40 Results presentation (Demo)
01:15 Coding briefing
02:13 Use random in code
04:23 Show dice at random location
08:53 drawDice function
14:59 Show total points
16:07 Select u8g2 fonts

Hi，歡迎來到本週的 Weekend project with Stonez56。本週是 Arduino 第 39 集，“在 0.96″ OLED 上使用 u8g2 動態繪製骰子”。此影片適合希望學習如何在 SD 1336 LED 上繪製圖案的人。

在上一集中，我向觀眾展示了如何使用加速計在 APP inventor 2 中繪製動態骰子。感興趣的人可以點擊此鏈接觀看。 (App Inventor 第 11 集：https://www.youtube.com/watch?v=2d6Si6u8FVE)

下一個視頻計劃將骰子點數從 App Inventor 2 轉移到 ESP32 上的 OLED 以進行實時顯示。這樣，我們就可以學習如何從移動應用程序與 ESP32 通信。敬請期待！

參考文獻：

• u8g2 字體參考：https://github.com/olikraus/u8g2/wiki/fntlist16
• u8g2 Github：https://github.com/olikraus/u8g2
• u8g2 UTF8 font generator: https://www.stonez56.com/u8g2/(這是我寫的 UI, 快速, 小型化, 非方便建立你的 UTF8字型檔)

視頻時間軸：
00:00 開始
00:40 結果展示（演示）
01:15 編碼簡報
02:13 在代碼中使用隨機
04:23 在隨機位置顯示骰子
08:53 drawDice 函數
14:59 顯示總分
16:07 選擇 u8g2 字體>

====================== ESP32 Codes ===============================

#include <Arduino.h>
#include <U8g2lib.h>

U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/U8X8_PIN_NONE);

void setup(void)
{
    Serial.begin(115200);
    u8g2.begin();
    randomSeed(analogRead(5)); // randomSeed() must be in setup()!
}


// OLED TEXT ROW number, vertical position
const byte ROW[5] = {0, 15, 31, 47, 63};

// 4 dice top-left {x, y} locations in tl[]
const int tl[4][2] = {{2, 20}, {34, 28}, {68, 20}, {100, 28}};
const int size = 28; // dice width and height
const int diceRoundedCorner = 5;
/**
 * drawDiceImage
 *  n = dice serial (1 ~ 4)
 *  pnt = dice points (1 ~ 6)
 */
void drawDiceImage(int n, int pnt)
{
    int tx = tl[n][0];       // top left x
    int ty = random(17, 35); // Makes the y showing at random height
    // int ty = tl[n][1]; //top left y, makes Y showing at fixed height
    int centerX = tx + (size / 2); // center of the dice X
    int centerY = ty + (size / 2); // center of th dice  Y
    const int largeDotSize = 4;    // drawing dot size for 1 only
    const int smallDotSize = 2;    // drawing dot size for rest

    u8g2.drawRFrame(tx, ty, size, size, diceRoundedCorner); // draw the dice border

    // draw the points based on the variable: pnt
    switch (pnt)                                            
    {
    case 1:
        u8g2.drawFilledEllipse(centerX, centerY, largeDotSize, largeDotSize, U8G2_DRAW_ALL);
        break;
    case 2:
        u8g2.drawFilledEllipse(centerX, centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 3:
        u8g2.drawFilledEllipse(centerX, centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 4:
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 5:
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX, centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    case 6:
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX - (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY - (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY, smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        u8g2.drawFilledEllipse(centerX + (size / 4), centerY + (size / 4), smallDotSize, smallDotSize, U8G2_DRAW_ALL);
        break;
    default:
        break;
    }
}

void loop(void)
{
    int dicePoint[4];
    int totalPoints = 0;
    u8g2.clearBuffer();

    //Generate 4 random dice points 
    for (int i = 0; i < 4; i++)
    {
        dicePoint[i] = random(1, 6);    // get random dice number to point
        drawDiceImage(i, dicePoint[i]); // draw dice i with the random dicePoint
        totalPoints += dicePoint[i];    // adding current points to totalPoints
    }

    //Print out the title + total points
    u8g2.setCursor(0, ROW[1]);
    u8g2.setFont(u8g2_font_lubBI14_te); // font list: https://github.com/olikraus/u8g2/wiki/fntlist16
    u8g2.print("POINTS:");
    u8g2.print(totalPoints);

    u8g2.sendBuffer();
    delay(1500);
}
  

==================================================================