ControlP5 er et eksternt bibliotek til Processing, der gør det muligt at tilføje interaktive elementer som knapper, sliders, tekstfelter, dropdown-menuer og andre GUI-komponenter til dine programmer. Det gør det lettere at interagere med programmet uden at bruge tastatur- og musetryk direkte i draw() og mousePressed().

Biblioteket er objektorienteret, hvilket betyder, at hver komponent er et objekt, der kan tilpasses og styres individuelt. Objekter ligger udenfor C-niveau så det går vi ikke videre i dybden med her. Men derfor kan vi stadig godt bruge et bibliotek.

Før du kan bruge ControlP5, skal du installere det:

1. Gå til Sketch → Import Library → Add Library…
2. Søg efter ControlP5
3. Klik Install

Når det er installeret, skal du importere det i din sketch:

import controlP5.*;  // Importer biblioteket

ControlP5 cp5;  // Opret et ControlP5-objekt

void setup() {
  size(400, 300);
  cp5 = new ControlP5(this);  // Initialiser ControlP5
}

Bemærk:

• ControlP5(this) gør, at biblioteket kan interagere med programmet.
• Du skal importere biblioteket hver gang du bruger det i en ny sketch.

Når du opretter elementer i ControlP5, kan du bruge method chaining. Det betyder, at du kan sætte flere indstillinger i én linje, hvilket gør koden mere overskuelig:

cp5.addButton("minKnap")
   .setPosition(50, 50)    // Placer knappen på (50,50)
   .setSize(120, 40)       // Gør den 120 px bred og 40 px høj
   .setCaptionLabel("Tryk mig!"); // Tekst på knappen

Fordele ved method chaining:

• Koden bliver kortere og lettere at læse.
• Du kan hurtigt ændre elementets egenskaber uden at bruge flere linjer.

Alternativt kan man tildele knappen en variabel:

Button knap = cp5.addButton("minKnap");
knap.setPosition(50, 50);
knap.setSize(120, 40);
knap.setCaptionLabel("Tryk mig!");

En knap er en af de simpleste GUI-komponenter. Den kan bruges til at aktivere funktioner, ændre parametre eller skifte mellem forskellige skærme i dit program.

cp5.addButton("minKnap")   // Opretter en knap med navnet "minKnap"
   .setPosition(100, 100)
   .setSize(100, 30)
   .setCaptionLabel("Klik mig!");

Når knappen trykkes, vil Processing automatisk kalde en funktion med samme navn som knappen:

void minKnap() {
  println("Knap blev trykket!");
}

Hvordan virker det?

• ControlP5 registrerer, at en knap er trykket, og kalder en metode med samme navn.
• Du behøver ikke bruge mousePressed(), da ControlP5 håndterer det for dig.

Sliders er nyttige til at justere værdier interaktivt, f.eks. farver, størrelse eller hastighed.

cp5.addSlider("minSlider")   // Opretter en slider
   .setPosition(50, 150)
   .setSize(200, 20)
   .setRange(0, 100)  // Min: 0, Max: 100
   .setValue(50);     // Startværdi: 50

For at aflæse sliderens værdi, kan du bruge:

void draw() {
  float værdi = cp5.getController("minSlider").getValue();
  println("Slider værdi: " + værdi);
}

Dette viser værdien kontinuerligt i draw().

En bedre måde er at bruge events, så koden kun reagerer, når brugeren ændrer værdien:

void controlEvent(ControlEvent event) {
  if (event.isFrom("minSlider")) {
    println("Ny slider værdi: " + event.getValue());
  }
}

Hvorfor bruge events?

1. Reducerer unødvendige beregninger i draw().
2. Kun relevante ændringer registreres.

ControlP5 har en controlEvent()-funktion, der kan bruges til at håndtere ændringer i GUI-elementer.

Eksempel med flere elementer:

void controlEvent(ControlEvent event) {
  if (event.isFrom("minSlider")) {
    println("Slider værdi: " + event.getValue());
  }
  
  if (event.isFrom("minDropdown")) {
    println("Valgt: " + event.getStringValue());
  }
}

Dette gør koden mere struktureret og reducerer unødvendige if-statements i draw().

Når du har en knap eller slider, kan du få adgang til deres værdier:

float værdi = cp5.getController("minSlider").getValue();
println("Slider værdi: " + værdi);

For en knap kan du bruge en metode som tidligere vist.

ControlP5 understøtter mange andre elementer, som f.eks.:

• Tekstfelter (addTextfield()) – Indtastning af tekst
• Dropdown-menuer (addDropdownList()) – Valg af muligheder
• Toggles (addToggle()) – Slå funktioner til/fra

Eksempel på en toggle:

cp5.addToggle("minToggle")
   .setPosition(50, 200)
   .setSize(50, 20)
   .setValue(true);

Tjek om den er slået til eller fra:

boolean tilstand = cp5.getController("minToggle").getValue() == 1;

Der er mange muligheder for at customize sine elementer. Ved at søge i reference dokumentet for ControlP5 kan man finde mange muligheder. Herunder er der nogle eksempler på hvad man kan gøre.

Eksempel på hvordan man kan ændre fonten og størrelsen på labels i Buttons, kan også bruges i andre elementer.

import controlP5.*; // Importerer ControlP5-biblioteket, som bruges til at lave GUI-elementer som knapper, sliders osv.
ControlP5 controlP5; // Deklarerer en variabel til at holde styr på ControlP5-objektet

ControlFont font;// Deklarerer en variabel til fonten, som bruges på knappen

void setup() {
  size(640,480); // Sætter vinduets størrelse til 640 pixels bredt og 480 pixels højt

  controlP5 = new ControlP5(this); // Opretter et ControlP5-objekt, så vi kan tilføje og styre GUI-elementer
  
  font = new ControlFont(createFont("Arial",30),30); // Opretter en font med skrifttypen Arial og størrelsen 30
  
  // Tilføjer en knap til skærmen
  controlP5.addButton("knap1")    // Navnet på knappen. Dette navn bruges til at identificere knappen og lave en tilhørende funktion
    .setValue(0)                  // Initialværdi for knappen (ofte brugt til at holde styr på tilstand, men ikke kritisk her)
    .setPosition(100,100)         // Positionen for knappen (x=100, y=100)
    .setSize(200,50)              // Størrelsen på knappen (bredde=200, højde=50)
    .setCaptionLabel("Hej")       // Teksten, der vises på knappen
    .setFont(font)                // Fonten, der bruges til knapteksten
    ;  
}

void draw() {
  // Ingen tegning foregår her – GUI-elementerne håndteres automatisk af ControlP5
}

Eksempel på hvordan man ændre de forskellige farver på vores button:

import controlP5.*; // Importerer ControlP5-biblioteket, som bruges til at lave GUI-elementer som knapper, sliders osv.

ControlP5 controlP5; // Deklarerer en variabel til at holde styr på ControlP5-objektet
ControlFont font; // Deklarerer en variabel til fonten, som bruges på knappen
Button knap; // Gemmer en reference til knappen

void setup() {
  size(640, 480); // Sætter vinduets størrelse til 640 pixels bredt og 480 pixels højt

  controlP5 = new ControlP5(this); // Opretter et ControlP5-objekt, så vi kan tilføje og styre GUI-elementer

  font = new ControlFont(createFont("Arial", 30), 30); // Opretter en font med skrifttypen Arial og størrelsen 30

  // Tilføjer en knap til skærmen og gemmer referencen
  knap = controlP5.addButton("knap1")
    .setValue(0)                 // Initialværdi for knappen
    .setPosition(100, 100)       // Positionen for knappen (x=100, y=100)
    .setSize(200, 50)            // Størrelsen på knappen (bredde=200, højde=50)
    .setCaptionLabel("Hej")     // Teksten der vises på knappen
    .setFont(font);              // Fonten der bruges til teksten

  // Ændrer farver på knappen
  knap.getCaptionLabel().setColor(color(0)); // Tekstfarve (sort)
  knap.setColorBackground(color(255, 204, 0)); // Baggrundsfarve (gul)
  knap.setColorForeground(color(255, 153, 51)); // Hover-farve (orange)
  knap.setColorActive(color(204, 102, 0));      // Når knappen trykkes (mørkere orange)
}

void draw() {
  // Ingen tegning foregår her – GUI-elementerne håndteres automatisk af ControlP5
}

// Funktion der kaldes når knappen trykkes
void knap1(int value) {
  println("Knap1 blev trykket!");
}

Hvis du vil lære mere eller finde avancerede funktioner:

• Processing Reference
• Processing Libraries
• ControlP5 API Reference