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