Interaktion med användaren

I denna kapitel ska det handlar om hur vi ger användaren fler möjligheter att påverka programmet och och därmed beteende. Genom tillägget wnd.pde i mappen för Java-mallar kunde vi fråga användaren efter text (=string), heltal och två sorters decimaltal. Vi utökar möjligheterna med direkt tangentbordsläsning och reaktion på mushändelser. Det vi visar nu är inte den enda vägen att får in interaktion med användaren, det finns andra exempel på nätet och du bestämma själv hur du gör till slut. Men vi tycker att det är enklast att behälla överblick över all kod ner det blir fler rader om lägga det i olika block. Det av fördel om man vill fördela kod på flera filer som vi visar senare.

I mallen (sketch.pde i Java-mallar, se Installation för detaljer) har vi haft två block:

- setup(): för instruktioner som körs en gång när programmet startar
- draw(): körs om och om igen med en frekvens av 60 gånger per sekund. (Kan påverkas med framrate(fps) )

Genom att lägga till en eller två block får vi in interaktion via tangentbord och/eller mus. Observera att det måste vara med ett draw()-block för att få mus och tangentbord att fungera.

Tangentbord

För att kunna reagera på tangentbordhändelser lägger vi till blocket keyPressed(). Så fort användaren trycker en knapp hoppar programmet till keypressed-blocket och kör koden mellan måsvingarna (curly-brackets). I den brukar man sedan utvärdera vilken knapp det var. Här kommer ett litet program som ska visa hur det fungera. Vi använda oss av ett par fördefinerade variabler Observera att det finns inga krav i vilken ordning du sätter de olika block. keyPressed() kan lägga före eller efter draw(), det spelar ingen roll för kompilatorn den hittar det i alla fall. Förklaring för de olika rader finns efter exemplet.

//Variabler
int t = 0; 
String  inmatning =""; 

void setup(){
((java.awt.Canvas) surface.getNative()).requestFocus();
size(800,600);
background(0);
  textSize(50);
  fill(200,10,10);
}

void keyPressed(){

  if (key == '+')     {t++;} // ökar a med 1
  if (key == '-')     {t--;} // minskar a med 1
  if (key == 'n' || key == 'N')     {t = 0;} // nollställ, reagara på n och N

  if(keyCode == DELETE) { inmatning =""; } 

  inmatning += key; 

}

void draw(){
  background(0);
  textSize(50);
  text("variabeln t innehåller  " + t, 10,400); 

  textSize(20);
  text("tangenttryckhistoria:  " + inmatning, 10,300); 

}

Förklaring

Vi refererar till radnummer som finsns när du kopiera all kod till en ny processing-sketchbook.
//variabler blir rad 1.

Radnummer enligt IDE	Förklaring
6	(För WINDOWS 7, 8 och 10) När programmet startas är det oftast inte i fokus dvs operativsystemet WINDOWS lämnar inte med 100% säkerhet användarens alla aktioner (mushändelser, knapptryckningar ) till programfönstret. För att tvinga fönstret i fokus läägs till raden 6, i början av setup(). Testa: Radera rad 6 och kör. Tangenttryckningar registreras först när du har klickt en gång på fönstret.
15	När programmet registrerar en tangenthändelse hoppar programmet till rad 13. Information om händelsen sparas i variabler bland annat key och keyCode. i key sparas tecken som användaren tryckte, i keyCode om det var en specialtangent, här knappen delete. Det finns även för piltangenter (UP, DOWN, LEFT, RIGHT) och tex SHIFT, CONTROL, ALT och BACKSPACE med flera.
17	Så här kan man utvärdera innehålet i key om det var ett n oavsett om det var litet eller stort.
19	Så här utvärderas specialtecken med hjälp av keyCode.
21	Varje tangent läggs till i variablen inmatning. Specialtecken blir bara rutor med registreras ändå!

Det finns flera block som är relaterad till tangentbordhändelser. Kolla även

• keyReleased()
• keyTyped()

Laboration 1

---

Mushändelser

Det finns flera händelser som kan kopplas på ett liknande sät till musen eller touchpad. Obs! Fungera bara om fönstret har fokus OCH det finns ett draw()-block.

Metod	Förklaring
- mouseClicked()	Inträffar efter användaren har tryckt ner en musknapp och släppt den.
- mousePressed()	Kallas direkt när en musknapp trycks ner.
- mouseReleased()	Kallas först när en musknapp har släppts.
- mouseDragged()	När musen rörs med nertryck knapp.
- mouseMoved()	Kallas när musen rör sig dvs x:y koordinater ändras. Krävs ingen knapptryckning.
- mouseWheel()	Kallas när hjulet rör sig.

Fördefinierade variabler

Variabelnamn	Förklaring
mouseX	Musen aktuelle avstånd till vänstre fönsterram. Muspekarens spets för att vara precis.
mouseY	Musen aktuella avstånd till övre fönsterram.
mouseButton	Information om vilken musknapp det var. Antingen LEFT, RIGHT eller CENTER.

Exempelkod för olika mushändelser.

//Variabler
int mouseX_Click = 0, mouseY_Click = 0; 
int hjul = 0;

String txt = "ej definierad";
void setup(){
size(500,200);

}


void draw(){
background(100);

textSize(30);
text(txt, 10,50);

textSize(14);
text("Musposition just nu: " + mouseX + ":" + mouseY , 10,80);
text("Musposition vid mousePressed: " + mouseX_Click + ":" + mouseY_Click , 10,100);

if( hjul < 0 ) {
    text("Mushjul vreds framåt",10,120);
  } else {
    text("Mushjul vreds bakåt",10,120);
  } 

}

void mousePressed() {
  if (mouseButton == LEFT) {  txt = "Vänsterknappen har tryckts ner!";}
  if (mouseButton == RIGHT) {  txt = "Högerknappen har tryckts ner!";}

  mouseX_Click = mouseX;
  mouseY_Click = mouseY;

}

 void mouseReleased() {

   txt = "Knappen släpptes!";

}

 void mouseWheel(MouseEvent event) {
   hjul = event.getCount();
}

Laboration 2

1. Ett programm som sätter en rektangel på skärmen på samma plats som musen.
2. Ett program som ritar en liten cirkel som rör sig långsam neråt men rör sig uppåt så länge musknappen är nertryckt.
3. Ett program som ritar en liten cirkel som rör sig långsam neråt men rör sig uppåt om musen rör sig uppåt.
4. Ett program som ritar en liten cirkel på skärmen. När man clickar på ett ställe så rör sig cirkeln till detta ställe.
5. Ett program som låter dig rita linjer som ett CAD-program. Linjen ska går från punkten där du tryckte ner musknappen till punkt där du släppte musknappen.
6. Samma som 5. men nu med en rektangel.