Digital Clock | Python | Pygame

 Motive 

        Just to keep this the way I make other projects on my website. Just ignore this and jump right into the project. Oh and here's a preview of what we are going to make.

The Project

        We will be using pygame to create our Digital Clock, I believe all of you have installed pygame, if not just open the command prompt and type pip install pygame and hit enter. Learn more about pygame here https://www.pygame.org/docs/. Feel free to skip to the end to get the full code.

         Okay back to the project, first, let's make a basic pygame window. So import pygame, initialize pygame, set an icon, make a screen like a rectangle then set its caption or whatever you call it, make a while loop to make it run till the exit button is pressed, and update the pygame display. Looks like a lot but these are necessary to even make a basic pygame project. Everyone who has at least worked with pygame once would know how it works.

import pygame pygame.init() icon = pygame.image.load('digitalClock.png') pygame.display.set_icon(icon) screen = pygame.display.set_mode((480,180)) pygame.display.set_caption('Digital Clock') running = True while running: for event in pygame.event.get(): if event.type == pygame.QUIT: running = False pygame.quit() pygame.display.update()

        If you directly copy paste the code that I gave you might face an error in loading the icon. So you can go to https://icons8.com/ and find an appropriate icon for your Clock. If you want the same icon I used you can download it from here https://icons8.com/icons/set/digital-clock or if you don't want any icon you can simply comment it out or delete those lines. If you run the above code you will get a window like this,

      Now its time to get the time, so import datetime from datetime, it's preinstalled so no need for pip install.

      So again, import datetime then make a variable now and set it to datetime.now() then make a new variable called time and set it to now.strftime('%H:%M:%S'), here H stands for an hour, M for minute and S for second. You can change the format according to your wish. Now print(time).

from datetime import datetime now = datetime.now() time = now.strftime('%H:%M:%S') print(time)

        But the above code gives time in 24 hour format, I don't like it so I want to change it to 12 hour format. You can leave it like that if you want 24 hour format. For change it to 12 hour format we nee to split the time variable as minute and hour since these return number in string format we need to change it back to integer. Like this,

minute = now.strftime('%M:%S') hour = int(now.strftime('%H'))

        Now we check if the variable hour is greater that 12 we subtract 12 from  hour, then create a new variable called time and store both these values as a string. Now the whole code should look like this,

from datetime import datetime now = datetime.now() minute = now.strftime('%M:%S') hour = int(now.strftime('%H')) if hour > 12: hour = hour-12 time = f'{hour}:{minute}' print(time)

        Now we need to display the time to the pygame window, for that we need to combine both codes, keeping in mind that we need to change the text every second, so keep those code in the while loop that we created. After all these, we need to make it display on the screen. For that we need a font, so create a variable called font and set it as pygame.font.SysFont('Comic Sans MS',130), here Comic Sans MS is the font and 130 is the size, feel free to change the font of your choice, just open Word and find a good font and replace Comic Sans with the new one you find I personally like comic san. Then make two variables white and black and set its value as (255,255,255) and (0,0,0) respectively it's the value for those colours then screen.fill(black) in the while loop. then render the text with the font that we made in the beginning and show it on the pygame window that's it, a simple Digital Clock. Here's the code:

from datetime import datetime import pygame pygame.init() icon = pygame.image.load('digitalClock.png') pygame.display.set_icon(icon) screen = pygame.display.set_mode((480,180)) pygame.display.set_caption('Digital Clock') font = pygame.font.SysFont('Comic Sans MS',130) white = (255,255,255) black = (0,0,0) running = True while running: screen.fill(black) for event in pygame.event.get(): if event.type == pygame.QUIT: running = False pygame.quit() now = datetime.now() minute = now.strftime('%M:%S') hour = int(now.strftime('%H')) if hour > 12: hour = hour-12 time = f'{hour}:{minute}' text = font.render(time,True,white) screen.blit(text, (0,0)) pygame.display.update()

That code will give you a clock like this,

        But that doesn't look cool, NO DATE, NO DAY, NO MONTH, NO AM/PM, nothing just the time that doesn't even look like a digital clock without the digital font and other necessary stuff. So back to that. Relax it was not a clickbait.

        First, let's begin by installing the digital font as it's not preinstalled in the system so go to https://www.dafont.com/ds-digital.font and install the zip file after that just extract it and select the 4 files that end with .TTF and right click then Install for all users, That's important as just install won't work. So we are done with all the installs. To ensure the font is installed, open Word and then search for DS-Digital if you find it you have successfully installed that font. (Other Resource for fonts- https://www.websiteplanet.com/blog/best-free-fonts/)

        We need that font in two different sizes so create two variable bigFont and smallFont and set it's size to 130 and 30 respectively. Then create a new variable called green for storing the value for the colour green, it's (0,255,0). Now we need to get the month it is in numbers as string from 1 to 12. So, get the value change it to an integer then make a list consisting of all the months in order as strings. Do the same for the day keeping in mind that 0 means Monday and rest follows. Like that, we will also find the year and store it in a variable. As we are creating the clock in the 12-hours format we will add AM/PM to it, for that make a variable called am and set it to 'AM' and if hour > 12 then we change AM to PM. Then place these variables in the window as your wish. With only the time in bigFont and the rest in smallFont.

This will result in a clock like this:

The Full Code

from datetime import datetime import pygame pygame.init() icon = pygame.image.load('digitalClock.png') pygame.display.set_icon(icon) screen = pygame.display.set_mode((430,180)) pygame.display.set_caption('Digital Clock') bigFont = pygame.font.SysFont('DS-Digital',130)#Comic Sans MS smallFont = pygame.font.SysFont('DS-Digital',30) white = (255,255,255) black = (0,0,0) green = (0,255,0) months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ] running = True while running: screen.fill(black) for event in pygame.event.get(): if event.type == pygame.QUIT: running = False pygame.quit() now = datetime.now() today = datetime.today() minute = now.strftime('%M:%S') hour = int(now.strftime('%H')) month = int(now.strftime('%m')) year = now.strftime("%d %Y") day = today.weekday() day = days[day] month = months[month-1] am = 'AM' if hour > 12: hour = hour-12 am = 'PM' time = f'{hour}:{minute}' timeText = bigFont.render(time,True,green) monthText = smallFont.render(month,True,green) yearText = smallFont.render(year,True,green) amText = smallFont.render(am,True,green) dayText = smallFont.render(day,True,green) screen.blit(timeText, (15,20)) screen.blit(monthText, (15,150)) screen.blit(yearText, (145,150)) screen.blit(amText,(380,0)) screen.blit(dayText,(280,150)) pygame.display.update()

       If you have any doubts or errors in the program feel free to comment down below and I will respond as early as possible. And if I have made any mistake please correct me in the comment box below. Don't forget to follow us for such python related content.

~ Johan Jomy