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.