# Alarm Clock in Processing

**URL:** <https://discourse.processing.org/t/alarm-clock-in-processing/1631>\
**Category:** Coding Questions\
**Created:** [July 9, 2018, 3:22pm UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631 "2018-07-09T15:22:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![LaLe](https://avatars.discourse-cdn.com/v4/letter/l/ecd19e/32.png) [@LaLe](https://discourse.processing.org/u/LaLe)\
**Post date:** [July 9, 2018, 3:22pm UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/1 "2018-07-09T15:22:36Z")

</div>

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();

```

}  
}

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 9, 2018, 4:49pm UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/2 "2018-07-09T16:49:05Z")

</div>

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

Kf

---

<div class="post-metadata">

**Author:** ![LaLe](https://avatars.discourse-cdn.com/v4/letter/l/ecd19e/32.png) [@LaLe](https://discourse.processing.org/u/LaLe)\
**Post date:** [July 10, 2018, 3:12am UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/3 "2018-07-10T03:12:05Z")

</div>

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

```auto

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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 10, 2018, 8:39am UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/4 "2018-07-10T08:39:21Z")

</div>

Maybe you should use the ControlP5 library :

- [http://www.sojamo.de/libraries/controlP5/](http://www.sojamo.de/libraries/controlP5/)
- [https://forum.processing.org/two/discussion/1576/controlp5-basic-example-text-input-field](https://forum.processing.org/two/discussion/1576/controlp5-basic-example-text-input-field)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 10, 2018, 4:05pm UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/5 "2018-07-10T16:05:54Z")

</div>

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:

```java
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/one/topic/display-a-message-box.html)  
> [https://forum.processing.org/two/discussion/4764/how-to-make-a-popup-window](https://forum.processing.org/two/discussion/4764/how-to-make-a-popup-window)

Kf

---

<div class="post-metadata">

**Author:** ![LaLe](https://avatars.discourse-cdn.com/v4/letter/l/ecd19e/32.png) [@LaLe](https://discourse.processing.org/u/LaLe)\
**Post date:** [July 11, 2018, 12:21pm UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/6 "2018-07-11T12:21:50Z")

</div>

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![Manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Manuel](https://discourse.processing.org/u/Manuel)\
**Post date:** [July 11, 2018, 12:52pm UTC](https://discourse.processing.org/t/alarm-clock-in-processing/1631/7 "2018-07-11T12:52:46Z")

</div>

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 😉