GUI Element

En lista över de mest använda GUI-element i G4P-biblioteket. Vi utgår här ifrån att du skapa och designa det allt som är möjligt med det grafiska verktyget. Här visas andra användbara metoder.

GButton

Mer info GButton

Det blir en knapp som kan klickas. Exempelkod för knapp1:

    //knapp1 har skapats med GUI Builder
      knapp1.setText("Min Knapp");  // ändra text på knappen
       knapp1.setFont(new Font("Courier New", Font.PLAIN, 20));  // Ändra font
        knapp1.setEnabled(false); // Inaktivera knappen 

GCheckbox

Mer info GCheckbox

En checkbox som kan markeras. Exempelkod for Checkbox1:

    if( checkbox1.isSelected()  ) {  }  // kolla om den är markerad
        checkbox1.setSelected(true);    // markera/checka
      checkbox1.setEnabled(false);      // Inaktivera

GTextField

Mer info GTextField

Ett område för att visa eller mata in text. Exempelkod för textbox1

    // textbox1 har skapats med GUI Builder
    textbox1.setText("Hello World");  // ändra text på knappen
      textbox1.appendText(". HUr är det med dig?");  // lägga TILL text.
       textfield1.setEnabled(false);  // Inaktivera inmanting. ReadOnly!

GTextArea

Mer info GTextArea

I motsatsen till GtextField är GTextArea tänkt för större texter som kan innehålla radbyten. För att testa koden skapas först en GtextArea med namn txtaInput och en GLabel med namn lblEtikett. Se till att båda är lite större. txaInput är kopplad till händelsen change dvs anropas alltid när användaren ändrar texten:

    public void txtaInput_change(GTextArea source, GEvent event) { //_CODE_:txtaInput:721309:
      String  input = txtaInput.getText(); 
      lblEtikett.setText( input + "\n\n" + input );
    } //_CODE_:txtaInput:721309:  

Fler användbara metoder:

    String[] rader = txtaInput.getTextAsArray(); // hämta alla rader som fält/array. 
     txtaInput.setEnabled(false);  // sätt txtaInput på readOnly
      String urval = txtaInput.getSelectedText();  // Hämta markerad text  

GKnob

Mer info GKnob

En ratt som kan vridas. Exempelkod för ratt1:


// ratt1 har skapats med GUI Builder

    float verdeF = ratt1.getValueF(); // läsa det rattens värde som float
    int verdeI = ratt.getValueI(); //   läsa det rattens värde som int

    ratt1.setValueI(50); // sätt ratten på värdet 50. Se till att det inom rattens gränser
    ratt.setValueF(0.445); 

GSlider

Mer info GSlider

Skjutreglage. Exempelkod för reglage1:


// ratt1 har skapats med GUI Builder

    float verdeF = reglage1.getValueF(); // läsa det reglagens värde som float
    int verdeI = reglage1.getValueI(); // läsa det reglagens värde som int

    reglage1.setValueI(50); // sätt ratten på värdet 50. Se till att det inom rattens gränser
    reglage1.setValueF(0.445); 

GTimer

Mer info GTimer

En sådan timer kan användas för att låter kod utföras regelbunden. En timer kan skapas i GUI Builder, här ett exempel för en GTimer med namn klocka och Event method klockslag.


//i fliken gui
public void klockslag(GTimer source) { //_CODE_:klocka:204941:

  x+= 60; 
  l = 0; 

} //_CODE_:klocka:204941:

Fler värdefulla metoder

 klocka.start(); // Starta timern
klocka.start(5); // Starta timer för 5 omgånger
klocka.stop();  // Stoppa timern
klocka.setDelay(500);  // Sätt tid mellan anropen i millisekunder

// ===== i huvudprogrammet ! ===================

int l =0, x = 0;
void draw() {
  background(120);
  rect(x, 80, l, 40);
  l++;
}

G4P element och egna geometriska figurer

Vi antar följande enkel scenario. En slider ska styra en rektangel över skärmen. Vi har skapat den med GUI builder och den heter slider1. Dessutom med dessa Properties:

Event metod: slider1_change1

Value (initial): 20

Minimun: 0.0

Maximun: 100.0

Opaque background?: Nej

För att styra rektangeln försöka vi så här (fliken gui, metod slider1_change1):


public void slider1_change1(GSlider source, GEvent event) { //_CODE_:slider1:460945:
  rect(slider1.getValueF() + 200,50,20,20);
} //_CODE_:slider1:460945:

I första fliken:

import g4p_controls.*;

void setup(){
  size(800,600);
  createGUI();
}

void draw(){
}

Skapa nu samma program i din processingmiljö och starta. Dra i slidern. Känns det fint?

slider kan vi snygga till genom att sätta Opaque background?: ja.

Men rektangel? Den ska suddas med varje omgång så att det inte drar ett spår. Om vi sätta background(255); i i draw-blocket försvinner rektangeln helt och hållet. Anledning: draw-metoden körs hela tiden och sudda hela skärmen. 60x per sekund. Alla GUI-element sätts tillbaka med automatik. Men rektangeln ritas endast när vi drar i slidern. Och det syns inte, det händer för sällan. Vi kan åtgärda det på två sätt: Vi måste rita rektangeln i draw blocket. Antigen läser vi direkt från slider1:

void draw(){
    background(255);
    rect(slider1.getValueI() + 200,50,20,20);
}

Eller vi skapa en variabel, påverka den i slider1_change1 (fliken gui):


public void slider1_change1(GSlider source, GEvent event) { //_CODE_:slider1:460945:
x = slider1.getValueI();
} //_CODE_:slider1:460945:

För att sedan läsa den i draw-blocket:

import g4p_controls.*;

int x = 100;

void setup(){
  size(800,600);
  createGUI();
}

void draw(){
background(255);
rect(x + 200,50,20,20);

}