===== Interaktivt kontrolpanel med ControlP5  =====

**Mål:**
I denne opgave skal du oprette et Interaktivt kontrolpanel ved hjælp af **ControlP5**-biblioteket. Du skal implementere forskellige kontrolelementer som knapper, sliders og toggle-knapper, og få dem til at interagere med et grafisk element, f.eks. et roterende rektangel.


===== Kontrolelementer =====

Du skal oprette følgende kontrolelementer:

  * **TextLabel**: En lille tekst der beskriver hvad en control skal styre.
  * **Knap (Button)**: En knap, der ændrer baggrundsfarven eller farve på rektangel til en tilfældig farve, når den trykkes.
  * **Sliders**: Tre sliders til at justere farverne rød, grøn og blå. Når sliders ændres, skal farven på baggrunden eller rektangel ændres dynamisk.
  * **Knob** : En drejeknap til at styre sidelængde af rektangel.
  * **Toggle-knap (Switch)**: En toggle-knap, der starter og stopper rotationen af et rektangel, når den er slået til og fra.

{{ :images:cp5_controlpanel.png?450 |}}

Se din tidligere opgave, eller besøg nedenstående links for at se hvordan du opretter de relevant controls:

  * Link : https://www.sojamo.de/libraries/controlP5/
  * Link : https://github.com/sojamo/controlp5?tab=readme-ov-file


===== Kode for rotation af rektangel =====

Her er koden, der får et rektangel til at rotere, når toggle-knappen er slået til:

<code java>
import controlP5.*;

ControlP5 cp5;
float redValue = 100;  // Startværdi for farverne
float greenValue = 100;
float blueValue = 100;
float sideLength = 100;
boolean isRotating = false;  // Boolean til at kontrollere om rektanglet skal rotere
float angle = 0;  // Startvinkel for rotationen

void setup() {
  size(500, 500);
  cp5 = new ControlP5(this);

  // Dine controls skal du oprette her

}
void draw() {
  // Baggrundsfarve opdateres baseret på sliders
  background(redValue, greenValue, blueValue);
  
  // Hvis rotationen er tændt, roter rektanglet
  if (isRotating) {
    angle += 0.05;  // Hver frame øges vinklen en smule
  }
  
  // Tegn et rektangel, der roterer
  pushMatrix();
  translate(width / 2, height / 2);  // Flyt oprindelsen til midten af skærmen
  rotate(angle);  // Roter med den aktuelle vinkel
  fill(255, 0, 0);  // Farv rektanglet rødt
  rect(-sideLength/2, -sideLength/2, sideLength, sideLength);  // Tegn rektanglet
  popMatrix();
}
</code>

==== Fang toggle event ====
Her antages at der er oprette en control 'Toggle' med navnet 'toggle'.
<code java>
void controlEvent(ControlEvent ev) {
 
  if (ev.isController()) {
 
    // Gem navnet på controlleren i en variabel
    String navn = ev.getController().getName();
 
    // Vi tjekker hvilken knap eller 'control' der har afgivet en event.
    if (navn.equals("toggle")) {
      isRotating = !isRotating;
    }
  }
}
</code>