Stap 13: Processing GUI
Ik ontwierp theProcessing GUI voor gebruik met specifieke model van R/C auto, de 1/16 schaalmodel van Ford Mustang Shelby 2010.
Ik heb een achtergrond afbeelding door nam de foto van het bovenaanzicht van de R/C auto dan gemanipuleerd de afbeelding in Photoshop, dus ik heb precies hetzelfde model van de auto in de Vensters GUI verwerking.
Ik heb drie paren van voorwielen, gemaakt voor de bocht naar rechts, links en recht uitgevoerd.
Ook heb ik het pictogram van de knop voor de besturingselementen van de snelheid van het voertuig.
Ik opgenomen de GUI verwerking aan de gewone oorspronkelijke verwerking code "Wireless Robotics Platform: goedkope R/C voertuig + Arduino + XBee + verwerkt" door nootropicdesign.com.
Recht wielen besturingselementen
Beweeg de cursor over juiste wiel te draaien "Right". Voorwielen worden weergegeven in de recht-turn richting.
Links wielen besturingselementen
Beweeg de cursor over linker wiel om te schakelen "Left". Voorwielen worden weergegeven in links-turn richting.
Snelheidscontrole
Snelheid varieert van 1 (langzaam) tot en met 6 (snel), wanneer de cursor er boven het nummer, het nummer is gemarkeerd in het wit. De auto vooruit "" met die snelheid.
Wanneer cursor op R, auto verplaatsen in "Omgekeerde" met de snelheid van 3.
Beweeg de cursor over N, maken het verplaatsen van de "Stop" van de auto.
Processing schets uitleggen
//
Om te communiceren tussen verwerking (PC, Laptop) en Arduino moet de baud-rate wel hetzelfde.
import seriële bibliotheek moet worden gebruikt bij de verwerking van
importeren van processing.serial.*;
Seriële poort;
VOID Setup {}
De poort instellen
XBeePort koord = Serial.list() [0];
Baud-Rate ingesteld op 9600 bps
poort = nieuwe Serial (, XBeePort, 9600);
Instellen van het scherm voor uitvoer.
grootte (400, 596);
Toewijzen van de variabele met de naam snelheid 0 (nul)
snelheid = 0;
Oproep methode (functie) controlGUI() om weer te geven van de grafische gebruikersinterface
GUI op de etalages Processing weergeven
controlGUI();
}
VOID draw() {}
//Displays de achtergrondafbeelding (ShelbyGT2010Background.png)
Background(carImage);
Bel methode (functie) speedButtons() om het vernieuwen van de beelden van de knoppen wijzigen volgens de input van de gebruiker
speedButtons();
Aanroepen van de methode updateFrontWheel (mouseX, mouseY) om bij te werken
het beeld van de voorwielen als de muiscursor is overgestapt
updateFrontWheel (mouseX, mouseY);
Methode om reflesh van de GUI venster, wanneer er een wijziging in de opdracht.
directionButtons();
Test uitvoeren
testRun();
}
serialEvents() - controleren van de ingang
de poort seriële comm.
VOID serialEvent(Serial p)
{
int input = p.read();
lastInput = input;
}
/ =============================
/ / Knop klasse
// =============================
klasse knop
{
int x, y;
int w, h;
kleur basecolor, highlightcolor; kleur currentcolor;
Boole-waarde meer dan = false;
Boolean ingedrukt = false;
ongeldig pressed() {}
Als (geperst) {}
currentimage = beneden; }
anders als (over) {}
currentimage = rol; }
else {}
currentimage = base;
}
}
ongeldig over() {}
Als (overRect (x, y, w, h)) {}
meer dan = true; }
else {}
meer dan = false;
}
}
VOID display () {}
afbeelding (currentimage, x, y);
}
}
// =============================
ImageButtons klassen
// =============================
klasse ImageButtons breidt knop
{
PImage basis;
PImage roll;
PImage
PImage currentimage;
ImageButtons (int ix, int iy, int iw, int ih,
PImage ibase, PImage iroll,
PImage idown) {}
x = ix; afbeelding oorsprong X
y = iy; afbeelding oorsprong Y
w = iw; breedte van afbeelding
h = ih; afbeeldingshoogte
basis = ibase; basisimage
Roll = iroll; Roll of over afbeelding
omlaag = idown; omlaag of geselecteerde afbeelding
currentimage = base;
}
VOID update()
{
over();
pressed();
Als (geperst) {}
currentimage = beneden;
} else if (over) {}
currentimage = rol;
} else {}
currentimage = base;
}
}
VOID over()
{
Als (overRect (x, y, w, h)) {}
meer dan = true;
} else {}
meer dan = false;
}
}
VOID display)
{
afbeelding (currentimage, x, y);
}
}
We moesten hebben van ten minste drie afbeeldingen
Als u wilt gebruiken als een pictogram-base, rollen en naar beneden
in de ImageButtons()-methode.
int buttonX = 34;
int buttonY = 34;
...
ongeldig controlGUI() {}
carImage = loadImage ()
"ShelbyGT2010Background.png");
geselecteerde =
loadImage("gearSelected.png");
turnSelected =
loadImage("turnSelected.png");
een
oneImage = loadImage("one.png");
oneOver = loadImage("oneOver.png");
oneButton = nieuwe ImageButtons (108, 258,
buttonX, buttonY,
oneOver, oneImage,
geselecteerd);
/ / Deze laatste drie variabelen zijn de tijdelijke aanduiding voor de beelden.
twee
twoImage = loadImage("two.png");
twoOver = loadImage("twoOver.png");
...
}