Hi, welcome to this week's Weekend project with Stonez56.
This week is Arduino Episode #39, "Drawing Dice Dynamically at 0.96" OLED with u8g2" This video is suitable for people who want to learn how to draw patterns on SD 1336 LED.=== IMPORTANT NOTICE ===
Do you want to generate u8g2 UTF8 font for your own Arduino projects?
Try this online web tool I created @ https://stonez56.com/u8g2
Just 3 easy steps to get UTF8 Arduino codes for your projects!
Try it today!!
=== NOTICE ===
In the previous episode, I showed audiences how to use the accelerometer to draw dynamic dice in APP inventor 2. People who are interested can click this link to watch.
(App Inventor Episode 11: https: // 
• App Inventor #11 Write your own App (... )
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
• App Inventor #11 Write your own App (... )
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* u8g2 UTF8 font generator: https://stonez56.com/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 上繪製圖案的人。
描述： 嗨，歡迎來到本週的 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://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 ===============================
====================== 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);
}
==================================================================
