MAKER:jnthas／译：趣无尽
Component List
ESP32 Development Board / ESP32 Trinity × 1, 64×64 RGB LED × 1, 15v Power Supply × 1
Homemade PCB
At the beginning of the development, I used ESP32 to control the LED matrix. For beginners who cannot make a homemade PCB, the ESP32 development board is a very good choice. How well you utilize the board depends on your wiring skills.
You just need to follow the wiring instructions shown on GitHub for the driver, or you can seek help from the wiring diagram.
For specific details, refer to: https://github.com/mrfaptastic/ESP32-HUB75-MatrixPanel-I2S-DMA#2-wiring-esp32-with-the-led-matrix-panel/
After completing the basic code for the clock, I am preparing to make a homemade PCB. It can control the circuit board of the display.
For specific details, please refer to: https://github.com/jnthas/clockwise/tree/main/firmware/
Recommended a great platform – Tindie, where manufacturers from all over the world create and sell their projects.
Here I found a better board – ESP32 Trinity, which comes with touch-sensitive buttons, LDR (which can be used to adjust the brightness of the display), USB-C, power control, etc.
For more information, visit: https://github.com/witnessmenow/ESP32-Trinity/
Flashing Firmware
If you do not want to understand how the code works, the setup and configuration, and just want to check if it works, you can use the Mario Bros. Clock installer and then upload the firmware. Since it is already compiled, you do not need to install anything. Plug the ESP32 into the USB port and click the P-Switch to flash.
https://jnthas.github.io/mariobros-clock/
Configure WiFi
When running for the first time, you need to configure WiFi. Connect to “Clockwise-Wifi” via your smartphone or laptop, password: 12345678, then click to configure WiFi, select your AP, enter the password and time zone, and save. Then the clock can connect to the NTP server and get the correct time. It uses 2.4GHz WiFi and is not suitable for 5G.
About Time Zone
The WiFi Manager can collect the time zone parameters used in the clock and ensure the correct time is displayed. For example, when using the NTP client, the default time is UTC, and we need to inform the correct time zone in the Wifi settings. All time zones can be viewed here: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones/
For me, entering “America/Sao_Paulo” in the time zone field of the WiFi manager works. If you want to learn more about how the NTP server works, you can click here: https://lastminuteengineers.com/esp32-ntp-server-date-time-tutorial/
Source Code
Usually, I use PlatformIO to develop firmware, if you do not know, I recommend you try it. But in this project, I used Arduino IDE, which makes the project a bit simpler. The code in the repository works with the ESP32-HUB75-MatrixPanel-I2S-DMA library, and I also used PxMatrix and everything works fine. You only need to replace the library without further changing the code, as it is all based on Adafruit_GFX.
https://github.com/mrfaptastic/ESP32-HUB75-MatrixPanel-I2S-DMA/
https://github.com/2dom/PxMatrix/
To make it work in Arduino IDE, I had to slightly modify the project structure, all files go into the root directory along with mariobros-clock.ino. It may be a bit confusing at first, but I will try to organize it here.
The source code can be viewed here: https://github.com/jnthas/mariobros-clock/
The structure consists of three folders and a file tree.
clockface: contains graphics, fonts, icons, etc., as well as Mario’s display. commons: contains common utilities, such as date, time, and WiFi configuration. engine: contains the implementation of general functions used in the display, such as drawing landscapes, sprites, events, etc.
.├── clockface│ ├── Clockface.cpp│ ├── Clockface.h│ └── gfx│ ├── assets.h│ ├── block.cpp│ ├── block.h│ ├── mario.cpp│ ├── mario.h│ └── Super_Mario_Bros__24pt7b.h├── commons│ ├── CWDateTime.cpp│ ├── CWDateTime.h│ ├── IClockface.h│ └── WiFiConnect.h├── engine│ ├── EventBus.cpp│ ├── EventBus.h│ ├── EventTask.h│ ├── Game.h│ ├── Locator.cpp│ ├── Locator.h│ ├── Object.h│ ├── Sprite.cpp│ ├── Sprite.h│ └── Tile.h└── mariobros-clock.inoWith this structure, after assembling, you can display the clock shown in the picture. Based on the static objects in the landscape, we have two dynamic sprites, Mario and the blocks. Mario jumps once a minute and hits the blocks.
The code logic is as follows:
1) mario.jump() // changes the sprite and starts the jump animation2) mario.collidesWith(block) // if collision is detected, mario reverses the movement and starts to fall, // the blocks starts an upward movement already with the new time set3) Block reaches the ascent limit and starts to fall until it reaches the starting position.4) Mario hits the ground and returns to the initial stateIDE Settings
Before running, you need to install some libraries from the Arduino Library Manager. 1. ESP32-HUB75-MatrixPanel-I2S-DMA: search for ESP32 HUB75 MATRIX. 2. Adafruit GFX: search for Adafruit GFX. 3. FastLED: search for FastLED. 4. NTPClient by Fabrice Weinberg – search for NTPClient. 5. Adafruit BusIO: search for the same name. 6. Time by Michael Margolis: search for timelib. 7. WiFi Manager by tzapu: search for wifimanager. 8. ezTime: search for the same name.
Install all libraries and select the correct board, then upload them to make it work. Follow the instructions provided in the firmware section to configure WiFi.
3D Printing
To make the clock easier to hang on the wall, I created a case in TinkerCAD. 3D modeling is not my strong suit, but it turned out well. I modeled based on the display at home.
Different displays may have different hole positions. For reference only: https://www.tinkercad.com/login?next=%2Fthings%2FgP3D1qztRwr-clockwise-case%2Fedit%3Fsharecode%3DLPX3iBTkKpqTlIak9r4VNBfhXKJX-1F97O5nIp6MXyw/
Improvements1. Change the dial via WebSerial API. Create a web application where you can simply select the desired dial to update the firmware. Refer to https://clockwise.page/. 2. Create notification widgets and display them on the dial, which can be configured in the web application. 3. Integrate MQTT into the dial to receive these notifications anywhere. 4. Create more dials.
This is an open-source project, and everyone can also develop it further.
The code used in the project can be downloaded from the project repository:https://make.quwj.com/project/452
via instructables.com/Mario-Bros-Clock/
The links in the article can be clicked to read the original text at the end
More exciting content