04 Processing Galileo

7/25/2019 04 Processing Galileo

1/51

Processing: Diseo de Interfaces


2/51

Processing: Diseo de Interfaces

Qu es Process

Comenzando co

Mostrando Text

Eventos del Mou

Comunicando G

Comunicando P


3/51

Qu esProcessin

Processing:

Es un lenguaje de programacin y un entorno

de desarrollo de software con una curva de

aprendizaje rpida, con el que se pueden

disear interfaces grficas para monitorear y

controlar distintas tareas. Es un buen

complemento para la tarjeta de desarrollo

Galileo.

Descarga gratuita ya que

Programa de Cdigo Abi1

Se puede ejecutar en Li

X y Windows.2

Mas de 100 bibliotecas q

las capacidades del softw3

Se puede combinar prog

Processing con Java pu4


4/51

Ejecutar Parar Nuevo Abrir Guardar Exportar

Cdigo

Nombre del proyecto (sketch)

Seleccin de otros Lenguajesde programacin

Nmerode Lnea

rea demensajes rea de texto

y depuracin

IDE

Pro

cessing


5/51

Comenzandocon Processin

El entorno de programacin de

Processing permite la creacin de

imgenes, animaciones y medios de

interaccin.

Comenzaremos con algunos conceptos

bsicos y figuras simples que mas

adelante nos permitirn disear

interfaces mas complejas.Descarg

Funciones Bsicas

Figuras Bsicas

Agregando color


6/51


7/51

FuncionBsicas

Processing, al igual que Arduino tiene dos funciones bsicas:

setup( )

draw( )

La funcin setup( ) se ejecuta una sola vez al inicio del programa.

La funcin draw( ) hace las veces de la funcin loop( ) de Arduino,

la cual se ejecuta repetitivamente mientras el programa se encuentre

ejecutndose.

Otras dos funciones bsicas que necesitaremos son:

size( )

background( )


8/51

backgrbackground( )

Establece el color usado para el fondo

de la ventana de la interfaz. El fondo

predeterminado es de color gris claro.

Sintaxis:

background(grayscale)

background(R,G,B)

background(rgb)

size( )

Define la dimensin de la ventana

de la interfaz en pixeles. Esta

funcin debe ser la primer lnea de

cdigo dentro de la funcinsetup( )

Sintaxis:

size(w, h)

w -> ancho de la ventana (int)

h -> alto de la ventana (int)

rgb -> Codificaci

#FF


9/51

Cdibase.

void set

size(5

}

void draw

}

Crea una ventana de

500x500 pixeles

Origen

(0,0)

!


10/51

Cdibase2

void set

size(5

backgro

}

void draw}

Crea una ventana de

500x500 pixeles

Fondo de la ventana

Color: Azul Intel

RGB: 0, 113, 197


11/51


12/51

FigurasBsicas

En Processing podemos comenzar nuestros dibujos con formas muybsicas como lneas, elipses y cuadrilteros con las siguientes funciones::

rect( )

Dibuja un rectngulo en la pantalla.

Las primeras dos coordenadas

corresponden a la esquina superiorizquierda, la tercera es el ancho y la

cuarta la altura.

Sintaxis:

rect(x1,y1,w,h)

line( )

Dibuja una lnea en la pantalla

entre dos puntos indicados. La

lnea dibujada tiene un grosor de1 pixel y color negro por defecto

Sintaxis:

line(x1,y1,x2,y2)

ellipse( )

Dibuja una elips

Las primeras do

corresponden aelipse, la tercer

ancho y la altur

Sintaxis:

ellipse(x,y


13/51

Cdishape

void setup(){

size(500,500);

background(#0071c5);

}

void draw(){

line(50,50,200,200);rect(300,200,100,100)

ellipse(100,400,100,1

}


14/51

ProcessLanguag

ReferenEl lenguaje Processing es diseado con la finalidad d

una forma rpida para el diseo de prototipos de s

cual podemos crear desde formas muy bsicas, ha

visuales muy sofisticadas.

Al igual que Arduino, Processing nos proporcio

compendio de Referencia de su lenguaje, donde podla explicacin, sintaxis y ejemplos de todas

implementadas nativamente en su IDE y de algunas

tambin vienen incorporadas en l.

https://www.processing.org/refer


15/51

AgreganColor

Podemos especificar el color del relleno de las figuras y de su contorno, ascomo el grosor de ste:

stroke( )

Configura el color de las lneas y de

los contornos de las figuras.

Sintaxis:

stroke(grayscale)

stroke(R,G,B)

stroke(rgb)

fill( )

Configura el color del relleno de

las figuras. El color por default de

las figuras es el blanco.

Sintaxis:

fill(grayscale)

fill(R,G,B)

fill(rgb)

strokeWeight(

Configura el gro

de los contorno

valor es expres

Sintaxis:

strokeWe

Codificacin hexadecimal

noFill()

noStroke()


16/51

Cdicolor.p

void setup(){

size(500,500);

background(#0071c5);

}

void draw(){

fill(255,0,0);

stroke(0,255,0);

strokeWeight(3);line(50,50,200,200);

stroke(255,255,255);

rect(300,200,100,100);

fill(#009383);

ellipse(100,400,100,100)

}


17/51

Reto:


18/51


19/51

MostrandoTexto

Adems de crear figuras, tambin podemos agregar texto a nuestras interfaces, lo cual nos

permitir agregar leyendas, instrucciones, sugerencias, comentarios, etc.

Igualmente podemos darle formato a este texto, como por ejemplo, modificar el tamao, el

color, su posicin, la fuente tipogrfica, entre otros atributos.


20/51

textex

textSize()

Configura el tamao de la fuente.

Se expresa en pixeles.

Sintaxis:

textSize(tamao)

text()

Despliega texto en la pantalla.

Sintaxis:

text(texto,x,y)

text(num,x,y)

x,y -> coordenadas de la esquina

inferior izquierda del texto.

num -> int o float: nmero a mostrar

textAlign()

Configura la ali

mostrado en re

valores de las cindicadas en la

Sintaxis:

textAlign(

alignX -> LEFT

fill()


21/51


22/51

Cditexto2

void setup(){

size(500,500);

background(0,113,197);

text("Este es mi primer texto",1

textSize(30);

text("Ahora el tamao es de 30",

fill(255,255,0);

text("Y ahora con color",50,200)

textAlign(CENTER);text("Este texto esta centrado",

}

void draw(){

}


23/51


24/51

Eventosdel Mouse

Processing nos proporciona algunas funciones para poder acceder a distintos eventos d

mouse, adems de proporcionarnos informacin sobre la posicin del puntero como

posicin en X y Y en ciertas variables predefinidas. Con estas funciones y variabl

podemos controlar un sinfn de aplicaciones, como por ejemplo, dibujar algo cuando dem

un click en cierto lugar de la ventana.


25/51

Accionedel Mou

Es importante definir que acciones del mouse puede detectar Processing:

Clicked Un botn del mouse es presionado y luego soltado

Accin Descripcin

Pressed Un botn del mouse es presionado y se mantiene as

Released Un botn del mouse fue presionado, pero ahora se suelta

Moved El mouse es movido sin que ningn botn sea presionado

Dragged El mouse es movido con un botn presionado


26/51

Funciondel Mou

Las acciones del mouse puede llamar las siguientes funciones y ejecutar el cdigo que nosotros definam

void mouseClicked() {

}

void mousePressed() {

}

void mouseReleased() {

}

void mouseMoved() {

}

void mouseDragged(){

}


27/51

VariableRelacion

Tenemos a nuestra disposicin dos variables que Processing nos proporciona en cualq

que las necesitemos a lo largo de nuestro programa y dentro de cualquier funcin, la

proporcionan mas informacin acerca de que es lo que el mouse est haciendo dent

programa.

mouseX Nos proporciona la posicin X del mouse en la

mouseY Nos proporciona la posicin Y del mouse en la

mousePressed Variable booleana, TRUE / FALSE

mouseButton Botn presionado, LEFT, RIGHT, CENTER


28/51

Cdimouse

void setup() {

size(500, 500);

background(0);

textAlign(CENTER);

textSize(24);

fill(255);

text("El mouse no est haciendo nada",

width/2, height/2);}

void draw() {

}

void mousePressed() {

background(100, 100, 0);

text("El mouse fue presionado",

width/2, height/2);

if( mouseButton== LEFT) {

text("y fue el botn izquierdo",

width/2, height/2+ 40);

}

if(mouseButton== RIGHT) {

text("y fue el boton derecho",

width/2, height/2+ 40);

}

}

void mouseReleased() {


text("el botn fue soltado"

width/2, height/2);

}

void mouseMoved() {


text("El mouse fue movido"width/2, height/2);

}

void mouseDragged() {


text("Se est arrastrando e

width/2, height/2);

}


29/51

Reto:Al dar click derecho

Al dar click izquierdo

Al soltar

el botn


30/51


31/51

Eventosdel Teclado

Al igual que los eventos de mouse, es posible tambin detectar distintos eventos del teclad

lo que nos puede permitir tener mayor interaccin con la tarjeta Galileo. Algunos de l

acciones o eventos que podemos detectar es la presin de alguna tecla, determinar la tec

presionada, discriminar entre letras maysculas o minsculas, entre otras cosas.


32/51

TeclaPresiona

Processing nos proporciona una funcin que es llamada cada vez que una

tecla es presionada:

Dentro de esta funcin podemos colocar todo el cdigo que queremos quese ejecute cada vez cualquier tecla sea presionada, sin embargo an no

distinguimos especficamente cul tecla se presion.

void keyPressed(){

}


33/51

Cdianyke

int r,g,b;

void setup(){

size(600,600);

r = 0;

g = 0;

b = 0;

}

void draw(){

background(r,g,b);}

void keyPressed(){

r = int(random(256));

g = int(random(256));

b = int(random(256));

}

Detecta


34/51

Detectala TeclaPresiona

Como ya vimos, cada que presionamos una tecla, la funcin keyPressed() es llamada

informacin acerca de cul es la tecla presionada es almacenada en una variable llamada

void setup(){

}

void draw(){

}

void keyPressed(){

println(key);

}


35/51

Cdirgbkey

int r,g,b;

void setup(){

size(600,600);

r = 0;

g = 0;b = 0;

}

void draw(){

background(r,g,b);

}

void keyPressed(){

switch(key){

case 'r':r=255;

g=0;

b=0;

break;

case 'g':

r=0;

g=255;

b=0;

break;

case 'b':r=0;

g=0;

b=255;

break;

default:

break;

}

}


36/51

Detectaotras Te

En el primer ejemplo de esta seccin, pudimos darnos cuenta que hay algunas teclas qu

identificar, y simplemente se imprime un signo ?. Ahora, en el segundo ejemplo ima

queremos detectar cuando las flechas sean presionadas, cmo podemos escribir una t

dentro de las comillas?

Para esto, Processing tambin tiene a nuestra disposicin la variable keyCode la cua

nmero ASCII asociado a cada una de estas teclas:

void keyPressed(){

println(keyCode);

}

37

40


37/51

Cdiarrows

int r,g,b;

void setup(){

size(600,600);

r = 0;

g = 0;b = 0;

}

void draw(){

background(r,g,b);

}

void keyPressed(){

switch(keyCode){

case 37:r=255;

g=0;

b=255;

break;

case 38:

r=255;

g=255;

b=0;

break;

case 39:r=0;

g=255;

b=255;

break;

default:

break;

}

}

Reemplaza con: LEFT

Reemplaza con UP

Reemplaza con RIGHT


38/51


39/51

ComunicandoGalileo conProcessing

Para esta primer interaccin entre ambas plataformas Hardware/Software, enviaremos dat

utilizando comunicacin serial, desde la tarjeta Galileo hasta la interfaz de Processing, es de

realizaremos en tipo de hola mundo.

Lo primero que necesitamos sabes es cmo leer informacin del puerto serial.


40/51

Cmo leDatos Se

Lo primero es importar la biblioteca serial para tener a

puerto serial de la computadora para enviar y transmitir

Processing y hardware externo:


41/51

CdigoSerialRe

import processing.serial.*;

Serial miPuerto;

void setup(){

miPuerto=new Serial(this,"COM5",9600);

}

void draw(){

if(miPuerto.available() >0){

int dato = miPuerto.read();

println(dato);}

}

!

void draw(){

}

void serialEvent(S

int dato= miPue

println(dato);

}

Comuni


42/51

ComuniGalileo cProcess

Para este primer ejemplo lo que haremos ser enviar la informacin del estado de un pu

button conectado a la tarjeta Galileo, a una interfaz diseada en Processing:

E i


43/51

Esquemtico

NOTA: Aunque este es el diagrama de

conexin para este ejercicio, usaremos

el botn A del Joystick:

G lil


44/51

CdiOneLe

void setup() {

pinMode(2, INPUT); // Configuracin del pin 2 como entrada

Serial.begin(9600); //Inicializacin de comunicacin serial a 9600 ba

}

void loop() {

// Transfiere a travs del puerto serial el estado digital del pin 2

Serial.print(digitalRead(2));

delay(100); //retardo de 100 milisegundos

}

Galileo

Reto:


45/51

Reto:

Para visitar un tutorial completo sobre eTutorial: Comunicando Galileo con
https://engage.intel.com/community/es/galileo/centro-de-aprendizaje/video-tutoriales/blog/2014/10/20/tutorial-comunicando-galileo-con-processing-parte-1https://engage.intel.com/community/es/galileo/centro-de-aprendizaje/video-tutoriales/blog/2014/10/20/tutorial-comunicando-galileo-con-processing-parte-1


46/51


47/51

ComunicandoProcessingcon Galileo

Ahora enviaremos datos a la tarjeta Galileo desde una interfaz diseada en Processing para co

una tarea, que para este caso se controlar el encendido y apagado de un LED.

Para este ejercicio necesitamos saber cmo escribir al puerto serial, para que los datos sea

transmitidos haca la Galileo.

Comuni


48/51

ComuniProcesscon Gal

La interfaz de Processing contar con un botn virtual, el cual al dar click derecho sobreste, transmitir serialmente un dato que le informar a la tarjeta Galileo que deber de

encender un LED y si se da click izquierdo, deber apagarlo:

CdiG lil


49/51

CdiLED_o

int byteRecibido=0; //Variable que almacenar el byte recibido

const int led = 13; //Pin al que se conectar el LED

void setup(){

Serial.begin(9600); //Inicializacin del puerto serial a 9600 baud

pinMode(led, OUTPUT); //Se declara el pin 13 como salida

digitalWrite(led, LOW);//Apagar el LED inicialmente

}

void loop(){

//Se comprueba si hay algn dato por leer en el buffer del puerto ser

if(Serial.available() >0){byteRecibido=Serial.read(); //Lectura del dato recibido

if(byteRecibido==A) //Comprobar que el dato recibido sea un

digitalWrite(led, HIGH); //Encender el LED

else if (byteRecibido==B)

digitalWrite(led, LOW); //Apagar el LED

}

}

Galileo

Reto:


50/51

Reto:Al dar click derecho

Al soltar

el botn

Al dar click izquierdo

Al soltar

el botn

Para

sobreTutor
https://engage.intel.com/community/es/galileo/centro-de-aprendizaje/video-tutoriales/blog/2014/12/01/tutorial-comunicando-galileo-con-processing-parte-2https://engage.intel.com/community/es/galileo/centro-de-aprendizaje/video-tutoriales/blog/2014/12/01/tutorial-comunicando-galileo-con-processing-parte-2


51/51

Este tutorial es liberado bajo la licencia:

Parte de su contenido fue obtenido de sparkfun.com

!

04 Processing Galileo

Documents

Transcript of 04 Processing Galileo