Projecções Interactivas na Sala deAulas

Vasco Miguel Alves dos Santos

Submetida à Universidade da Beira Interior para a obtenção do grau deMestre em Engenharia Informática

Orientado pelo Prof. Doutor Frutuoso Gomes Mendes da Silva

Departamento de InformáticaUniversidade da Beira Interior

Covilhã, Portugalhttp://www.di.ubi.pt

Agradecimentos

Quero agradecer ao meu orientador, o Prof. Doutor Frutuoso Gomes Mendes da Silva,por me ter dado esta oportunidade, bem como pelo seu apoio e ajuda em todas asetapas, desde a escolha da Tese à escrita da Dissertação.

Quero agradecer também aos restante docentes do Departamento de Informática daUniversidade da Beira Interior que contribuíram, directa ou indirectamente, para queeu atingisse esta etapa.

Aos meus pais, irmão, primos e avôs, em especial ao meu avô José Maria AlvesSainhas que nos deixou à pouco tempo, agradeço por todo o apoio que me deram nosbons e maus momentos.

Por fim, agradeço a todos os meus amigos e colegas que sempre estiveram dispostosa apoiar-me e ajudar-me em tudo o que fosse preciso.

iii

iv

Resumo

As Tecnologias de Informação e Comunicação (TIC) têm um papel chave nos métodosde ensino. O uso de quadros interactivos é uma dessas tecnologias que tem vindoa aumentar nos últimos anos. No entanto, a maioria das soluções disponíveis nomercado têm um preço alto, o que significa que é muito difícil ter um quadro interactivoem cada sala de aula. Recentemente, Johnny Lee mostrou que é possível ter umquadro interactivo em qualquer superfície plana usando apenas um comando Wiimotee um emissor de infravermelhos, i.e., um quadro interactivo de baixo custo (ou WiimoteWhiteboard) disponível por menos de 100e, excluindo o projector. Baseada nestatecnologia, foi criada uma aplicação de suporte às aulas que permite ao professor/ap-resentador tirar apontamentos (notas) sobre apresentações e guardá-las em ficheiro.Deste modo, também é possível disponibilizar estes apontamentos aos estudantes.Assim, os estudantes passam a ter os apontamentos em formato digital, em vez deutilizarem o caderno, permitindo uma maior partilha de recursos e ideias entre estu-dantes e professores. Esta aplicação permite escrever, desenhar e reconhecer textoe formas geométricas. Para além disso, também foi desenvolvida outra aplicação quepermite editar as notas à posterior. Com esta aplicação é possível complementar asnotas tiradas durante uma aula/apresentação, corrigindo, apagando ou adicionandomais notas. Esta aplicação dá mais liberdade ao professor/apresentador pois permiteque as notas melhoradas estejam disponíveis aos alunos. Além disto, estendeu-se ascapacidades do Wiimote Whiteboard tornando possível controlar o computador à dis-tância usando um segundo comando Wiimote. Isto foi alcançado mapeando várias teclaschave nos botões do Wiimote. Deste modo, o professor/apresentador pode controlaro computador à distância, tornando o quadro mais interactivo, i.e., cancela quase natotalidade a dependência que um utilizador tem do rato e teclado do computador. Istopermite ao utilizador estar perto do quadro onde, além de o poder usar sem limitações,também pode controlar à distância o que quer mostrar no computador (e.g., Powerpoint,

v

imagens, vídeos, etc.). Por fim, e dado que um normal quadro interactivo é normalmenteacompanhado de software educativo, foi desenvolvida uma aplicação visual de suporteàs aulas de Introdução à Programação. Esta aplicação permite criar fluxogramas egerar o correspondente pseudo-código e código fonte em Linguagem C e, deste modo,permite ensinar os fundamentos básicos da Programação.

vi

Palavras chave

Projecção Interactiva, Quadro interactivo de baixo custo, Wiimote, Interacção Humanacom o Computador, Wiimote Whiteboard.

vii

Conteúdo

Agradecimentos iii

Resumo v

Palavras chave vii

Conteúdo ix

Lista de Figuras xi

Lista de Tabelas xiii

Acrónimos xv

1 Introdução 1

1.1 Objectivo da tese . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Estrutura da dissertação . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Trabalhos relacionados 5

2.1 Impacto das TIC no ensino . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2 Quadros Interactivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.3 Wiimote Whiteboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Trabalho desenvolvido 15

3.1 Implementação do sistema de projecções interactivas . . . . . . . . . . . 15

3.2 Aplicação iiNote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

ix

x CONTEÚDO

3.2.1 Utilização do elemento InkCanvas . . . . . . . . . . . . . . . . . . 23

3.2.2 Reconhecimento de formas geométricas . . . . . . . . . . . . . . 25

3.2.3 Captura das anotações . . . . . . . . . . . . . . . . . . . . . . . . 28

3.2.4 Exportação das anotações para um documento XPS . . . . . . . 32

3.3 Aplicação eeNote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

3.4 Aplicação iiProgramming . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3.4.1 Utilização da classe UserControl . . . . . . . . . . . . . . . . . . 45

3.4.2 Implementação do drag-and-drop . . . . . . . . . . . . . . . . . . 46

4 Conclusões e trabalho futuro 51

Referências 53

Lista de Figuras

2.1 Quadro interactivo de projecção frontal (retirado de [1]). . . . . . . . . . 8

2.2 Quadro interactivo de projecção traseira (retirado de [2]). . . . . . . . . 8

2.3 Painel plano (retirado de [3]). . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.4 Sistema eBeam. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.5 Sistema mimio Interactive. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.6 Caneta com emissor de IV. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.7 Distância do Wiimote em relação à projecção. . . . . . . . . . . . . . . . 12

2.8 Posicionamento do Wiimote junto ao projector (retirado de [4]). . . . . . 12

2.9 1o ponto de calibração da área de projecção. . . . . . . . . . . . . . . . . 13

2.10 Janela da aplicação Wiimote Whtiteboard. . . . . . . . . . . . . . . . . . 13

3.1 Mapeamento de teclas no Wiimote. . . . . . . . . . . . . . . . . . . . . . 16

3.2 Exemplo de utilização do sistema. . . . . . . . . . . . . . . . . . . . . . . 20

3.3 (a) aplicação iiNote e (b) teclado virtual . . . . . . . . . . . . . . . . . . 21

3.4 (a) cores e tamanhos das anotações e (b) uso da borracha . . . . . . . . 21

3.5 (a) número de notas em memória e (b) exportar notas para um documentoXPS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.6 Documento XPS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.7 Guardar as notas em ficheiro. . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.8 Formas geométricas reconhecidas. . . . . . . . . . . . . . . . . . . . . . . 25

3.9 Documento XPS com texto reconhecido. . . . . . . . . . . . . . . . . . . 33

3.10 Aplicação eeNote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

3.11 Seleccionar uma anotação e redimensioná-la. . . . . . . . . . . . . . . . 39

xi

xii LISTA DE FIGURAS

3.12 Aplicação iiProgramming. . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

3.13 Figuras geométricas utilizadas num fluxograma. . . . . . . . . . . . . . . 41

3.14 Declaração da função factorial. . . . . . . . . . . . . . . . . . . . . . . . . 42

3.15 Algoritmo da função recursiva factorial. . . . . . . . . . . . . . . . . . . . 43

3.16 Guardar fluxograma como imagem. . . . . . . . . . . . . . . . . . . . . . . 44

3.17 UserControl UCInstrucao.xaml. . . . . . . . . . . . . . . . . . . . . . . . . 45

Lista de Tabelas

2.1 Comparação de características de cinco quadros interactivos (retiradode [5]). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3.1 Códigos virtuais das teclas . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.2 Códigos virtuais dos eventos do rato . . . . . . . . . . . . . . . . . . . . . 18

xiii

Acrónimos

API: Application Programming Interface

IU: Interface do Utilizador

IV: Infravermelho

LCD: Liquid Crystal Display

OCDE: Organização de Cooperação e Desenvolvimento Económico

PC: Personal Computer

PDF: Portable Document Format

PISA: Programme for International Student Assessment

SDK: Software Development Kit

TIC: Tecnologias de Informação e Comunicação

UE: União Europeia

Wiimote: Wii Remote Control

WPF: Windows Presentation Foundation

XAML: eXtensible Application Markup Language

XPS: XML Paper Specification

xv

Capítulo 1

Introdução

Hoje em dia, o uso das Tecnologias de Informação e Comunicação (TIC) tem tido, nasociedade actual, um papel fundamental nas escolas e nos métodos de ensino. Orecurso a apresentações (e.g., em PowerPoint), a e-books, a quadros interactivos, aoensino à distância através de vídeo-conferência, a software educacional, etc., em vezdos habituais quadros pretos e livros de papel, tem-se tornado, cada vez mais, numarotina do dia-a-dia. Os apontamentos passaram a ser armazenados em formato digital,em vez do caderno, permitindo uma maior partilha de recursos e ideias entre alunose professores. Em 2001, os países da União Europeia (UE) definiram, como objectivo,aumentar a qualidade e a eficácia dos sistemas de educação e formação na UE, doqual resultaram duas questões-chave [6]:

- “Assegurar uma gama adequada de equipamento e de software pedagógico a fimde optimizar a aplicação das TIC e dos processos de aprendizagem electrónica(e-Learning) nas práticas de ensino e de formação”;

- “Incentivar a melhor utilização possível das técnicas inovadoras de ensino eaprendizagem baseadas nas TIC”.

Segundo este objectivo, os países da UE devem garantir que tanto os estabelecimen-tos de ensino, como os centros de aprendizagem, disponham de suficientes equipamen-tos, recursos multimédia e programas informáticos educativos e formativos de elevadaqualidade. Devem também ter ligações de alta velocidade de modo a que os estu-dantes possam tirar verdadeiro proveito dos recursos disponíveis e das possibilidadesinteractivas da Internet [7].

1

2 CAPÍTULO 1. INTRODUÇÃO

Para atingir os objectivos propostos pelos países da UE em 2001, em Portugal foicriado, no ano de 2007, o Plano Tecnológico da Educação, do qual consta o ProjectoKit Tecnológico Escola [8]. O Projecto Kit Tecnológico Escola tem como objectivopromover a utilização de tecnologia no processo de ensino, dotando todas as escolasde um número adequado de computadores, de impressoras, de vídeo projectores e dequadros interactivos, de modo a alcançar os seguintes objectivos:

- Atingir o rácio de dois alunos por computador em 2010;

- Assegurar que nenhuma escola apresenta um rácio de alunos por computadorsuperior a cinco;

- Assegurar um vídeo projector em todas as salas de aula;

- Assegurar um quadro interactivo em cada três salas de aula;

- Assegurar a renovação dos equipamentos, garantindo que a proporção de equipa-mentos com antiguidade superior a três anos não ultrapasse os 20%;

- Assegurar a disponibilização de computadores e de impressoras para utilizaçãolivre na escola, atingindo um rácio de cinco alunos por cada computador de acessolivre e de três professores por cada computador de acesso livre.

Para atingir estes objectivos, o Estado Português definiu como principais medidas ofornecimento às escolas com 2.o e 3.o ciclos do ensino básico ou com ensino secundáriode 310 000 computadores, 9000 quadros interactivos e 25 000 vídeo projectores até2010. Para isso, disponibilizou 9.000.000e [9] com vista à aquisição dos serviços ebens necessários ao fornecimento, instalação e manutenção de quadros interactivospara essas escolas, de modo a obter um rácio de 1 quadro interactivo por cada 3 salasde aula em 2010.

1.1 Objectivo da tese

O objectivo desta tese foi projectar e implementar um sistema de suporte às aulas quepermita ter projecções interactivas, criando um sistema de quadro interactivo de baixocusto, tendo como base o trabalho desenvolvido por Johnny Lee. O sistema deveriater aplicações que permitissem ao docente desenhar e/ou anotar directamente sobre o

1.2. ESTRUTURA DA DISSERTAÇÃO 3

que é projectado, bem como, controlar o computador sem estar dependente do rato edo teclado deste.

1.2 Estrutura da dissertação

Para além deste capitulo, esta dissertação está estruturada do seguinte modo:

- No capitulo 2 é feita uma descrição das tecnologias existentes, bem como, apre-sentados alguns trabalhos relacionados;

- No capitulo 3 é descrito o sistema de projecções interactivas implementado, bemcomo, as aplicações de suporte ao sistema;

- No capitulo 4 são apresentadas as conclusões e o trabalho futuro.

4 CAPÍTULO 1. INTRODUÇÃO

Capítulo 2

Trabalhos relacionados

2.1 Impacto das TIC no ensino

As TIC, em particular os quadros interactivos, estão cada vez mais integradas nossistemas de ensino dos países modernos. Em 2006, um estudo realizado em Inglaterra[10] apontou qual o impacto e as barreiras que surgiram no uso das TIC, mais especi-ficamente dos quadros interactivos, no ensino. Ao nível dos estudantes:

- As TIC têm um impacto positivo no desempenho educacional nas escolas primárias,em particular no Inglês, mas menos nas Ciências, com a excepção da Matemática;

- O uso das TIC aumenta o desempenho dos alunos em Inglês (como língua mãe),Ciências, Desenho e Tecnologia entre as idades dos 7 e 16 anos, especialmentenas escolas primárias;

- Nos países da OCDE, existe uma associação positiva entre o tempo de uso dasTIC e o desempenho dos alunos nos testes de Matemática do PISA (Program forInternational Student Assessment);

- Escolas com bons recursos de TIC alcançam melhores resultados que aquelasmal equipadas;

- A introdução de quadros interactivos levou a um maior aumento do desempenhodos estudantes nos exames nacionais de Inglês, Matemática e Ciências, do queas escolas sem quadros interactivos.

5

6 CAPÍTULO 2. TRABALHOS RELACIONADOS

Além disto, foram também observados benefícios nos estudantes ao nível da motivação,competências, aprendizagem independente e trabalho de equipa.

Ao nível dos professores, o estudo mostrou um considerável número de provas doimpacto das TIC:

- Um alto entusiasmo;

- Eficiência e colaboração elevada;

- Os quadros interactivos fazem a diferença nos aspectos de interacção na sala deaulas;

- Aumento das competências dos professores nas TIC.

Contudo, o estudo também identificou barreiras na adopção das TIC nas escolas:

- Ao nível do professor: A fraca competência de TIC dos professores, baixa mo-tivação e falta de confiança para usar novas tecnologias no ensino são determi-nantes nos seus níveis de compromisso nas TIC.

- Ao nível da escola: O acesso limitado às TIC (devido à falta ou pobre organizaçãode recursos TIC), fraca qualidade e manutenção inadequada de hardware bemcomo software educacional inadequado irá também definir o nível de utilizaçãodas TIC pelos professores. Ainda por mais, a falta de uma dimensão de TIC nasestratégias das escolas e as suas experiências limitadas com actividades/pro-jectos suportadas pelas TIC, também é decisivo para determinar os níveis deutilização destas pelos professores.

- Ao nível do sistema: Em alguns países é o próprio sistema educacional e as suasestruturas rígidas que impedem a integração das TIC nas actividades de ensinodo dia-a-dia.

2.2 Quadros Interactivos

Um quadro interactivo é um ecrã sensível ao toque que funciona em conjunto comum computador e um projector [11]. O primeiro quadro interactivo foi construído pelaSMART Technologies Inc. em 1991. Existem três tipos de quadros interactivos: quadrosde projecção frontal, quadros de projecção traseira [12], e ecrãs planos [13].

2.2. QUADROS INTERACTIVOS 7

Os quadros interactivos de projecção frontal (ver Figura 2.1) têm um vídeo projectorem frente ao quadro. Este tipo de quadro é muito mais barato que os quadrosinteractivos de projecção traseira. As desvantagens de quadros deste tipo são [5]:

1. o facto de quem está a apresentar ter de permanecer em frente ao quadro fazcom que o seu corpo projecte sobras sobre o quadro;

2. se o apresentador estiver a falar para a audiência está sujeito a ser encadeadopelo feixe do projector;

3. normalmente não trazem o projector incluído.

No entanto, alguns quadros interactivos já vêm com o projector incluído colocado numaposição superior com um ângulo de projecção de aproximadamente 45o de modo aanular a primeira desvantagem.

Os quadros interactivos de projecção traseira (ver Figura 2.2) têm o projector colo-cado atrás da superfície do quadro de modo a que não ocorram sombras nem que oapresentador seja encadeado com a luz do projector. No entanto, este tipo de quadrosinteractivos é mais caro e muito volumoso, o que impossibilita a sua montagem numaparede. Entretanto, é possível embuti-los numa parede de modo a não ocupar muitoespaço.

Os painéis planos [13] (ver Figura 2.3 ) são quadros interactivos em que a área deinteracção é um ecrã LCD ou plasma.

Recentemente, tem havido um grande interesse na educação para inserir os quadrosinteractivos nos métodos de ensino, tendo surgido aspectos positivos em relação à suautilização [5]:

- Facilitam a colaboração com colegas e parceiros;

- Recorre-se a desenhos para que a turma possa visualizar em conjunto, pois ainformação visual é partilhada e entendida mais facilmente;

- Maior motivação dos alunos, pois estes gostam de interagir fisicamente com oquadro, manipulando texto e imagens, fornecendo por isso, mais oportunidadespara interacção e discussão;

- São notadas também vantagens psicológicas como o aumento do planeamentoe preparação, na marcação e avaliação, em guardar e editar lições, no estilo de

8 CAPÍTULO 2. TRABALHOS RELACIONADOS

Figura 2.1: Quadro interactivo de projecção frontal (retirado de [1]).

Figura 2.2: Quadro interactivo de projecção traseira (retirado de [2]).

2.2. QUADROS INTERACTIVOS 9

Figura 2.3: Painel plano (retirado de [3]).

ensino, na sensibilização de estilos de ensino, no planear para o desenvolvimentocognitivo, na clara representação visual de conceitos e nas actividades queencorajam uma abordagem de pensamento activa;

- Compromisso: Há um aumento na motivação, credibilidade, validade e focalizaçãoda turma;

- Aspectos socioculturais: Contribuem para uma melhor interacção social e ummelhor trabalho de equipa;

- Tecnologia: O recurso a drag-and-drop, esconder-e-revelar, faça-a-correspondên-cia e a utilização de movimento são boas maneiras de interacção entre os alunose o quadro interactivo.

No entanto, devido às grandes limitações dos quadros interactivos, tais como oalto preço (ver Tabela 2.1) e a mobilidade, existe uma necessidade urgente de novastecnologias para encontrar soluções que tenham um nível de desempenho similar, mascom um custo muito mais baixo. Uma solução existente é o sistema eBeam [14] (verFigura 2.4). O dispositivo receptor do sistema eBeam é um dispositivo compacto,portátil e fácil de utilizar que torna qualquer superfície lisa, ou quadro branco, numquadro interactivo. O sistema interactivo eBeam pesa menos de 200g, é instaladoem minutos, é amovível e tem um preço de 665e sem o projector. Uma soluçãoidêntica ao sistema eBeam que apareceu recentemente no mercado é o sistema mimioInteractive (ver figura 2.5 [15]) que custa cerca de 595e sem o projector [16]. Apesardestes dispositivos já terem um preço em conta, comparado com um quadro interactivo

10 CAPÍTULO 2. TRABALHOS RELACIONADOS

Figura 2.4: Sistema eBeam.

tradicional, ainda têm um preço considerável, pois quando se pensa em várias salas deaula o preço ainda é elevado (i.e., no salas×600e).

Modelo Reconhecimento de escrita Projecção Projector incluído PreçoeBeam Integral 65 Não Frontal Não 790e

InterWrite 1071 Sim Frontal Não 1142eActivboard 95 studio Sim Frontal Não 1890e

SMARTBoard ESP680-N Sim Frontal Sim 3390eSMARTBoard 2000i Sim Traseira Sim 7090e

Tabela 2.1: Comparação de características de cinco quadros interactivos (retirado de [5]).

2.3 Wiimote Whiteboard

Para fazer face às limitações dos quadros interactivos apresentadas no capitulo anterior(i.e., preço alto e mobilidade) surgiu recentemente, uma solução baseada numa canetacom um emissor de infravermelhos (IV) e uma câmara de IV. Neste caso a caneta deIV que feita com os componentes mais básicos fica com um custo a rondar os 5e (verfigura 2.6) e, para a câmara, podemos usar o comando Wiimote, que custa cerca de40e. Este sistema de nome Wiimote Whiteboard foi desenvolvido por Johnny Lee eteve uma grande divulgação pela Internet [17].

O Wiimote é o comando da consola Nintendo Wii e pode ser ligado a qualquer

2.3. WIIMOTE WHITEBOARD 11

Figura 2.5: Sistema mimio Interactive.

Figura 2.6: Caneta com emissor de IV.

computador através de Bluetooth, tal como um telemóvel. Entre várias características,o comando tem uma câmara de IV incorporada, capaz de detectar até quatro pontosemissores de IV, com uma resolução de 1024x768 pixeis, uma taxa de actualização de100Hz e um ângulo de visão de 45o na horizontal [5, 17, 18]. Considerando a Figura2.7 e usando a equação 2.1 é possível calcular a distância a que o Wiimote deve estarda projecção.

tan 22.5o = 0.5lx ⇐⇒ x = 1.2l (2.1)

Na equação 2.1, x é a distância do Wiimote à superfície da projecção e l a largura daárea de projecção. Assim, podemos concluir que o Wiimote deve ser colocado a umadistância igual a 1.2× a largura da projecção. Entretanto, a câmara sofre do mesmoproblema dos projectores, isto é, se o apresentador estiver entre a câmara e o emissorde IV, poderá detectar a posição do emissor incorrectamente, ou mesmo não detectá-la. Se a projecção for frontal, e o projector for colocado numa posição alta, colocar oWiimote junto do projector (ver Figura 2.8) é uma boa solução.

O sistema desenvolvido por Johnny Lee permite ao apresentador calibrar a área deprojecção sempre que o entender, usando quatro pontos de referência (ver figura 2.9).O sistema indica ainda alguma informação sobre o comando (ver figura 2.10) tal como,o estado da bateria, o total de fontes IV detectadas e a utilização de rastreamento.

12 CAPÍTULO 2. TRABALHOS RELACIONADOS

Figura 2.7: Distância do Wiimote em relação à projecção.

Figura 2.8: Posicionamento do Wiimote junto ao projector (retirado de [4]).

2.3. WIIMOTE WHITEBOARD 13

Figura 2.9: 1o ponto de calibração da área de projecção.

Figura 2.10: Janela da aplicação Wiimote Whtiteboard.

Também permite ao apresentador configurar a suavidade da detecção do emissor deIV, bem como activar ou desactivar o controlo do cursor. No entanto, este sistema temuma grande limitação: só permite emular o evento de clique do botão esquerdo do rato.Assim um dos objectivos deste trabalho foi também tentar eliminar esta limitação.

14 CAPÍTULO 2. TRABALHOS RELACIONADOS

Capítulo 3

Trabalho desenvolvido

O trabalho desenvolvido foi a implementação de um sistema de projecções interactivas,usando como base o trabalho de Johnny Lee. Além disso, foi desenvolvida uma aplicaçãoque permite controlar o computador à distância, contribuindo assim para tornar asprojecções mais interactivas.

Foram assim desenvolvidas duas aplicações para tornar as projecções interactivas(ou seja, a aplicação iiNote e a aplicação eeNote), bem como, uma aplicação de suporteàs aulas de Introdução à Programação (a aplicação iiProgramming). A aplicaçãoiiNote permite tirar apontamentos sobre o que é apresentado enquanto a aplicaçãoeeNote permite editar as anotações capturadas pela aplicação iiNote. A aplicaçãoiiProgramming é uma aplicação visual que permite gerar pseudo-código e código fontecom base no fluxograma de um algoritmo.

3.1 Implementação do sistema de projecções interactivas

Para anular a limitação do sistema desenvolvido por Johnny Lee, que apenas emula oclique do botão esquerdo do rato, e para que quem esteja a fazer uma apresentaçãopossa estar fisicamente próxima da superfície de projecção (à semelhança do tradicionalquadro), bem como não estar dependente do teclado e do rato do computador, foidesenvolvida uma aplicação em C# que visa anular estas limitações do sistema.

A aplicação permite ao apresentador, através de um segundo Wiimote, ter o controlosobre algumas teclas chaves do teclado, bem como dos botões esquerdo e direito dorato (ver Figura 3.1). Esta aplicação usa a API WiimoteLib [19] que permite a uma

15

16 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Figura 3.1: Mapeamento de teclas no Wiimote.

aplicação .NET (C# e VB.NET) ligar-se e comunicar com um ou vários Wiimotes. Parapoder usar os eventos do teclado e rato foi necessário importar as funções da bibliotecauser32 contidas no ficheiro user32.dll:

- Para os eventos do teclado:

[ D l l I m p o r t ( " user32 . d l l " ) ]pub l i c s t a t i c e x t e r n vo id keybd_event ( byte bVk , byte

bScan , long dwFlags , long dwEx t ra In f o ) ;

Onde [20]:

• bVk representa o código da tecla virtual (ver tabela 3.1 para os códigosutilizados [21]);

• bScan representa o código do hardware de entrada para a tecla, neste caso0x45;

• dwFlags especifica vários aspectos da operação da função, podendo sendoum ou mais dos seguintes valores: (1) KEYEVENTF_EXTENDEDKEY, ocódigo bScan foi precedido por um prefixo de byte com o valor 0xE0, ou (2)KEYEVENTF_KEYUP (0x02), a tecla está a ser solta.

- Para os eventos do rato:

[ D l l I m p o r t ( " user32 . d l l " ) ]

3.1. IMPLEMENTAÇÃO DO SISTEMA DE PROJECÇÕES INTERACTIVAS 17

s t a t i c e x t e r n boo l GetCursorPos ( r e f System . Drawing . Pointl pPo in t ) ;

[ D l l I m p o r t ( " user32 . d l l " ) ]p r i v a t e s t a t i c e x t e r n vo id mouse_event ( long dwFlags ,

long dx , long dy , long dwData , long dwEx t ra In f o ) ;

Onde:

• GetCursorPos é a função que permite obter as coordenadas X e Y do ecrã docursor do rato e armazená-las numa variável do tipo System.Drawing.Point;

• mouse_event é a função que permite invocar os eventos do rato, onde [22]:

◦ dwFlags representa o tipo de evento do rato (ver tabela 3.2 para oseventos utilizados [23]);

◦ dx e dy representam as coordenadas X e Y do ecrã do cursor do rato;

◦ dwData representa o movimento do scroll do rato;

◦ dwExtraInfo especifica valor adicional associado ao evento do rato.

Nome simbólico da constante Valor (hexadecimal) Equivalentes do teclado

VK_TAB 0x09 Tecla TABVK_RETURN 0x0D Tecla ENTER

VK_LEFT 0x25 Tecla direccional EsquerdaVK_UP 0x26 Tecla direccional Cima

VK_RIGHT 0x27 Tecla direccional DireitaVK_DOWN 0x28 Tecla direccional BaixoVK_LWIN 0x5B Tecla WindowsVK_ESC 0x1B Tecla ESCAPE

VK_APPS 0x5D Tecla Aplicações

Tabela 3.1: Códigos virtuais das teclas

Estando definidos os códigos das teclas virtuais e dos eventos do rato, estabelece-sea ligação ao Wiimote através da WiimoteLib e consulta-se o seu estado para, então,chamar as funções mouse_event e keybd_event. Para fazer a ligação ao Wiimoteusando a WiimoteLib:

18 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Nome simbólico da constante Valor (hexadecimal) Equivalentes do rato

MOUSEEVENTF_LEFTDOWN 0x02 Botão esquerdo pressionadoMOUSEEVENTF_LEFTUP 0x04 Botão esquerdo solto

MOUSEEVENTF_RIGHTDOWN 0x08 Botão direito pressionadoMOUSEEVENTF_RIGHTUP 0x10 Botão direito solto

Tabela 3.2: Códigos virtuais dos eventos do rato

- É inicializado um objecto do tipo Wiimote;

Wiimote wm = new Wiimote ( ) ;

- Estabelece-se a ligação;

wm . Connect ( ) ;

- É atribuído o evento wm_WiimoteChanged que é chamado sempre que o estadodo Wiimote é actualizado;

wm . WiimoteChanged += wm_WiimoteChanged ;

- Por fim, é definido qual o tipo de relatório que o Wiimote vai gerar, neste casoo tipo Buttons. Assim, o relatório gerado devolve os dados apenas acerca dosbotões [24]. Também é definido, por true ou false, se o relatório é constantementegerado, ou apenas quando o estado do Wiimote sofre alterações.

wm . SetReportType ( I npu tRepo r t . Buttons , f a l s e ) ;

Estando o Wiimote devidamente ligado ao computador, é no evento wm_WiimoteChangedque é invocada a função UpdateWiimoteChanged onde são chamadas as funções mouse_-event e keybd_event, dependo do botão do Wiimote que é pressionado:

p r i v a t e vo id wm_WiimoteChanged ( o b j e c t sender ,WiimoteChangedEventArgs args )

{Begin Invoke ( new UpdateWiimoteStateDelegate (

UpdateWiimoteChanged ) , a rgs ) ;}

3.2. APLICAÇÃO IINOTE 19

Na função UpdateWiimoteStateDelegate é comparada a informação do estado actualdo Wiimote com o estado anterior, sendo que se forem diferentes, significa que o uti-lizador pressionou um botão do Wiimote. Caso isto aconteça, é então chamada a funçãomouse_event ou keybd_event, dependendo do botão do Wiimote que é pressionado.Por exemplo, se o utilizador pressiona o botão 1 do Wiimote, queremos que o sistemaentenda como o utilizador ter pressionado a tecla ENTER do teclado:

i f ( ! l a s t W i i S t a t e . But tonSta te . One && ws . But tonSta te . One )keybd_event (VK_RETURN, 0x45 , 0 , 0 ) ;i f ( l a s t W i i S t a t e . But tonSta te . One && ! ws . But tonSta te . One )keybd_event (VK_RETURN, 0x45 , KEYEVENTF_KEYUP, 0 ) ;l a s t W i i S t a t e . But tonSta te . One = ws . But tonSta te . One ;

Com esta aplicação a complementar o Wiimote Whiteboard, o apresentador podecontrolar o computador à distância e tornar, deste modo, o quadro mais interactivo (verFigura 3.2). Temos assim implementado, ao nível do hardware, um sistema de projecçõesinteractivas. No entanto, para que o sistema funcione do mesmo modo que um quadrointeractivo normal, é necessário ter software idêntico ao que vem incluído nos quadrosinteractivos. Por exemplo, uma aplicação que permita a quem esteja a utilizar o quadrointeractivo possa desenhar e tirar apontamentos sobre o que é apresentado, de modoa que o quadro interactivo seja usado de forma similar a um quadro normal. Foramentão desenvolvidas três aplicações para suporte do sistema de projecções interactivas,aplicações essas que serão descritas nas próximas secções.

3.2 Aplicação iiNote

Para que um quadro interactivo possa ser usado como um quadro normal que permiteescrever sobre o que é apresentado, é normalmente disponibilizado software que tornaisso possível. Uma aplicação disponível para utilização com o Wiimote Whiteboardque permita tirar apontamentos sobre o que é apresentado, bem como utilizar algumasfuncionalidades do computador, tal como aceder a um teclado virtual, é a aplicaçãoSmoothboard [25]. Sendo assim, foi desenvolvida uma aplicação similar (a aplicaçãoiiNote) que contém um diverso leque de funcionalidades que o apresentador (utilizador)pode usar, tais como:

- permite escrever sobre o que está a ser apresentado (Figura 3.3a);

20 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Figura 3.2: Exemplo de utilização do sistema.

- permite ter acesso a um teclado virtual (Figura 3.3b);

- permite definir as cores e tamanhos para as anotações (Figura 3.4a);

- permite usar uma borracha para apagar anotações (Figura 3.4b), bem como umbotão para limpar todas as anotações;

- Histórico de acções, de modo a que o utilizador possa desfazer/refazer acções;

- Capturar as anotações feitas durante a apresentação, armazenando-as em memória,informando o apresentador do número de notas em memória (Figura 3.5a), bemcomo limpar as notas em memória;

- Exportar as notas em memória para um documento XPS (XML Paper Specifica-tion) [26] (Figura 3.5b e 3.6) e/ou guardá-las num ficheiro com a extensão .notapara posterior edição (Figura 3.7) com a aplicação eeNote também desenvolvida.

Esta aplicação foi desenvolvida em WPF (Windows Presentation Foundation). OWPF é um subsistema gráfico para renderizar interfaces do utilizador (IU) em apli-cações Windows, tendo sido disponibilizado pela primeira vez como parte da .NETFramework 3.0 [27]. O WPF é construído sobre DirectX, o que disponibiliza aceleraçãode hardware e permite interfaces modernas para o utilizador tal como transparência,gradientes e transformações. O WPF tem como objectivo unir um número de serviços de

3.2. APLICAÇÃO IINOTE 21

(a) (b)

Figura 3.3: (a) aplicação iiNote e (b) teclado virtual

(a) (b)

Figura 3.4: (a) cores e tamanhos das anotações e (b) uso da borracha

(a) (b)

Figura 3.5: (a) número de notas em memória e (b) exportar notas para um documento XPS

22 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Figura 3.6: Documento XPS.

Figura 3.7: Guardar as notas em ficheiro.

3.2. APLICAÇÃO IINOTE 23

aplicações: IU, desenho 2D e 3D, documentos fixos e adaptáveis, tipografia avançada,imagens vectoriais, imagens bitmap, animações, ligação de dados, áudio e vídeo. OWPF fornece um modelo de programação consistente para criar aplicações e forneceum clara separação entre a IU e o domínio lógico, sendo que a IU é definida usandouma nova linguagem, conhecida como XAML, e o domínio lógico é definido em C#. Dasvárias funcionalidades disponibilizadas pelo WPF, destaca-se a classe InkCanvas, apossibilidade de ter janelas no topo e a ocupar toda a área do ecrã, bem como utilizara API InkAnalysis para Tablet PCs.

A aplicação iiNote é constituída pelos seguintes ficheiros:

- App.xaml e App.xaml.cs: Onde são definidas algumas propriedades da aplicação;

- Quadro.xaml: Onde é definida a IU do quadro onde o utilizador irá anotar;

- Quadro.xaml.cs: Onde são definidos alguns métodos que interagem com oselementos definidos na IU especificada no ficheiro Quadro.xaml;

- Comandos.xaml: Onde é definida a IU da janela principal da aplicação, ondeestão os vários botões, tais como o marcador, a borracha e o teclado virtual;

- Comandos.xaml.cs: Onde são definidos alguns métodos e os eventos dos ele-mentos definidos na IU especificada no ficheiro Comandos.xaml;

- Notas.cs e Nota.cs: Onde estão definidos alguns objectos que são utilizadospela aplicação.

3.2.1 Utilização do elemento InkCanvas

O InkCanvas é um elemento que pode ser usado para receber e mostrar tinta digital,usando uma caneta digital ou o rato e, através de um digitalizador, produzir desenhos[28]. Os desenhos criados são representados como objectos do tipo Stroke e podem sermanipulados, tanto através de um input do utilizador, como programando na própriaaplicação. O InkCanvas permite aos utilizadores modificar ou apagar um desenhoexistente. Para permitir ao utilizador fazer as anotações sobre o que é apresentado,recorreu-se à utilização de uma janela contendo um elemento do tipo InkCanvas, janelaessa onde é definida transparência para permitir ao utilizador ver o que está a serapresentado enquanto faz a anotação, bem como colocar a janela no topo de todas as

24 CAPÍTULO 3. TRABALHO DESENVOLVIDO

outras e de modo a ocupar toda a área do ecrã. Utilização do InkCanvas no ficheiroQuadro.xaml:

<Window . . . A l lowsTransparency=" True " Background=" Transparen t "WindowState=" Maximized " ShowInTaskbar=" False "><Grid x:Name=" LayoutRoot ">

<! Para dar um aspec to esbranquiçado ao quadro ><Rectangle F i l l=" White " Opaci ty=" 0 . 195 " /><InkCanvas x:Name=" whi teboard " Background=" { x : N u l l } " />

</ Grid></ Window>

Esta janela é colocada visível no evento correspondente ao botão marcador sempreque este é pressionado pelo utilizador. Evento do botão marcador no ficheiro Coman-dos.xaml.cs:

pub l i c Quadro q = n u l l ;p r i v a t e vo id marcador_C l i ck ( o b j e c t sender , RoutedEventArgs e ){

/ / se o quadro ainda não t i nha s ido i n i c i a l i z a d o , éi n i c i a l i z a d o um novo

i f ( q == n u l l ){

/ / d e f i n e a co r e tamanho do marcador con forme os v a l o rs e l e c c i o n a d o s

s t r i n g s = co r . Se lec tedValue . ToSt r ing ( ) ;System . Windows . Media . Co l o rConve r t e r cc = new System .

Windows . Media . Co l o rCon ve r t e r ( ) ;System . Windows . Media . Co lo r c o l o r = ( System . Windows . Media .

Co lo r ) cc . ConvertFrom ( s ) ;q = new Quadro ( co l o r , ( tamanho . Se l e c t ed Index + 1 ) ∗ 2 ) ;

/ / a t r i b u i um even to para quando o u t i l i z a d o r s o l t a r obotão esquerdo do r a t o

q . whi teboard . MouseLeftButtonUp += newMouseButtonEventHandler ( whiteboard_MouseLef tButtonUp ) ;

/ / mostra o quadro

3.2. APLICAÇÃO IINOTE 25

Figura 3.8: Formas geométricas reconhecidas.

q . Show ( ) ;}/ / senão , mostra a t e l a e d e s l i g a o modo Apagare lse

{q . Show ( ) ;

q . setModeEraserOf f ( ) ;}

}

Cada desenho (ou anotação) feito no InkCanvas pelo utilizador é armazenado numobjecto do tipo Stroke, sendo depois esses desenhos armazenados num objecto do tipoStrokeCollection no InkCanvas.

3.2.2 Reconhecimento de formas geométricas

A aplicação tem implementada um reconhecedor de formas geométricas de modo a que,no caso de o utilizador desenhar um rectângulo, por exemplo, esse mesmo rectânguloseja desenhado na perfeição (Figura 3.8). Este reconhecedor de formas geométricasfoi implementado usando a API InkAnalysis. Esta API está disponível como partedo SDK Windows R© que contém os componentes WinFX R© [29]. A API InkAnalysiscombina o reconhecimento de tinta, também conhecido como reconhecimento de escrita,análise de formas e classificação, que permite fazer o reconhecimento semanticamentede partes significativas tais como parágrafos, palavras ou desenhos. Sempre queo utilizador deixa de desenhar (i.e., solta o botão esquerdo do rato), é invocado oevento whiteboard_MouseLeftButtonUp (apresenta-se de seguida o seu código), no

26 CAPÍTULO 3. TRABALHO DESENVOLVIDO

qual será adicionada a nova acção ao histórico e será feito o reconhecimento de formasgeométricas, ou seja, é feito o reconhecimento de todas as formas reconhecíveis pelaAPI InkAnalysis, com a excepção de círculos, elipses e formas desconhecidas, de modoa não causar problemas quando o utilizador escreve texto. Evento whiteboard_Mouse-LeftButtonUp no ficheiro Comandos.xaml.cs:

p r i v a t e vo id whiteboard_MouseLef tButtonUp ( o b j e c t sender ,MouseButtonEventArgs e )

{ . . ./ / i n i c i a l i z a o a n a l i s a d o r para fo rmas geomét r i casI n kAna ly ze r ana ly ze r = new I n kAna ly ze r ( q . D i spa t che r ) ;ana ly ze r . AddStrokes ( q . wh i teboard . S t rokes ) ;ana ly ze r . SetStrokesType ( q . whi teboard . Strokes , StrokeType .

Drawing ) ;ana ly ze r . Analyze ( ) ;

/ / p rocu ra fo rmas geomét r i casContex tNodeCo l l e c t i on paras = ana ly ze r . FindNodesOfType (

ContextNodeType . InkDrawing ) ;

/ / para cada forma geomét r i ca encont radaf o r e a c h ( InkDrawingNode drawingNode in paras ){

/ / ob t e r o nome da forma geomét r i cas t r i n g name = drawingNode . GetShapeName ( ) ;

/ / se a forma não f o r nem Outro nem C i r c u l o nemEl ip se

i f ( name != " Other " && name != " C i r c l e " && name !=" E l l i p s e " )

{

/ / Obter os pontos de r e f e r ê n c i aP o i n t C o l l e c t i o n pontosquentes =

drawingNode . HotPoints ;

3.2. APLICAÇÃO IINOTE 27

/ / Colecção de pontos onde são armazenadosos pontos de r e f e r ê n c i a

S t y l u s P o i n t C o l l e c t i o n pontosshape = newS t y l u s P o i n t C o l l e c t i o n ( ) ;

S ty lu sPo in t ponto = new Sty lusPo in t ( ) ;

/ / Copia os pontos de r e f e r ê n c i a e c o l o c a rnuma co l e c ção de pontos

f o r ( i n t i = 0 ; i < pontosquentes . Count ; i++)

{ponto . X = pontosquentes [ i ] . X ;ponto . Y = pontosquentes [ i ] . Y ;pontosshape . Add ( ponto ) ;

}

ponto . X = pontosquentes [ 0 ] . X ;ponto . Y = pontosquentes [ 0 ] . Y ;pontosshape . Add ( ponto ) ;

/ / c r i a uma Stroke com os pontos der e f e r ê n c i a o b t i d o s

Stroke s t r o k e = new Stroke ( pontosshape ) ;

/ / Def ine a co r e tamanho da Strokes t r o k e . Draw ingA t t r i bu t e s . Co lo r =

drawingNode . St rokes [ 0 ] .D raw ingA t t r i bu t e s . Co lo r ;

s t r o k e . Draw ingA t t r i bu t e s . Height =drawingNode . St rokes [ 0 ] .D raw ingA t t r i bu t e s . Height ;

s t r o k e . Draw ingA t t r i bu t e s . Width =drawingNode . St rokes [ 0 ] .D raw ingA t t r i bu t e s . Width ;

/ / s u b s t i t u i a forma an t iga pela nova

28 CAPÍTULO 3. TRABALHO DESENVOLVIDO

q . whi teboard . S t rokes . Remove ( drawingNode .St rokes [ drawingNode . St rokes . Count 1 ] );

q . wh i teboard . S t rokes . Add ( s t r o k e ) ;}

}/ / é ad i c ionada a acção ao h i s t ó r i c o

. . .}

3.2.3 Captura das anotações

À medida que o utilizador faz a sua apresentação, muitas vezes, quer seja por dúvidaspostas pela assistência, quer seja pelo o que é apresentado não estar completo ouse pretender fazer um esquema, tem de fazer anotações sobre o que é apresentado.Sempre que o utilizador pede à aplicação para capturar uma anotação, a aplicaçãosimplesmente tira um screenshot ao ecrã, guardando esse screenshot como imagem,como acontece, por exemplo, na aplicação Smoothboard. Isto implica que o apresenta-dor, caso queira partilhar essas anotações rapidamente no final da apresentação, tenhade perder tempo a, por exemplo, juntar essas imagens, num ficheiro comprimido .zip ou.rar, ou perder tempo a juntar essas imagens num único documento (e.g., Word).

A aplicação iiNote, para poder optimizar o tempo da apresentação, permite aoapresentador capturar as anotações com um simples clique sobre o botão capturar,ficando as anotações em memória. Quando o utilizador o pretender, poderá eliminaressas anotações em memória, guardá-las num ficheiro .nota ou exportá-las para umdocumento XPS.

Sempre que o utilizador pressiona o botão capturar, a aplicação iiNote esconde tem-porariamente a janela dos comandos para, então, tirar um screenshot ao ecrã (incluindoas anotações), tirar um screenshot ao que é apresentado (sem as anotações), bem comoguardar as anotações (Strokes). Os screenshots e as anotações são guardados numobjecto Nota. Definição do objecto Nota:

[ S e r i a l i z a b l e ( ) ]pub l i c c l a s s Nota{

3.2. APLICAÇÃO IINOTE 29

pub l i c Bitmap fundo { get ; s e t ; }pub l i c Bitmap fundo_comple to { get ; s e t ; }pub l i c System . Windows . Point [ ] [ ] no tas { se t ; get ; }pub l i c L i s t <s t r i n g > co r { get ; s e t ; }pub l i c L i s t <double> tamanho { get ; s e t ; }

pub l i c Nota ( i n t i ){

t h i s . f undo = n u l l ;t h i s . no tas = new System . Windows . Point [ i ] [ ] ;t h i s . c o r = new L i s t <s t r i n g >() ;t h i s . tamanho = new L i s t <double >() ;t h i s . f undo_comple to = n u l l ;

}}

onde:

- fundo é a variável onde é armazenado o screenshot do que é apresentado (semas anotações);

- fundo_completo é a variável onde é armazenado screenshot do ecrã (com asanotações);

- notas é a variável onde são armazenadas as anotações (StrokeColletion). Comoa classe Stroke não é serializável, foi necessário converter as Strokes para o tipoPoint[][];

- cor é a variável onde é guardada a informação referente à cor de cada Stroke;

- tamanho é a variável onde é guardada a informação referente ao tamanho decada Stroke;

A captura das anotações é feita no evento printscreen_Click do botão capturar noficheiro Comandos.xaml.cs:

pub l i c L i s t <Nota> notas = new L i s t <Nota >(10) ;pub l i c S t r o k e C o l l e c t i o n inkcanvas = n u l l ;p r i v a t e vo id p r i n t s c r e e n _ C l i c k ( o b j e c t sender , RoutedEventArgs e )

30 CAPÍTULO 3. TRABALHO DESENVOLVIDO

{ . . ./ / esconde a j a n e l a dos comandost h i s . j a n e l a . Hide ( ) ;

/ / T i ra s c r een sho t à nota completa e guarda no Bitmap bmpSystem . Drawing . Size sz = Screen . PrimaryScreen . Bounds . Size ;I n t P t r hDesk = GetDesktopWindow ( ) ;I n t P t r hSrce = GetWindowDC ( hDesk ) ;I n t P t r hDest = CreateCompatibleDC ( hSrce ) ;I n t P t r hBmp = CreateCompat ib leBi tmap ( hSrce , sz . Width , sz .

Height ) ;I n t P t r hOldBmp = Se le c tOb j e c t ( hDest , hBmp ) ;boo l b = B i t B l t ( hDest , 0 , 0 , sz . Width , sz . Height , hSrce ,

0 , 0 , CopyPixe lOperat ion . SourceCopy |CopyPixe lOperat ion . Captu reBl t ) ;

Bitmap bmp = Bitmap . FromHbitmap ( hBmp ) ;Se l e c tOb j e c t ( hDest , hOldBmp ) ;De le teOb jec t ( hBmp ) ;DeleteDC ( hDest ) ;ReleaseDC ( hDesk , hSrce ) ;

/ / esconde a t e l at h i s . q . Hide ( ) ;

/ / T i ra s c r een sho t ao fundo e guarda no Bitmap bmp2System . Drawing . Size sz2 = Screen . PrimaryScreen . Bounds . Size

;I n t P t r hDesk2 = GetDesktopWindow ( ) ;I n t P t r hSrce2 = GetWindowDC ( hDesk2 ) ;I n t P t r hDest2 = CreateCompatibleDC ( hSrce2 ) ;I n t P t r hBmp2 = CreateCompat ib leBi tmap ( hSrce2 , sz2 . Width ,

sz2 . Height ) ;I n t P t r hOldBmp2 = Se le c tOb j e c t ( hDest2 , hBmp2 ) ;boo l b2 = B i t B l t ( hDest2 , 0 , 0 , sz2 . Width , sz2 . Height ,

hSrce2 , 0 , 0 , CopyPixe lOperat ion . SourceCopy |CopyPixe lOperat ion . Captu reBl t ) ;

3.2. APLICAÇÃO IINOTE 31

Bitmap bmp2 = Bitmap . FromHbitmap ( hBmp2 ) ;Se l e c tOb j e c t ( hDest2 , hOldBmp2 ) ;De le teOb jec t ( hBmp2 ) ;DeleteDC ( hDest2 ) ;ReleaseDC ( hDesk2 , hSrce2 ) ;

/ / cop ia a S t r o k e C o l l e c t i o n da t e l ai nk canvas = q . whi teboard . S t rokes . Clone ( ) ;/ / I n i c i a l i z a uma Nota e armazena as imagens captu radasNota nn = new Nota ( i nkcanvas . Count ) ;nn . fundo = bmp2 ;nn . fundo_comple to = bmp ;/ / Conver te a S t r o k e C o l l e t i o n em Point [ ] [ ] e guarda na Notaf o r ( i n t i = 0 ; i < inkcanvas . Count ; i ++){

nn . no tas [ i ] = new System . Windows . Point [ i nk canvas [ i] . S t y l u sPo in t s . Count ] ;

nn . co r . Add ( i nkcanvas [ i ] . D raw ingA t t r i bu t e s . Co lo r .ToSt r ing ( ) ) ;

nn . tamanho . Add ( i nkcanvas [ i ] . D raw ingA t t r i bu t e s .Width ) ;

f o r ( i n t j = 0 ; j < inkcanvas [ i ] . S ty l u sPo in t s .Count ; j ++)

{nn . no tas [ i ] [ j ] = new System . Windows . Point

( ) ;nn . no tas [ i ] [ j ] . X = inkcanvas [ i ] .

S t y l u sPo in t s [ j ] . X ;nn . no tas [ i ] [ j ] . Y = inkcanvas [ i ] .

S t y l u sPo in t s [ j ] . Y ;}

}/ / ad i c i ona a Nota a uma l i s t a de Notasnotas . Add ( nn ) ;/ / a c t u a l i z a o número de notas em memória

32 CAPÍTULO 3. TRABALHO DESENVOLVIDO

n_notas . Content = notas . Count . ToSt r ing ( ) ;/ / i n f o rma o u t i l i z a d o r que a nota f o i armazenadaSystem . Windows . MessageBox . Show ( " Nota armazenada ! " ) ;

/ / mostra a j a n e l a p r i n c i p a lj a n e l a . Show ( ) ;

. . .}

3.2.4 Exportação das anotações para um documento XPS

Um documento XPS (XML Paper Specification) é um formato criado pela Microsoftpara concorrer com o PDF (Portable Document Format) da Adobe [30]. Um documentoXPS tem algumas vantagens sobre um documento PDF:

- porque este formato é baseado em XML e aderiu ao Open Packaging Conventions[31], integra-se facilmente com outras tecnologias, tais como a tecnologia degestão dos direitos digitais da Microsoft, e a tecnologia de compressão ZIP;

- os documentos XPS são independentes de software e hardware e, por isso, nãoprecisão de um leitor em separado (como o Adobe Acrobat) para abrir e lerdocumentos XPS (basta usar o Internet Explorer);

- XPS integra mais facilmente documentos em aplicações de fluxo (workflow ap-plications);

- a maior capacidade de renderizar com mais fidelidade conteúdo no ecrã, ou seja,por exemplo, imagens são armazenadas no documento sem perda de resolução;

- Todos os documentos são capazes de imprimir para XPS sem um arquivo inter-mediário conversor, como o Acrobat PDF. O XPS visa integrar esta funcionalidadeem todas as aplicações Windows e não apenas em aplicações profissionais ouaplicações high-end.

Estas razões levaram a escolha deste formato para a exportação das anotações. Aoexportar para XPS, a aplicação iiNote usa a API InkAnalysis para reconhecer textonas várias notas. Assim, se o utilizador escrever apontamentos nas notas, a aplicação

3.2. APLICAÇÃO IINOTE 33

Figura 3.9: Documento XPS com texto reconhecido.

reconhece o texto e adiciona-o ao documento XPS (ver Figura 3.9). A exportação dasanotações é feita no evento xps_Click do botão xps no ficheiro Comandos.xaml.cs:

p r i v a t e vo id x p s _ C l i c k ( o b j e c t sender , RoutedEventArgs e ){

/ / dec la ração das v a r i á v e i sFlowDocument documento = new FlowDocument ( ) ;B lockUIConta ine r b loco = n u l l ;F igure f i = n u l l ;S t r i n g B u i l d e r t e x t = n u l l ;I n kAna ly ze r ana lyze r2 = n u l l ;I n kAna ly ze r ana ly ze r = n u l l ;Con tex tNodeCo l l e c t i on paras = n u l l ;Paragraph p = n u l l ;L i s t <Paragraph> p a ra g ra f o s = new L i s t <Paragraph >() ;

/ / para cada Nota armazenada , passar a nota_comple ta para odocumento e t e x t o re conhec ido

f o r ( i n t i = 0 ; i < notas . Count ; i ++){

34 CAPÍTULO 3. TRABALHO DESENVOLVIDO

t e x t = new S t r i n g B u i l d e r ( ) ;/ / i n i c i a l i z a ç ã o dos a n a l i s a do r e s do InkCanvasana lyze r2 = new I n kAna ly ze r ( t h i s . D i spa t che r ) ;ana ly ze r = new I n kAna ly ze r ( t h i s . D i spa t che r ) ;

/ / a n á l i s e dos St rokesana ly ze r . AddStrokes ( t oS t r oke s ( no tas [ i ] ) ) ;ana ly ze r . Analyze ( ) ;/ / p r o c u r a r por pa rág ra f o s de t e x t o .paras = ana ly ze r . FindNodesOfType ( ContextNodeType .

Paragraph ) ;/ / por cada pa rág ra f o são ana l i sadas as l i n h a sf o r e a c h ( ContextNode paragraph in paras ){

p = new Paragraph ( ) ;p . FontSize = 12 ;p . FontWeight = FontWeights . Bold ;/ / por cada l i n h a é f e i t o o reconhec imento

de t e x t of o r e a c h ( ContextNode l i n e i n paragraph .

SubNodes ){

ana lyze r2 . AddStrokes ( l i n e . S t rokes );

ana lyze r2 . Analyze ( ) ;t e x t . AppendLine ( ana lyze r2 .

GetRecogn izedStr ing ( ) ) ;p . I n l i n e s . Add ( new Run ( ana lyze r2 .

GetRecogn izedStr ing ( ) ) ) ;}/ / é j un tado o t e x t o re conhec ido ao j á

e x i s t e n t epa rag r a f o s . Add ( p ) ;t e x t . AppendLine ( ) ;

}

3.2. APLICAÇÃO IINOTE 35

/ / c r i a ç ã o de um b loco de um FlowDocumentb loco = new BlockUIConta ine r ( ) ;/ / c r i a f i g u r a com o conteúdo do whi teboardSystem . Windows . Con t r o l s . Image im = new System .

Windows . C on t r o l s . Image ( ) ;im . Source = System . Windows . I n t e r o p . Imaging .

CreateBitmapSourceFromHBitmap ( no tas [ i ] .f undo_comple to . GetHbitmap ( ) , I n t P t r . Zero ,I n t 32Rec t . Empty ,

System . Windows . Media . Imaging . Bi tmapSizeOpt ions .FromEmptyOptions ( ) ) ;

/ / ad i c i ona a imagem ao b locob loco . Ch i ld = im ;/ / é c r i ada uma f i g u r a para o FlowDocumentf i = new Figure ( ) ;/ / ad i c i ona o b loco que contem a imagem à f i g u r af i . B locks . Add ( b loco ) ;/ / c r i a ç ã o de um pa rag ra f oParagraph para = new Paragraph ( ) ;/ / ad i c i ona a f i g u r a ao pa rag ra f opara . I n l i n e s . Add ( f i ) ;/ / ad i c i ona o pa rág ra f o ao documentodocumento . Blocks . Add ( para ) ;/ / ad i c i ona o t e x t o re conhec ido ao FlowDocumenti f ( p a r ag r a f o s . Count > 0 )

documento . Blocks . Add ( pa r ag r a f o s [ p a r ag r a f o s. Count 1 ] ) ;

}/ / guardar o documentoSave ( documento ) ;

}

Método Save para guardar um FlowDocument em XPS:

pub l i c s t a t i c vo id Save ( FlowDocument f lowDocument ){

36 CAPÍTULO 3. TRABALHO DESENVOLVIDO

M i c r o s o f t . Win32 . SaveFi leDia log saveF i l eD ia l og1 = newM i c r o s o f t . Win32 . SaveFi leDia log ( ) ;

s a veF i l eD ia l og1 . F i l t e r = " Documento XPS | ∗ . xps " ;s a veF i l eD ia l og1 . T i t l e = " Guardar notas em f i c h e i r o XPS . " ;i f ( sa veF i l eD ia l og1 . ShowDialog ( )==t r u e ){

i f ( sa veF i l eD ia l og1 . FileName != " " ){

/ / apaga f i c h e i r o e x i s t e n t eDele teOldFi le ( sa veF i l eD ia l og1 . FileName ) ;

S e r i a l i z e r P r o v i d e r s e r i a l i z e r P r o v i d e r =new S e r i a l i z e r P r o v i d e r ( ) ;

S e r i a l i z e r D e s c r i p t o r s e l e c t e d P l u g I n = n u l l;

f o r e a c h ( S e r i a l i z e r D e s c r i p t o rs e r i a l i z e r D e s c r i p t o r i ns e r i a l i z e r P r o v i d e r . I n s t a l l e d S e r i a l i z e r s)

{i f ( ! s e r i a l i z e r D e s c r i p t o r .

I sLoadab le | | ! sa veF i l eD ia l og1 .FileName . EndsWith (s e r i a l i z e r D e s c r i p t o r .D e f a u l t F i l e E x t e n s i o n ) )

con t inue ;s e l e c t e d P l u g I n =

s e r i a l i z e r D e s c r i p t o r ;break ;

}i f ( s e l e c t e d P l u g I n != n u l l ){

us ing ( Stream package = F i l e .Create ( sa veF i l eD ia l og1 . FileName) )

{

3.2. APLICAÇÃO IINOTE 37

S e r i a l i z e r W r i t e rs e r i a l i z e r W r i t e r =s e r i a l i z e r P r o v i d e r .C r e a t e S e r i a l i z e r W r i t e r (s e l e c t edP lug In , package) ;

IDocumentPaginatorSourceidoc = flowDocument ;

i f ( i do c != n u l l )s e r i a l i z e r W r i t e r .

Wri te ( i do c .DocumentPaginator, n u l l ) ;

package . C lose ( ) ;System . Windows . MessageBox .

Show ( " F i c h e i r o c r i a d ocom sucesso . " ) ;

}}e lsethrow new Excep t ion ( " Não f o i encon t rado um

S e r i a l i z e r para o f o rma to e s c o l h i d o . " );

}}

}/ / apaga f i c h e i r o e x i s t e n t ep r i v a t e s t a t i c vo id Dele teOldFi le ( s t r i n g f i leName ){

i f ( F i l e . E x i s t s ( f i leName ) ){

F i l e . Delete ( f i leName ) ;}

}

A funcionalidade de exportação das anotações para um documento XPS permiteassim, que o utilizador possa gerar rápida e facilmente um documento de texto com

38 CAPÍTULO 3. TRABALHO DESENVOLVIDO

as anotações tiradas durante uma apresentação, podendo partilhar o documento maisfacilmente e mais rápido com a assistência. Deste modo, a audiência não precisade se preocupar com as anotações feitas durante a apresentação pelo apresentador,concentrando-se totalmente na apresentação.

3.3 Aplicação eeNote

De modo a permitir ao apresentador completar, editar, ou apagar as anotações efec-tuadas pela aplicação iiNote, foi criada a aplicação eeNote. A aplicação eeNote (verFigura 3.10) tem incluída algumas das características da aplicação iiNote, bem comoalgumas novas:

- abrir/guardar ficheiros com a extensão .nota;

- usar o marcador para fazer novas anotações;

- reconhecimento de formas geométricas;

- seleccionar cores e tamanhos para o marcador;

- usar uma borracha para apagar anotações, bem como um botão limpar todas asanotações;

- histórico de acções, de modo a que o apresentador possa desfazer/refazer acções;

- seleccionar anotações e apagar/redimensionar (Ver Figura 3.11);

- apagar uma nota completa;

- exportar as anotações para um documento XPS, fazendo o reconhecimento deescrita.

Deste modo, o apresentador pode fazer uma apresentação sem se preocupar se asanotações ficam incompletas ou imperfeitas, dado que tem um modo de as editar àposterior.

3.3. APLICAÇÃO EENOTE 39

Figura 3.10: Aplicação eeNote

Figura 3.11: Seleccionar uma anotação e redimensioná-la.

40 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Figura 3.12: Aplicação iiProgramming.

3.4 Aplicação iiProgramming

A grande parte dos sistemas de quadros interactivos tem incluído algum softwareeducativo tal como, por exemplo, uma aplicação que mostre o sistema solar para ensinarastronomia aos alunos. Neste caso, foi criada uma aplicação de suporte às aulas deIntrodução à Programação: a aplicação iiProgramming.

A aplicação iiProgramming é uma aplicação visual que permite criar fluxogramas egerar pseudo-código e código fonte em Linguagem C (ver Figura 3.12). O fluxogramaé a representação gráfica de um algoritmo, descrevendo o fluxo dum algoritmo atravésde um conjunto de figuras geométricas padronizadas (ver Figura 3.13) ligadas porsetas de fluxo. Em meados da década de 60, alguns matemáticos provaram quequalquer programa podia ser construído através da combinação de 3 estruturas básicas:sequência (um bloco de instruções), selecção (IF-THEN-ELSE, IF-THEN e SWITCH-CASE) e repetição (FOR, WHILE e DO-WHILE) [32]. Uma sequência tanto pode serum bloco de instruções da função principal (main()) como de uma função criada peloutilizador, o bloco de instruções de um teste IF-THEN, IF-THEN-ELSE, o bloco doSWITCH-CASE, ou o bloco de instruções das repetições FOR, WHILE E DO-WHILE.O utilizador da aplicação pode escolher a instrução desejada de uma lista e arrastá-

3.4. APLICAÇÃO IIPROGRAMMING 41

Figura 3.13: Figuras geométricas utilizadas num fluxograma.

la (através de drag-and-drop) para a posição pretendida para uma ListBox (isto é,para a uma sequência de instruções). As instruções disponibilizadas ao utilizador, porcategoria, são:

- Instruções:

• instrução genérica;

• escrever variável no ecrã (printf());

• ler variável do teclado (scanf());

• declarar uma variável do tipo int, float, char ou char[]);

• devolução (return());

• escrever mensagem no ecrã (printf());

- Ciclos:

• while;

• do while;

• for;

- Testes:

• if-then;

• if-then-else;

• switch-case;

42 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Figura 3.14: Declaração da função factorial.

A aplicação também permite declarar e editar funções auxiliares (ver Figura 3.14 e 3.15),guardar/abrir os fluxogramas em ficheiros com a extensão .flux e guardar o fluxogramacomo imagem (ver Figura 3.16).

A aplicação iiProgramming é constituída pelos seguintes ficheiros:

- App.xaml e App.xaml.cs: Onde são definidas algumas propriedades da aplicação;

- Sequencia.xaml: Onde é definida a IU da janela principal da aplicação;

- Sequencia.xaml.cs: Onde são definidos os métodos que interagem com os ele-mentos definidos na IU especificada no ficheiro Sequencia.xaml;

- Resultado.xaml: Onde é definida a janela onde é mostrado o código fonte epseudo-código resultante do fluxograma;

- Resultado.xaml.cs: Onde são definidos alguns métodos e os eventos dos ele-mentos definidos na IU especificada no ficheiro Resultado.xaml;

- Imagem.xaml: Onde é definida a janela onde é mostrado o fluxograma simplifi-cado e a janela de dialogo para guardá-lo como imagem;

3.4. APLICAÇÃO IIPROGRAMMING 43

Figura 3.15: Algoritmo da função recursiva factorial.

44 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Figura 3.16: Guardar fluxograma como imagem.

- Imagem.xaml.cs: Onde são definidos alguns métodos e os eventos dos elementosdefinidos na IU especificada no ficheiro Imagem.xaml;

- DialogFuncao.xaml: Onde é definida a janela onde é declarada uma função;

- DialogFuncao.xaml.cs: Onde são definidos alguns métodos e os eventos doselementos definidos na IU especificada no ficheiro DialogFuncao.xaml;

- Pasta classes: Onde estão diversos ficheiros .cs onde são definidos os objectosque irão armazenar os dados do algoritmo em ficheiro;

- Pasta itemImagens: Onde estão diversos ficheiros .xaml e respectivos ficheiros.cs onde são definidas (em classes do tipo UserControl) as instruções disponibi-lizadas ao utilizador para criar o algoritmo;

- Pasta intrucoes: Onde estão diversos ficheiros .xaml onde são definidas (emclasses do tipo UserControl) as instruções inseridas no algoritmo pelo utilizador;

- Pasta intrucoesSimples: Onde estão diversos ficheiros .xaml onde são (emclasses do tipo UserControl) definidas as versões simplificadas das instruçõesinseridas no algoritmo pelo utilizador;

3.4. APLICAÇÃO IIPROGRAMMING 45

Figura 3.17: UserControl UCInstrucao.xaml.

3.4.1 Utilização da classe UserControl

A classe UserControl permite criar controlos que podem ser usados em vários locaisdentro de uma aplicação [33]. É possível incluir todo o código necessário para validaros dados comuns que são pedidos ao utilizador como, por exemplo, eventos. Um usoeficiente do UserControl é simplesmente carregar uma ListBox com itens estáticos usa-dos com frequência em várias aplicações. Na aplicação iiProgramming foram definidostrês tipos de UserControl:

- ItemsImagem: São os UserControl correspondentes às instruções pré-definidasdisponibilizadas ao utilizador, contidos na pasta itemImagens. São constituídospor uma imagem da forma geométrica correspondente ao tipo de instrução e poruma Label que contém a descrição da instrução. Por exemplo, a definição doUserControl correspondente a uma instrução genérica (Figura 3.17), é feita noficheiro UCInstrucao.xaml do seguinte modo:

<UserCon t ro l . . . ><Canvas x:Name=" LayoutRoot " Width=" 100 " Height=" 50 "><Image x:Name=" imagem " Width=" 100 " Height=" 50 " Source=

" / PseudoFluxCode ; Component / imagens / i n s t r u c a o . png " /><Label x:Name=" t e x t o " Content=" I n s t r u ç ã o&#xd;&#xa ;

Genér ica " Width=" 100 " Height=" 50 " . . . / ></ Canvas>

</ UserCon t ro l>

- Instruções: São os UserControl correspondentes às instruções que fazem partedo fluxograma criado pelo utilizador, contidos na pasta instrucoes. Quando outilizador arrasta um UserControl do tipo ItemsImagem para a ListBox sequencia,é inicializado o UserControl correspondente.

46 CAPÍTULO 3. TRABALHO DESENVOLVIDO

- InstruçõesSimples: São os UserControl simplificados dos UserControl do tipoInstruções, usados quando o utilizador pretende guardar o fluxograma comoimagem. São constituídos por uma imagem da forma geométrica correspondenteao tipo de instrução e por uma Label que contém a instrução definida peloutilizador.

3.4.2 Implementação do drag-and-drop

O drag-and-drop é implementado no WPF em seis passos:

1. detectar o drag como a combinação dos eventos MouseMove e MouseLeftBut-tonDown;

2. encontrar os dados a serem arrastados e criar um DataObject que contém oformato, os dados e os efeitos permitidos;

3. inicializar o drag chamando o método DoDragDrop();

4. Definir para true a propriedade AllowDrop no elemento que vai receber os dadosarrastados;

5. Verificar o formato e os dados chamando o método GetDataPresent no argumentosdo evento Drop;

6. Obter os dados através do método GetData().

Drag

O primeiro passo da implementação do drag-and-drop é detectar o movimento dorato enquanto o botão esquerdo é pressionado. Por isso, foram utilizados os eventosMouseMove e MouseLeftButtonDown na origem dos objectos que se querem arrastar,ou seja, nas ListBox que contêm os UserControl do tipo ItemsImagem. Caso o botãoesquerdo do rato seja solto, então é cancelado o drag-and-drop. Em seguida éverificada a origem dos dados e criado o DataObject. Por fim, dá-se inicio ao Draginvocando o método DoDragDrop. É também usada a variável dragStarted do tipobool para auxiliar a operação. Eventos referentes ao Drag:

pub l i c boo l d ragSta r ted ;p r i v a t e vo id ListBox_PreviewMouseDown ( o b j e c t sender ,

MouseButtonEventArgs e )

3.4. APLICAÇÃO IIPROGRAMMING 47

{dragSta r ted = t r u e ;base . OnPreviewMouseDown ( e ) ;

}p r i v a t e vo id ListBox_MouseLef tButtonUp ( o b j e c t sender ,

MouseButtonEventArgs e ){

d ragSta r ted = f a l s e ;}p r i v a t e vo id ListBox_PreviewMouseMove ( o b j e c t sender ,

MouseEventArgs e ){

/ / v e r i f i c a se o botão esquerdo es tá a se r p ress i onado e sequem in vo ca o even to é do t i p o L i s tBox

i f ( d ragSta r ted && sender i s L i s tBox ){

/ / c r i a o DataObjectL i s tBox t h e L i s t = sender as L i s tBox ;DataObject data = CreateDataOb jec tFromLis t ( t h e L i s t

) ;

/ / cap tu ra os even tos do r a t o para a L i s tBox er e a l i z a o drag / drop

Mouse . Capture ( sender as UIElement ) ;System . Windows . DragDrop . DoDragDrop ( t h e L i s t , data ,

DragDropEf fec ts . Copy ) ;Mouse . Capture ( n u l l ) ;

d ragSta r ted = f a l s e ;base . OnPreviewMouseMove ( e ) ;

}}

Onde CreateDataObjectFromList é o método que detecta qual o tipo de UserControlItemsImagem seleccionado pelo utilizador e devolve o DataObject com o UserControldo tipo Instruções correspondente. Método CreateDataObjectFromList:

p r i v a t e DataObject CreateDataOb jec tFromLis t ( L i s tBox l i s t )

48 CAPÍTULO 3. TRABALHO DESENVOLVIDO

{DataObject data = new DataObject ( ) ;

Use rCon t ro l uc = l i s t . Se l e c t ed I t em as UserCon t ro l ;/ / v e r i f i c a se o o b j e c t o a l a r g a r é do t i p o UCInst rucaoUCInst rucao i = uc as UCIns t rucao ;i f ( i != n u l l ){

Ins t rucaoUC i n s = new Ins t rucaoUC ( ) ;data . SetData ( DataFormats . Fi leDrop , i n s ) ;r e t u r n data ;

}/ / v e r i f i c a para os r e s t a n t e s t i p o s

. . .}

Drop

Para ser possível largar (drop) o objecto arrastado numa ListBox, foi necessáriodefinir a propriedade AllowDrop a true e associar os eventos Drop e MouseMove.Definição de uma ListBox no código XAML que vai conter uma sequência de instruções:

<Lis tBox x:Name=" sequenc ia " AllowDrop=" True " Drop=" panel_Drop "MouseMove=" panel_MouseMove " />

Definição de uma ListBox no código C# que vai conter uma sequência de instruções:

L i s tBox lb = new L i s tBox ( ) ;l b . AllowDrop = t r u e ;l b . Drop += new DragEventHandler ( panel_Drop ) ;l b . MouseMove += new MouseEventHandler ( panel_MouseMove ) ;

Quando o utilizador larga o objecto arrastado sobre a ListBox de destino, é invocado oevento Drop, onde será introduzido os dados provenientes do DataObject na ListBox.Evento Drop:

pub l i c vo id panel_Drop ( o b j e c t sender , DragEventArgs e ){

/ / V e r i f i c a r o f o rma to e os dados chamando o métodoGetDataPresent

i f ( e . Data . GetDataPresent ( DataFormats . Fi leDrop ) )

3.4. APLICAÇÃO IIPROGRAMMING 49

{/ / Obter os dadosUserCon t ro l c o n t r o l o = e . Data . GetData ( DataFormats .

Fi leDrop , t r u e ) as UserCon t ro l ;i f ( c o n t r o l o != n u l l ){

L i s tBox s = sender as L i s tBox ;. . ./ / i n s e r e na pos i ção p re t end idas . I t ems . I n s e r t ( index , c o n t r o l o ) ;/ / c o l o ca o o b j e c t o Use rCon t ro l i n s e r i d o à

v i s t a do u t i l i z a d o rs . S c r o l l I n t o V i e w ( s . I t ems . Get I temAt ( index ) )

;. . .

}}e . Handled = t r u e ;

}

Para que o objecto arrastado possa ser inserido na posição da sequência onde élargado, é invocado o evento MouseMove na ListBox de destino do objecto, sendo aposição guardada na variável index. Evento MouseMove:

pub l i c i n t i ndex =0;p r i v a t e vo id panel_MouseMove ( o b j e c t sender , MouseEventArgs e ){

L i s tBox l i s t 1 = sender as L i s tBox ;i f ( l i s t 1 . I t ems . Count > 0 ){

o b j e c t i tem = n u l l ;/ / obtém a pos i ção do o b j e c t o onde o p o n t e i r o do

r a t o es tá sobrei t em = GetElementFromPoint ( l i s t 1 , e . Ge tPos i t i on (

l i s t 1 ) ) ;i ndex = l i s t 1 . I t ems . IndexOf ( i tem ) ;

}}

50 CAPÍTULO 3. TRABALHO DESENVOLVIDO

Capítulo 4

Conclusões e trabalho futuro

Durante algumas demonstrações feitas a várias turmas de escolas secundárias, notou-se que, mesmo aquelas que já têm acesso a quadros interactivos, ambos os alunose professores mostraram-se entusiasmados com o sistema implementado, bem comoas aplicações desenvolvidas. Também concluímos que, pelo facto da aplicação iiNoteguardar as notas em memória de um modo simples e rápido, o tempo que o utilizador(professor/apresentador) perde a guardar essas notas seja bastante pequeno, maxi-mizando, por isso, o tempo de duração da apresentação. Além disso, a possibilidadede editar as notas posteriormente leva a que o utilizador não esteja preocupado se asnotas estão perfeitas, permitindo ao utilizador corrigir as notas posteriormente. Noentanto, no futuro pretende-se que a aplicação eeNote permita a introdução de textoatravés do teclado para ser adicionado às notas, de modo a poder complementá-lasainda mais.

Em relação à aplicação iiProgramming, ainda apresenta algumas limitações, poisestá bastante dependente dos dados introduzidos pelo utilizador de modo a produzircódigo sem erros. Entretanto, no futuro pretende-se implementar um analisador deinstruções de modo a assistir o utilizador a gerar código correcto.

O uso de um segundo Wiimote, em conjunto com o Wiimote Whiteboard para permitircontrolar o computador à distância, cancela quase completamente a dependência queo utilizador tem do rato e do teclado. Isto permite ao utilizador estar perto do quadroonde, além de o poder controlar sem limitações, pode também controlar à distânciao que quer mostrar no quadro (e.g., PowerPoint, imagens, vídeos, etc.). No entanto,devido ao número limitado de botões do Wiimote, não foi possível implementar algumas

51

52 CAPÍTULO 4. CONCLUSÕES E TRABALHO FUTURO

funcionalidades tais como o scroll do rato ou as teclas Backspace, Delete, Page Up ePage Down. Por isso, no futuro, existe a possibilidade em implementar um dispositivopróprio para controlar o computador à distância e, então, eliminar as limitações atrásreferidas.

Resumindo, desenvolveu-se um sistema de projecções interactivas de baixo custo emostrou-se que é fácil desenvolver aplicações educativas para o sistema. Deste modoé possível ter um quadro interactivo em qualquer sala de aulas.

De referir ainda que este trabalho já deu origem a um artigo [34] aceite na Computersand Advanced Technology in Education (CATE) 2010 da International Association ofScience and Technology for Development (IASTED).

Referências

[1] Lucy Gray. Interactive Whiteboard Explorations. Website, Consultado em Abril2010. http://isenet.ning.com/groups/group/show?groupUrl=

interactivewhiteboardexplorations&xg_source=activity.

[2] SMART Technologies Inc. SMART BoardTM rear projection systems.Website, Consultado em Abril 2010. http://www.smartboard.ie/

product-rear-projection-interactive-whiteboard.php.

[3] SMART Technologies Inc. SMART BoardTM for flat panel displays.Website, Consultado em Abril 2010. http://www.smartboard.ie/

product-smart-board-for-flat-panel-displays.php.

[4] Smoothboard Wiki. Mount and position the Wiimote. Website, Consultadoem Março 2010. http://www.boonjin.com/smoothboard/index.php?

title=Mount_and_position_the_Wiimote.

[5] Marco Silva, Luís Paulo Reis, Armando Sousa, Brígida Mónica Faria, and A. PedroCosta. iiBOARD, Development of a Low-Cost Interactive Whiteboard using theWiimote Controller. International Conference on Computer Graphics Theory andApplications, pages 337–344, 2009.

[6] Conselho da União Europeia. Jornal oficial das comunidades europeiasC 142/1. Website, 2002. http://eur-lex.europa.eu/LexUriServ/

LexUriServ.do?uri=OJ:C:2002:142:0001:0022:PT:PDF.

[7] Conselho de Educação da União Europeia. Relatório do Conselho (Educação) parao Conselho Europeu “Os objectivos futuros concretos dos sistemas de educação eformação”. Website, 2001. http://ec.europa.eu/education/policies/2010/doc/rep_fut_obj_pt.pdf.

53

54 REFERÊNCIAS

[8] Conselho de Ministros. Resolução do Conselho de Ministros n.o 137/2007 de 18de Setembro. Website, 2007. http://www.escola.gov.pt/idc/idcplg?IdcService=GET_FILE&dID=11496&dDocName=001952.

[9] Conselho de Ministros. Resolução do Conselho de Ministros n.o 132/2007 de 13de Setembro. Website, 2007. http://www.escola.gov.pt/idc/idcplg?IdcService=GET_FILE&dID=11499&dDocName=001953.

[10] Anja Balanskat, Roger Blamire, and Stella Kefala. The ICT Impact Report, A reviewof studies of ICT impact on schools in Europe. European Schoolnet, 2007. http://ec.europa.eu/education/doc/reports/doc/ictimpact.pdf.

[11] SMART Technologies Inc. Interactive Whiteboards and Learning.Improving student learning outcomes and streamlining lesson planning.Março 2006. http://www2.smarttech.com/NR/rdonlyres/

2C729F6E-0A8D-42B8-9B32-F90BE0A746D8/0/Int_Whiteboard_

Research_Whitepaper_Update.pdf.

[12] Wikipedia. Interactive Whiteboard. Website, Consultado em Março de 2010.http://en.wikipedia.org/wiki/Interactive_whiteboard.

[13] Wikipedia. SMART Board Interactive Whiteboard. Website, Consultadoem Março de 2010. http://en.wikipedia.org/wiki/SMART_Board_

interactive_whiteboard.

[14] Luidia Inc. Interactive Whiteboard - Enhance Classroom Communications.Website, Consultado em Abril 2010. http://www.luidia.com/products/ebeam-edge-for-education-page.html.

[15] mimio Interactive Teaching Technologies. mimio Interactive Xi Bar and StylusOverview. Website, Consultado em Abril 2010. http://www.mimio.com/

products/mimio_interactive/index.asp.

[16] Dilpesh V. Laxmidas. Exame Informática, chapter Aulas 2.0, page 57. Number 117.Março 2010.

[17] Johnny C. Lee. Wii Projects. Website, Consultado em Setembro 2009. http:

//johnnylee.net/projects/wii/.

REFERÊNCIAS 55

[18] Filipe Lino, Paulo Dias, Arnaldo Oliveira, and Beatriz S. Santos. Comparação deDispositivos de Interacção em Ambientes de Realidade Virtual: Desenvolvimentode um Setup Experimental e Estudos com Utilizadores. Actas do 17o EncontroPortuguês de Computação Gráfica, pages 175–183, 2009.

[19] Brian Peek. WiimoteLib - .NET Managed Library for the Nintendo Wii Remote.Website, Consultado em Janeiro 2010. http://www.brianpeek.com/blog/pages/wiimotelib.aspx.

[20] MSDN. keybd_event function (Windows). Website, Consultado em Janeiro 2010.http://msdn.microsoft.com/en-us/library/ms646304%28VS.85%

29.aspx.

[21] MSDN. Virtual-Key Codes (Windows). Website, Consultado em Janeiro2010. http://msdn.microsoft.com/en-us/library/dd375731%28v=VS.85%29.aspx.

[22] MSDN. mouse_event function (Windows). Website, Consultado em Janeiro 2010.http://msdn.microsoft.com/en-us/library/ms646260%28VS.85%

29.aspx.

[23] PINVOKE.NET. mouse_event (user32). Website, Consultado em Janeiro 2010.http://www.pinvoke.net/default.aspx/user32.mouse_event.

[24] FYP-Wii. Wiimote and Wiimotelib. Website, Consultado em Janeiro 2010. http://fypwii.blogspot.com/2008/11/wiimote-and-wiimotelib.html.

[25] Smoothboard.net. Smoothboard - The Wiimote Whiteboard. Website, Consultadoem Setembro 2009. http://www.smoothboard.net/.

[26] Microsoft.com. Explore the features: Xps documents. Website, Consultado emMarço 2010. http://www.microsoft.com/windows/windows-vista/

features/xps.aspx.

[27] Wikipedia. Windows Presentation Foundation. Website, Consultado em Setem-bro 2009. http://en.wikipedia.org/wiki/Windows_Presentation_Foundation.

56 REFERÊNCIAS

[28] MSDN. InkCanvas Class. Website, Consultado em Setembro 2009.http://msdn.microsoft.com/en-us/library/system.windows.

controls.inkcanvas.aspx.

[29] Markus Egger. MSDN Magazine, chapter Find New Meaning In Your Ink WithTablet PC APIs In Windows Vista. Maio 2006. http://msdn.microsoft.

com/en-us/magazine/cc300793.aspx.

[30] Alex Woodie. Support for XPS, Microsoft’s PDF-Killer, Gaining Steam. Web-site, Consultado em Dezembro 2009. http://www.itjungle.com/two/

two011806-story01.html.

[31] Wikipedia. Open Packaging Conventions. Website, Consultado em Dezembro 2009.http://en.wikipedia.org/wiki/Open_Packaging_Conventions.

[32] Abel Gomes. Cap.4:Design de Algoritmos e Programação Estruturada. Web-site, Consultado em Setembro 2009. http://www.di.ubi.pt/~agomes/

programacao/teoricas/04-algoritmos.pdf.

[33] MSDN. UserControl Class. Website, Consultado em Setembro 2009.http://msdn.microsoft.com/en-us/library/system.windows.

forms.usercontrol.aspx.

[34] Vasco Santos and Frutuoso Silva. Interactive Projections in Classrom. In 30thIASTED International Conference on Computers and Advanced Technology inEducation (CATE 2010), to appear.