#include "ST7920_GFX_Library.h" //Adding library for graphic display control based on the ST7920 controller.
#include "Adafruit_GFX.h" //Adding Adafruit GFX library which is responsible for drawing different shapes on the display.
#include <SPI.h> //Adding library for SPI serial communication.
//This library uses serial communication (SPI communication). In order to select serial communication mode
//with the display, it is necessary to put the PSB pin to 0V (ground). Otherwise, the display will not work and nothing will be displayed on it.
#define CS_PIN 10 //Defining to which Croduino pin we want to connect CS(RS) LCD pin. In this case it is Croduino pin 10.
#define velicinaSlikeX 56
#define velicinaSlikeY 56
ST7920 display(CS_PIN); //LCD library constructor.
//Bitmap image (e-radionica's logo. :) )
//To convert the image into a series of data for Arduino, it is necessary to open this link:
//https://www.skaarhoj.com/FreeStuff/GraphicDisplayImageConverter.php
static const uint8_t logo[] PROGMEM = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x03, 0xff, 0xc0, 0x00, 0x00,
0x00, 0x00, 0x1f, 0xff, 0xf8, 0x00, 0x00,
0x00, 0x00, 0x7f, 0xff, 0xfe, 0x00, 0x00,
0x00, 0x01, 0xff, 0xff, 0xff, 0x80, 0x00,
0x00, 0x03, 0xfc, 0x00, 0x3f, 0xe0, 0x00,
0x00, 0x0f, 0xe0, 0x00, 0x07, 0xf0, 0x00,
0x00, 0x1f, 0x80, 0x00, 0x01, 0xf8, 0x00,
0x00, 0x3f, 0x00, 0x00, 0x00, 0xfc, 0x00,
0x00, 0x7e, 0x00, 0x00, 0x00, 0x3e, 0x00,
0x00, 0xf8, 0x00, 0x00, 0x00, 0x1f, 0x00,
0x00, 0xf0, 0x00, 0x00, 0x00, 0x0f, 0x00,
0x01, 0xf0, 0x00, 0x00, 0x00, 0x07, 0x80,
0x03, 0xe0, 0x00, 0x00, 0x00, 0x07, 0xc0,
0x03, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xc0,
0x07, 0xc0, 0x3f, 0xff, 0x80, 0x01, 0xe0,
0x07, 0x80, 0xff, 0xff, 0x80, 0x01, 0xe0,
0x0f, 0x83, 0xff, 0xff, 0xfe, 0x00, 0xf0,
0x0f, 0x07, 0xf0, 0x31, 0xfe, 0x00, 0xf0,
0x0f, 0x0f, 0x37, 0x31, 0xfe, 0x00, 0xf0,
0x0e, 0x0e, 0x3f, 0x79, 0xc0, 0x00, 0x78,
0x1e, 0x1c, 0x3f, 0x79, 0xc0, 0x00, 0x78,
0x1e, 0x1c, 0x02, 0x31, 0xc0, 0x00, 0x78,
0x1e, 0x38, 0x00, 0x01, 0xc0, 0x00, 0x78,
0x1f, 0xff, 0x8e, 0x01, 0xfc, 0x00, 0x78,
0x1f, 0xff, 0xff, 0x01, 0xfc, 0x00, 0x78,
0x1f, 0xff, 0xfe, 0x01, 0xfc, 0x00, 0x78,
0x00, 0x38, 0x00, 0x01, 0xc0, 0x00, 0x78,
0x00, 0x1c, 0x1c, 0x21, 0xc0, 0x00, 0x78,
0x00, 0x1c, 0x3c, 0x71, 0xc0, 0x00, 0x78,
0x00, 0x1e, 0x1c, 0xf1, 0xc0, 0x00, 0x78,
0x00, 0x0f, 0x18, 0x71, 0xfe, 0x00, 0x78,
0x00, 0x07, 0xf8, 0xe1, 0xfe, 0x00, 0xf0,
0x07, 0x03, 0xf8, 0xc1, 0xfe, 0x00, 0xf0,
0x07, 0x81, 0xff, 0xff, 0xfe, 0x00, 0xf0,
0x07, 0x80, 0x7f, 0xff, 0x80, 0x01, 0xe0,
0x07, 0xc0, 0x00, 0x00, 0x00, 0x01, 0xe0,
0x03, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xc0,
0x03, 0xe0, 0x00, 0x00, 0x00, 0x07, 0xc0,
0x01, 0xf0, 0x00, 0x00, 0x00, 0x07, 0x80,
0x00, 0xf8, 0x00, 0x00, 0x00, 0x0f, 0x00,
0x00, 0xfc, 0x00, 0x00, 0x00, 0x1f, 0x00,
0x00, 0x7e, 0x00, 0x00, 0x00, 0x3e, 0x00,
0x00, 0x3f, 0x00, 0x00, 0x00, 0xfc, 0x00,
0x00, 0x1f, 0x80, 0x00, 0x01, 0xf8, 0x00,
0x00, 0x0f, 0xe0, 0x00, 0x07, 0xf0, 0x00,
0x00, 0x03, 0xfc, 0x00, 0x3f, 0xc0, 0x00,
0x00, 0x01, 0xff, 0xff, 0xff, 0x80, 0x00,
0x00, 0x00, 0x7f, 0xff, 0xfe, 0x00, 0x00,
0x00, 0x00, 0x1f, 0xff, 0xf8, 0x00, 0x00,
0x00, 0x00, 0x01, 0xff, 0x80, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
};
void setup() {
display.begin(); //Initialization of the library
display.clearDisplay(); //Clear everything from cache (buffer) of the display
//Draw the bitmap image in the default space (x = 35, y = 0) of 56x56 pixel size.
display.drawBitmap(35, 0, logo, velicinaSlikeX, velicinaSlikeY, BLACK);
display.setCursor(20, 57); //Set the text cursor to coordinate x = 20, y = 57
display.setTextColor(WHITE, BLACK); //Now we want the text to be in the color of the background, and everything around it in the color of the pixel
display.print("e-radionica.com"); //Display the text
display.display(); //Print out all data on the display (until this function is called, nothing will be printed out on the display).
}
void loop() {
display.setTextColor(BLACK, WHITE); //Now we want the text to be in the color of the pixel, and everything around it in the color of the background
display.setCursor(0, 0); //We want the text to be displayed in the upper left corner
display.print(millis() / 1000); //Display how long Croduino has been turned on.
display.display(); //Print it all out on the display.
delay(990); //Wait a bit until the next display.
}
Now let’s make something a bit more complicated, and that is a very simple clock (it will not be too accurate because counting seconds is based on Arduino’s millis(); function, but it is great for the example how to make display of the clock on the graphic display).
#include "ST7920_GFX_Library.h" //Adding library for graphic display control based on the ST7920 controller.
#include "Adafruit_GFX.h" //Adding Adafruit GFX library which is responsible for drawing different shapes on the display.
#include <SPI.h> //Adding library for SPI serial communication.
//This library uses serial communication (SPI communication). In order to select serial communication mode
//with the display, it is necessary to put the PSB pin to 0V (ground). Otherwise, the display will not work and nothing will be displayed on it.
#define CS_PIN 10 //Defining to which Croduino pin we want to connect CS (RS) LCD pin. In this case, it is Croduino pin 10.
#define satX 70 //Defining x coordinate where the analog clock will be located on the display.
#define satY 31 //Defining y coordinate where the analog clock will be located on the display.
#define pinMinute 2 //Defining Croduino pin using which we will be setting minutes
#define pinSati 3 //Defining Croduino pin using which we will be setting hours
ST7920 display(CS_PIN); //LCD library constructor.
int sekunde = 0, minute = 0, sati = 0; //Defining and initialization of the clock variables.
unsigned long time1 = 0;
void setup() {
display.begin(); //Initialize the library for LCD
display.clearDisplay(); //Clear the entire LCD cache in order to begin drawing something on the display.
pinMode(pinMinute, INPUT_PULLUP); //Pin using which we want to set minutes must be defined as input on the Croduino.
pinMode(pinSati, INPUT_PULLUP); //Pin using which we want to set hours must be defined as input on the Croduino.
}
char digitalniSat[9];
void loop() {
if ((unsigned long)(millis() - time1) >= 1000) { //Wait one second (1000 milliseconds), and then increase seconds
time1 = millis();
ispisiSat(); //Function that calls displaying the whole clock (both analog and digital) on the display.
sekunde++; //Increase seconds by one.
if (sekunde > 59) { //If a minute has passed (60 seconds), return seconds to zero and increase minutes.
sekunde = 0;
minute++;
}
if (minute > 59) { //If an hour has passed (60 minutes), return minutes to zero and increase hours.
minute = 0;
sati++;
}
if (sati > 23) sati = 0; //If a day has passed, return hours to zero.
}
if (!digitalRead(pinMinute)) { //If we are setting minutes.
sekunde = 0; //First return seconds to zero, so that they do not reach 59 and increase minutes by one
minute++; //Then increase minutes by one
if (minute > 59) minute = 0; //Check if minutes have passed 59, if they have, start setting minutes from the beginning.
ispisiSat(); //Print out new time on the display.
delay(250); //A small break between settings.
}
if (!digitalRead(pinSati)) { //If we are setting hours
sekunde = 0; //First return seconds to zero, so that they do not reach 59 and increase hours by one
sati++; //Then increase hours by one
if (sati > 23) sati = 0; //Check if hours have passed 23, if they have, start setting hours from the beginning.
ispisiSat(); //Print out new time on the display. Ispisi novo vrijeme na display.
delay(250); //A small break between settings. Mala pauza izmedju podesavanja.
}
}
void ispisiSat() {
display.clearDisplay(); //Clear everything from the display
sprintf(digitalniSat, "%2d:%02d:%02d", sati, minute, sekunde); //Display digital clock using the sprintf function. This function works as the printf function, except that it saves everything to string which is in this case digitalniSat
display.setCursor(0, 0); //We want the digital clock to be in the upper left corner
display.print(digitalniSat); //Display the digital clock.
display.drawCircle(satX, satY, 30, BLACK); //Draw the border (frame) of the analog clock that has a 30-pixel radius.
display.drawCircle(satX, satY, 29, BLACK); //In order for the border to be thicker, we draw another circle for one pixel smaller radius than the previous one.
//A little bit of math. :) For drawing hands, we use the drawLine function, which requires the initial x and y coordinate, and the final x and y coordinate.
//The initial ones are not the problem, those are the center of the circle and those describing the clock. We do the final ones using trigonometric functions.
//Using the cosine function we calculate the final x coordinate. Since cos() function requires the argument to be in radians, we must convert our calculation from degrees to radians (deg*PI/180).
//We must calculate how many degrees is one second. This can be done if we divide 360/60 = 6. So, we multiply seconds by 6 in order to get degrees.
//We still need to subtract PI half, because the clock starts so that the hands are placed vertically, not horizontally.
//In the end we just move the calculation by the position of the clock, i.e. the initial coordinate of the line (satX and satY).
//The number in front of sin and cos function tells us about how long the hand will be (for seconds it is 25 pixels).
int x0 = 25 * cos(((sekunde * 6.0) / 180 * PI) - PI / 2) + satX;
int y0 = 25 * sin(((sekunde * 6.0) / 180 * PI) - PI / 2) + satY;
display.drawLine(satX, satY, x0, y0, BLACK);
x0 = 20 * cos(((minute * 6.0) / 180 * PI) - PI / 2) + satX;
y0 = 20 * sin(((minute * 6.0) / 180 * PI) - PI / 2) + satY;
display.drawLine(satX, satY, x0, y0, BLACK);
//Clocks have another addition, as minutes increase, the hand for hours also moves slowly.
//Since one hour moves for 30 degrees, and one hour has 60 minutes, it is necessary to divide minutes by two and add it to the total rotary angle of the hand for hours.
x0 = 20 * cos((((sati * 30.0) + (minute / 2)) / 180 * PI) - PI / 2) + satX;
y0 = 20 * sin((((sati * 30.0) + (minute / 2)) / 180 * PI) - PI / 2) + satY;
display.drawLine(satX, satY, x0, y0, BLACK);
display.display(); //In the end draw the whole view on the display.
}
Now that we have tried out serial communication, we will try out the parallel one using u8g library. The advantage of this library is the fact that it uses very little RAM, so it can be adapted into some more complex projects. But, this is also a drawback, because it is significantly slower than the ST7920 GFX Library. Library’s instructions (along with all the functions it uses) can be found here.
#include "U8glib.h"
//Pins on Croduino-> 8 bit communication: D0..D7: 2, 3, 4, 5, 6, 7, 8, 9, E=10, RS=11, RW=12, PBS = +5V, RST = +5V
U8GLIB_ST7920_128X64_4X u8g(2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
void setup() {
u8g.setRot180(); //Rotating display 180 degrees
}
void loop() {
u8g.firstPage(); //This is the function that starts drawing on the display
do { //The display is divided into more pages (parts).
draw(); //We call the function that contains everything we want to display
} while ( u8g.nextPage() ); //After it has displayed one page, go to the next one, until it shows all pages or the entire display
delay(990); //Wait a bit until the next display
}
void draw() {
u8g.setFont(u8g_font_fixed_v0); //Select which font you want to print out on the display (list of fonts: https://github.com/olikraus/u8glib/wiki/fontsize)
u8g.setFontPosTop(); //We want the reference position for printing the string to be in the upper left corner of that string
u8g.setPrintPos(0, 0); //X i Y coordinates where the string wants to print out on the display
u8g.print("e-radionica.com"); //Display of the desired string on the default position
u8g.setPrintPos(30, 50); //Changing coordinates for displaying the new string
u8g.print(millis() / 1000); //Printing of the new string on the display
}
Loading
epaper-2in9
epaper-2in9