Microsoft Foundation Classes: creating watch application

MFC provides large number of classes and functions that can help you to create an application with GUI and animation. In this Article I'll speak about the basic steps to create an watch application.

1. In the application we need to now the current system time. To hold this information next variables are declared in the document class:
   1. public:
   2.         time_t t;
   3.         struct tm* now;
   4.         int hour,
   5.                 minute,
   6.                 second;
   7.         int day,
   8.                 date,
   9.                 month,
   10.                 year;
   time_t variable is converted to the tm struct and then you can achieve data for the current hour, minute, second, day, date, month and year. This is done in the getTime() function:
   1. void CwatchesDoc::getTime()
   2. {
   3.         t = time(0);
   4.         now = localtime(&t);
   5.         hour = now->tm_hour;
   6.         minute = now->tm_min;
   7.         second = now->tm_sec;
   8.         day = now->tm_wday;
   9.         date = now->tm_mday;
   10.         month = now->tm_mon;
   11.         year = now->tm_year;
   12. }
   Now we have all the necessary data to draw the watch.
2. The first step in the drawing an MFC application is to get the pointer to the document object in the OnDraw function:
   1. CwatchesDoc* pDoc = GetDocument();
   2.         ASSERT_VALID(pDoc);
   3.         if (!pDoc)
   4.                 return;
   To draw the watch and the calendar I used a lot of different brushes, pens and other graphical objects. Here is the declaration of these objects in the OnDraw function:
   1. CBrush *fontBrush,
   2.                         *watchBrush,
   3.                         *centerBrush,
   4.                         *dayBrush,
   5.                         *dateBrush,
   6.                         *monthBrush,
   7.                         *yearBrush;
   8.         fontBrush = new CBrush(RGB(184,184,184));
   9.         watchBrush = new CBrush(RGB(0,178,238));
   10.         centerBrush = new CBrush(RGB(196,69,19));
   11.         dayBrush = new CBrush(RGB(138,43,226));
   12.         dateBrush = new CBrush(RGB(142,229,238));
   13.         monthBrush = new CBrush(RGB(127,0,255));
   14.         yearBrush = new CBrush(RGB(205,51,51));
   15.  
   16. CPen    *watchPen,
   17.                         *centerPen,
   18.                         *hourPen,
   19.                         *minutePen,
   20.                         *secondPen;
   21.         watchPen = new CPen(PS_SOLID,5,RGB(0,0,0));
   22.         centerPen = new CPen(PS_SOLID,5,RGB(136,69,19));
   23.         hourPen = new CPen(PS_SOLID,10,RGB(0,0,0));
   24.         minutePen = new CPen(PS_SOLID,5,RGB(92,51,23));
   25.         secondPen = new CPen(PS_SOLID,3,RGB(255,0,0));
   The next step is to get the frame rectangle and set the rectangle for the watch and calendar area:
   1. CRect *rect;
   2.         rect = new CRect();
   3.         this->GetClientRect(rect);
   4.         int width = rect->Width();
   5.         int height = rect->Height();
   6. CRect *watchRect;
   7.         watchRect = new CRect(0,0,(int)0.4*width,(int)0.4*width);
3. Now we have the initial data to draw the static elements of the application. We will draw now the watch application. But for this we need some extra data to be able do draw the hour hands in the correct way:
   1. int radius = 0.2*width - 30;
   2.         int radiusHour = radius - 70;
   3.         int radiusMinute = radius - 40;
   4.         int radiusSecond = radius - 30;
   5.         int theta = -60; // start angle
   6.         double alpha = -90;
   7.         int beta = - 90;
   8.         int gamma = -90;
   9.         int cx = 0.2*width + 5;
   10.         int cy = 0.2*width;
   11.         int x,
   12.                 y;
   To draw the calendar you can create 2 arrays of string for day and month representation:
   1. CString day[7] = {L"Monday",L"Tuesday",L"Wednesday",L"Thursday",L"Friday",L"Saturday",L"Sunday"};
   2. CString month[12] = {L"January",        L"February",    L"March",L"April",L"May",L"June",L"July",L"August",L"September",L"October",L"November",L"December"};
4. Let's start the drawing. First step is to draw background:
   1. pDC->FillRect(rect,fontBrush);
   And now the frame of the watch:
   1. pDC->SelectObject(watchPen);
   2.         pDC->SelectObject(watchBrush);
   3.         pDC->Ellipse(CRect(0,0,0.4*width,0.4*width));
   To draw the numbers on the clock face this code is used. The coordinates of the numbers are calculated using the variables defined above:
   1.         for(int i = 0; i != 12; ++i,theta+=30)
   2.         {
   3.                
   4.                 x=cx+radius*cos(theta*M_PI/180);
   5.                 y=cy+radius*sin(theta*M_PI/180);
   6.                
   7.                 t.Format(_T("%d"), i+1);
   8.                 RECT posK = {x - 10,y - 10,0,0};
   9.                 pDC->SetBkMode(TRANSPARENT);
   10.                 pDC->DrawText(t,t.GetLength(),&posK,DT_CALCRECT);
   11.                 pDC->DrawText(t,t.GetLength(),&posK,0);
   12.                
   13.         }
   To draw the lines for hour hand used a formula to find the coordinates of the point on a circle by the angle:
   1. pDC->SelectObject(hourPen);
   2.        
   3.         for(int i = 0; i != pDoc->hour;++i,alpha+=30);
   4.         for(int i = 0; i != pDoc->minute;++i,alpha+=0.5);
   5.         pDC->MoveTo(cx,cy);
   6.         x=cx+radiusHour*cos(alpha*M_PI/180);
   7.         y=cy+radiusHour*sin(alpha*M_PI/180);
   8.         pDC->LineTo(x,y);
   Here, the line is moved from the center of the clock face to the (x,y) point. The same calculations are done for the minute and hour hand:
   1. pDC->SelectObject(minutePen);
   2.         for(int i = 0; i != pDoc->minute;++i,beta+=6);
   3.         pDC->MoveTo(cx,cy);
   4.         x=cx+radiusMinute*cos(beta*M_PI/180);
   5.         y=cy+radiusMinute*sin(beta*M_PI/180);
   6.         pDC->LineTo(x,y);
   7.  
   8.         pDC->SelectObject(secondPen);
   9.         for(int i = 0; i != pDoc->second;++i,gamma+=6);
   10.         pDC->MoveTo(cx,cy);
   11.         x=cx+radiusSecond*cos(gamma*M_PI/180);
   12.         y=cy+radiusSecond*sin(gamma*M_PI/180);
   13.         pDC->LineTo(x,y);
   Now the representation of the clock face is draw. The next step is to draw the data, day, month and year:
   1. pDC->SelectObject(dayBrush);
   2.         pDC->Rectangle(CRect(width*0.5,0,width,0.1*height));
   3.        
   4.         pDC->SetBkMode(TRANSPARENT);
   5.         pDC->DrawText(day[pDoc->day - 1],day[pDoc->day - 1].GetLength(),CRect(width*0.5,0,width,0.1*height),DT_CALCRECT);
   6.         pDC->DrawText(day[pDoc->day - 1],day[pDoc->day - 1].GetLength(),CRect(width*0.5,0,width,0.1*height),DT_CENTER|DT_SINGLELINE|DT_VCENTER);
   7.  
   8.         pDC->SelectObject(dateBrush);
   9.         pDC->Rectangle(CRect(width*0.5,0.15*height,width*0.6,0.25*height));
   10.         t.Format(_T("%d"), pDoc->date);
   11.         pDC->SetBkMode(TRANSPARENT);
   12.         pDC->DrawText(t,t.GetLength(),CRect(width*0.5,0.15*height,width*0.6,0.25*height),DT_CALCRECT);
   13.         pDC->DrawText(t,t.GetLength(),CRect(width*0.5,0.15*height,width*0.6,0.25*height),DT_CENTER|DT_SINGLELINE|DT_VCENTER);
   14.  
   15.         pDC->SelectObject(monthBrush);
   16.         pDC->Rectangle(CRect(width*0.6,0.15*height,width*0.8,0.25*height));
   17.        
   18.         pDC->SetBkMode(TRANSPARENT);
   19.         pDC->DrawText(month[pDoc->month],month[pDoc->month].GetLength(),CRect(width*0.6,0.15*height,width*0.8,0.25*height),DT_CALCRECT);
   20.         pDC->DrawText(month[pDoc->month],month[pDoc->month].GetLength(),CRect(width*0.6,0.15*height,width*0.8,0.25*height),DT_CENTER|DT_SINGLELINE|DT_VCENTER);
   21.  
   22.         pDC->SelectObject(yearBrush);
   23.         pDC->Rectangle(CRect(width*0.8,0.15*height,width,0.25*height));
   24.         t.Format(_T("%d"), 1900 + pDoc->year);
   25.         pDC->SetBkMode(TRANSPARENT);
   26.         pDC->DrawText(t,t.GetLength(),CRect(width*0.8,0.15*height,width,0.25*height),DT_CALCRECT);
   27.         pDC->DrawText(t,t.GetLength(),CRect(width*0.8,0.15*height,width,0.25*height),DT_CENTER|DT_SINGLELINE|DT_VCENTER);
5. If you launch the current application, you will see that the watch is not moving. You can obtain the time of the program launch and nothing is changed. So, we need to update the frame on every second. For this a timer is created:
   1. secondTimer = SetTimer(WM_USER+203,1000,NULL); 
   And now we need to handle the event, generated by timer. For this, timer event is added to the message map an the function OnTimer() is defined:
   1. void CwatchesView::OnTimer(UINT_PTR nIDEvent)
   2. {
   3.        
   4.         CwatchesDoc* pDoc = GetDocument();
   5.         ASSERT_VALID(pDoc);
   6.         if (!pDoc)
   7.                 return;
   8.         CRect *rect;
   9.         rect = new CRect();
   10.         this->GetClientRect(rect);
   11.         int width = rect->Width();
   12.         int height = rect->Height();
   13.         pDoc->getTime();
   14.         this->InvalidateRect(CRect(0,0,width*0.4,height),1);
   15.         CView::OnTimer(nIDEvent);
   16. }
   This function calls the Invalidate function for the watch rectangle and redraws it according to the new value of time variable. Note During the creation of this project I suffered a great problem: I was unable to define a timer and a run-time error appeared when I defined the timer in the c-tor of the view class or in any other functions. The only solution found was to define timer in the next way:
   1. void CwatchesView::OnInitialUpdate()
   2. {
   3.         CView::OnInitialUpdate();
   4.        
   5.         hourTimer = SetTimer(WM_USER+200,3600000,NULL);
   6.  
   7. }
   Maybe it's only my mistake, but if you suffer any similar problems, you can act in this way
This is a very simple example of the animation in MFC. But these basic functions can allow you to create a variety of applications, that have animation.