// simple project using Arduino UNO and Matrix LED Display MAX7219 with u8g2 library
// to create a counter for example for counting youtube subscribers
// created by upir, 2023
// youtube channel: https://www.youtube.com/upir_upir
// Arduino + Matrix Display (The Proper Way)
// YOUTUBE VIDEO: https://youtu.be/jlhcDzS17vU
// links from the video:
// Photopea (online Photoshop-like tool): https://www.photopea.com/
// image2cpp (convert images into C code): https://javl.github.io/image2cpp/
// Starting sketch: https://github.com/olikraus/u8g2/blob/master/sys/arduino/u8g2_full_buffer/MAX7219_U8g2/MAX7219_U8g2.ino
// WOKWI display documentation: https://docs.wokwi.com/parts/wokwi-max7219-matrix
// U8g2 + Matrix display screenshot: https://github.com/olikraus/u8g2/wiki/gallery#28-may-2017-max7219-32x8-led-matrix
// U8g2 fonts: https://github.com/olikraus/u8g2/wiki/fntlist8#7-pixel-height
// Desmos online graphs: https://www.desmos.com/calculator?lang=en
// LCD Image converter: https://lcd-image-converter.riuson.com/en/about/
#include <Arduino.h>
#include <U8g2lib.h>
U8G2_MAX7219_32X8_F_4W_SW_SPI u8g2(U8G2_R0, /* clock=*/ 11, /* data=*/ 12, /* cs=*/ 10, /* dc=*/ U8X8_PIN_NONE, /* reset=*/ U8X8_PIN_NONE);
// 'matrix_display_counter', 32x8px
const unsigned char preview_time [] = {
0x27, 0x0e, 0xe0, 0x00, 0x65, 0x08, 0xa0, 0x00, 0x21, 0x48, 0xa7, 0x74, 0x22, 0x0e, 0xe1, 0x50,
0x24, 0x02, 0x27, 0x77, 0x24, 0x42, 0x24, 0x54, 0x77, 0x0e, 0xe7, 0x77, 0x00, 0x00, 0x00, 0x00
};
const unsigned char youtube_logo_bitmap [] = { // youtube bitmap logo, 8x7 px
B01111110,
B11101111,
B11100111,
B11100011,
B11100111,
B11101111,
B01111110
};
byte digits[4] = {1, 2, 5, 5}; // individual digits to be displayed on the matrix display
byte digits_offset_perc[4] = {0, 0, 0, 0}; // y offset for the individual digits - percentage 0-100%
char digit_char[2]; // helper array for storing C-style string
char digit_char_next[2]; // helper array for storing C-style string
float y_offset; // y pixel offset for digit
void setup(void) {
u8g2.begin(); // begin function is required for u8g2 library
u8g2.setContrast(10*16); // set display contrast 0-255
pinMode(7, INPUT_PULLUP);
}
void loop(void) {
if (digitalRead(7) == LOW) { // button is pressed
if (digits_offset_perc[3] == 0) { // no animation is currently playing for the last digit
digits_offset_perc[3] = 2; // in that case, animate the last digit (increment the last digit)
}
}
u8g2.clearBuffer(); // clear the internal u8g2 memory
u8g2.setFont(u8g2_font_minuteconsole_tr); // choose a suitable font with digits 3px wide
// u8g2.setFont(u8g2_font_micro_tr);
// u8g2.drawBitmap(0, 0, 1, 7, youtube_logo_bitmap); // draw youtube logo on top left corner
// u8g2.drawStr(0,7,"Yeah!!!");
// u8g2.drawBitmap(0, 0, 4, 8, preview_time);
// u8g2.drawStr(1,7,"12:59");
for (int i=3; i>=0; i--) { // go from the last digit to the first digit
if (digits_offset_perc[i] > 0) { // animate the digit
digits_offset_perc[i] = digits_offset_perc[i] + 2; // increase the percentage offset
if ((digits[i] == 9) && (digits_offset_perc[i-1] == 0) && (digits_offset_perc[i] > 20)) {
digits_offset_perc[i-1] = 2; // digit is 9 turning to 0 = increase digit on the left side
}
if (digits_offset_perc[i] >= 100) { // animation is complete, switch to the next digit
digits_offset_perc[i] = 0; // stop the animation
digits[i] = digits[i] + 1; // switch to the next digit
if (digits[i] == 10) { // if the digit goes over 9, go back to 0
digits[i] = 0;
}
}
}
// linear movement of digits - looks boring
//y_offset = round((digits_offset_perc[i] / 100.0) * 8.0); // calculate the Y pixel offset
// easing using the power function - looks strange for continuous animation
//y_offset = round(pow((digits_offset_perc[i] / 100.0), 0.4) * 8.0);
// easing using the cosine function - looks great
y_offset = round((1-((cos(digits_offset_perc[i] / 100.0 * 3.141592654) / 2.0)+0.5)) * 8.0);
itoa(digits[i], digit_char, 10); // convert digit number to helper C-style string array
itoa((digits[i]+1) % 10, digit_char_next, 10); // convert next digit number to helper C-style string array
u8g2.drawStr(1 + i*4, 7 - y_offset, digit_char); // draw the current character to the display
u8g2.drawStr(1 + i*4, 7 - y_offset + 8, digit_char_next); // draw the next character to the display
}
u8g2.setFont(u8g2_font_tom_thumb_4x6_tr);
if (millis()/2000 % 2 == 0 ){ // Every 2 seconds timer
u8g2.drawStr(21,5,"69%");
}
else {
u8g2.drawStr(21,5,"25c");
}
u8g2.sendBuffer(); // transfer internal memory to the display
}