On this page, I illustrated how we can create a timer with C++ graphical interface with a step-by-step procedure. This countdown timer is very easy to use, and it has a beep sound in the last 5 seconds.


Interesting right?


If you are a beginner, then this program is very helpful to you to improve your C++ coding skill.


Features of the Program:

  •  Having cool design
  •  Having lightweight code
  •  Includes beep sound for the last 5 seconds


Notice: I made this program in Turbo C/C++ IDE. So, if you are using another IDE then, you can modify the code according to your IDE.
  

Step-by-step procedure to create a timer with C++ graphical interface:


1. First, open the Turbo C++ IDE on your desktop.


2. Now, before we write the main codes, first we include some important header files. Such as-


  •  "iostream" or "iostream.h" - This header file is used for the input values and the output.
  •  "graphics.h" - This header file is used to do some graphical activities.
  •  "conio.h " - In this program, we use this header file to hold the screen.
  •  "stdio.h" - In this program, we include this header file for the use of the sprint () function only.
  •  "dos. h" - We include this header file to do some sound activities.



#include "iostream.h"
#include "conio.h"
#include "stdio.h"
#include "dos.h"
#include "graphics.h"

3. Now, we create the main function to run the program. Inside the main function, first, we declare variables to store the values of hours, minutes, and seconds.

 

We use short data type with the variables hrs, min, and sec. And, we use char data type to store character value ('y' or 'Y') in the variable ch. Which helps to reset the timer. If you want to use int data type instead of short, then you can use it.


4. Now, we create a do-while loop for the looping. When countdown time was over, with the help of this do-while loop we can reset the timer again.

 

Inside the loop, first, we Initialise graphic modes to use graphic functions. After that, we can start designing the countdown timer.



  void main(){

     short min=0,sec=0,hrs=0;
     char ch;
     do{
     int gd=DETECT, gm;
     initgraph(&gd,&gm, "C:\\TC\\BGI");
     }while();

5. Now, we write a block of code to get timer data (Which is the first screen of the program).

 

First, we clear the screen using the cleardevice() function. Then we set font style, font size, font color, and position to the title, using the following code given below the 6th step.

 

 6. Now, we get timer data (such as hours, minutes, and seconds) with help of the following code, and then we clear the screen to show the timer.



  initgraph(&gd,&gm,"C:\\TC\\BGI");
       cleardevice();
       settextjustify(CENTER_TEXT,CENTER_TEXT);
       settextstyle(10,HORIZ_DIR,4);
       setcolor(YELLOW);
       outtextxy(getmaxx()/2,getmaxy()/3,"COUNTDOWN TIMER");
      cout<<"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  Enter hours   : ";
     cin>>hrs;
    cout<<"\n  Enter minuts  : ";
     cin>>min;
     cout<<"\n  Enter seconds : ";
     cin>>sec;

     cleardevice();
     delay(100);




7. Now, it's time to create an infinite loop to run the statements.

 

In this loop first, we convert all integer (hrs, min, sec) values to strings. Because we are going to use the outtextxy() function to print hrs, min, and sec values.

 

To convert an integer value to a string value, we use the sprintf() function. Which is present in stdio.h header file. Now, we store the converted values in the char variables h, m, and s.

 

Below is the code to convert integer to string.



  while(1){
       
    sprintf(h,"%d", hrs); //converting integer value of hrs to string value and store in h
    sprintf(m,"%d", min); //converting integer value of min to string value and store in m
    sprintf(s,"%d", sec); //converting integer value of sec to string value and store in s
      }

8. Now, we print some characters such as HH, MM, and SS which indicate hours, minutes, and seconds in the center position. To print these characters we use the outtextxy() function. And also, change the text style, size, and color for a better look.



  settextjustify(CENTER_TEXT,CENTER_TEXT);
  settextstyle(2,HORIZ_DIR,6);
  setcolor(GREEN);

  outtextxy(264,220,"HH");
  outtextxy(318,220,"MM");
  outtextxy(372,220,"SS");

9. Next, we print converted hrs, min, and sec values, exactly below the HH, MM, and SS characters. We use the outtextxy() function to print converted characters.



  outtextxy(264,240,h);
  outtextxy(292,239,":");
  outtextxy(318,240,m);
  outtextxy(344,239,":");
  outtextxy(372,240,s);

10. Now, this step is important, guys! Now we are going to prepare a very important algorithm that plays the role of a timer. Before the explanation, first, see the code.



  sec--;
	 delay(10000);
	cleardevice();
	 if(sec<0 && min!=0){
	      min--;
	      sec=59;

	 }
	 if(hrs!=0 && min==0){
	     hrs--;
	     min=59;
	     sec=59;
	 }

	 if(hrs==0 && min==0 && sec<0){
	       graphic();
	       settextstyle(2,HORIZ_DIR,7);
	       setcolor(GREEN);
	       outtextxy(320,230,"Time Over");

	       break;
	 }

Here, you can see that we decreased the seconds by a 1-second delay, with the help of the delay function. And then we clear the device.

 

Note: In the delay() function use 1000 or 10000 value. These values depend upon your IDE. For me, I use 1000 in Turbo C/C++.

 

Also, we added some conditions they are-

 

if sec<0 and min!=0. Then a minute will be decreased by 1 (min--) and in the variable sec (second) stored the value 59.

 

According to the second condition, if hrs!=0 and min==0. Then the hrs (hours) will be decreased by 1 and the values of min and sec will be 59.

 

Now, the last condition is used to get an exit from the loop. The condition is if a value of hrs, min, and sec are zero (hrs==0 && min==0 && sec==0). Then we print "Time Over" with the text style and green color. And then we use the break statement.




11. Next, out of the while loop we get input from the user to reset a timer and that input value was stored in the ch variable.

 

Now we add a condition to the do-while loop. The condition is, if the entered value is equal to 'y' or 'Y' ( ch=='y' || ch=='Y' ). Then the process will be repeated.



  cout<<"  Do you want to reset time?(y/n) : ";
       
	cin>>ch;
     }while(ch=='y' || ch=='Y');
     getch();
     closegraph();
}



12. Next, we add an extra feature like sound. We use the sound() and nosound() function, which is present in dos. h.

 

When a value of hrs and min is 0 and sec is smaller than or equal to 5 then it produces the beep sound every 1 second of a delay. And also, the color was changed to Red.

 

So, to add this feature, we add one more condition above hrs, min, and sec values. Because we want to change color only of hrs, min, and sec values.

 

The condition is, if hrs==0 && min==0 && sec<6, then 1200 frequency sound will be produced in the 500 ms (Mili seconds). And the color is changed to red.



  if(hrs==0 && min==0 && sec<6 code="" delay="" h="" m="" nosound="" outtextxy="" s="" setcolor="" sound="">



13. Now, at the end of the do-while loop we will add some sound functions to produce an awesome sound at the time of printing Timer Over. For example, see the following code.



  sound(1000);
		delay(800);
	       sound(1500);
		delay(900);
	      sound(2000);
		delay(1000);
	      nosound();
	cout<<"  Do you want to reset time?(y/n) : ";
       
	cin>>ch;
     }while(ch=='y' || ch=='Y');
     getch();
     closegraph();
}

14. In the Last, we will design an interesting shape for the timer. So, first, we will declare a function called void graphic() above the main function.



#include "iostream.h"
#include "conio.h"
#include "stdio.h"
#include "dos.h"
#include "graphics.h"

void graphic();
void main(){


15. Now, outside the main function we will define that void graphic() function. In this function, we design two shapes. We create these shapes by using the line() function.

 

First, we create an inner shape. See the following diagram, how we can create a shape by lines. The color of the inner shape will be White.


First page:



Now, we create our outer shape. see the following diagram. The color of the outer shape will be Red.

Second shape: 




A combination of these two shapes looks like this.



Now, we write code to create the above shape with the help of graphics functions.  


  void graphic(){
  //Designing the shape one
      setcolor(15);
      line(237,205,237,235);  //line 1
      line(398,205,398,235);  //line 2
      line(237,205,250,195);  //line 3
      line(398,205,385,195);  //line 4
      line(250,195,280,195);  //line 5
      line(385,195,355,195);  //line 6
      line(280,195,290,205);  //line 7
      line(355,195,345,205);  //line 8
      line(290,205,345,205);  //line 9
      line(237,235,265,270);  //line 10
      line(398,235,375,270);  //line 11
      line(265,270,285,270);  //line 12
      line(375,270,355,270);  //line 13
      line(285,270,295,260);  //line 14
      line(355,270,345,260);  //line 15
      line(295,260,345,260);  //line 16

      //Designing shape two
      setcolor(4);
      line(228,200,228,240);  //line 1
      line(407,200,407,240);  //line 2
      line(228,200,246,185);  //line 3
      line(407,200,389,185);  //line 4
      line(246,185,285,185);  //line 5
      line(389,185,350,185);  //line 6
      line(285,185,295,195);  //line 7
      line(350,185,340,195);  //line 8
      line(295,195,340,195);  //line 9

      line(228,240,262,280);  //line 10
      line(407,240,379,280);  //line 11
      line(262,280,290,280);  //line 12
      line(379,280,351,280);  //line 13
      line(290,280,300,270);  //line 14
      line(351,280,341,270);  //line 15
      line(300,270,341,270);  //line 16
 }



That's all guys! Our timer with C++ graphical interface or digital countdown timer or graphical countdown timer is ready to use.

 

Full source code:

 

If you like this program, then please comment on how much you like it. If I did some mistakes, then please tell me in the comment section.

 

If you want more interesting programs, then please subscribe to my YouTube channel Codes Gallery.

Tags

Post a Comment

You are welcome to share your ideas with me in the comments!

Post a Comment

You are welcome to share your ideas with me in the comments!

Previous Post Next Post