Alarm Clock in Processing

Processing Coding Questions
1

Hello everyone,

I am trying to code an alarm clock using Processing. I am pretty new so I am still learning… I already achieved to code a Clock using real time. But I am not sure how I can make a text input field, so you can type in the alarm time you want to have. The alarm clock should play a sound, as soon as the clock reaches the alarm time.

So this is what my clock currently looks like, I hope someone can help me!

class Uhr
{
int xPos, yPos;
ButtonUhr button;
int cx, cy;
float sekunden;
float minuten;
float stunden;
float uhrradius;
int s;
int m;
int h;

Uhr(int xPos_, int yPos_, ButtonUhr button_) {
xPos = xPos_;
yPos = yPos_;
button = button_;
}

void display() {
noStroke();
pushStyle();
if (button.aktiv == false) {

  int radius = 100;
  sekunden = radius * 0.72;
  minuten = radius * 0.60;
  stunden = radius * 0.50;
  uhrradius = radius * 1.8;

  fill(255, 107, 107);
  noStroke();
  ellipse(xPos, yPos, uhrradius, uhrradius);

  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;


  stroke(255);
  strokeWeight(1);
  line(xPos, yPos, xPos + cos(s) * sekunden, yPos + sin(s) * sekunden); // Sekundenzeiger zeichnen
  strokeWeight(2);
  line(xPos, yPos, xPos + cos(m) * minuten, yPos + sin(m) * minuten); // Minutenzeiger zeichnen
  strokeWeight(4);
  line(xPos, yPos, xPos + cos(h) * stunden, yPos + sin(h) * stunden); // Stundenzeiger zeichnen


  for (int a = 0; a < 12; a ++) {
    float angle = a * 30 * PI / 180;
    float sina = sin(angle);
    float cosa = cos(angle);
    int x1 = (int)(xPos + (uhrradius / 2 - 25) * sina);
    int y1 = (int)(yPos + (uhrradius / 2 - 25) * cosa);
    int x2 = (int)(xPos + uhrradius / 2 * sina);
    int y2 = (int)(yPos + uhrradius / 2 * cosa);
    strokeWeight(1);
    line(x1, y1, x2, y2);
  }
} else {
  fill(255, 107, 107);
  rect(270, 195, 220, 60, 55);
  fill(255);
  textSize(45);
  text (h + ":" + nf(m, 2) + ":" + nf(s, 2), xPos-90, yPos+10);
  h = hour();
  m = minute();
  s = second();
}
popStyle();

}
}

2

Could you please format your code and remove those double stars '**' at the beginning and end of each line?

Kf

1 Like
3

Hey sorry for that, here is the code without the ‘*’ :


class Uhr
{
  int xPos, yPos; 
  ButtonUhr button;
  int cx, cy;
  float sekunden;
  float minuten;
  float stunden;
  float uhrradius;
  int s;
  int m;
  int h;

  Uhr(int xPos_, int yPos_, ButtonUhr button_) {
    xPos = xPos_;
    yPos = yPos_;
    button = button_;
  }

  void display() {
    noStroke();
    pushStyle();
    if (button.aktiv == false) {

      int radius = 100;
      sekunden = radius * 0.72;
      minuten = radius * 0.60;
      stunden = radius * 0.50;
      uhrradius = radius * 1.8;

      fill(255, 107, 107);
      noStroke();
      ellipse(xPos, yPos, uhrradius, uhrradius);

      // Angles for sin() and cos() start at 3 o'clock;
      // subtract HALF_PI to make them start at the top
      float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
      float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
      float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;


      stroke(255);
      strokeWeight(1);
      line(xPos, yPos, xPos + cos(s) * sekunden, yPos + sin(s) * sekunden); 
      strokeWeight(2);
      line(xPos, yPos, xPos + cos(m) * minuten, yPos + sin(m) * minuten); 
      strokeWeight(4);
      line(xPos, yPos, xPos + cos(h) * stunden, yPos + sin(h) * stunden); 


      for (int a = 0; a < 12; a ++) {
        float angle = a * 30 * PI / 180;
        float sina = sin(angle);
        float cosa = cos(angle);
        int x1 = (int)(xPos + (uhrradius / 2 - 25) * sina);
        int y1 = (int)(yPos + (uhrradius / 2 - 25) * cosa);
        int x2 = (int)(xPos + uhrradius / 2 * sina);
        int y2 = (int)(yPos + uhrradius / 2 * cosa);
        strokeWeight(1);
        line(x1, y1, x2, y2);
      }
    } else {
      fill(255, 107, 107);
      rect(270, 195, 220, 60, 55);
      fill(255);
      textSize(45);
      text (h + ":" + nf(m, 2) + ":" + nf(s, 2), xPos-90, yPos+10);
      h = hour();
      m = minute();
      s = second();
    }
    popStyle();
  }
}
4

Maybe you should use the ControlP5 library :

5

Thanks for formatting your code properly. It is recommended to provide runable code as you will get more feedback. To run your code, I have to add these lines:

ButtonUhr b1;
Uhr u1;

void setup() {
size(400,600);
b1= new ButtonUhr();
u1= new Uhr(width,height>>1,b1);

}

void draw() {
  
  u1.display();
}

class ButtonUhr{
 
  boolean aktiv;
  ButtonUhr(){aktiv=true;}
}

Notice if you check the reference, the rect() function takes extra parameters to round borders. Check the reference if you would like to know more.

Some ideas beside the proposed by @josephh:

Display a message box - Processing Forum
https://forum.processing.org/two/discussion/4764/how-to-make-a-popup-window

Kf

2 Likes
6

Thanks for your help!

7

As some already mentioned, afaik, you’ll need to import a library in order to have textboxes in your sketch, ControlP5 or G4P can do that. Take into account that you’ll also need to import a library to be able to play sounds, for that you can use processing-sound library, minim, or even import some javax libraries and use those :wink: