Scripting 2 ellipse(screenwidth/2, screenheight/2, 140,140); TUTORIAL EEN APP ONTWIKKELEN VOOR ANDROID MET PROCESSING. DOOR THIERRY BRANDERHORST
ANDROID APPLICATIES Tegenwoordig zijn er duizenden applicaties voor op je telefoon. App s om even kort te noemen. App s zijn hot. Maar wat is het proces om daadwerkelijk een app te kunnen maken. Wat heb je nodig en hoe moet je dit aanpakken? Er zijn tal van manieren om een app te maken. In deze tutorial maken we gebruik van Processing. Het is erg nuttig om mee te zien hoe je een app werkend kan krijgen voor android. Ook in de toekomst om er toch meer inzicht in te krijgen. Om dit proces eens mee te maken is dit een uitgelegen moment om er mee te beginnen. We gaan een app maken voor de android en ik zelf heb getest met een HTC One X android versie 4.1.1. De app die we gaan maken heeft een zwart tekenvlak waarmee je met je vinger kan tekenen. Ook moet er een erase button komen zodra je hier op druk moet je tekening gewist zijn en terug komen op een zwart vlak. In deze tutorial laat ik kort mijn bevindingen zien en hoe ik tot een werkende applicatie ben gekomen. Rechts een klein voorbeeld wat het resultaat zal worden.
SOFTWARE Er zijn een aantal programma s die nodig zijn om een applicatie te kunnen maken. Processing: http://www.processing.org/ Met behulp van Processing kunnen we de tekentool maken. De bottenstructuur als het ware van de applicatie. Processing is hier te downloaden, download de laatste versie die is uitgebracht: http://processing.org/download/ SDK Manager: http://developer.android.com/sdk/index.html Met behulp van dit programma kunnen we de benodigde software installeren voor de verschillende android versies die er bestaan. Zo zit er veel verschil in oudere versies en nieuwe qua mogelijkheden. Het is dus belangrijk om te weten of de app die je wil maken wel compatible is met oude versies van Android. Instructies voor de installatie zijn hier te vinden: http://developer.android.com/sdk/installing/index.html
SOFTWARE Eclipse Met eclipse draaien we via een ADB server een directe connectie met de android telefoon. Hiermee kunnen we via processing applicaties testen op de telefoon. Erg handig dus. Eclipse is hier te downloaden: http://eclipse.org/mobile/ Ook kan je met eclipse een virtuele telefoon instellen om alles via de computer te testen. Zie voor installatie info en instellingen: http://developer.android.com/sdk/installing/installing-adt.html Het is belangrijk dat wanneer je gaat testen op de telefoon, Processing, SDK Manger en Eclipse tegelijk draaien. Deze programma s moeten dus open staan. Voor een volledige tutorial om alle programma s te installeren en in te stellen zie de volgende link: http://processing.org/learning/android/
HTC SYNC USB DRIVERS Omdat ik werk met een HTC One X is het nodig om de usb drivers up te daten zodat ik live kan testen met mijn telefoon. De USB Drivers zitten ingebakken in het programma HTC SYNC. Zie voor download info en instellingen: https://support.htc.com/en Zoek jouw HTC telefoon en installeer HTC Sync. LET OP: Zodra je HTC Sync geinstalleerd hebt zijn de USB Drivers correct geinstalleerd. HTC Sync maakt ook gebruik van een ADB server. Tijdens het ontwikkelen van een applicatie gebruikt Eclipse ook een ADB server. Wanneer HTC Sync en Eclipse beide open staan draaien er ook twee ADB servers. Dit raakt in confliqt. Om dit te voorkomen moet je HTC Sync uitschakelen. Gebruik Taakbeheer/Taskmanager om HTC Sync te beëindigen.
TESTING TESTING Kleine test Open processing en copy paste de volgende code: // Build a container to hold the current rotation of the box float boxrotation = 0; void setup() { // Set the size of the screen (this is not really necessary // in Android mode, but we ll do it anyway) size(480,800); // Turn on smoothing to make everything pretty. smooth(); // Set the fill and stroke color for the box and circle fill(255); stroke(255); // Tell the rectangles to draw from the center point (the default is the TL corner) rectmode(center); void draw() { // Set the background color, which gets more red as we move our finger down the screen. background(mousey * (255.0/800), 100, 0); // Change our box rotation depending on how our finger has moved right-to-left boxrotation += (float) (pmousex - mousex)/100; // Draw the ball-and-stick line(width/2, height/2, mousex, mousey); ellipse(mousex, mousey, 40, 40); // Draw the box pushmatrix(); translate(width/2, height/2); rotate(boxrotation); rect(0,0, 150, 150); popmatrix(); En klik daarna op Run on device. Als het goed is moet je nu op je telefoon een werkende applicatie zien!
SCRIPTEN THE CODE Nu de verbinding is geslaagd en de test goed is gelukt kunnen we beginnen met het schrijven van het script voor de applicatie. LET OP: Zorg ervoor dat we gaan scripten in Android MODE! Dit kan je rechtsboven in Processing wijzigen: Java > Android We beginnen met de Void Setup. void setup() { size(displaywidth, displayheight); background(0); smooth(); Omdat we werken met verschillende telefoons werken we ook met verschillende display s. Size laten we dus bepalen door de display- Width en displayheight. De achtergrond maken zwart en met smooth zorgen we ervoor dat we geen lelijke pixel randen krijgen op onze lijnen. SYMMETRIE LIJNEN Voor het symmetry gedeelte heb ik een openscript gevonden: http://www.openprocessing.org/sketch/91240 void draw() { if (mousepressed && onclearbutton == false) { strokeweight(random(0, 10)); line(mousex, mousey, pmousex, pmousey); line(width-mousex, mousey, width-pmousex, pmousey); line(mousex, height-mousey, pmousex, height-pmousey); line(width-mousex, height-mousey, width-pmousex, height-pmousey); Wanneer je met je vinger het scherm aanraakt teken je een lijn. De andere lijnen zijn zo ingesteld dat het symmetrisch getekend wordt.
SCRIPTEN GEKLEURDE LIJNEN Wanneer de gebruiker zijn vinger los laat en vervolgens weer tekent moet de lijn een andere kleur zijn. Hier voor gaan we een teller instellen. Die houdt bij wanneer de vinger van het scherm is door een nieuwe waar in te stellen. Eerst stellen we de tel waarden in. int counter = 1; En daarna geven we voor het gemak een naam voor de kleuren om tijd te besparen en het overzichtelijker te houden. color red = color(255, 0, 0, random(90, 100)); color green = color(255, 255, 0, random(90, 100)); color blue = color(0, 71, 171, random(90, 100)); color white = color(255, 255, 255, random(90, 100)); Dan maken we de code voor de teller. if (counter == 1) { stroke(red); else if (counter == 2) { stroke(green); else if (counter == 3) { stroke(blue); else if (counter == 4) { stroke(white); void mousepressed() { counter++; // increase the counter if (counter == 5) { counter = 1;
SCRIPTEN CLEAR BUTTON We gaan een rondje maken met daarin de tekst CLEAR. Het rondje wordt grijs met nostroke en de plaatsing is onderaan het scherm in het midden. De tekst komt in het midden van de ellipse. fill(50); nostroke(); ellipse(displaywidth/2, displayheight*0.94, w, h); fill(255); textsize(20); text( CLEAR, displaywidth/2-30, displayheight*0.94+8); Dit is een code die ik gevonden heb op processing forum. Het is aangepast zodat het werkt in ons eigen script. void mousepressed() { if (mousex>x-w/2 && mousex <x+w/2 && mousey>y-h/2 && mousey <y+h/2) { fill(0); background(0); onclearbutton = true; else { onclearbutton = false; Ze deze waardes voor Void Setup. int value=0; float x = 360; float y = 1200; float w = 100; float h = 100; boolean onclearbutton = false; Hiermee geven we boundry s aan van de clear button. Als er daadwerkelijk op de button wordt gedrukt krijg je een nieuw zwart tekenveld.
VOLLEDIGE CODE CODE int value = 0; color red = color(255, 0, 0, random(90, 100)); color green = color(255, 255, 0, random(90, 100)); color blue = color(0, 71, 171, random(90, 100)); color white = color(255, 255, 255, random(90, 100)); int counter = 1; float x = 360; float y = 1200; float w = 100; float h = 100; boolean onclearbutton = false; void setup() { size(displaywidth, displayheight); background(0); smooth(); void draw() { nostroke(); if (counter == 1) { stroke(red); else if (counter == 2) { stroke(green); else if (counter == 3) { stroke(blue); else if (counter == 4) { stroke(white); if (mousepressed && onclearbutton == false) { strokeweight(random(0, 10)); line(mousex, mousey, pmousex, pmousey); line(width-mousex, mousey, width-pmousex, pmousey); line(mousex, height-mousey, pmousex, height-pmousey); line(width-mousex, height-mousey, width-pmousex, height-pmousey); fill(50); nostroke(); ellipse(displaywidth/2, displayheight*0.94, w, h); fill(255); textsize(20); text( CLEAR, displaywidth/2-30, displayheight*0.94+8); void mousepressed() { counter++; // increase the counter if (counter == 5) { counter = 1; if (mousex>x-w/2 && mousex <x+w/2 && mousey>y-h/2 && mousey <y+h/2) { fill(0); background(0); onclearbutton = true; else { onclearbutton = false;
THAT S IT SYMMETRY ART We hebben een symmetrische teken applicatie! Wanneer je elke keer test op je telefoon maakt Processing automatisch een applicatie aan op je telefoon. Als je de telefoon los koppelt van de computer staat er een werkende applicatie tussen je andere app s. Super tof toch!? Nu kan je uiteraard ook zelf een leuk script gaan schrijven aangezien de verbinding van je telefoon met processing nu kloppend is. Dit was even een kort inzicht hoe je met processing een applicatie kan maken voor Android telefoons. Succes!