Alexandre de Andrade Barbosa

(1)

Mini-curso:

Implementando uma aplicação interativa

com o WiiMote

Alexandre de Andrade Barbosa

(2)

Objetivos

●

Apresentar a área de Interação Humano Computador

●

Descrever como o Wiimote funciona se comunica

●

Revisar os conceitos de programação Java que

necessários para o projeto

●

Implementar uma aplicação simples de interação do

Wiimote com um computador

(3)

3º Congresso Acadêmico do CESMAC

Implementando uma aplicação interativa com o Wiimote

3 Sobre o apresentador

●

Bacharel em Ciência da Computação pela UFAL

●

Engenharia de Software

●

Mestre em Ciência da Computação pela UFCG

(4)

Sobre o apresentador

●

Professor Assistente I na UFAL Arapiraca

●

E.S., B.D., G.P., L.P., P.L.P., L.I.C., outras

●

Coordenador do L.E.C.C e G.E.D.A.I

●

Coordenador do L.A.M.P

●

Áreas de atuação:

●

Engenharia de Software

(5)

5 Sobre o apresentador

(6)

Sobre o apresentador

●

E o mais importante...

●

… feliz proprietário de

(7)

7 Sobre os congressistas

●

Nome...

●

Curso / Período …

(8)

Roteiro

●

1ª Parte - Introdução IHC ( ~30 min. )

●

2ª Parte - Como o Wiimote funciona ( ~ 30 min. )

●

3ª Parte - Linguagem Java ( ~1hr. 30 min. )

(9)

9

(10)

Introdução IHC – O sistema ideal

“The ideal system so buries the technology that the user

is not even aware of its presence. The goal is to let

people get on their activities, with the technology

enhancing their productivity, their power, and their

enjoyment, ever the more so because it is invisible, out of

(11)

11

(12)

Introdução IHC – O que é interface?

“uma interface é uma superfície de contato que reflete as propriedades

físicas das partes que interagem, as funções a serem executadas e o

balanço entre poder e controle”

(13)

13 Introdução IHC – O que é interface?

(14)

Introdução IHC – O que é IHC?

“IHC é a disciplina preocupada com o design, avaliação e

implementação de sistemas computacionais interativos para uso

humano e com o estudo dos principais fenômenos ao redor deles”

(15)

15 Introdução IHC – IHC e computação

●

Desenvolvimento de software

●

explorar maneiras para melhorar a representação da

informação e a captura de dados

●

Desenvolvimento de hardware

●

buscar alternativas de dispositivos de interação (ex.

(16)

Introdução IHC – IHC e computação

(17)

17 Introdução IHC – IHC e computação

(18)

(19)

19

(20)

Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de corrida?

a) apertando botões

b) movendo o volante

(21)

21 Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de corrida?

a)

apertando botões

b)

movendo o volante

(22)

Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de corrida?

a)

apertando botões

b) movendo o volante

c) n. d. a

●

Como você dirige?

a) apertando botões

(23)

23 Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de corrida?

a)

apertando botões

b) movendo o volante

c) n. d. a

●

Como você dirige?

a) apertando botões

b)

movendo o volante

(24)

Introdução IHC – IHC e Jogos

●

Como você “luta com

os deuses”?

a) apertando botões

b) movendo o(s) braço(s)

(25)

25 Introdução IHC – IHC e Jogos

●

Como você “luta com

os deuses”?

a)

apertando botões

b) movendo o(s) braço(s)

(26)

Introdução IHC – IHC e Jogos

●

Como você “luta com os

deuses”?

a)

apertando botões

b) movendo o(s) braço(s)

c) n. d. a.

●

Como você usa uma

espada no mundo real?

(27)

27 Introdução IHC – IHC e Jogos

●

Como você “luta com os

deuses”?

a)

apertando botões

b) movendo o(s) braço(s)

c) n. d. a.

●

Como você usa uma

espada no mundo real?

a) apertando botões

b) movendo o(s) braço(s)

(28)

Introdução IHC – IHC e Jogos

●

Como você “luta com os

deuses”?

a)

apertando botões

b) movendo o(s) braço(s)

c) n. d. a.

●

Como você

usaria

uma

espada no mundo real?

(29)

29 Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de tênis?

a) apertando botões

b) movendo o(s) braço(s)

(30)

Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de tênis?

a)

apertando botões

b) movendo o(s) braço(s)

(31)

31 Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de tênis?

a)

apertando botões

b) movendo o(s) braço(s)

c) n. d. a

●

Como você joga tênis?

a) apertando botões

b) movendo o(s) braço(s)

(32)

Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de tênis?

a)

apertando botões

b) movendo o(s) braço(s)

c) n. d. a

●

Como você joga tênis?

a) Muito mal...

(33)

33 Introdução IHC – IHC e Jogos

●

Como você joga um

jogo de tênis?

a)

apertando botões

b) movendo o(s) braço(s)

c) n. d. a

●

Como você joga tênis?

a) Muito mal...

b) Mais ou menos...

(34)

Se eu apertar o botão

o que acontece?

(35)

35 Como eu faço para jogar?

Quais são os comandos?

(36)

Introdução IHC – IHC e Jogos

(37)

37 Já sei irei pressionar as teclas e

verificar o que acontece...

(38)

Já sei irei pressionar as teclas e

verificar o que acontece...

Introdução IHC – IHC e Jogos

●

Problemas:

●

Comando sensível ao

contexto do jogo...

(39)

39 Introdução IHC – IHC e Jogos

(40)

Introdução IHC – IHC e Jogos

(41)

41

(42)

(43)

43 Como o Wiimote funciona

Wiimote ou Wii Remote

(44)

Como o Wiimote funciona

(45)

45 Como o Wiimote funciona

●

O Wiimote é o controle principal do console Wii

●

Controle auxiliar é chamado de “Nunchuck”

●

O Wiimote possui:

●

Câmera infravermelha, Acelerômetro e

Botões de ação

●

O Nunchuck possui um sensor:

●

Acelerômetro e Botões de ação

(46)

Como o Wiimote funciona

(47)

47 Como o Wiimote funciona

(48)

(49)

49 Como o Wiimote funciona

(50)

Como o Wiimote funciona

(51)

51 Como o Wiimote funciona

(52)

(53)

53 Como o Wiimote funciona

●

Instalando: Wmgui

(54)

(55)

55 Como o Wiimote funciona

●

Câmera:

●

captura a luz infravermelha emitida por algum ponto de

luz infravermelha

●

Acelerômetro

●

permite obter aceleração em

três eixos: vertical, horizontal

(56)

Como o Wiimote funciona

●

Botões de ação

●

Ao pressionar um botão a identificação do botão é

enviada via bluetooth

(57)

57

(58)

Linguagem Java

●

Instalação

●

Primeiro programa

●

Conceitos básicos

●

Estruturas de Controle

●

Classes e Objetos

●

Eventos

(59)

59 Linguagem Java - Instalação

public class WiiApp {

// …

(60)

Linguagem Java - Instalação

●

Instalando: Java Runtime Environment (JRE )

●

Instalando: Java Developmente Kit (JDK)

$ sudo apt-get install sun-java6-jre

$ sudo update-alternatives --config java

$ sudo apt-get install sun-java6-jdk

(61)

61 Linguagem Java - Instalação

●

Instalando: Eclipse

●

Abrir o Eclipse

Aplicativos > Desenvolvimento > Eclipse

$ eclipse

(62)

Linguagem Java - Primeiro programa

●

Criando projeto Java no Eclipse

●

Criando uma pasta

●

Criando pacote

●

Criando uma classe

File > New... > Java Project

“lib”

(63)

63 Linguagem Java - Primeiro programa

●

Criando uma classe

package wiimoteapp.linguagemjava;

public class Primeiro {

public static void main(String[] args) {

System.out.println("Meu primeiro programa Java!");

}

(64)

Linguagem Java - Primeiro programa

●

Executando a classe no Eclipse

●

Saída esperada

Run > Run as... > Java Application

(65)

65 Linguagem Java - Conceitos básicos

●

Tipos de dados

●

int

●

boolean

●

double

●

float

●

String

(66)

Linguagem Java - Conceitos básicos

●

Entrada

●

Saída

//...

import javax.swing.JOptionPane;

//...

JOptionPane.showInputDialog("Digite seu nome:");

//...

(67)

67 Linguagem Java - Conceitos básicos

●

Entrada e Saída

package wiimoteapp.linguagemjava;

import javax.swing.JOptionPane;

public class EntradaSaida {

public static void main(String[] args) { String nome;

nome = JOptionPane.showInputDialog("Digite seu nome:"); System.out.println(nome);

} }

(68)

Linguagem Java - Est. de controle

●

Condicionais

●

if...else

●

switch

●

Repetição

●

for

●

while

(69)

69 Linguagem Java - Est. de controle

public class Controle01 {

public static void main(String[] args) { boolean x = true;

if (x) {

System.out.println("Executou o 'if'!"); } else {

System.out.println("Executou o 'else'!"); }

} }

(70)

Linguagem Java - Est. de controle

public static void main(String[] args) { int x = 2;

switch (x) { case 1:

System.out.println("Trecho 1"); break; case 2:

System.out.println("Trecho 2"); break; default:

System.out.println("Trecho Padrão"); break; }

(71)

71 Linguagem Java - Est. de controle

public static void main(String[] args) {

for (int i = 0; i < 5; i++) {

System.out.println("i = " + i); }

} }

(72)

Linguagem Java - Est. de controle

public static void main(String[] args) { int i = 0;

while (i < 6) {

System.out.println("i = " + i); i++;

}

(73)

73 Linguagem Java - Est. de controle

public static void main(String[] args) { int i = 0;

do {

System.out.println("i = " + i); i++;

} while (i < 6);

} }

(74)

(75)

75

(76)

(77)

77 Linguagem Java - Est. de controle

public class Pessoa { public String _nome; public int _idade;

public Pessoa(String nome, int idade) { _nome = nome;

_idade = idade; }

public void info() {

System.out.println(_nome + " tem " + _idade + " anos"); }

}

(78)

Linguagem Java - Est. de controle

public class ClasseObjeto01 {

public static void main(String[] args) { Pessoa p = new Pessoa("Alexandre", 28); System.out.println(p._nome);

(79)

79 Linguagem Java - Classes e Objetos

●

Classes podem reusar comportamentos e

características de outras classes (Herança)

public class Aluno extends Pessoa { public String _matricula;

public Aluno(String nome, int idade, String matricula) { super(nome, idade);

_matricula = matricula; }

public void info() { info();

System.out.println("(" + _matricula + ")"); }

}

(80)

Linguagem Java - Classes e Objetos

●

Classes podem reusar comportamentos e

características de outras classes (Herança)

public class ClasseObjeto02 {

public static void main(String[] args) { Pessoa p = new Pessoa("Alexandre", 28); System.out.println(p._nome);

Aluno a = new Aluno("Maria", 19, "2010G55D035"); }

(81)

81 Linguagem Java - Classes e Objetos

import javax.swing.JFrame;

public class Tela01 extends JFrame { public Tela01() {

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(800, 600);

pack();

setVisible(true); }

public static void main(String[] args) { Tela01 t = new Tela01();

} }

(82)

Linguagem Java - Classes e Objetos

import java.awt.Color;

import javax.swing.JButton; import javax.swing.JPanel;

public class Tela02Panel extends JPanel {

public Tela02Panel(Color bg, String text) { setBackground(bg);

JButton b = new JButton(text); add(b);

(83)

83 Linguagem Java - Classes e Objetos

// ...

public class Tela02 extends JFrame { public Tela02() {

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(800, 600);

setLayout(new GridLayout(0, 4));

add(new Tela02Panel(Color.BLUE, "L")); add(new Tela02Panel(Color.GREEN, "A")); add(new Tela02Panel(Color.RED, "M")); add(new Tela02Panel(Color.YELLOW, "P")); pack();

public static void main(String[] args) { Tela02 t = new Tela02();

} }

(84)

Linguagem Java - Eventos

●

Um evento (em Java) pode ser descrito como

qualquer ação que ocorre entre o usuário e a

aplicação

●

Pressionar teclas no teclado

●

Clicar o mouse

●

…

(85)

85 Linguagem Java - Eventos

package wiimoteapp.linguagemjava; import java.awt.Color;

import java.awt.Dimension;

import javax.swing.BorderFactory; import javax.swing.JLabel;

public class EventoPanel extends JLabel { public EventoPanel(Color color) {

setBackground(color);

setBorder(BorderFactory.createLineBorder(Color.black)); }

public Dimension getMinimumSize() { return new Dimension(100, 50); }

public Dimension getPreferredSize() { return new Dimension(100, 50); }

}

(86)

Linguagem Java - Eventos

import java.awt.Color;

import java.awt.Dimension; import java.awt.GridLayout; import java.awt.TextArea;

import java.awt.event.MouseEvent; import java.awt.event.MouseListener;

import javax.swing.BorderFactory; import javax.swing.JFrame;

import javax.swing.JScrollPane; import javax.swing.JTextArea;

(87)

87 Linguagem Java - Eventos

//...

public class Evento extends JFrame implements MouseListener{

EventoPanel ep; public Evento() {

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setLayout(new GridLayout(0,1));

ep = new EventoPanel(Color.WHITE); add(ep);

ep.addMouseListener(this); addMouseListener(this);

setPreferredSize(new Dimension(450, 450)); pack();

//...

(88)

Linguagem Java - Eventos

//...

public void mouseClicked(MouseEvent e) {

System.out.println("Mouse foi clicado!"); }

public void mouseEntered(MouseEvent e) {

System.out.println("Mouse entrou no painel!"); }

public void mouseExited(MouseEvent e) {

System.out.println("Mouse saiu do painel!"); }

public void mousePressed(MouseEvent e) {

System.out.println("Mouse foi pressionado!"); }

public void mouseReleased(MouseEvent e) {

(89)

89 Linguagem Java - Eventos

//...

public static void main(String[] args) { Evento e = new Evento();

}

(90)

(91)

91 Linguagem Java - Adicionando APIs

●

APIs são componentes com funcionalidades

específicas podem ser utilizados em outros

programas

●

Alguns exemplos de componentes/APIs:

●

Jfreechart – geras gráficos

●

Itext – gerar pdf

(92)

Linguagem Java - Adicionando APIs

●

Para inserir um componente que será usado em seu

projeto deve-se modificar o classpath

1.Copie o arquivo junit.jar para pasta lib

2.Clique direito sobre o arquivo junit.jar

3.Selecione:

4.Verifique que todas as classes do .jar estão

(93)

93

(94)

(95)

95 Implementação - Software

(96)

Implementação - Instalando WiiUseJ

1.Copie o arquivo

wiiusej.jar

para pasta lib

2.Clique direito sobre o arquivo

wiiusej.jar

3.Selecione:

4.Verifique que todas as classes do .jar estão

disponíveis em seu projeto

5. Copie o arquivo libwiiuse.so para raiz do projeto

(97)

97 Implementação - Instalando WiiUseJ

1.Copie os arquivos

●

libwiiuse.so

●

libWiiuseJ.so

(98)

Implementação - Instalando WiiUseJ

1. No menu

2. Na aba

3. Adicione o parâmetro para iniciar a JVM p/ projeto

Run > Run configurations

Arguments > VM Arguments

(99)

99 Implementação - Instalando WiiUseJ

1. No menu

2.Na aba

3.Selecione o botão

4. Crie a variável

Run > Run configurations

Environment

LD_LIBRARY_PATH =

/home/alexandre/workspace/ensino/WiiUseJ

(100)

Implementação - Instalando WiiUseJ

1. No terminal execute

$ ln -s /usr/lib/libbluetooth.so.3

(101)

101 Implementação – Eventos Wiimote

●

Para capturar eventos dos botões

●

Para capturar eventos da camêra IR

●

Para capturar eventos do acelerômetro

●

Outros eventos não serão citados...

public void onButtonsEvent(WiimoteButtonsEvent b)

public void onIrEvent(IREvent arg0)

(102)

Implementação – Eventos Wiimote

●

Para cada botão são fornecidos os métodos:

●

isButton?JustPressed()

●

isButton?JustReleased()

●

isButton?Held()

(103)

103 Linguagem Java - Eventos

package wiimoteapp.eventos; // imports

public class WMSample implements WiimoteListener {

public void onButtonsEvent(WiimoteButtonsEvent b) { if (b.isButtonAJustReleased()) {

System.out.println("A"); }

if (b.isButtonBJustPressed()) { System.out.println("B");

}

if (b.isButtonDownHeld()) {

System.out.println("Down"); }

if (b.isButtonUpPressed()) { System.out.println("Up"); }

}

(104)

Linguagem Java - Eventos

// ...

public static void main(String[] args) {

Wiimote[] wiimotes = WiiUseApiManager.getWiimotes(1, true); Wiimote wiimote = wiimotes[0];

wiimote.activateIRTRacking(); wiimote.activateMotionSensing();

wiimote.addWiiMoteEventListeners(new WMSample()); }

(105)

105 Implementação - Nossa aplicação

●

Versão simplificada do

(106)

Implementação - Nossa aplicação

0 1 2 3

4 5 6 7

8 9 10 11

(107)

107 Implementação - Nossa aplicação

Botao

Classes Botao e Jogo

Botao

(108)

Implementação - Nossa aplicação

package wiimoteapp.jogomemoria;

import javax.swing.Icon;

import javax.swing.ImageIcon; import javax.swing.JButton;

public class Botao extends JButton {

private Icon _figura; private Icon _carta;

(109)

109 Implementação - Nossa aplicação

//...

public Botao(Icon figura) { _figura = figura;

String caminho = "/imagens/jogo/standard.gif";

_carta = new ImageIcon(getClass().getResource(caminho)); }

public void setFigura() { setIcon(_figura);

}

public void setCarta() { setIcon(_carta);

}

public Icon getFigura(){ return _figura;

}

// ...

(110)

Implementação - Nossa aplicação

package wiimoteapp.jogomemoria;

// imports …

public class Jogo extends JFrame

implements ActionListener, WiimoteListener {

(111)

111 Implementação - Nossa aplicação

// ...

public static final int QUADRO = 4; private GridLayout grid;

private JPanel painelImagens;

private Object botaoClicado1 = new Object(); private Object botaoClicado2 = new Object(); private Icon imagens[];

private Icon imagens8[]; private Botao botao1; private Botao botao2;

private Botao posicoesFiguras[]; private int posicao;

private boolean primeiroClique = true; private boolean acertou = true; // ...

(112)

Implementação - Nossa aplicação

public Jogo() {

super("Jogo da Memória");

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); grid = new GridLayout(QUADRO, QUADRO, 5, 5); setLocation(200, 10);

conectaWiimote(); embaralha();

painelImagens = new JPanel(); painelImagens.setLayout(grid);

posicoesFiguras = new Botao[(QUADRO * QUADRO)]; posicao = 1;

insere();

(113)

113 Implementação - Nossa aplicação

private void conectaWiimote() { try {

Wiimote[] wiimotes = WiiUseApiManager.getWiimotes(1, true); Wiimote wiimote = wiimotes[0];

wiimote.addWiiMoteEventListeners(this); } catch (Exception e) {

System.out.println("Nenhum Wiimote foi encontrado"); }

}

(114)

Implementação - Nossa aplicação

private void embaralha() { int posicaoNoArray, x, y;

imagens8 = new Icon[(QUADRO * QUADRO)/2]; for ( x = 0; x < ((QUADRO*QUADRO)/2); x++ ){

imagens8[x] = carregaIcone(x); }

imagens = new Icon[(QUADRO*QUADRO)]; for (x = 0; x < 2; x++){

for (y = 0; y < ((QUADRO*QUADRO)/2); y++){ do {

posicaoNoArray = aleatorio(); } while(imagens[posicaoNoArray] != null); imagens[posicaoNoArray] = imagens8[y]; }

(115)

115 Implementação - Nossa aplicação

private Icon carregaIcone(int x) {

String caminho = "/imagens/duke/" + ( x + 1 ) + ".jpg"; return new ImageIcon(getClass().getResource(caminho)); }

private int aleatorio() {

return (int) (Math.random() * (QUADRO*QUADRO)); }

(116)

Implementação - Nossa aplicação

private void insere() {

for (int cont = 0; cont < (QUADRO * QUADRO); cont++){ Botao bt = new Botao(imagens[cont]);

bt.setBackground(Color.gray); bt.setCarta();

bt.setActionCommand("" + cont + ""); bt.addActionListener(this);

posicoesFiguras[cont] = bt;

painelImagens.add(posicoesFiguras[cont]); }

(117)

117 Implementação - Nossa aplicação

private void primeiraJogada(int posicao) {

// Verifica se o jogador errou na jogada anterior if (!acertou){

botao1 = (Botao) botaoClicado1; botao2 = (Botao) botaoClicado2; // "Vira a carta"

botao1.setCarta(); botao2.setCarta(); }

// Modifica botao clicado

botaoClicado1 = posicoesFiguras[posicao]; botao1 = (Botao) botaoClicado1; botao1.setFigura();

// Indica que foi o primeiro clique primeiroClique = !primeiroClique; }

(118)

Implementação - Nossa aplicação

private void segundaJogada(int posicao) {

botaoClicado2 = posicoesFiguras[posicao];

botao2 = (Botao) botaoClicado2; // Verifica se o jogador clicou no mesmo botão

if (botaoClicado2 == botaoClicado1){ acertou = false;

} else { // "Vira a carta" botao2.setFigura();

// Compara com o primeiro botão clicado

if (botao1.getFigura().equals(botao2.getFigura())){ // Acertou, então desabilita os botões

acertou = true;

botao1.setEnabled(false);

botao2.setEnabled(false); } else{

// Não acertou, as figuras são diferentes acertou = false;

}

(119)

119 Implementação - Nossa aplicação

public void actionPerformed(ActionEvent event) {

String num = ((JButton)event.getSource()).getActionCommand(); posicao = Integer.parseInt(num);

if(primeiroClique) {

primeiraJogada(posicao);

System.out.println(posicao); } else {

segundaJogada(posicao); }

atualizaBotao(); }

(120)

Implementação - Nossa aplicação

public void onButtonsEvent(WiimoteButtonsEvent b) {

if (b.isButtonAJustReleased()) {

if(primeiroClique) {

primeiraJogada(posicao);

} else {

segundaJogada(posicao);

}

(121)

121 Implementação - Nossa aplicação

if (b.isButtonUpJustReleased() || b.isButtonDownJustReleased()

|| b.isButtonLeftJustReleased() || b.isButtonRightJustReleased()) { if (b.isButtonUpJustReleased()) {