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);
- }
