Subscribe to geohhot's Blog        RSS Feed

Processing tutorial: Writing simple timer application

Icon Leave Comment
When I was browsing java-challenges, I have seen one interesting. Challenge was about Java GUI timer application. So I decided to do it using processing. I made tutorial about this but post it was disapproved. So I have posted about this in my blog.
Step One: Download processing
At first step, what we will need to write processing app, is processing IDE, and we will download it from HERE. After you will download for your OS (like I use for linux), extract that archive and run processing. Now if you can run processing, look at step two.
Step Two: Understanding IDE
I guess you can skip this step, if you already used processing IDE, and you know how to run simple applications. But if you don't know, don't worry, just read about "Welcome to processing" here.
Step Three: About algorithm
Now when you already have IDE and know basics, lets get started with coding, but before that we need to understand how our program will work. Program will look something like this
Posted Image
Our button is that blue rectangle with text in it: "Start". It will change to "Stop!" when it will be clicked. And when button is clicked:
Posted Image
To understand our algorithm, you must know that when writing program in processing, there are two main functions, which are setup() and draw(). In setup function, we will setup all basic stuff with fonts and variables. And our algorithm will be divided into two parts: actually setup and draw functions
Setup function
  • Load fonts
  • Give starting values for some variables

Draw function: main loop
  • Draw time string (like 00:00:000)
  • Draw button (with it's name)
  • If timer is active, set new value to timer String

I will explain all steps of algorithm in next step.
Step four: Coding!
Before starting writing any code, we must understand what to write. In this program I used java.util.Date library, so need to import it into our program, so the first line is:
import java.util.Date;

After that we will write global variables, that we will use in this program. Will have several, and they are:
  • Timer time's font (fontTime)
  • Button's text's font (fontButton)
  • Boolean which will say if timer started ? (timerStarted)
  • String of timer's time (timeString)
  • Button's text's string (buttonString)
  • Date for timer's start (startDate)
  • Date for when timer is stoped (tempDate)
  • Button's X coordinate (buttonX)
  • Button's Y coordinate (buttonY)
  • Button's height (buttonHeight)
  • Button's width (buttonWidth)

And this is our main variables. Now in coding there will have values, and sure we must set them types (i.e. buttonString is String etc.). And actually code is:
PFont fontTime;
PFont fontButton;

boolean timerStarted = false;

String timeString = "00:00:000";
String buttonString = "Start";

Date startDate;
Date tempDate;

int buttonX = 180;
int buttonY = 120;
int buttonHeight = 100;
int buttonWidth = 30;

(I got values just testing by myself until I found they are OK)
Now when we done with variables, we will need to write setup() function. How I said before in algorithm, we must load fonts, so we will have two fonts (probably you can use only one too). For that, in your Processing IDE, select Tools -> Create font....
Posted Image
After you will select font, copy that value in the bottom (my used fonts are "ComicSansMS-Bold-48.vlw" and "Ubuntu-20.vlw")
Whatever, you just need to remember that font names that you created. After that will write loading part in setup function. Code will be
void setup() {
  size(450, 200); // forgot to say about this: with this function you set sizes of your app
  fontTime = loadFont("ComicSansMS-Bold-48.vlw"); // LOADING 
  fontButton = loadFont("Ubuntu-20.vlw");         //    FONTS...
  startDate = new Date(); // setting current date to startDate variable

When you will write loadFont("") function, insert there strings that you get when you were creating fonts, and add ".vlw" in the end of that string. Now we got setup() function, so we will need to write draw() function. Draw function will do exactly what I said in algorithm part, so code is:
void draw() {
  // drawing text
  fill(255,0,0, 255);
  textFont(fontTime, 48);
  // drawing button
  fill(0,255,0, 255);
  textFont(fontButton, 30);
  rect(buttonX, buttonY, buttonHeight, buttonWidth);
  fill(0,0,255, 255);
  text(buttonString, buttonX+15, buttonY+25);
  // get time and update in timeString
  if(timerStarted) {
    timeString = getTime();

You may have questions only about several function: now will explain them all.
First line which says something about background(0,0,0) will set background of program to black. You choose colors using 3 integers : how much red, green and blue. You may heard about that called "RGB". And that integers are from 0 .. to 255. Whatever I won't explain much about that in this tutorial. After that there is function fill() which is actually called several times. What files do is sets color for next element you will draw. And it takes four parameters: the first three are color in RGB, and next fourth parameter is called alpha: like from 0 .. to 255 you select opacity of fill. (notice fill sets color for object's inside area fill color, not for lines, for that stroke function used)
The next function which come is textFont() which again used two times. Now what that function will do: it select font for printing text in your monitor. How I said I use two fonts: one for timer's text, one for button's text. So I need to change using font for printing every time draw function called. It takes two parameters: first the font variable, and second is font's size.
Next function: textAlign(). Now this function can be called with two or one argument. In my case I called with one argument. With that you actually change from where you are counting pixels of text, like with that help you print text in position you want.
Function that comes after is simply text() function, which is function to draw text in window. Now it takes three parameters: first is string what to draw, and second two are coordinate where it will be drawn.
Stroke() function - you can do lot of things using stroke, but for what I used it, is to set opacity for drawing object's lines.
And the next function: rect(). It will draw rectangle area using color what you defined in fill() function, what takes four arguments: first two coordinates of higher left corner, and second two are width and height of rectangle.
Now in line 22 you see that I called one function: getTime(). We will talk about that later.
Substep: adding mouse listener
Now when you done with steps upper that this, we will need to add mouse listener to understand when user clicked mouse. In processing you do that just adding one function: mousePressed() function, which will be called by processing, when user will click mouse. And what we will do when mouse will be pressed, is depends where mouse pressed. And there are coming another function: onButton() which is boolean and will return "true" if mouse is on button. So code part will be like: mouse clicked: check if mouse is on button, and if yes, it clicked button, need to do something. And actually what we do when button is clicked is check: if timer is active. If it is, it means user just stopped timer. So need to change timerStarted variable's value to false. Or if timer wasn't active and user clicked, that means he started that, so we will change timerStarted to true. Now code will be:
void mousePressed() {
  if(onButton()) {
    if(timerStarted) {
      timerStarted = false;
      buttonString = "Start";
    else {
      startDate = new Date();
      timerStarted = true;
      buttonString = "Stop!";

Notice: onButton() is boolean, which will explain little bit later. Now how you see we check if timer started or no, and depends on that we are setting button's string. And you may ask why I used "startDate = new Date();" is for that case, when someone clicked button multiply times.
Checking if mouse is on button ( onButton() function )
Getting mouse coordinates are easy: they are stored in variables mouseX and mouseY. So code will be:
// mouse is on button
boolean onButton() {
  if(mouseX >= buttonX && mouseX <= buttonX+buttonWidth &&
     mouseY >= buttonY && mouseY <= buttonY+buttonHeight) {
       return true;
  return false;

I guess you will understand this code, because it is easy: checking is only in one "if", and if in "if" function haven't returned anything, it will just return false.
And main function: getTime()
This function will be String, and will return string in format "00:00:000". The first two are minutes, second two are seconds, and the last three are milliseconds. The logic is simple too. If you will take look at java.util.Date package documentation, you will see that there is function getTime() for object Date. That function returns long of milliseconds counted from 1990's some date. Whatever that we don't need that. What we will need is two dates ".getTime()" difference which will be actually that time, what timer is running. And when we have that, we just need to parse that count of milliseconds to minutes, seconds, and milliseconds. That's algorithm is simple, so code is:
String getTime() { 
  tempDate = new Date();
  long time = tempDate.getTime() - startDate.getTime();
  long minutes = time/60000;
  long seconds = ( time - minutes * 60000 ) / 1000;
  long milisec = time - minutes * 60000 - seconds * 1000;
  String minStr = "";
  if(minutes < 10) {
    minStr += "0";
  minStr += String.valueOf(minutes);
  String secStr = "";
  if(seconds < 10) {
    secStr += "0";
  secStr += String.valueOf(seconds);
  String milStr = "";
  if(milisec < 100) {
    milStr += "0";
  if(milisec < 10) {
    milStr += "0";
  milStr += String.valueOf(milisec);
  String result = minStr + ":" + secStr + ":" + milStr;
  return result;

How you can see, from line 10 there are several "if" conditions, and what they are supposed to do is get right formatting: like if minutes are 7, we must not return "7", we must return "07" to look good. So I guess I haven't missed anything, and if you haven't missed anything either, so you got that application working. Thanks for watching at this tutorial :bigsmile:.

0 Comments On This Entry


Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

April 2014

20 212223242526

Recent Entries

Search My Blog

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)