Create an analog clock with an Arduino Mega 2560 and a 2embeddeddownloads.com/downloads/CreateAnalogClock.pdf · Creating an analog clock with an Arduino Mega 2560 and a 2.8” TFT

Create an analog clock with an Arduino Mega 2560 and a 2.8” TFT LCD Touchscreen shield

A 4 Part tutorial:

Published by Embedded Downloads Ltd

. Copyright: 2015 Embedded Downloads Ltd., 20-22 Wenlock Road, London, N1 7GU

www.embeddeddownloads.com

http://www.embeddeddownloads.com/form/contact-us

Creating an analog clock with an Arduino Mega 2560 and a 2.8” TFT LCD Touchscreen shield – Part 1:

Hardware required:

• Arduino Mega2560

• 2.8" TFT Touch Shield v1.0 Seeed Studio 05A12

Software required:

• Arduino IDE

• TFT LCD Touchscreen Library

• SimpleTimer timer library

Step 1:

Connect the Seeed Studio Touch Shield to the arduino Mega 2560 as shown in the picture below.

!


http://www.embeddeddownloads.com/blog/webmaster/creating-analog-clock-arduino-mega-2560-and-28-tft-lcd-touchscreen-shield-part-1

http://www.embeddeddownloads.com/downloads/ArduinoWindows/arduino-1.5.2-windows.zip

http://www.embeddeddownloads.com/downloads/ArduinoTFTLibrary/TFT_Touch_Shield_libraries.zip

http://www.embeddeddownloads.com/downloads/ArduinoSimpleTimer/SimpleTimer.zip

Step 2:

Open the Arduino IDE and create a new sketch. Save your sketch and call it AnalogClock.

void setup() {

// put your setup code here, to run once:

}

void loop() {

// put your main code here, to run repeatedly:

}

Step 3:

We will have to explain a bit of maths before we can start coding our clock. The three moving hands of the clock, seconds, minutes and hours can be visualized as three concentric circles. The hand is then drawn from the centre and a point on one of the circles as shown in the figure below.

!


Let's take the example of the minutes hand. It will always be at an angle to it's starting position, 12. If we add the cartesian coordinate system to the picture and place the centre of the circle at (0,0) a right angle triangle can be drawn as shown in red. From pythagoras a2 + b2 = r2. Since we know that r is the radius of our circle we now have a method of calculating a and b: a = r*sin θ, b= r*cos θ.

The angle θ is known through the fact that a circle has 360 degrees, we know how many steps we want to take, 60 minutes. Therefore the angle θ = 360/60 * minutes.Through the maths here we can draw the line for the minute hand by using a function definded in the touchscreen library called drawline. The drawline function will draw a line from point A(x,y) to point B(x1, y1) in the specified color. For more information on the drawline function you can open up the TFT.cpp and TFT.h files.


Creating an analog clock with an Arduino Mega 2560 and a 2.8” TFT LCD Touchscreen shield – Part 2: Step 4: Let's get codingFirstly add the library for the TFT LCD Touchscreen to your libraries in your arduino IDE. Go to the Sketch menu item -> Import Library -> Add Library. Go to the folder where you have downloaded the library and select the .zip file for the library and click open. Now go to the sketch menu item -> Import Library and you should see the TFT library in the list. Select it. Repeat this step for TouchScreenMenu and the SimpleTimer.In order to choose a nice combination of colors we have used this website to help us: http://www.colorcombos.com/color-schemes/73/ColorCombo73.htm.The first thing that we want to do is create a background. We picked a dark cream color for the background and for this we need to know what the RGB code is 204, 204, 153.//Analog Clock Sketch created by Embedded Downloads LTD//To view the full tutorial go to www.embeddeddownloads.com#include #include #include #include void setup() { TSC.setBackColor(TSC.createColor(204, 204, 153)); // Set the background color to a dark cream TSC.init(); //initialize the touch screen object}

void loop() { // put your main code here, to run repeatedly: }

Our library imports have already created a Touch screen object, TSC, for us and we use the TSC.setBackColor method to set the background color. The TSC.createColor sets the correct color for us. After this we use the TSC.init() method to initialize the screen.Next we will draw the circle outline of our clock. For this we will choose the green color in the color combination 153, 204, 204. We will use the drawCircle method with a for loop to draw 10 circles as the outline. First of all we need to define where we want to draw the outline of our clock. The size of the screen is 320 by 240. If we want our clock to be nicely centered in the middle of the screen, the middle of our circle radius will have to be half of the width of the screen 240/2 = 120 and half of the length of the screen 320/2 = 160. We will leave one pixel on each side so making the radius of the first circle 118 and decreasing it in the for loop to draw the 10 circles.//Analog Clock Sketch created by Embedded Downloads LTD//To view the full tutorial go to www.embeddeddownloads.com#include #include #include #include

int clockCenterX=120;int clockCenterY=160;



http://www.colorcombos.com/color-schemes/73/ColorCombo73.htm

int clockradius=118;

void setup() {

TSC.setBackColor(TSC.createColor(204, 204, 153)); // Set the background color to a dark cream TSC.init(); //initialize the touch screen object //draw ten circles as the outside of the clock with the center at for (int i=0; i<10; i++) { TSC.drawCircle(clockCenterX, clockCenterY, clockradius-i, TSC.createColor(153,204,204), false); //Draw a circle with center at x,y with radius, color and filled? }}


Upload your sketch to your arduino and you should be able to see the outline of your circles displayed on the screen on top of the background.

!


Creating an analog clock with an Arduino Mega 2560 and a 2.8” TFT LCD Touchscreen shield – Part 3: Step 5: Adding the numbersNext we will add the numbers, 12, 3, 6 and 9 on our clock at their correct positions. The numbers will go at the angle of 0°, 90°, 180° and 270° at the position of the inner most circle of our clock outline. The radius of the inner most circle is 118 minus 10 equal to 108. From here we will calculate the x and y position from the maths explained in part 1 of the tutorial.The x coordinate of 12 is the x coordinate of the center of the circle and the y coordinate is the radius of the circle minus the y coordinate of the center of the circle. The x coordinate of the 3 will be the x coordinate of center of the circle , while the y coordinate will be the y coordinate of the center of the circle plus the radius minus 10. We are subtracting 10 to avoid writing the 3 outside of the screen area. The x coordinate of the 6 will be x coordinate of the center of the circle and the y coordinate is the radius of the circle + the y coordinate of the center of the circle minus 10. The x coordinate of the 9 will be the x coordinate of the center of the circle minus the radius while the y coordinate will be the y coordinate of the center of the circle.We will be using the drawString method of our touchscreen class to draw the numbers in the color black.We also need to create a class for storing the time. We will call this class time and create variables for hours, minutes and seconds.//Analog Clock Sketch created by Embedded Downloads LTD//To view the full tutorial go to www.embeddeddownloads.com#include #include #include #include

int clockCenterX=120;int clockCenterY=160;int clockradius=118;

class Time{public:

uint8_t hours;uint8_t minutes;uint8_t seconds;

Time();};

void setup() {

TSC.setBackColor(TSC.createColor(204, 204, 153)); // Set the background color to a dark cream TSC.init(); //initialize the touch screen object //draw ten circles as the outside of the clock with the center at for (int i=0; i<10; i++)




{ TSC.drawCircle(clockCenterX, clockCenterY, clockradius-i, TSC.createColor(153,204,204), false); //Draw a circle with center at x,y with radius, color and filled? } TSC.drawString("12", clockCenterX, clockCenterY - clockradius, 1, TSC.createColor(0,0,0)); //Draw 12 at 0 degrees angle in black TSC.drawString("3", clockCenterX + clockradius - 10, clockCenterY, 1, TSC.createColor(0,0,0)); //Draw 3 at 90 degrees angle in black TSC.drawString("6", clockCenterX, clockCenterY + clockradius -10, 1, TSC.createColor(0,0,0)); //Draw 6 at 180 degrees angle in black TSC.drawString("9", clockCenterX - clockradius, clockCenterY, 1, TSC.createColor(0,0,0)); //Draw 9 at 270 degrees angle in black //}


Let's upload our sketch to our Arduino and try it out.

!


Creating an analog clock with an Arduino Mega 2560 and a 2.8” TFT LCD Touchscreen shield – Part 4:

Step 6: Creating the seconds handNow that we have the outline of our clock ready, we can start working on the seconds hand. The first thing we will need to do is initialize our Time structure. Using the simpletimer library we will start a timer that will call a function called secondPassed to update our seconds hand. For this we will use the timer.setInterval method. Since the maths library used for calculating sin and cos uses radians, we will have to convert degrees to radians in our calculations when updating the seconds hand. For this we will create a constant float called DegreesToRadians. In order to convert Degrees to radians, we have to multiply the angle in degrees with 0.0174533.Inside our SecondPassed function, we will have to increase the seconds in our timerstructure every time the function is called. We will also have to do a check to see once seconds get to 60 to reset the seconds back to 0. We will then call a function to draw our seconds hand.The drawSecondsHand function will draw a line from the centre of our clock to the x and y coordinates as described in the maths explained in part 1 of the tutorial. We will create two float variables called SecondsX and SecondsY and based on the second counter passed to the function will calculate SecondsX and SecondsY. SecondsX = radius * cos((seconds*6 + 270)*DegreesToRadians). Similarly, SecondsY = radius * sin((seconds*6 + 270)*DegreesToRadians). Now we will use the drawLine function to draw a line from the center of the clock to the calculated SecondsX and SecondsY and we will pick a color from the color group as described before. This time we will pick the light green from the same group. Before we draw the new line for the seconds hand, we will have to first erase the previous hand by re-drawing it in the background color of the clock 204, 204, 153.In order to get our seconds hand ticking we will have to start the timer in our main loop calling timer.run().//Analog Clock Sketch created by Embedded Downloads LTD//To view the full tutorial go to www.embeddeddownloads.com#include #include #include #include

int clockCenterX=120;int clockCenterY=160;int clockradius=118;const float DegreesToRadians = 0.0174533;float preSecondsX =0, preSecondsY=100;

SimpleTimer timer; //Create a timer object

class Time{public:

uint8_t hours;uint8_t minutes;uint8_t seconds;



http://embeddeddownloads.com/blog/webmaster/creating-analog-clock-arduino-mega-2560-and-28-tft-lcd-touchscreen-shield-part-1

Time();};

Time::Time(){

this->hours = 0;this->minutes = 0;this->seconds = 0;

}

// Initialize a time structureTime timestructure;

void setup() {

TSC.setBackColor(TSC.createColor(204, 204, 153)); // Set the background color to a dark cream TSC.init(); //initialize the touch screen object //draw ten circles as the outside of the clock with the center at for (int i=0; i<10; i++) { TSC.drawCircle(clockCenterX, clockCenterY, clockradius-i, TSC.createColor(153,204,204), false); //Draw a circle with center at x,y with radius, color and filled? } TSC.drawString("12", clockCenterX, clockCenterY - clockradius, 1, TSC.createColor(0,0,0)); //Draw 12 at 0 degrees angle in black TSC.drawString("3", clockCenterX + clockradius - 10, clockCenterY, 1, TSC.createColor(0,0,0)); //Draw 3 at 90 degrees angle in black TSC.drawString("6", clockCenterX, clockCenterY + clockradius -10, 1, TSC.createColor(0,0,0)); //Draw 6 at 180 degrees angle in black TSC.drawString("9", clockCenterX - clockradius, clockCenterY, 1, TSC.createColor(0,0,0)); //Draw 9 at 270 degrees angle in black timer.setInterval(1000, secondPassed); //}

void secondPassed() { timestructure.seconds+=1; if (timestructure.seconds == 60) { timestructure.seconds = 0; } drawSecondsHand(timestructure.seconds);}void drawSecondsHand(int seconds){ float SecondsX, SecondsY;


int previousSecond = seconds - 1; if (previousSecond == -1) { previousSecond = 59; } TSC.drawLine(clockCenterX, clockCenterY, preSecondsX+clockCenterX, preSecondsY+clockCenterY, TSC.createColor(204, 204, 153)); //erase the previous second hand SecondsX = 100*cos((seconds*6 + 270)*DegreesToRadians); //calculate the position of the X coordinate SecondsY = 100*sin((seconds*6 + 270)*DegreesToRadians); //calculate the position of the Y coordinate preSecondsX = SecondsX; //save the previous coordinates preSecondsY = SecondsY; //save the previous coordinates TSC.drawLine(clockCenterX, clockCenterY, SecondsX+clockCenterX, SecondsY+clockCenterY, TSC.createColor(153, 204, 153)); //draw the new seconds hand}

void loop() { // put your main code here, to run repeatedly: timer.run();}Upload the Sketch and you should see the seconds hand ticking.

!Embedded Downloads provide embedded hardware and software solutions, making it easy for embedded engineers to start their next project. Hardware and software solutions are provided for


different processors. It can sometimes be a daunting task to find a starting point for your next embedded design project. Our aim is to make it easy for embedded designers to download source code, schematics and PCB layouts that are tested and proven to work.Custom solutions can be provided and our aim is to work closely with our customers from specification to final design.Connect with us:Facebook: Twitter:Blog:Embedded Downloads Ltd., 20-22 Wenlock Road, London, N1 7GU


https://www.facebook.com/pages/Embeddeddownloads/1552915061639781

https://twitter.com/EmbeddedD

http://blog.embeddeddownloads.com/

http://www.embeddeddownloads.com/form/contact-us

Documents

Create an analog clock with an Arduino Mega 2560 and a 2embeddeddownloads.com/downloads/CreateAnalogClock.pdf · Creating an analog clock with an Arduino Mega 2560 and a 2.8” TFT