Paso 13: Procesamiento de GUI
Diseñé theProcessing GUI para utilizarse con el modelo específico de R/C coche, el modelo a escala 1/16 de Ford Mustang Shelby 2010.
He creado un fondo de imagen de tomó la foto de la vista superior de R/C coche entonces manipular la imagen en Photoshop, por lo que tengo exactamente el mismo modelo de coche en las ventanas de GUI de procesamiento.
He creado tres pares de ruedas delanteras, para la derecha, girar a la izquierda y ejecutar directamente.
También he creado el icono del botón de los controles de velocidad del vehículo.
Incorporé la GUI de procesamiento para el llano código de procesamiento original de "Wireless robótica plataforma: barato R/C vehículo + Arduino + XBee + procesamiento" por nootropicdesign.com.
Controles de las ruedas de la derecha
Mueva el cursor sobre rueda gire a la "Derecha". Las ruedas delanteras se muestran en la dirección de derecho de giro.
Controles de las ruedas de la izquierda
Mueva el cursor sobre la rueda izquierda para girar a la «Izquierda». Ruedas delanteras aparecen en la izquierda-girar a la dirección.
Controles de velocidad
Velocidad varía de 1 (lento) a 6 (rápido), cuando el cursor está sobre el número, el número es resaltado en blanco. El coche se mueve "Hacia delante" con esa velocidad.
Cuando mueva el cursor sobre R, coche jugada al "Revés" con la velocidad de 3.
Mueve cursor sobre N, hacer la mudanza de "Stop" del coche.
Explicar el proceso de bosquejo
//
Para comunicarse entre procesamiento (PC, ordenador portátil) y Arduino la velocidad tiene que ser el mismo.
Import serie biblioteca para ser utilizado en el proceso de
Import processing.serial.*;
Puerto serial;
void setup() {}
Configurar el puerto
String XBeePort = Serial.list() [0];
Establecer la velocidad a 9600 bps
puerto = serie nueva (este, XBeePort, 9600);
Configurar la pantalla para la salida.
tamaño (400, 596);
Asignar variable llamada velocidad para ser 0 (cero)
velocidad = 0;
Llame al método (función) controlGUI() para mostrar la interfaz de usuario gráfica para
Mostrar la GUI en las ventanas de visualización de procesamiento
controlGUI();
}
void draw() {}
//Displays la imagen de fondo (ShelbyGT2010Background.png)
Background(carImage);
Llame al método (función) speedButtons() para actualizar las imágenes del cambio de botones según el usuario
speedButtons();
Llame al método updateFrontWheel (mouseX, mouseY) para actualizar
la imagen de las ruedas delanteras si el cursor del ratón se mueve sobre
updateFrontWheel (mouseX, mouseY);
Método de reflesh la ventana GUI, cuando hay un cambio en el comando.
directionButtons();
Prueba de funcionamiento
testRun();
}
serialEvents() - controlar la entrada de
el puerto serial COMM.
void serialEvent(Serial p)
{
entrada int = p.read();
lastInput = entrada;
}
/ =============================
/ Botón clase
// =============================
clase botón
{
int x, y;
int w, h;
color basecolor, highlightcolor; color currentcolor;
booleano más = false;
Boolean presiona = false;
void pressed() {}
Si {} (prensado)
currentimage = abajo; }
otra cosa si (sobre) {}
currentimage = rodillo; }
Else {}
currentimage = base;
}
}
{} void over()
Si (overRect (x, y, w, h)) {}
más = true; }
Else {}
más = false;
}
}
void display() {}
imagen (currentimage, x, y);
}
}
// =============================
ImageButtons clases
// =============================
clase ImageButtons amplía botón
{
PImage base;
PImage rodillo;
PImage
PImage currentimage;
ImageButtons (int ix, iy int, int iw, int ih,
PImage ibase, PImage iroll,
PImage idown) {}
x = ix; origen de la imagen X
y = iy; origen de la imagen Y
w = iw; ancho de imagen
h = ih; altura de la imagen
base = ibase; imagen base
rodillo = iroll; rodillo o sobre imagen
abajo = idown; imagen abajo o seleccionado
currentimage = base;
}
void update()
{
Over();
pressed();
Si {} (prensado)
currentimage = abajo;
} else if (sobre) {}
currentimage = rodillo;
} else {}
currentimage = base;
}
}
over() vacío
{
Si (overRect (x, y, w, h)) {}
más = true;
} else {}
más = false;
}
}
void display()
{
imagen (currentimage, x, y);
}
}
Necesitamos tener al menos tres imágenes
para utilizar como una base de icono, rodillo y abajo
en el método ImageButtons().
buttonX int = 34;
int buttonY = 34;
...
void controlGUI() {}
carImage = loadImage (
"ShelbyGT2010Background.png");
seleccionado =
loadImage("gearSelected.png");
turnSelected =
loadImage("turnSelected.png");
uno
oneImage = loadImage("one.png");
oneOver = loadImage("oneOver.png");
oneButton = nuevo ImageButtons (108, 258,
buttonX buttonY,
oneOver, oneImage,
seleccionado);
/ / Estas tres últimas variables son el marcador de posición para las imágenes.
dos
twoImage = loadImage("two.png");
twoOver = loadImage("twoOver.png");
...
}
