Valikon tekeminen
Valikko on pohjimmiltaan kytkin, joka tuo esille joukon painonappeja. Tutkitaan seuraavaa esimerkkiä.
// Ohjelman tehnyt: e-Oppi Oy
// 8.1.2018
boolean valikko = false; // Valikko oletuksena piilossa
boolean kytkin = true;
String kuvio = "";
void setup() {
size(600,400); // Ikkunan koko
textSize(20); // Tekstin koko
}
void draw () {
background(255);
int x = mouseX; // Lue hiiren paikka
int y = mouseY;
if (valikko == false) { // Jos valikko piilossa
fill(100,200,100);
rect(10,10,200,30); // Piirrä vain otsake
fill(0);
text("Kuvio",20,30);
}
if (valikko == true) { // Jos valikko näkyvissä
fill(100,200,100);
rect(10,10,200,30);
rect(20,40,190,30);
rect(20,70,190,30);
rect(20,100,190,30);
if ((y > 10) && (y < 40)) {
if ((x > 10) && (x < 210)) {
fill(200);
rect(10,10,200,30); // Otsake laatikko
} else {
fill(100,200,100);
rect(10,10,200,30);
}
}
if ((y > 40) && (y < 70)) {
if ((x > 20) && (x < 220)) {
fill(200);
rect(20,40,190,30); // Valikon 1. laatikko
if (mousePressed == true) {
valikko = false;
kuvio = "ympyrä";
}
} else {
fill(100,200,100);
rect(20,40,190,30);
}
}
if ((y > 70) && (y < 100)) {
if ((x > 20) && (x < 220)) {
fill(200);
rect(20,70,190,30); // Valikon 2. laatikko
if (mousePressed == true) {
valikko = false;
kuvio = "neliö";
}
} else {
fill(100,200,100);
rect(20,70,190,30);
}
}
if ((y > 100) && (y < 130)) {
if ((x > 20) && (x < 220)) {
fill(200);
rect(20,100,190,30); // Valiko 3. laatikko
if (mousePressed == true) {
valikko = false;
kuvio = "kolmio";
}
} else {
fill(100,200,100);
rect(20,100,190,30);
}
}
fill(0);
text("Kuvio",20,30); // Valikkoon tulevat tekstit (kun valikko näkyvissä)
text("Ympyrä",30,60);
text("Neliö",30,90);
text("Kolmio",30,120);
}
if (mousePressed == true) { // Jos hiiren painike pohjassa
if ((y > 10) && (y < 40)) {
if ((x > 10) && (x < 210)) {
if (kytkin == true) { // Jos kytkin on true (=ensimmäinen painallus)
if (valikko == false) { // Vaihda arvo aina päin vastaiseksi
valikko = true; // Valikko näkyvissä
} else {
valikko = false; // valikko piilossa
}
}
}
}
kytkin = false; // Jos pidät hiiren vasenta painiketta pohjassa
} else {
kytkin = true; // Jos et pidä hiiren vasenta painiketta pohjassa
}
fill(255,0,0); // Punainen
if (kuvio == "ympyrä") {
ellipse(400,200,200,200);
}
if (kuvio == "neliö") {
rect(300,100,200,200);
}
if (kuvio == "kolmio") {
triangle(300,300,400,100,500,300);
}
}
Ohjelma, luo valikon, joka näyttää tältä. Kun napsautat otsaketta: Kuvio (eli kytkintä), niin esille ilmestyy alivalikko (eli kolme painonappia). Kun liikutat hiirtä valikossa, niin suorakulmion väri muuttuu.

Kun lopuksi valitset valikosta komennon (esimerkiksi Neliö) napsauttamalla hiirellä sanan päällä, niin ohjelma piirtää neliön.
