Thiago Silva Borges
Um Gerenciador de Imagens via Web
Palmas
2005
ii
Thiago Silva Borges
Um Gerenciador de Imagens via Web
“Monografia
como
apresentada
requisito
disciplinas
de
parcial
das
Trabalho
de
Conclusão de Curso em Sistemas
de Informação I (TCC I) e Trabalho
de
Conclusão
de
Curso
em
Sistemas de Informação II (TCC II)
do
curso
de
Sistemas
de
Informação, orientado pelo Prof.
Jackson Gomes de Souza”.
Palmas
2005
iii
THIAGO SILVA BORGES
UM GERENCIADOR DE IMAGENS VIA WEB
“Monografia
apresentada
como requisito parcial das disciplinas
de Trabalho de Conclusão de Curso
em Sistemas de Informação I (TCC I)
e Trabalho de Conclusão de Curso
em Sistemas de Informação II (TCC
II)
do
curso
Informação,
de
Sistemas
orientado
pelo
Jackson Gomes de Souza”.
Aprovada em ___/___/_______
BANCA EXAMINADORA
______________________________________________________
Profa. M.Sc. Parcilene Fernandes de Brito – Co-Orientadora
Centro Universitário Luterano de Palmas
______________________________________________________
Profa. Dra. Thereza Patrícia Pereira Padilha
Centro Universitário Luterano de Palmas
______________________________________________________
Profa. M. Sc. Madianita Bogo
Centro Universitário Luterano de Palmas
Palmas
2005
de
Prof.
iv
AGRADECIMENTOS
Primeiramente agradeço a Deus por este momento tão sublime. Pelo sol da
manhã, pelo ar que respiro, pelas forças renovadas; por tudo o que sou. A ele seja dada
toda honra, glória, domínio e poder. Ao Rei dos Reis e Senhor dos Senhores.
Agradeço os meus pais, Marcos e Adna, e aos meus irmãos, Junior e Raquel, por
serem meus amigos fiéis e confidentes, meu braço direito em todos os momentos de
minha existência. Pessoas que são de suma importância para mim e que influenciam
diretamente no que sou. Agradeço pela força, ânimo, coragem e confiança que eles me
proporcionam a cada dia.
Aos meus amigos, todos aqueles que, direta ou indiretamente, colaboraram com
o desenvolvimento deste trabalho. Que me auxiliaram, me apoiaram, deixo os meus
sinceros agradecimentos.
Agradecimento especial a uma pessoa muito importante na minha vida, uma
pessoa que vivenciou todas as etapas deste, ao grande amor da minha vida, Sara. Uma
pessoa que a cada dia que se passa aprendo a amar mais, pelo carisma, ternura,
compreensão; simplesmente por ser alguém que me completa, que me faz ser feliz. Meu
Amor, muito obrigado.
E agradeço às pessoas responsáveis pela orientação deste trabalho, Jackson e
Parcilene. Agradeço ao Professor Jackson, meu orientador, e a Professora M.Sc.
Parcilene, minha co-orientadora, por terem me ajudado a desenvolver este trabalho, me
auxiliando nos momentos difíceis, por simplesmente serem os grandes responsáveis
pela concretização deste trabalho. Muito Obrigado.
Muito obrigado a todos vocês.
v
SUMÁRIO
1. Introdução............................................................................................................... 13
2. Revisão de Literatura.............................................................................................. 15
2.1.
XML (eXtensible Markup Language) ................................................................ 15
2.1.1.
Estruturação do Documento XML ................................................................. 16
2.1.1.1.
Elementos ................................................................................................... 16
2.1.1.2.
Atributos ..................................................................................................... 16
2.1.2.
Espaço de Nomes (Namespaces).................................................................... 17
2.1.3.
Validação do Documento XML ..................................................................... 18
2.2.
SVG (Scalable Vector Graphics) ....................................................................... 20
2.2.1.
Características................................................................................................. 20
2.2.1.1.
O SVG é Leve (quanto ao tamanho do Arquivo) ....................................... 20
2.2.1.2.
O SVG é Escalável ..................................................................................... 22
2.2.1.3.
O SVG é Interativo ..................................................................................... 22
2.2.1.4.
O SVG é Dinâmico..................................................................................... 23
2.2.1.5.
O SVG é Portável ....................................................................................... 23
2.2.2.
Visualização do Documento SVG.................................................................. 24
2.2.3.
Estruturação do Documento SVG .................................................................. 24
2.2.4.
Propriedades ................................................................................................... 25
2.2.4.1.
Stroke.......................................................................................................... 25
2.2.4.2.
Stroke-Width .............................................................................................. 26
2.2.4.3.
Fill............................................................................................................... 26
2.2.5.
Elementos Gráficos ........................................................................................ 27
2.2.5.1.
Line............................................................................................................. 27
2.2.5.2.
Rect............................................................................................................. 28
2.2.5.3.
Circle .......................................................................................................... 29
2.2.5.4.
Ellipse ......................................................................................................... 30
2.2.5.5.
Polyline e Polygon...................................................................................... 31
2.3.
DOM (Document Object Model)........................................................................ 32
2.4.
Recuperação de Imagens .................................................................................... 36
2.4.1.
Recuperação de Imagens baseada em Conteúdo Textual............................... 37
2.4.1.1.
Anotação de Imagens (Image Annotation)................................................. 37
2.4.1.1.1. Anotação Manual........................................................................................ 38
2.4.1.1.2. Anotação Semi-Automática........................................................................ 40
2.4.1.1.3. Anotação Automática ................................................................................. 42
2.4.2.
Recuperação de Imagens baseada em Conteúdo Visual................................. 44
2.4.2.1.
Extração de Características de Imagens ..................................................... 44
vi
2.4.2.1.1. Processo de Extração de Características..................................................... 44
2.4.2.1.2. Atributos Visuais ........................................................................................ 47
2.4.2.1.2.1.
Atributo Cor............................................................................................ 47
2.4.2.1.2.2.
Atributo Textura ..................................................................................... 48
2.4.2.1.2.3.
Atributo Forma ....................................................................................... 49
2.4.2.2.
Registro de Imagens ................................................................................... 51
2.4.2.2.1. Transformação ............................................................................................ 53
2.4.2.2.2. Distorção..................................................................................................... 54
3. Materiais e Métodos ............................................................................................... 57
3.1.
Local e Período................................................................................................... 57
3.2.
Materiais ............................................................................................................. 57
3.2.1.
Hardware ........................................................................................................ 57
3.2.2.
Software.......................................................................................................... 58
3.2.3.
Fontes Bibliográficas...................................................................................... 58
3.3.
Metodologia........................................................................................................ 58
3.3.1.
ECMAScript ................................................................................................... 60
3.3.2.
ASP.NET e C#................................................................................................ 60
3.3.2.1.
.NET Framework. ....................................................................................... 61
3.3.2.2.
C# ............................................................................................................... 61
3.3.3.
Ajax e Ajax.NET ............................................................................................ 62
4. Resultados e Discussão........................................................................................... 65
4.1.
XML e DOM ...................................................................................................... 65
4.2.
SVG e ECMAScript ........................................................................................... 66
4.3.
Anotação de Imagem .......................................................................................... 68
4.4.
WebAnnotate.NET ............................................................................................. 69
4.4.1.
Interface com o Usuário ................................................................................. 69
4.4.2.
Arquitetura Cliente ......................................................................................... 72
4.4.3.
Arquitetura Servidor ....................................................................................... 73
4.4.4.
Banco de Dados .............................................................................................. 75
4.4.5.
Implementação ............................................................................................... 76
4.4.5.1.
SVG e ECMAScript ................................................................................... 76
4.4.5.2.
Estrutura de classe do cliente...................................................................... 78
4.4.5.3.
Arquitetura de comunicação....................................................................... 79
5. Conclusão ............................................................................................................... 81
6. Referências Bibliográficas...................................................................................... 83
vii
LISTA DE TABELAS
Tabela 1 – Tipos de eventos do SVG (W3C, 2003a). .................................................... 22
Tabela 2 – Browsers que dão suporte ao SVG. .............................................................. 24
Tabela 3 – Atributos do elemento line do SVG. ............................................................ 27
Tabela 4 – Atributos do elemento rect do SVG. ............................................................ 28
Tabela 5 – Atributos do elemento circle do SVG. ......................................................... 29
Tabela 6 – Atributos do elemento ellipse do SVG. ........................................................ 30
Tabela 7 – Atributos do elemento polyline e polygon do SVG. ..................................... 31
Tabela 11 – Taxonomia sobre espaços de características extraídas das imagens
(BROWN apud BUENO, 2001). .................................................................................... 46
viii
LISTA DE FIGURAS
Figura 1 – Exemplo da estruturação de um elemento e seus subelementos no XML. ... 16
Figura 2 – Exemplo da estruturação de um elemento e seus atributos no XML............ 17
Figura 3 – Exemplo de uma Namespace em um documento XML................................ 18
Figura 4 – Exemplo de uma DTD de um documento XML........................................... 19
Figura 5 – Exemplo de um Schema de um documento XML. ....................................... 19
Figura 6 – Exemplo de um segmento de reta nos modelos matricial e vetorial. ............ 21
Figura 7 – Exemplo da estruturação de um documento SVG. ....................................... 25
Figura 8 – Exemplo da propriedade stroke em um elemento do SVG. .......................... 26
Figura 9 – Exemplo da propriedade stroke-width em um elemento do SVG................. 26
Figura 10 – Exemplo da propriedade fill em um elemento do SVG. ............................. 27
Figura 11 – Exemplo de um elemento line do SVG....................................................... 28
Figura 12 – Exemplo de um elemento rect do SVG. ..................................................... 29
Figura 13 – Exemplo de um elemento circle do SVG.................................................... 30
Figura 14 – Exemplo de um elemento ellipse do SVG. ................................................. 31
Figura 15 – Exemplo de um elemento polygon do SVG................................................ 32
Figura 16 – Modelo hierárquico definido pelo DOM..................................................... 33
Figura 17 – Exemplo de uma estrutura hierárquica criado pelo DOM de um documento
HTML............................................................................................................................. 33
Figura 18 – Arquitetura da API do DOM Nível 1 (W3C, 2003b).................................. 34
Figura 19 – Arquitetura da API do DOM Nível 2 (W3C, 2003b).................................. 35
Figura 20 – Arquitetura da API do DOM Nível 3 (W3C, 2003b).................................. 36
Figura 21 – Técnica de anotação de imagem manual..................................................... 39
Figura 22 – Técnica de anotação de imagem semi-automática. ..................................... 40
Figura 23 – Técnica de anotação de imagem automática............................................... 42
Figura 24 – Processo de extração de características de imagens.................................... 45
Figura 25 – Exemplo de segmentação de imagem. ........................................................ 46
Figura 26 – Exemplo de um mesmo histograma de cores associados a quatro imagens
distintas (BUENO, 2001). .............................................................................................. 48
Figura 27 – Exemplo de quatro elementos de texturas (BUENO, 2001). ...................... 49
Figura 28 – Exemplo de identificação de formas. .......................................................... 50
Figura 29 – Exemplo de distorção.................................................................................. 56
Figura 30 – Exemplo de integração entre o SVG e a ECMAScript. .............................. 66
Figura 31 – Exemplo da execução do código da Figura 30............................................ 67
Figura 32 – Interface do WebAnnotate.NET.................................................................. 69
Figura 33 – Interface da área de anotação. ..................................................................... 70
Figura 34 – Seção de Ferramentas.................................................................................. 71
ix
Figura 35 – Seção de Ferramentas.................................................................................. 71
Figura 36 – Estrutura de classe do cliente. ..................................................................... 72
Figura 37 – Estrutura de classe do servidor.................................................................... 74
Figura 38 – Diagrama de base de dados do WebAnnotate.NET. ................................... 75
Figura 39 – Mecanismo de comunicação entre documento SVG e ECMAScript.......... 77
Figura 40 – Exemplo de codificação das funções “toXmlString()” e “toSvgElement()”.78
Figura 41 – Arquitetura de comunicação. ...................................................................... 79
x
LISTA DE ABREVIATURAS E SIGLAS
CSS
Cascading Style Sheets
DOM
Document Object Model
SVG
Scalable Vector Graphics
W3C
World Wide Web Consortium
XHTML
Extensible HyperText Markup Language
XML
Extensible Markup Language
xi
RESUMO
Uma das principais problemáticas encontradas na recuperação de imagens está
relacionada a identificação e a descrição dos elementos presentes numa imagem. Isso
porque uma imagem é um dado visual e embora esta tenha um significado visual para as
pessoas, não possui nenhum significado para um sistema digital ou sistema
computadorizado, seja uma câmera ou um computador. As técnicas de anotação de
imagens foram criadas com objetivo de sanar esta problemática, demonstrando formas
para realização da anotação de imagens. O presente trabalho tem como objetivo
apresentar o conceito básico da anotação de imagem, demonstrando as técnicas de
anotação de imagem manual, semi-automática e automática, e elaborar uma ferramenta
que implemente a técnica de anotação de imagem manual. Assim, a proposta desde
trabalho é construir uma ferramenta que permite a criação e edição de anotação de
imagem manualmente, dado que esta técnica permite uma maior flexibilidade na
identificação dos elementos presentes em uma imagem pelo usuário.
Palavras-chave: Programação Web, Computação Gráfica, Multimídia.
xii
ABSTRACT
One of the main problems found on image recovery is related to identify and
describe elements on an image. This is because the image is a visual data and
although it has a visual meaning for people, it does not have any special
meaning for a digital system or computer system, be it a camera or a computer.
The image annotation techniques were created with the objective to solve this
problem, providing ways to realize image annotation. The present work has as
objective to present the basic concept on image annotation, presenting the
techniques of manual, semi-automatic and automatic image annotation, and to
create a tool that implements the technique of manual image annotation. Thus,
the proposal of this work is to build a tool that allows the creation and
edition of image annotations manually, given the fact that this technique
gives the user more flexibility on identifying the elements on an image.
Keywords: Web programming, Computer Graphics, Multimedia.
13
1. Introdução
A cada dia, milhares de imagens são geradas e, conseqüentemente, o acesso e uso da
imagem se torna um fator problemático quando esta não esteja organizada, permitindo
uma pesquisa e recuperação em um repositório de imagens.
Um dos principais problemas encontrados tem relação a como descrever os
elementos presentes numa imagem, seja uma pessoa, um objeto, um local ou,
literalmente, qualquer coisa, dado o fato da complexidade ao acesso a informações de
caráter multimídia. Isto é, uma imagem é um dado visual e embora esta tenha um
significado visual para as pessoas, não possui nenhum significado para um sistema
digital ou sistema computadorizado, seja uma câmera ou um computador. Assim a
procura de uma imagem em uma coleção de imagens, por exemplo, um álbum de
imagens, torna-se um processo que requer habilidade, paciência e organização.
A partir desta problemática surgiu o conceito Image Annotation (Anotação de
Imagem) que apresenta algumas técnicas com a tentativa de solucionar esse problema.
O processo de anotação de imagem é muito importante, tendo em vista que a descrição
das imagens tende a minimizar os esforços no processo de recuperação das mesmas.
Entretanto, esta anotação não pode atualmente ser realizada sem o auxílio de
uma ferramenta externa, em sua maioria, ferramenta desktop, onde há a necessidade da
instalação do sistema em um computador do usuário, consumindo muitos recursos do
mesmo como, por exemplo, memória, espaço em disco, CPU; o que, conseqüentemente,
acarretará em redução do desempenho do sistema.
É baseado nesta problemática que o presente trabalho foi desenvolvido tendo o
objetivo de proporcionar meios que permitam a anotação de imagens on-line.
Com a construção de um sistema de anotação de imagens on-line, o usuário
basta somente acessar o endereço no qual o sistema on-line está registrado para realizar
a anotação de suas imagens.
14
Desta forma, o presente trabalho irá apresentar o desenvolvimento de uma
ferramenta para criação de anotação de imagens via web, chamada WebAnnotate.NET,
as etapas e o embasamento teórico necessário para a construção desta.
No capítulo 2, será apresentada a Revisão de Literatura, abordando os conceitos
de SVG e Recuperação e Anotação de Imagens; fundamentação teórica necessária para
realizar o trabalho e atingir seus objetivos. No capítulo 3, serão descritos os materiais e
métodos adotados para o desenvolvimento do trabalho. No capítulo 4, serão
apresentados os resultados alcançados com o desenvolvimento deste trabalho,
demonstrando a estrutura adotada para construção da ferramenta. No capítulo 5, serão
apresentadas as considerações finais. E, por fim, no capítulo 6 será apresentado o
referencial bibliográfico utilizado no trabalho.
15
2. Revisão de Literatura
Este capítulo apresenta o fundamento teórico necessário para atingir o objetivo do
trabalho. Será abordada uma breve conceituação sobre XML (eXtensible Markup
Language), definição de elementos, atributos, namespace e validação de documento
XML.
Serão abordados temas sobre os conceitos básicos de representação gráfica
através do Scalable Vector Graphics, demonstrando os principais elementos,
propriedades e apresentando exemplos de utilização, conceitos estes relevantes para o
embasamento teórico do trabalho.
Por fim, será abordado o foco do trabalho quanto à anotação de imagens,
apresentando a problemática no processo de recuperação de imagens, baseado em
conteúdo textual ou visual, as principais técnicas de anotação de imagens e o
funcionamento das mesmas.
2.1.
XML (eXtensible Markup Language)
XML é uma linguagem usada para representar dados como uma string de texto que
inclui uma marcação intercalada a fim de descrever as propriedades dos dados. O uso de
marcação permite que o texto seja intercalado por informações relacionadas a seu
conteúdo ou forma (GRAVES, 2003).
O XML é uma tecnologia aberta e amplamente suportada para intercâmbio de
dados. A característica de ser extensível permite criar linguagens de marcação
inteiramente novas para descrever tipos de dados específicos. Entre as linguagens de
marcação baseadas em XML, incluem-se XHTML, MathML, VoiceXML, SMIL, CML,
XBRL e SVG (DEITEL et al, 2003a).
16
2.1.1. Estruturação do Documento XML
O documento XML é composto basicamente por elementos e atributos. Cada
documento XML é composto de um elemento pai (raiz), que é envolvido por um par de
“< >” (tags) e elementos filhos, sendo que cada elemento pode possuir atributos
próprios, que são definidos ao decorrer de sua estrutura e, posteriormente, serão
armazenados em uma base de dados XML (entendendo-se "base de dados" como
qualquer meio de armazenamento persistente, desde uma tabela em um SGBD até um
arquivo em disco) (GRAVES, 2003).
2.1.1.1.
Elementos
O elemento é o bloco de construção básico do XML e é usado para descrever e
armazenar conteúdos diversos. Cada elemento pode ou não conter outros elementos
aninhados em seu interior, chamados de subelementos. Assim, cada documento XML é
composto de somente um elemento externo (elemento raiz) e um ou mais elementos
filhos (subelementos) (GRAVES, 2003), como ilustra a Figura 1.
Figura 1 – Exemplo da estruturação de um elemento e seus subelementos no XML.
2.1.1.2.
Atributos
Assim como visto na Figura 1, um elemento pode conter outros elementos aninhados.
No entanto, um elemento pode ou não conter propriedades, chamadas de “atributos”,
que podem ser usadas para detalhamento adicional das informações de um elemento.
Os atributos estão interligados com os elementos para que as informações
transmitidas dentro de um documento XML sejam mais facilmente compreendidas
17
(PITTS-MOULTIS & KIRK, 2000), ou seja, os atributos definem um conjunto de
características existentes em um documento XML, como ilustra a Figura 2.
Figura 2 – Exemplo da estruturação de um elemento e seus atributos no XML.
A Figura 2 ilustra um exemplo da estrutura de um elemento e seus atributos. O
elemento raiz é denominado imagem. O elemento imagem tem o atributo extensão, que
especifica qual a extensão do arquivo de imagem, e o atributo caminho, que especifica
qual o caminho físico da imagem.
O elemento imagem tem um subelemento, ou elemento filho, denominado de
dimensao. O elemento dimensao tem o atributo width, que especifica a largura da
imagem, e o atributo height, que especifica o comprimento da imagem.
2.1.2. Espaço de Nomes (Namespaces)
Como o XML permite que os autores de documentos criem suas próprias marcas,
conseqüentemente podem ocorrer colisões de nomenclaturas nestes documentos, isto é,
dois elementos diferentes com o mesmo nome (DEITEL et al, 2003b). Sendo assim, o
XML fornece um meio de impedir estas colisões de nomenclaturas chamadas de
espaços de nomes ou namespaces.
As namespaces permitem que um elemento seja referência de um outro
elemento, ou seja, que um elemento seja do mesmo tipo que um outro elemento
previamente criado no XML. A Figura 3 apresenta um exemplo de utilização de
namespace para eliminação de colisões.
18
Figura 3 – Exemplo de uma Namespace em um documento XML.
Como visto na Figura 3a, verifica-se a existência de uma colisão quanto ao
elemento documento contendo dois conteúdos diferentes. Na Figura 3b, elimina-se a
colisão utilizando uma namespace, ou seja, criam-se os identificadores prefixos
computacaografica e estruturadedados e ambos referenciam o elemento documento.
2.1.3. Validação do Documento XML
Como os documentos XML podem ter muitas estruturas diferentes, não se pode afirmar
que um documento em particular está completo, se faltam dados ou se está
adequadamente ordenado. Foi com essa finalidade que foram criadas as DTDs e os
Esquemas (XML Schemas).
As DTDs e os Schemas fornecem um meio extensível de descrever a estrutura de
um documento XML permitindo que estes possam ser validados quanto à estrutura dos
dados e quanto ao conteúdo dos mesmos.
As DTDs e os Schemas especificam os tipos de elementos, atributos e seus
relacionamentos dentro de um documento XML . As DTDs e os Schemas permitem que
um analisador sintático de XML verifique se um documento XML é válido através de
um conjunto de regras (DEITEL et al, 2003a). Em outras palavras, as DTDs e Schemas
necessitam de um analisador sintático (parser), atualmente incorporado nos browsers
mais conhecidos como, por exemplo, Microsoft Internet Explorer e Mozilla Firefox,
para que estes validem o documento XML quanto à estrutura dos dados e quanto ao seu
conteúdo.
O analisador sintático do XML faz a leitura do documento, verifica sua sintaxe,
relata quaisquer erros e permite acesso ao conteúdo do documento. Um documento
19
XML é considerado bem-formado (válido) se ele estiver sintaticamente correto (DEITEL
et al, 2003b).
A validação de um documento XML através de uma DTD segue um conjunto de
regras definidos numa gramática EBNF (Extended Backus-Naur Form) (DEITEL et al,
2003a). A Figura 4 ilustra um exemplo de DTD correspondente ao documento XML
apresentado na Figura 2.
Figura 4 – Exemplo de uma DTD de um documento XML.
Na Figura 4 são apresentados dois termos básicos, ELEMENT e ATTLIST, para a
estruturação de uma DTD de um documento XML. A definição de um elemento é dada
pelo termo ELEMENT que especifica o nome do elemento e o nome de seus
subelementos (elementos filhos). A definição de um atributo é dada pelo termo
ATTLIST que especifica o nome do elemento pertencente ao atributo, o nome do
atributo e o tipo do atributo.
A validação de um documento XML através de um Schema segue um conjunto
de regras definidos numa gramática XML, dado o fato da simplicidade de manipulação
de um documento XML frente à manipulação de um documento DTD (DEITEL et al,
2003a). A Figura 5 ilustra um exemplo de Schema correspondente ao documento XML
apresentado na Figura 2.
Figura 5 – Exemplo de um Schema de um documento XML.
20
Na Figura 5 são apresentados dois termos básicos, XS:ELEMENT e
XS:ATTRIBUTE, para a estruturação de um Schema para um documento XML. A
definição de um elemento é dada pelo termo XS:ELEMENT que especifica o nome do
elemento e o nome de seus subelementos. A definição de um atributo é dada pelo termo
XS:ATTRIBUTE que especifica o nome do atributo e o tipo do atributo.
Um maior detalhamento sobre esse assunto (validação do documento XML)
foge ao escopo do presente trabalho, no entanto, pode ser encontrado em detalhes em
(PITTS-MOULTIS & KIRK, 2000).
2.2.
SVG (Scalable Vector Graphics)
O SVG é uma linguagem baseada em XML que descreve de forma vetorial imagens e
gráficos bidimensionais (W3C, 2003a). O SVG, que pode ser traduzido do inglês como
Gráficos Vetoriais Escaláveis, é um padrão criado pela W3C para tratamento,
manipulação e visualização de imagens e gráficos vetoriais e escaláveis.
2.2.1. Características
O SVG tem muitas vantagens potenciais em relação aos padrões de gráficos existentes.
Muitas das características positivas do SVG estiveram individualmente disponíveis em
formatos de gráficos prévios como, por exemplo, JPEG e GIF. E é esta combinação de
características positivas, que faz o SVG ser potencialmente tão eficiente e útil para
criação de imagens e gráficos (WATT et al., 2002). Nessa seção serão apresentadas
algumas das principais características do SVG.
2.2.1.1.
O SVG é Leve (quanto ao tamanho do Arquivo)
Uma das características do SVG é quanto à descrição dos elementos na forma vetorial.
Na Computação Gráfica, os objetos podem ser classificados segundo a sua origem, ou
21
sua forma de aquisição do meio real para o meio digital, em duas formas distintas:
Modelo Matricial e Modelo Vetorial.
No Modelo Matricial, ou raster, os objetos são baseados em um conjunto de
células localizadas em coordenadas contínuas, implementadas numa matriz 2D. Cada
célula representa um pixel da imagem aonde se têm os atributos de cor e brilho
(RAMIREZ, 2005).
No Modelo Vetorial, os objetos são baseados em um conjunto de elementos
geométricos primitivos (ou primários) (linha, círculo, polígono, arco...), situados num
sistema de coordenadas bidimensionais ou tridimensionais e produzidos por meio de sua
descrição matemática (RAMIREZ, 2005).
A Figura 6 apresenta um exemplo de um segmento de reta mapeado pelos dois
modelos, matricial e vetorial, respectivamente.
Figura 6 – Exemplo de um segmento de reta nos modelos matricial e vetorial.
Como visto na Figura 6, as imagens e gráficos vetoriais são mais leves que as
imagens e gráficos matriciais, tendo em vista, a forma de descrever o meio real para o
meio digital, dado ao fato que os modelos vetoriais ocupam menos memória em disco
para a representação de uma imagem.
22
2.2.1.2.
O SVG é Escalável
Uma outra característica do SVG é quanto à escalabilidade proporcionada pelo formato
vetorial. Por serem baseados em vetores, esses objetos não perdem qualidade ao serem
ampliados, já que as funções matemáticas adequam-se facilmente à escala, o que não
ocorre com os objetos do Modelo Matricial que utilizam métodos de interpolação na
tentativa de preservar a qualidade (WIKIPEDIA, 2000).
2.2.1.3.
O SVG é Interativo
Outra característica do SVG é a interatividade. A interatividade permite a percepção e
modificação dos estados dos objetos do SVG em relação aos eventos gerados pelo
usuário como, por exemplo, os eventos do teclado e do mouse. Na Tabela 1 são
apresentados alguns dos eventos do SVG.
Tabela 1 – Tipos de eventos do SVG (W3C, 2003a).
NOME
DESCRIÇÃO
FOCUSIN
FOCUSOUT
ACTIVATE
CLICK
MOUSEDOWN
MOUSEUP
MOUSEOVER
MOUSEMOVE
MOUSEOUT
SVGLOAD
SVGUNLOAD
Ocorre quando um elemento recebe
o foco.
Ocorre quando um elemento perde
o foco.
Ocorre quando um elemento é
ativo, seja pelo clique do mouse,
seja pelo pressionar de uma tecla.
Ocorre quando um botão do mouse
é clicado.
.
Ocorre quando um botão do mouse
é pressionado.
Ocorre quando um botão do mouse
é liberado.
Ocorre quando o ponteiro do mouse
está sobre um elemento.
Ocorre quando o ponteiro do mouse
em movimento sobre a região de
um elemento.
Ocorre quando o ponteiro do mouse
sai de sobre um elemento.
Ocorre quando um documento do
SVG é carregado.
Ocorre quando um documento do
SVG é fechado.
NOME DO
ATRIBUTO
onfocusin
onfocusout
onactivate
onclick
onmousedown
onmouseup
onmouseover
onmousemove
onmouseout
onload
onunload
23
SVGABORT
SVGERROR
SVGRESIZE
SVGSCROLL
SVGZOOM
BEGINEVENT
ENDEVENT
REPEATEVENT
2.2.1.4.
Ocorre quando um documento do
SVG aborta o seu carregamento.
Ocorre quando há um erro, ou
exceção, em um documento do
SVG.
Ocorre quando um elemento é
redimensionado.
Ocorre quando a posição da barra
de rolagem é modificada.
Ocorre quando o documento do
SVG altera as propriedades de
visualização, seja ZoomIn, seja
ZoomOut.
Ocorre quando uma animação é
inicializada.
Ocorre quando uma animação é
finalizada.
Ocorre a cada ciclo de repetição de
uma animação.
onabort
onerror
onresize
onscroll
onzoom
onbegin
onend
onrepeat
O SVG é Dinâmico
É possível a criação e manipulação dos objetos do SVG dinamicamente. Isso porque o
SVG, por ser um padrão da W3C, possui completa compatibilidade com os padrões da
W3C como, por exemplo, XHTML, CSS, DOM e ECMAScript.
Assim através do ECMAScript e do DOM, é possível a manipulação dos
elementos do SVG dinamicamente tornando possível, por exemplo, a execução de
animações, captura de eventos; simplificando a manipulação dos objetos do SVG e
alargando as margens de manipulações e operações a serem feitas dinamicamente.
2.2.1.5.
O SVG é Portável
Um dos princípios do SVG é a portabilidade. O SVG, por ser uma linguagem
padronizada, segue o princípio base de ser uma linguagem multiplataforma, ou seja,
uma linguagem independente da plataforma.
Assim sendo, o SVG pode ser utilizado em plataformas diferentes, desde que
estas possuam uma versão do analisador sintático do SVG. Em outras palavras, para a
interpretação do código de um documento SVG, faz-se necessária a utilização de um
24
analisador sintático que tem a tarefa de analisar, interpretar e apresentar a visualização
do código deste num browser.
2.2.2. Visualização do Documento SVG
Como citado no tópico anterior, o documento SVG necessita de um analisador sintático
que interprete e apresente a visualização do código SVG num browser.
Embora existam vários programas que permitem a edição e visualização de um
documento SVG em sua forma pura, ou seja, sem códigos scripts externos, somente os
browsers possuem recursos para a interpretação do documento SVG associado a esses
códigos scripts externos. Isso porque os browsers, em sua maioria, possuem suporte à
instalação de plugins do analisador sintático do SVG ou suporte nativo ao SVG. A
Tabela 2 apresentará alguns dos browsers mais utilizados e os tipos de suportes
oferecidos ao SVG.
Tabela 2 – Browsers que dão suporte ao SVG.
NOME
INTERNET EXPLORER
NETSCAPE
MOZILLA
SUPORTE
Plugin
Plugin
Nativo
2.2.3. Estruturação do Documento SVG
Seguindo a estrutura de um documento XML, o documento SVG, que é uma gramática
XML para a representação de gráficos, é composto por um elemento raiz, chamado svg,
no interior do qual todos os elementos, as transformações e animações são
especificados. A Figura 7 ilustra um exemplo de estrutura do documento SVG.
25
Figura 7 – Exemplo da estruturação de um documento SVG.
Como ilustrado na Figura 7, o elemento raiz, elemento svg, possui os atributos
x, y , width , height que determinam, respectivamente, as coordenadas iniciais ( x, y ) , a
largura e altura da janela de visualização do SVG. O elemento svg possui um elemento
filho, elemento rect, que descreve um retângulo no SVG que será visto com mais
detalhes em seções posteriores.
2.2.4. Propriedades
Os elementos básicos do SVG (retângulo, círculo, arcos, linhas...) possuem
propriedades comuns de visualização que ora são atributos do próprio elemento, ora
estão inseridos dentro de uma folha de estilo (CSS). Esta seção irá apresentar algumas
destas propriedades e suas funcionalidades quanto à visualização destes elementos.
2.2.4.1.
Stroke
A propriedade stroke define a cor da borda de um elemento do SVG, como ilustra a
Figura 8.
26
Figura 8 – Exemplo da propriedade stroke em um elemento do SVG.
2.2.4.2.
Stroke-Width
A propriedade stroke-width define a largura da borda de um elemento do SVG, como
ilustra a Figura 9.
Figura 9 – Exemplo da propriedade stroke-width em um elemento do SVG.
2.2.4.3.
Fill
A propriedade fill define a cor de preenchimento de um elemento do SVG, como ilustra
a Figura 10.
27
Figura 10 – Exemplo da propriedade fill em um elemento do SVG.
2.2.5. Elementos Gráficos
O SVG possui muitos elementos (objetos) para tratamento, manipulação e visualização
de gráficos e imagens. Dentre os elementos básicos estão: line, rect, circle, ellipse e
polygon; elementos estes que serão apresentados nesta seção.
2.2.5.1.
Line
O elemento line do SVG define um segmento de reta, ou seja, representa uma linha. O
elemento line consiste basicamente em dois pontos, (x1, y1) e (x 2, y 2) , que determinam
as coordenadas, inicial e final, da reta. A Tabela 3 apresenta os atributos básicos do
elemento e a Figura 11 ilustra um trecho de código e um exemplo deste elemento.
Tabela 3 – Atributos do elemento line do SVG.
NOME
DESCRIÇÃO
X1
Y1
X2
Y2
STYLE
Especifica o ponto inicial da reta no eixo X.
Especifica o ponto inicial da reta no eixo Y.
Especifica o ponto final da reta no eixo X.
Especifica o ponto final da reta no eixo Y.
Especifica o estilo (CSS) do elemento.
28
Figura 11 – Exemplo de um elemento line do SVG.
2.2.5.2.
Rect
O elemento rect do SVG define uma forma retangular. O elemento rect consiste
basicamente em um ponto ( x, y ) , que determina a coordenada inicial do elemento, e
duas propriedades width e height , que determinam a largura e altura, respectivamente.
A Tabela 4 apresenta os atributos básicos do elemento e a Figura 12 ilustra um trecho
de código e um exemplo deste elemento.
Tabela 4 – Atributos do elemento rect do SVG.
NOME
DESCRIÇÃO
X
Y
WIDTH
HEIGHT
RX
RY
STYLE
Especifica o ponto inicial do retângulo no
eixo X.
Especifica o ponto inicial do retângulo no
eixo Y.
Especifica a largura do retângulo.
Especifica o comprimento do retângulo.
Especifica o raio no eixo de X para o
retângulo com canto arredondado.
Especifica o raio no eixo de Y para o
retângulo com canto arredondado.
Especifica o estilo (CSS) do elemento.
29
Figura 12 – Exemplo de um elemento rect do SVG.
2.2.5.3.
Circle
O elemento circle do SVG define uma forma circular. O elemento circle consiste em
um ponto (cx, cy ) , que determina, a partir do centro, a coordenada inicial do elemento, e
a propriedade r , que determina o raio do elemento. A Tabela 5 apresenta os atributos
básicos do elemento e a Figura 13 ilustra um trecho de código e um exemplo deste
elemento.
Tabela 5 – Atributos do elemento circle do SVG.
NOME
DESCRIÇÃO
CX
CY
R
STYLE
Especifica o ponto inicial no centro círculo no
eixo X.
Especifica o ponto inicial no centro do círculo
no eixo Y.
Especifica o raio do círculo.
Especifica o estilo (CSS) do elemento.
30
Figura 13 – Exemplo de um elemento circle do SVG.
2.2.5.4.
Ellipse
O elemento ellipse, assim como o elemento circle, do SVG define uma forma circular.
A diferença é que enquanto o elemento circle define uma única propriedade para o raio,
adotado em ambos os eixos (x, y ) , o elemento ellipse define duas propriedades para
raio, adotado para cada um dos eixos (x, y ) . O elemento ellipse consiste basicamente
em um ponto (cx, cy ) , que determina, a partir do centro, a coordenada inicial do
elemento e um ponto (rx, ry ) , que determina o raio nos eixos (x, y ) . A Tabela 6
apresenta os atributos básicos do elemento e a Figura 14 ilustra um trecho de código e
um exemplo deste elemento.
Tabela 6 – Atributos do elemento ellipse do SVG.
NOME
DESCRIÇÃO
CX
CY
RX
RY
STYLE
Especifica o ponto inicial no centro círculo no
eixo X.
Especifica o ponto inicial no centro do círculo
no eixo Y.
Especifica o raio do círculo no eixo X.
Especifica o raio do círculo no eixo Y.
Especifica o estilo (CSS) do elemento.
31
Figura 14 – Exemplo de um elemento ellipse do SVG.
2.2.5.5.
Polyline e Polygon
Os elementos polyline e polygon do SVG definem formas livres, ou seja, ambos os
elementos formam um elemento sem forma pré-definida. O elemento polyline do SVG é
usado para representar formas abertas, segmentos que não geram um polígono fechado.
Ao contrário, o elemento polygon é usado para representar formas fechadas. Ambos os
elementos consistem basicamente em uma propriedade points que define todas as
coordenadas
(x, y )
do elemento. A Tabela 7 apresenta os atributos básicos dos
elementos e a Figura 15 ilustra um trecho de código e um exemplo deste elemento.
Tabela 7 – Atributos do elemento polyline e polygon do SVG.
NOME
DESCRIÇÃO
X
Especifica o ponto inicial do polígono no eixo
X.
32
Y
POINTS
STYLE
Especifica o ponto inicial do polígono no eixo
Y.
Especifica todos os pontos do polígono
ordenados no padrão “x1,y1 x2,y2 ..... xn, yn”
Especifica o estilo (CSS) do elemento.
Figura 15 – Exemplo de um elemento polygon do SVG.
2.3.
DOM (Document Object Model)
O DOM, que pode ser traduzido do inglês como Modelo de Objeto de Documentos, é
uma interface de programação de aplicativos (API) para documentos HTML e XML
(W3C, 2003b).
O DOM define uma estrutura lógica dos documentos e o meio pelo qual estes
podem ser acessados e manipulados (W3C, 2003b). Isso porque o DOM define um
modelo hierárquico dos elementos contidos em um documento em forma de uma árvore
composta de nós. Assim, cada elemento de um documento HTML e XML é um nó que
pode ou não conter nós filhos, como ilustra a Figura 16.
33
Figura 16 – Modelo hierárquico definido pelo DOM.
Como apresentado na Figura 16, o DOM cria uma estrutura em árvore para os
documentos HTML e XML. Assim, através do DOM é possível acessar os “nós filhos”
a partir de um “nó pai”, ou seja, o acesso a cada elemento de um documento HTML e
XML segue uma hierarquia fixa. A Figura 17 ilustra um exemplo dessa estrutura em um
documento HTML.
Figura 17 – Exemplo de uma estrutura hierárquica criado pelo DOM de um documento
HTML.
Logo, através do DOM, é possível criar documentos ou acessar outros já
existentes, navegar pela sua estrutura e adicionar, modificar ou apagar elementos e
conteúdo (W3C, 2003b).
O DOM é separado em diferentes módulos: o Core (núcleo), o XML e o HTML
(W3SCHOOLS, 2005a).
ƒ
O Core DOM define um conjunto de objetos para manipulação de
qualquer documento estruturado.
ƒ
O XML DOM define um conjunto de objetos para manipulação dos
documentos XML.
34
ƒ
O HTML DOM define um conjunto de objetos para manipulação dos
documentos HTML.
O DOM é separado em níveis, ou camadas.
ƒ
O DOM Nível 1, segundo (RINTALA, 2000), concentra-se no Core
(núcleo) e nos modelos de documentos HTML e XML. Contém as
funcionalidades para navegação e manipulação destes, como ilustra a
Figura 18.
Figura 18 – Arquitetura da API do DOM Nível 1 (W3C, 2003b).
ƒ
O DOM Nível 2, segundo (RINTALA, 2000), inclui um modelo de
objeto Style Sheet (folha de estilo) e define a funcionalidade para
manipular as informações de estilos do documento HTML. O DOM
Nível 2 também define um modelo de eventos e fornece a sustentação
para namespaces do XML, como ilustra a Figura 19.
35
Figura 19 – Arquitetura da API do DOM Nível 2 (W3C, 2003b).
ƒ
O DOM Nível 3, segundo (RINTALA, 2000), concentra-se na leitura e
armazenamento dos documentos HTML e XML, bem como nos modelos
de conteúdos (como DTD’s e Schemas) com suporte a validação dos
documentos. O DOM Nivel 3 também concentra-se na visualização e
formatação dos documentos, nos eventos de teclado e nos grupo de
eventos, como ilustra a Figura 20.
36
Figura 20 – Arquitetura da API do DOM Nível 3 (W3C, 2003b).
2.4.
Recuperação de Imagens
Tem se visto um crescimento muito rápido das coleções de imagens digitais. Todos os
dias equipamentos militares e civis geram gigabytes de imagens. No entanto, não se
pode acessar ou usar a imagem sem que esta esteja organizada, permitindo uma
navegação, pesquisa e recuperação (RUI et al, 1999).
O computador é um dos meios mais utilizados para visualização e
armazenamento destas imagens. Entretanto, um dos principais problemas encontrados é
em relação a como descrever os elementos presentes numa imagem, seja uma pessoa,
um objeto, um local ou, literalmente, qualquer coisa, dado o fato de que os
computadores não possuem mecanismos para a descrição destas imagens.
A recuperação de imagens representa uma área de pesquisa muito ativa desde a
década de 70 e tem recebido a contribuição de duas grandes linhas de pesquisas: o
gerenciamento de Banco de Dados e a Visão Computacional. Estas estudam a
recuperação de imagens sob dois ângulos diferentes, uma baseada no conteúdo textual e
a outra baseada no conteúdo visual (RUI et al, 1999).
O processo de recuperação de imagens baseado em conteúdo textual refere-se ao
conceito de Anotação de Imagens.
37
O processo de recuperação de imagens baseado em conteúdo visual envolve,
basicamente, duas etapas: Extração de Características de Imagens e Registro de
Imagens.
Nesta seção serão apresentados os conceitos relativos a cada uma das etapas.
Primeiramente, serão apresentadas as etapas envolvidas no processo de recuperação de
imagens baseada no conteúdo textual e posteriormente as etapas envolvidas no processo
de recuperação de imagens baseada no conteúdo visual.
2.4.1. Recuperação de Imagens baseada em Conteúdo Textual
A anotação de imagens é um das formas mais utilizadas para recuperação de imagens
baseado em conteúdo textual. A anotação de imagens consiste na descrição dos
elementos presente em uma imagem, dando sentido a esses elementos através de
palavras-chave. Assim, cada elemento da imagem contém uma ou mais palavras-chave
que denotam um sentido textual do elemento visual. Esse é o assunto que será visto no
decorrer desta seção, apresentando as técnicas existentes de anotação de imagens.
2.4.1.1.
Anotação de Imagens (Image Annotation)
O crescimento muito rápido das coleções de imagens digitais ocasionou uma grande
necessidade de um repositório para armazenamento destas imagens, a partir disto,
verificou-se a necessidade de um melhor gerenciamento destas imagens, qual seja:
armazenamento, edição, publicação, visualização e pesquisa destas imagens. Isso,
segundo (RODDEN, 1999), tende a aumentar e conseqüentemente requerer sistemas de
gerenciamento de imagens cada vez mais robustos e eficientes.
Essa necessidade de gerenciamento de imagens é acarretada pela complexidade
ao acesso a informações de caráter multimídia, isto é, uma imagem é um dado visual e
embora esta tenha um significado visual para as pessoas, não possui nenhum significado
para um sistema digital ou sistema computadorizado, seja uma câmera ou um
computador. Assim a procura de uma imagem em uma coleção de imagens, por
exemplo, um álbum de imagens, torna-se um processo que requer habilidade, paciência
e organização.
38
Portanto, a partir desta problemática surgiu o conceito Image Annotation
(Anotação de Imagem) que apresenta algumas técnicas com a tentativa de solucionar
esse problema.
A Anotação de Imagens é um meio de indexação semântico de imagens através
de um jogo de palavras (termos-chave ou palavras-chave), isto é, a anotação de imagens
provê formas de relacionar termos a uma imagem, termos estes que, em suma,
proporcionam algum significado para a imagem e conseqüentemente permitem uma
recuperação mais exata de uma imagem através da utilização desse jogo de palavras.
A Anotação de Imagem tem chamado a atenção de diversos pesquisadores com
objetivo de criar técnicas mais eficientes e precisas para esta indexação semântica de
uma imagem como, por exemplo, Shneiderman e Kang (2000), Flickner et al (1995) e
Ono et al (1996).
As técnicas de anotação de imagens podem ser classificadas em três grupos:
manual, semi-automática e automática.
2.4.1.1.1.
Anotação Manual
A técnica mais simples e mais adotada é denominada de Anotação Manual, que consiste
no reconhecimento e na descrição dos elementos presentes em uma imagem por parte
do usuário. Isso porque a técnica de Anotação Manual não provê nenhum mecanismo de
reconhecimento automático dos elementos presentes em uma imagem, uma vez que a
técnica tende a prover formas de identificação, por parte do usuário, das regiões e dos
elementos da imagem. A Figura 21 ilustra as etapas envolvidas no processo de anotação
de imagens manual.
39
Figura 21 – Técnica de anotação de imagem manual.
Como visto na Figura 21, o processo de anotação de imagens manual consiste,
basicamente, em cinco passos:
1) Interação Usuário-Interface – o passo é dado mediante uma interface
com o usuário que disponibiliza ferramentas, ou funcionalidade, para a
realização do processo de reconhecimento e descrição das imagens;
2) Visualização da Imagem;
3) Gerenciamento das Imagens – a imagem a ser utilizada no processo de
reconhecimento, ou é fornecida pelo usuário através da interface no qual
será armazenada em uma base de dados, ou será carregada de uma base
de dados existente;
4) Anotação Manual – o passo de anotação consiste na identificação de
regiões na imagem através de ferramentas disponibilizadas na interface;
5) Gerenciamento das Anotações – as anotações (textos e regiões) descritas
pelo usuário são armazenadas em uma base de dados para posterior
recuperação.
Logo, a aplicação da técnica da Anotação Manual é dada mediante a uma
interface entre o usuário e as imagens de interesse; tal interface possui objetos prédefinidos para identificação dos elementos específicos da imagem, que serão descritos
através de um conjunto de palavras-chave que serão armazenadas em uma base de
dados juntamente com as informações das regiões identificadas.
40
Portando, essa técnica permite uma maior flexibilidade ao usuário de identificar
livremente os elementos em uma imagem e descrevê-los. E embora essa técnica, por um
lado, tende a ser mais desgastante, tendo em vista que a identificação dos elementos
presentes em uma imagem é mais lenta, ela deixa à escolha do usuário o que identificar
dentro de uma imagem.
2.4.1.1.2.
Anotação Semi-Automática
Uma técnica muito focalizada é denominada de Anotação Semi-automática, que
consiste na junção de mecanismos de Anotação Automática, abordados adiante, com
Anotação Manual. Isto é, a técnica de Anotação Semi-automática realiza um processo
de reconhecimento dos elementos presentes em uma imagem e após o reconhecimento
permite que usuário insira e/ou modifique os elementos identificados. A Figura 22
ilustra as etapas envolvidas no processo de anotação de imagens semi-automática.
Figura 22 – Técnica de anotação de imagem semi-automática.
41
Como visto na Figura 22, o processo de anotação de imagens semi-automática
consiste, basicamente, em seis passos, cujos passos 1, 2, 3 e 5 correspondem às mesmas
etapas do processo de Anotação Manual:
4) Reconhecimento Semi-automático – o processo de anotação semiautomática consiste no reconhecimento automático dos elementos da
imagem;
5) Anotação Manual e Semi-automática – no processo de anotação semiautomática, os elementos reconhecidos são descritos utilizando um
conjunto de palavras-chave armazenado em uma base de dados, para
descrição correta dos elementos reconhecidos; no processo de anotação
semi-automática, o reconhecimento é dado através de objetos prédefinidos na interface para identificação das regiões da imagem a serem
descritas ou modificação das regiões reconhecidas automaticamente.
Embora semelhante ao processo de Anotação Manual, no que diz respeito ao
processo de anotação através de uma interface, difere desta no que tange ao auxílio no
reconhecimento dos elementos presentes em uma imagem, que serão descritas através
de um conjunto de palavras-chave e armazenadas em uma base de dados juntamente
com as informações das regiões identificadas.
O reconhecimento dos elementos automático é dado mediante a recuperação de
imagens baseado no conteúdo visual, assunto que será abordado mais adiante, aonde a
identificação dos elementos é realizada através do processo de comparação de
similaridades entre as imagens consultadas.
Essa técnica é suscetível a erros de reconhecimento e descrição dos elementos de
uma imagem. Primeiro porque a imagem pode conter distorções diversas, assunto que
será abordado mais adiante, influenciando de forma negativa o reconhecimento dos
elementos na imagem. Segundo porque para a descrição dos elementos reconhecidos,
existe a necessidade de uma base de dados que contenha as palavras-chave relacionadas
aos elementos, isto é, o reconhecimento automático necessita da criação, previamente,
de uma base de dados na qual será consultada as similaridades existentes entre as
imagens para identificação dos elementos e a alimentação desta base se torna um grande
problema. Entretanto é mais flexível, uma vez que auxilia no processo de
reconhecimento e descrição dos elementos de imagens e ainda deixa à escolha do
usuário o que identificar e alterar nos elementos identificados dentro de uma imagem.
42
Assim, em caso de falha no reconhecimento dos elementos, o usuário pode eliminar ou
modificar os elementos incorretos.
2.4.1.1.3.
Anotação Automática
A técnica mais abordada em estudos científicos e grupos de pesquisa e desenvolvimento
é indubitavelmente a de Anotação Automática. Esta técnica surgiu como uma
alternativa recente de realizar o trabalho de anotação de imagem sem a necessidade de
interação com o usuário. Utilizando-se de algoritmos matemáticos complexos torna-se
possível a identificação dos elementos presentes em uma imagem e a posterior relação
destes elementos com palavras-chave, armazenados em uma base de dados que
descrevam tais elementos com exatidão. A Figura 23 ilustra as etapas envolvidas no
processo de anotação de imagens automática.
Figura 23 – Técnica de anotação de imagem automática.
Como ilustrado na Figura 23, o processo de anotação de imagens automática
consiste, basicamente, em seis passos, cujos passos 1, 2, 3 e 6 correspondem às mesmas
etapas do processo de Anotação Semi-automática:
43
4) Reconhecimento Automático – o processo de anotação automática
consiste no reconhecimento dos elementos da imagem, utilizando
cálculos matemáticos complexos para o reconhecimento;
5) Anotação Automática – no processo de anotação automática, após o
reconhecimento dos elementos da imagem, estes são descritos utilizando
um conjunto de palavras-chave armazenado em uma base de dados, para
descrição correta dos elementos reconhecidos.
Assim a aplicação da técnica da anotação automática elimina a descrição manual
dos elementos, realizando este procedimento automatizado em que os elementos
identificados são descritos através de um conjunto de palavras-chave armazenados em
uma base de dados.
Entretanto, assim como na Anotação Semi-automática, é muito suscetível a erros
de reconhecimento e descrição dos elementos de uma imagem. Primeiro, porque a
imagem pode conter distorções que levam a falha no processo de reconhecimento dos
elementos. Segundo, porque depende de uma base de dados de palavras-chave para a
descrição dos elementos reconhecidos e a alimentação desta base se torna um grande
problema, principalmente porque em caso de falha no processo de reconhecimento dos
elementos, não existem meios para o usuário eliminar ou modificar os elementos
incorretos.
Segundo (RUI et al, 1999), até 1990, a recuperação de imagens baseada em texto
era a maneira mais utilizada. Embora muitos avanços tenham sido alcançados ao longo
das pesquisas, tais como modelagem de dados, indexação multidimensional e avaliação
de consultas, (RUI et al, 1999) afirma que existem duas grandes dificuldades,
especialmente, quanto ao tamanho das coleções de imagens. A primeira dificuldade é a
quantidade de trabalho requerido na anotação manual das imagens. A segunda
dificuldade, que é mais essencial, resulta do rico conteúdo das imagens e a subjetividade
da percepção humana.
Para (RUI et al, 1999), como já comentado anteriormente, a subjetividade da
percepção e anotações imprecisas podem causar perdas no processo de recuperação de
imagens. Do ano de 1990 em diante, por causa da emergência em larga escala das
coleções de imagens, as dificuldades encontradas pela anotação manual tornaram-se
mais agudas. A fim de superar estas dificuldades, volta-se para a recuperação de
imagens baseada no conteúdo. Ou seja, em vez de serem anotadas manualmente por
44
chaves baseadas em texto, as imagens são indexadas pelo seu próprio conteúdo visual,
tal como cor, forma e textura. Esse é o assunto da próxima seção.
2.4.2. Recuperação de Imagens baseada em Conteúdo Visual
Nesta seção será apresentado o processo de extração de características das imagens,
uma vez que as características visuais das imagens definem o ponto de partida para a
recuperação das mesmas. Ainda será apresentado o funcionamento deste processo de
extração e quais as características são mais relevantes para processo de recuperação de
imagens. Posteriormente serão apresentadas as formas de registro das imagens, uma
etapa muito importante no processo de recuperação de imagens, dado o fato de que é
nesta etapa em que os elementos das imagens são identificados, baseado nas
características extraídas.
2.4.2.1.
Extração de Características de Imagens
As pesquisas na área de Recuperação de Imagens levaram à construção de sistemas
cujas consultas deixaram de ser relativas a textos descritos em algum momento, e
passaram a ser por similaridades existentes entre as imagens. Ou seja, as consultas por
similaridades avaliam o grau de semelhança entre as características das imagens como
Cor, Textura e Forma.
Assim, dado que a subjetividade da percepção humana e anotações imprecisas
podem causar perdas no processo de recuperação, tem-se que o processo de consulta
por similaridades, que será explanado no decorrer desta seção, se torna mais confiável,
dado o fato de que as consultas são realizadas sobre as características das imagens e
não sobre textos e anotações.
2.4.2.1.1.
Processo de Extração de Características
Para o emprego do processo de recuperação de imagens por similaridade, existe a
necessidade da identificação das características da imagem, dado o fato de que estas
45
características são o meio de comparar duas ou mais imagens para identificação de
semelhanças. Logo, o primeiro passo para este processo de recuperação de imagens é a
extração das características das imagens.
Segundo (BUENO, 2001), “característica” é uma função de uma ou mais
medidas, calculadas de forma que quantifiquem alguma propriedade.
Figura 24 – Processo de extração de características de imagens.
Como visto na Figura 24, o processo de extração de características de imagens
consiste no mapeamento das propriedades relevantes de uma imagem. Em outras
palavras, a imagem original é analisada por um motor de extração de características que
obtém as propriedades mais relevantes, apresentadas na Tabela 11, de uma imagem e as
armazena em um espaço de características.
Após a imagem ser segmentada em regiões, resultante do processo de extração
de características, inicia-se o processo de representação e descrição do conjunto de
pixels segmentados em uma forma adequada de processamento (BUENO, 2001), como
ilustra a Figura 25.
46
Figura 25 – Exemplo de segmentação de imagem.
Segundo (BUENO, 2001), há duas formas de representar uma região: baseandose nas características externas (isto é, suas fronteiras), ou nas características internas (os
pixels contidos na região). Para análise das características morfológicas ou formas
presentes na imagem, utilizam-se as características externas, e para análise das
características refletidas como, por exemplo, cor e textura, utilizam-se as características
internas.
Na Tabela 11 é apresentada a taxonomia dos atributos e das características mais
utilizadas no processo de extração de características agrupando-os em cinco espaços de
características.
Tabela 11 – Taxonomia sobre espaços de características extraídas das imagens
(BROWN apud BUENO, 2001).
ESPAÇO DE CARACTERÍSTICAS
ATRIBUTOS
INTENSIDADE BRUTA (RAW INTENSITY)
BORDAS
CARACTERÍSTICAS SALIENTES
CARACTERÍSTICAS ESTATÍSTICAS
CARACTERÍSTICAS DE ALTO NÍVEL
MATCHING VERSUS MODELO
Baseia-se na intensidade dos pixels
Estrutura intrínseca, menos sensível a
ruídos. Incluem contornos e superfícies.
Estrutura intrínseca, posicionamento
preciso.
Envolvem intersecção de linhas, cantos,
pontos de curvatura alta.
Usam toda a informação, bons
resultados para transformações rígidas,
suposições.
Incluem momentos invariantes, eixos
principais/centróides.
Utilizam relações e informação de alto
nível, bons resultados para matching
(correspondência) local, impreciso.
Envolvem características estruturais,
sintáticas e redes semânticas.
Estrutura intrínseca e precisa, ruídos
somente em uma imagem.
Incluem
atlas
anatômico,
mapa
geográfico e modelo de objeto.
47
2.4.2.1.2.
Atributos Visuais
Segundo (ASLANDOGAN apud BUENO, 2001), o processo de análise de imagem
baseada no seu conteúdo pode ser modelado segundo uma hierarquia de quatro níveis
de abstração. No primeiro nível estão os pixels da imagem, com a informação sobre
cores ou brilho associadas ao elemento. O segundo nível trabalha com os atributos, tais
como bordas, cantos, linhas, curvas e regiões de cores. O terceiro nível procura
combinar e interpretar os atributos do nível anterior colocando-os sobre objetos que
possuam tais características. O quarto e último nível aproxima-se do mapeamento
humano, a partir do qual é possível compreender o relacionamento dos objetos
presentes na imagem (BUENO, 2001). Nessa seção serão discutidos os principais
atributos visuais para recuperação de imagens.
2.4.2.1.2.1. Atributo Cor
A cor é uma das características visuais mais utilizadas na recuperação de imagens e
possui um papel bastante significativo na indexação e recuperação. Isso porque,
segundo (RUI et al, 1999), o atributo cor proporciona, na tarefa de separação de planode-fundo, um processo relativamente robusto, independente do tamanho e orientação da
imagem.
Uma das técnicas mais empregadas para análise das características das cores é
denominada histograma, tendo em vista que, segundo (BUENO, 2001), um histograma
de cores calcula e apresenta o número de pixels de uma imagem para cada cor.
Segundo (PASS apud BUENO, 2001), a popularidade de utilização dos
histogramas de cores em sistemas de recuperação de imagens deve-se, principalmente, a
três fatores:
ƒ
é computacionalmente simples e barato;
ƒ
pequenas alterações de movimentação na imagem pouco afetam os
histogramas;
ƒ
objetos distintos freqüentemente possuem histogramas diferentes.
48
Entretanto, segundo (BUENO, 2001), não é possível separar ou reconhecer
imagens utilizando apenas o histograma das cores das mesmas. Isso porque duas
imagens diferentes podem ter o mesmo histograma, como ilustra a Figura 26.
Figura 26 – Exemplo de um mesmo histograma de cores associados a quatro imagens
distintas (BUENO, 2001).
Como visto na Figura 26, as quatro imagens ilustram o mesmo histograma de
cores. Logo, a técnica de histograma de cores, embora apresente vantagens
computacionais, não possui recursos suficientes que garantam com precisão o
reconhecimento das imagens.
2.4.2.1.2.2. Atributo Textura
“A textura é um padrão visual no qual há um grande número de elementos visíveis
arranjados de forma equânime com densidades variadas” (BUENO, 2001). (RUI et al,
1999) define textura como um padrão visual cujas propriedades são homogêneas, não
representando informações de cores e intensidade, mas sobre o arranjo estrutural de
superfícies e sua relação com o ambiente.
Em outras palavras, textura é uma região composta por elementos de intensidade
uniforme e de forma simples que se repetem num intervalo (BUENO, 2001). O processo
de análise das texturas segue dois pontos de vista distintos: Estatística e Estrutural.
49
O processo de análise estatística aborda a análise das texturas ao nível de
intervalos dos elementos. Isso porque, segundo (BUENO, 2001) a análise estatística
busca caracterizar a variação da intensidade em uma janela de textura como contraste,
granularidade e direcionalidade.
O processo de análise estrutural aborda a análise das texturas ao nível dos
elementos. Ou seja, segundo (BUENO, 2001), a análise estrutural obtém os elementos
de textura presentes na imagem, determinando seus formatos e estimando as regras de
posicionamento. As regras de posicionamento descrevem a relação dos elementos da
textura, ou seja, descrevem como os elementos de textura são colocados em relação aos
demais, estabelecendo o relacionamento de vizinhança, o número de elementos por
unidade espacial e sua regularidade.
Com isso, tem-se que a análise das texturas difere do realizado sobre a análise
das cores, tendo em vista que enquanto a análise de cores considera os pixels das
imagens, a análise de texturas considera a região das imagens, com isso, é possível
determinar quais as regiões da imagem possuem texturas uniformes. Entretanto,
segundo (BUENO, 2001), igualmente ao processo de análise de cores, o processo de
análise de texturas sofre da mesma problemática da ambigüidade, e é acrescido a este o
problema
relacionado
à
dimensionalidade
(informação
em
espaço
de
alta
dimensionalidade). A Figura 27 ilustra quatro exemplos de texturas.
Figura 27 – Exemplo de quatro elementos de texturas (BUENO, 2001).
2.4.2.1.2.3. Atributo Forma
A recuperação de imagens baseada em forma é um dos problemas mais difíceis de
serem tratados pelos sistemas de recuperação de imagens (BUENO, 2001). Isto se deve,
principalmente, à dificuldade de segmentar os objetos de uma imagem, sendo que esta
50
recuperação de formas deve ser tipicamente limitada aos poucos objetos mais bem
discriminados que estão presentes na imagem (FALOUTSOS apud BUENO, 2001).
Segundo (RUI et al, 1999), o processo de recuperação de imagens baseado em
forma pode ser dividido em duas categorias: nos limites e na região. A primeira
categoria adota o reconhecimento dos objetos baseado na sua forma, ou seja,
reconhecimento de forma retangular, triangular, circular e etc. A segunda categoria
adota o reconhecimento dos objetos baseado em regiões, ou seja, reconhecimento de
semelhanças entre determinadas regiões de uma imagem.
No processo de análise de formas, segundo (BUENO, 2001), a imagem a ser
indexada deve ser pré-processada possibilitando a busca e identificação de
características como, por exemplo, bordas, de possíveis formas de objetos presentes na
imagem. No entanto, a identificação destas características é muito complexa quando as
mesmas não possuem formas pré-definidas, ou seja, (BUENO, 2001) afirma que o préprocessamento de filtros e algoritmos para identificação de objetos depende do domínio
da aplicação. Isso porque objetos como tumores e lesões não possuem formas prédefinidas, fator agravante que demanda um conjunto de algoritmos mais complexos para
identificação destes elementos, diferentemente de objetos como, por exemplo, avião,
carro e casa; que possuem formas pré-definidas e a identificação dos mesmos se torna
menos trabalhosa. A Figura 28 ilustra um exemplo de identificação de formas.
Figura 28 – Exemplo de identificação de formas.
Como visto no decorrer desta seção, embora existam algumas problemáticas no
processo de análise de imagens como, por exemplo, segmentação de imagens, o
processo de recuperação de imagens baseado em características tende a ser mais
51
eficiente e confiável uma vez que, independente da subjetividade humana quanto a
compreensão e descrição de uma imagem, o processo de consulta por similaridade
avalia as características das imagens.
Após a extração de características das imagens, é possível o reconhecimento
dos elementos presentes em uma imagem, etapa crucial para o processo de recuperação
de imagens através de similaridades. Isso porque na consulta de uma imagem, o
processo de recuperação por similaridades avalia as semelhanças entre a imagem
consultada e imagens armazenadas em um repositório, aonde um dos pontos avaliados
são os elementos presentes em ambas as imagens. Assim, imagens que contenham
elementos iguais são mais relevantes. Esse assunto é abordado na próxima seção.
2.4.2.2.
Registro de Imagens
O registro de imagens é o processo que permite o reconhecimento de duas ou mais
imagens de uma mesma cena situadas em momentos diferentes, em pontos de vista
diferentes e/ou por sensores diferentes. O registro de imagens é um passo crucial em
todas as tarefas de análise de imagens no qual a informação final é ganha da
combinação de várias fontes de dados (ZITOVA & FLUSSER, 2003).
Segundo (BROWN, 1992), existem três grandes áreas de estudos quanto ao
registro de imagens:
ƒ
Visão Computacional e Reconhecimento de Padrões - para inúmeras
tarefas como segmentação, reconhecimento de objeto, reconstrução de
forma, localização de movimento e reconhecimento de caracteres.
ƒ
Análise de Imagens Médicas – para diagnóstico médico, como
descoberta e localização de doenças e pesquisas biomédicas como
classificação de imagens microscópicas.
ƒ
Sensoriamento Remoto – para aplicações civis e militares, na agricultura,
geologia, oceanografia e exploração mineral.
Segundo (ZITOVA & FLUSSER, 2003), o registro de imagens pode ser dividido
em quatro grupos de problemas principais de acordo com o modo de aquisição de
imagem:
ƒ
Análise Multivisão – para análise de imagens de uma mesma cena que
são adquiridas em pontos de vista diferentes.
52
ƒ
Análise Multitemporal – para análise de imagens de uma mesma cena
que são adquiridas em momentos diferentes.
ƒ
Análise Multimodal – para análise de imagens de uma cena que são
adquiridas por sensores diferentes.
ƒ
Registro de Cena para Modelo – para análise de imagens de uma cena
com imagens adquiridas de um modelo de cena.
No entanto, segundo (ZITOVA & FLUSSER, 2003), devido à diversidade de
imagens a serem registradas e devido à variedade dos tipos de degradações, é
impossível projetar um método universal aplicável a todas as tarefas de registro de
imagens.
(ZITOVA & FLUSSER, 2003) afirma que a maioria dos métodos de registro
segue basicamente quatro passos: detecção de características (detecção de regiões,
extremidades, contornos, intersecção de linhas e cantos, ora utilizando modos
automáticos, ora utilizando modos manuais), semelhança de características (detecção
de características semelhantes entre imagens), estimação do modelo de transformação
(estimativa de parâmetros semelhantes, identificados a partir de análise entre imagens
de testes e imagens de referência) e re-amostragem e transformação de imagens.
Entretanto, a implementação (codificação) de cada um dos quatro passos
descritos por (ZITOVA & FLUSSER, 2003), tem seu grau de complexidade e uma certa
problemática. Isso porque, segundo (ZITOVA & FLUSSER, 2003), em primeiro lugar,
para cada um destes passos, cabe a identificação das características mais apropriadas a
um domínio ou tarefa. Em segundo lugar, estas características devem ser propriedades
distintas que incidem sobre a imagem freqüentemente e ainda sejam propriedades com
alto grau de detecção, ou seja, de fácil detecção. Isto é, para o processo de registro de
imagens, as características definidas no domínio da aplicação possuem um papel muito
importante para facilitar o processo de reconhecimento de imagens, dado que para este
processo, o reconhecimento de imagens inicia-se a partir da detecção de elementos
comuns entre as imagens.
Com isso, devido à problemática do registro de imagens, várias técnicas têm
sido estudadas com objetivo, em primeira instância, de reduzir o custo computacional
exigido nesta tarefa e, em segunda instância, obter resultados mais satisfatórios quanto à
identificação de características para detecção de semelhanças entre as imagens.
Nesta seção serão apresentadas algumas das alternativas empregadas para
resolução desta problemática.
53
2.4.2.2.1.
Transformação
A característica fundamental de qualquer técnica de registro de imagem é o tipo de
transformação espacial ou tipo de mapeamento utilizado para sobrepor duas imagens
apropriadamente (BROWN, 1992). Isso porque, como citado anteriormente, as imagens
podem ser adquiridas em cenas, momentos e por sensores diferentes. Assim existe uma
grande probabilidade de obtenção de objetos semelhantes com formas, tamanhos e
dimensões diferentes.
Segundo (BROWN, 1992), indiferentemente da existência de degradações e
variações nas imagens, as técnicas de registro de imagens devem revelar somente
informações quanto à característica espacial da imagem. Logo, a classe de
transformação somente removerá a distorção de espaço entre as imagens devido à
diferença de aquisição desprezando características de cena que afetam a aquisição ou
outros fatores externos. Ou seja, a classe de transformação somente removerá a
diferença nos valores e nas posições dos pixels entre duas imagens sobrepondo-as
apropriadamente.
Segundo (BROWN, 1992), em geral as transformações mais comuns são: rígida
(rigid), afim (affine), projetiva (projective), perspectiva (perspective) e polinomial
(polynomial).
A transformação rígida identifica os objetos ou sensores em movimento nos
quais os objetos nas imagens contenham formas e tamanhos relativos. A transformação
rígida é composta pela combinação de operações de translação, escala e rotação
(BROWN, 1992).
A transformação afim segue o mesmo conceito da transformação rígida, no
entanto, difere no que diz a generalidade, ou seja, a transformação afim é mais genérica
que a transformação rígida suportando distorções mais complicadas e mantendo a
descrição matemática adequada dos objetos nas imagens (BROWN, 1992).
As transformações projetiva e perspectiva são mais genéricas que as anteriores
suportando a diferença de localização dos objetos nas imagens, ou seja, ambas as
transformações permitem a identificação de objetos semelhantes em diferentes posições
sendo necessário conhecer a distância aproximada entre os objetos (BROWN, 1992).
54
A transformação polinomial é a transformação mais genérica, conhecida como
transformação global, suporta e corrige variados tipos de distorção (BROWN, 1992).
Embora cada transformação possua a habilidade de solucionar um tipo
especifico de problema, na maioria dos casos dado a grande dimensão do problema
apresentado, a utilização de um único tipo de transformação pode não solucionar o
problema. Isso porque o tipo de transformação a ser utilizado depende do tipo de
problema a ser analisado. Assim, na maioria dos casos a resolução de um problema
específico exige a combinação de uma ou mais técnicas de transformação.
2.4.2.2.2.
Distorção
Segundo (BROWN, 1992), um fator relevante quanto à escolha do método de registro
de imagem a ser empregado em um dado problema é a fonte de distorção (ou falha do
registro). Portanto, a detecção da fonte de distorção dentro da imagem é um passo
importante no processo de registro de imagem.
A distorção, segundo (BROWN, 1992), é a causa do alinhamento incorreto entre
as imagens, que deve ser identificado e corrigido para que o processo de registro de
imagens seja correto. A fonte de distorção pode ser dada pela mudança na posição do
sensor, pela mudança do ponto de vista e pela visualização de características ou objetos
em movimentação ou com deformações. Sendo que a existência de outras distorções,
espaciais ou fotométricas, aumenta o grau de dificuldade no processo de identificação
da fonte de falha do registro.
Segundo (BROWN, 1992), as distorções podem ser classificadas como:
estáticas/dinâmicas, internas/externas e geométricas/fotométricas. As distorções
estáticas não mudam para cada imagem e conseqüentemente podem ser corrigidas
através de técnicas e procedimentos de calibração de imagem. As distorções internas
estão relacionadas aos sensores. As distorções geométricas são típicas de sensores cuja
tarefa é de observação de sensoriamento remoto (exemplo: observação da Terra) e são
classificadas segundo o tamanho, inclinação e esquadrinhamento. As distorções
fotométricas são causadas por falhas nos dispositivos digitais utilizados para aquisição
de imagens, problemas como obscurecimento da imagem, distorção de lente,
imperfeição dos sensores e filtros.
55
De acordo com a problemática descrita acima, (BROWN, 1992) categoriza as
distorções em três categorias, sendo elas:
ƒ
Distorções Corretas – distorções que podem ser modeladas. O modelo
destas distorções determina a classe de transformações que registrará as
imagens. Estas distorções são tipicamente geométricas, devido a
mudanças de ponto de vista e ruídos de sensor.
ƒ
Distorções Incorretas – distorções que são difíceis de modelar. Estas
distorções dependem das características das cenas como, por exemplo,
iluminação, variação atmosférica, sombras e ruídos.
ƒ
Variações Diversas – distorções que revelam características diferentes
entre duas imagens como, por exemplo, mudanças na cena com
movimento de objeto, crescimentos ou deformações, e diferença entre as
medidas dos sensores quando são usados sensores com sensibilidades
variadas ou quando são usados sensores que medem diferentes
qualidades.
Portanto, tendo como base o problema da distorção, a solução mais viável seria a
eliminação completa da distorção. No entanto, essa solução não é uma tarefa trivial.
Uma das técnicas adotadas na maioria dos métodos de registro de imagens é a remoção
primária das discrepâncias de espaços e limitação de pequenos erros locais, ou ruídos.
Isso pode ser realizado através da escolha da classe de transformação de espaço viável a
um domínio ignorando as outras variações. A Figura 29 ilustra um exemplo de
distorção.
56
Figura 29 – Exemplo de distorção.
Embora existam algumas problemáticas no processo de reconhecimento dos
elementos das imagens como, por exemplo, a distorção, o reconhecimento de
elementos presentes em uma imagem, auxilia de forma significativa na recuperação de
imagens por similaridades. Portanto, quanto mais eficiente for o método de registro de
imagens, mais satisfatório será o processo de recuperação de imagens.
57
3. Materiais e Métodos
Neste capitulo serão apresentados os recursos utilizados para a realização e conclusão
de trabalho. Numa primeira etapa, serão apresentados os materiais utilizados para o
desenvolvimento deste e posteriormente numa segunda etapa, os métodos utilizados.
3.1.
Local e Período
O presente trabalho foi desenvolvido no Centro Universitário Luterano de Palmas. A
realização do trabalho ocorreu, mais especificamente, no Centro de Processamento de
Dados (CPD), durante o segundo semestre de 2005, como requisito da disciplina de
“Trabalho de Conclusão de Curso” do curso de Sistemas de Informação.
3.2.
Materiais
Para a realização deste trabalho, foi necessária a utilização de equipamentos de
hardware e software específicos, nos quais alguns deste foram oferecidos pelo curso e
disponibilizados na instituição e local mencionado acima.
3.2.1. Hardware
ƒ
Pentium IV de 2.0Ghz com 512Mb de RAM
58
3.2.2. Software
Para a realização do presente trabalho houve a necessidade de linguagens, softwares e
várias tecnologias como HTML, ECMAScript, XML, DOM, ASP.NET, C# e Ajax.Net
para implementação da ferramenta. Abaixo são listados os softwares utilizados no
decorrer deste trabalho.
ƒ
Acrobat Reader 7.0.0.1;
ƒ
Microsoft Windows Server 2003 Enterprise Edition;
ƒ
Microsoft Office XP;
ƒ
Internet Explorer 6.0;
ƒ
Microsoft Visual Studio Professional 2005;
ƒ
Microsoft SQL Server 2005;
ƒ
Macromedia Fireworks Studio 8.
3.2.3. Fontes Bibliográficas.
A realização de pesquisas bibliográficas pôde ser realizada pelos livros disponíveis na
Biblioteca do CEULP/ULBRA, além de diferentes materiais publicados na Internet. As
diferentes fontes pesquisadas são relacionadas adiante:
3.3.
ƒ
Livros;
ƒ
Dissertações;
ƒ
Publicações Científicas;
ƒ
Artigos;
ƒ
Documentações de APIs;
ƒ
Sites diversos.
Metodologia
Para a realização do presente trabalho, houve a necessidade da aquisição de
conhecimentos em campos de estudos distintos nos quais foram obtidas através de
pesquisas bibliográficas nas diversas fontes mencionadas acima, com o intuito de
recolher informações relevantes ao domínio do trabalho desenvolvido. Conceitos e
59
técnicas, alusivas ao escopo do trabalho, explanados com uma maior abrangência na
Revisão de Literatura.
Num primeiro momento, foram levantadas informações relevantes a cerca da
linguagem SVG. Conceitos básicos, características e funcionalidades disponibilizadas,
permitindo assim obter o embasamento teórico necessário para a criação dos objetos
gráficos da interface, o que permitiu a descrição dos elementos identificados pelo
usuário.
Num segundo momento, foram levantadas informações relevantes ao domínio de
“Recuperação de Imagens”. A partir destas informações, foi possível compreender o
processo de extração de características, que realiza a segmentação das características
das imagens. Após foram descritas as características mais relevantes dentro de uma
imagem para a realização do processo de reconhecimento dos elementos presentes
dentro da mesma. Posteriormente, foram descritos os passos e as problemáticas
existentes no processo de registro de imagens, no qual pode ser prejudicado pela
existência de deformações e distorções, por exemplo. Ainda foi possível descrever quais
os conceitos mais abordados na recuperação de imagens baseado em conteúdo textual e
visual. E, por último e mais importante, permitiu a compreensão das técnicas utilizadas
para realização de descrição das imagens, ou seja, foram apresentadas as principais
técnicas de anotação de imagens, exemplificando o modo de funcionamento das
mesmas. Isto se fez de suma necessidade para o embasamento teórico, possibilitando
aquisição de informações em diversas áreas relacionadas à recuperação de imagens que
sustentam a base do estudo e implementação da ferramenta proposta.
Após ter obtido embasamento teórico suficiente para a construção da ferramenta,
foi então definida a Linguagem de Programação e a API necessária para a construção da
ferramenta. A linguagem escolhida, depois de uma análise, foi ASP.NET e C#, já que a
mesma é uma linguagem para aplicações web e ainda possui uma grande biblioteca de
funcionalidades.
Nas seções subseqüentes são apresentadas as tecnologias mencionadas.
As
apresentações mantêm uma breve descrição sobre as tecnologias e suas principais
atuações dentro do trabalho.
60
3.3.1. ECMAScript
O ECMAScript é uma linguagem de programação, linguagem script, orientada a objetos
para executar e manipular objetos computacionais dentro de um ambiente de
desenvolvimento (ECMA, 1999).
O ECMAScript é baseado em diversas tecnologias e é mais conhecido como
Javascript, da Netscape, ou JScript, da Microsoft. Inventado por Brenda Eich, na
Netscape, apareceu primeiramente no browser 2.0 desta companhia, vindo
posteriormente a aparecer em todos os browsers subseqüentes da Netscape e da
Microsoft, a partir do Internet Explorer 3.0 (ECMA, 1999).
O ECMAScript começou a ser desenvolvido em novembro de 1996, foi
submetido ao ISO/IEC JTC 1, sendo que foi aprovado como padrão internacional
ISO/IEC 16262, em abril 1998. O padrão da ECMA está em sua terceira edição
(ECMA, 1999).
O ECMAScript foi projetado para ser uma linguagem script para a internet,
fornecendo um mecanismo de acesso as páginas da internet nos browsers voltado para o
usuário cliente. Uma linguagem script é uma linguagem de programação usada para
manipular, customizar e automatizar as facilidades de um sistema existente. Em tais
sistemas, a funcionalidade útil está disponível através de uma relação com o usuário, e a
linguagem script é um mecanismo para expor essa funcionalidade ao controle de
programa (ECMA, 1999).
3.3.2. ASP.NET e C#.
Como mencionado anteriormente, a linguagem de desenvolvimento da ferramenta é C#
baseado na plataforma .NET. Nas seções a seguir serão descritos alguns dos motivos
que levaram à escolha desta linguagem/plataforma para o desenvolvimento do
WebPaint.NET. Entretanto, fica a ressalva de que um estudo detalhado desta linguagem
foge ao escopo do presente trabalho, mas pode ser encontrado em (GALUPPO et al,
2004) e (WATSON et al, 2002).
61
3.3.2.1.
.NET Framework.
A tecnologia .NET é uma iniciativa que não engloba somente ferramentas ou
linguagens de programação, mas também um conjunto de tecnologias que representam a
próxima geração da plataforma Microsoft para o Windows e para a Internet (GALUPPO
et al, 2004).
O .NET Framework foi projetado de forma que pudesse ser usado a partir de
qualquer linguagem. O .NET consiste numa plataforma de desenvolvimento de
aplicações rica em recursos e que, ao mesmo tempo, é um ambiente gerenciado e de
execução protegida (WATSON et al, 2002).
Algumas das metas do.NET Framework são:
ƒ
fornecer uma nova plataforma de desenvolvimento, com foco em
desenvolvimento distribuído;
ƒ
fornecer um ambiente integrado para o desenvolvimento de Web
Services;
ƒ
melhorar a integração entre sistemas e aplicações, bem como habilitar o
acesso às aplicações a partir de qualquer dispositivo;
ƒ
3.3.2.2.
simplificar o desenvolvimento e a distribuição de aplicações.
C#
Como visto na seção anterior, a plataforma .NET consiste em um ambiente poderoso de
desenvolvimento que é formado por uma biblioteca gigantesca de recursos que são
utilizados a partir de uma linguagem cliente, como a C#. Esse é um dos motivos pelo
qual essa linguagem foi escolhida como linguagem padrão tanto da API, quanto para o
presente trabalho.
A C# é um linguagem de programação da plataforma .NET derivada de C/C++,
simples, moderna, orientada a objetos e fortemente tipada, a C# tem o poder do C/C++
aliado à alta produtividade do Visual Basic (GALUPPO et al, 2004). Dentre os
principais objetivos da linguagem C#, estão:
ƒ
primeira linguagem “orientada a componentes” da família C/C++;
ƒ
totalmente orientada a objetos;
ƒ
linguagem de tipos seguros (type-safe);
62
ƒ
não requer bibliotecas de tipos (type libraries);
ƒ
fornece um sistema unificado de tipos;
ƒ
fornece o gerenciamento automático de memória (garbage collector).
A C# é uma linguagem robusta que permite a interoperabilidade com XML,
SOAP, componentes COM, DLL e qualquer outra linguagem da plataforma .NET
(GALUPPO et al, 2004). Isso é um dos grandes avanços proporcionados pela
plataforma .NET, pois possibilita a integração de várias linguagens de programação em
um único ambiente de execução.
3.3.3. Ajax e Ajax.NET
Ajax não é uma única tecnologia, mas sim a união de diversas tecnologias que juntas
mudou de forma revolucionária a comunicação entre cliente e servidor, quebrando o
conceito tradicional de comunicação síncrona (GARRETT, 2005). E Ajax.NET é uma
API disponível para plataforma .NET que implementa este conceito.
O modelo de comunicação adotado atualmente pela Internet é o modelo
sincronizado em que a comunicação com o servidor é realizada a partir de uma ação do
cliente; após a requisição do cliente, o servidor faz o processamento da requisição e
retorna a resposta, geralmente, no formato de uma página HTML. Essa ação do cliente
tem como efeito primário a atualização da página web, mais conhecido como “Refresh”,
o qual ocasiona um incessante download, ou reenvio das informações da página do
servidor para o cliente a cada requisição, como ilustra a Figura 39.
Partindo desse modelo, não se têm formas viáveis de possibilitar a manipulação
das imagens pela ferramenta, dado o fato de que o tempo levado para a realização de
cada operação (em relação ao processamento de imagens), considerando o tempo de
envio da requisição mais o tempo da resposta do servidor, é relativamente grande.
Assim, tem-se que a cada ação do cliente o servidor precisa realizar duas ações: o
processamento da tarefa de processamento de imagens e envio da resposta em HTML.
Mais especificamente, pode-se dizer que o modelo clássico de comunicação da
internet dificulta a execução de operações sobre imagens, exceto no caso em que as
operações sejam tão simples que o tempo de processamento sobre a mesma seja muito
pequeno. Entretanto não é este o caso, já que as operações necessárias para a
63
manipulação de imagens demandam um maior tempo de processamento e,
conseqüentemente, levam a um maior retardo na resposta do servidor para o cliente.
Sendo este um dos principais problemas encontrados no modelo clássico de
comunicação, foi desenvolvido um conjunto de tecnologias que mudasse esse conceito
de sincronismo os quais formam o Ajax, conceito que representa um grupo de
tecnologias que deu origem ao modelo assíncrono de comunicação entre cliente e
servidor, no qual a requisição do cliente é realizada internamente. Como encontrado em
(GARRETT, 2005), a tecnologia Ajax incorpora:
ƒ
padronização da apresentação baseado em XHTML e CSS;
ƒ
exposição e interação dinâmicas usando “Document Object Model”;
ƒ
intercâmbio e manipulação dos dados usando XML e XSLT;
ƒ
recuperação de dados assíncronos usando XMLHTTPRequest;
ƒ
e o Javascript que faz a integração dos anteriores.
A padronização da apresentação utilizando XHTML e CSS simplifica o
desenvolvimento da página web. Essa forma de apresentação, além de reduzir o tempo
de desenvolvimento, ainda reduz de forma significativa o tamanho da página
(quantidade de bytes), fator importantíssimo quando se trata de velocidade de
comunicação entre cliente e servidor, ou comunicação via Internet.
A utilização do “Document Objet Model”, ou DOM, permite a manipulação de
todos os elementos da página através de objetos, ou seja, a estrutura do DOM expõe
métodos para o acesso e manipulação dos elementos de um documento, por exemplo,
uma página HTML.
A utilização de XML e XSLT para a manipulação de dados é muito relevante,
tendo em vista, que ambas são poderosas linguagens de marcação cujo maior beneficio
está na organização e transformação dos dados de forma flexível e cuja transmissão
desses dados é mais eficiente. A linguagem XML possibilita uma estruturação dos
dados de forma bastante adequada, dando flexibilidade para a manipulação dos mesmos.
Enquanto o XSLT possui uma estrutura para a transformação do XML em um formato
de apresentação como, por exemplo, HTML.
Uma
solução
para
este
problema
pode
ser
encontrada
no
objeto
XMLHTTPRequest. Este objeto, que atualmente está incorporado na maioria dos
navegadores, permite ao Javascript fazer solicitações HTTP a um servidor web sem a
necessidade de recarregar a página novamente, ou seja, o XMLHTTPRequest permite
fazer requisições e receber respostas de um servidor, geralmente em formato XML, sem
64
recarregar a página novamente com total transparência no processo de envio e
recebimento de dados para o cliente.
65
4. Resultados e Discussão
Este capítulo tem como objetivo apresentar o resultado prático da construção da
ferramenta proposta. Nesta seção serão abordadas as tecnologias envolvidas para a
construção desta ferramenta dando ênfase às tecnologias pertinentes à comunicação de
dados entre cliente e servidor e a técnica de anotações de imagens. Ainda serão
abordados alguns dos recursos disponíveis na ferramenta construída, apresentando
sucintamente e objetivamente a forma de implementação dos mesmos e exemplificando
os resultados obtidos.
4.1.
XML e DOM
O foco do presente trabalho tende a permitir a criação de anotação de imagens através
da união de várias tecnologias dentro dos quais está o SVG. Seguindo a estrutura de um
documento XML, o documento SVG é uma gramática XML para a representação de
gráficos. A partir disso, para a manipulação do documento SVG e dos seus elementos
gráficos é necessário utilizar o DOM. Isso porque, como mencionado anteriormente, o
DOM permite o acesso hierárquico a todos os objetos de um documento XML
possibilitando a realização de operações como “Criação”, “Alteração” e “Exclusão” dos
elementos deste documento.
Assim, através do DOM é possível o acesso direto a todos os objetos do
documento SVG, que por sua vez é um documento XML, permitindo uma flexível
manipulação dos elementos gráficos do SVG de acordo com as possibilidades de
manipulação disponíveis ao usuário da ferramenta.
66
4.2.
SVG e ECMAScript
Como mencionado na primeira parte do trabalho, o SVG é uma linguagem que descreve
de forma vetorial imagens e gráficos bidimensionais. O SVG possui muitas
funcionalidades no que tange à criação e visualização de elementos gráficos e criação de
efeitos e animações.
O foco do trabalho está relacionado à criação e manipulação de elementos
gráficos como, por exemplo, Retângulos, Elipses e Polígonos, para realização do
processo de anotação das imagens. Para manipulação destes elementos gráficos é
necessário utilizar a linguagem ECMAScript, que permite a manipulação dos elementos
gráficos em tempo de execução. Logo, a linguagem ECMAScript tem um papel
fundamental no tratamento e manipulação destes objetos. A Figura 30 ilustra um
exemplo de integração entre o SVG e a ECMAScript.
Figura 30 – Exemplo de integração entre o SVG e a ECMAScript.
A estrutura do documento SVG, como ilustra a Figura 30, segue uma seqüência
lógica. Primeiramente, especifica-se o elemento “svg”, que é o elemento raiz
(obrigatório) existente em todos os documentos SVG. Adiante especifica-se o elemento
“script”, que contém o conjunto de instruções para o tratamento e para a manipulação
dos elementos gráficos do SVG. E, por último, existe a declaração dos elementos
gráficos do SVG.
Neste exemplo, como ilustrado na Figura 30, o elemento “script” contém uma
variável e duas funções. A função “onPageInit(evt)” é a responsável pela criação da
67
instância do documento SVG, ou seja, a variável “svg” contém a representação do
objeto de acesso ao documento SVG criado pelo DOM. A função “onClick”, que é
declarada dentro da especificação do elemento gráfico do SVG “rect”, que descreve um
retângulo, é responsável pelo tratamento do evento “click” do mouse. A Figura 31
ilustra a execução do código apresentado na Figura 30.
Figura 31 – Exemplo da execução do código da Figura 30.
Como ilustrado na Figura 31, quando o evento “onclick” do elemento gráfico
retângulo for disparado, é executada a função “onClick(evt)”, que exibe uma mensagem
mostrando o valor da propriedade “id” do elemento clicado.
Ambas as linguagens são de suma importância para o presente trabalho. A
linguagem ECMAScript no tratamento e na manipulação dos elementos gráficos do
SVG. O SVG para a realização do processo de anotação manual, haja vista, que ela será
a responsável pela criação e manipulação dos elementos gráficos dinamicamente.
Portanto, dada essa flexibilidade, proporcionada pela integração destas duas
tecnologias, é possível ter um maior controle dos eventos disparados pelo usuário para
manipulação dos elementos gráficos do SVG.
68
4.3.
Anotação de Imagem
Como mencionado na segunda parte do trabalho, dada a grande quantidade de imagens
existentes atualmente, a grande problemática no gerenciamento destas imagens é quanto
à descrição dos elementos presentes nestas imagens. Com isso, tem-se que uma vez
armazenada esta imagem em uma coleção de imagens, o processo de recuperação desta
é uma tarefa extremamente cansativa e enfadonha, tendo em vista que será necessário
analisar todas as imagens contidas na coleção para encontrar uma imagem. No entanto,
a técnica de anotação de imagem, surgiu com o objetivo de auxiliar no processo de
recuperação de imagens baseado em conteúdo textual. Em outras palavras, as técnicas
de anotação de imagem têm a finalidade de descrever, através de um conjunto de
palavras-chaves, os elementos presentes em uma imagem. Assim, a recuperação da
imagem é mais eficiente, dado que para encontrar uma imagem, basta utilizar o
conjunto de palavras-chaves, utilizado na descrição da imagem, onde estas serão
analisadas com as descrições das imagens na base de dados.
Como explanado em seções anteriores, a técnica de anotação de imagem pode
ser: Manual, Semi-automática ou Automática. O presente trabalho abordou o conceito
de anotação manual de imagens para descrição dos elementos presente em uma imagem
por dois motivos. Primeiro, porque a ferramenta proposta opera sobre o ambiente da
internet, logo, haja vista que fatores como velocidade de conexão, tempo de resposta e
custo computacional são relevantes neste ambiente, pode se dizer que a utilização de
técnicas com recursos para identificação automática não é uma tarefa trivial, ou seja, é
praticamente inviável a identificação automática dos elementos, uma vez que para isso
faz-se necessária a utilização de algoritmos matemáticos complexos para esta
identificação. Assim, como este processo automático envolve várias etapas para o
reconhecimento dos elementos, este processo demanda um tempo relativamente grande
e um alto custo computacional para o cliente. Segundo, porque a técnica de anotação de
imagem manual permite uma flexibilidade no que tange à identificação das regiões e
dos elementos a serem descritos pelo usuário. Logo, o usuário tem completo controle
sobre o processo de descrição dos elementos do seu interesse.
69
4.4.
WebAnnotate.NET
Nesta seção será apresentado o produto final, obtido da união da teoria e prática deste
trabalho, na qual serão abordadas as principais funcionalidades disponibilizadas e o
software construído para anotação das imagens.
4.4.1. Interface com o Usuário
A interface do WebAnnotate.NET, visa a simplicidade na criação, edição e visualização
das anotações. A tela principal é responsável pela visualização das imagens existentes
no banco de imagens, assunto que será abordado mais adiante, do WebAnnotate.NET.
A Figura 32 ilustra o visual da tela principal do WebAnnotate.NET.
Figura 32 – Interface do WebAnnotate.NET.
Como apresentado na Figura 32, a interface é dividida em seções específicas
para facilitar o entendimento das responsabilidades das mesmas, sendo elas:
1) Seção de Menus;
2) Seção de Visualização de Imagens;
Na “Seção de Menus”, o usuário pode acessar a página de “Upload” de imagens,
na qual pode-se enviar imagens para o servidor que serão armazenadas em uma base de
imagens.
70
Na “Seção de Visualização de Imagens”, o usuário pode visualizar todas as
imagens contidas no banco de imagens do WebAnnotate.NET. Cada imagem
apresentada contém um “link” para a área de anotação de imagens.
Na área de anotação é apresentado um menu de ferramentas contendo objetos
pré-definidos para seleção das regiões que serão descritas pelo usuário. A Figura 33
ilustra o visual da área de anotação.
Figura 33 – Interface da área de anotação.
Como apresentado na Figura 33, a interface é dividida em seções específicas,
sendo elas:
1) Seção de Ferramentas;
2) Seção da Janela de Visualização;
Na “Seção de Ferramentas” são disponibilizados objetos pré-definidos para
seleção das regiões da imagem a serem descritas. A Figura 34 ilustra de forma ampliada
esses objetos.
71
Figura 34 – Seção de Ferramentas.
Como ilustrado na Figura 34, a “Seção de Ferramentas” disponibiliza três
objetos pré-definidos para seleção das regiões das imagens: Retângulo, Elipse e
Polígono, e uma para Seleção dos objetos. A Figura 35 ilustra o processo de
identificação e descrição de um elemento da imagem através do objeto polígono.
Figura 35 – Seção de Ferramentas.
Como ilustrado na Figura 35, o objeto mais adequado para a seleção do
elemento (o tigre), de forma satisfatória, foi o polígono. Através do objeto polígono, é
possível determinar regiões diversas, independentemente de sua forma. Em outras
palavras, através destes três objetos é possível fazer a seleção de quaisquer elementos
existente em uma imagem. Isso porque, se os elementos Retângulo e Elipse não
permitirem a seleção de uma região, o elemento Polígono permite a seleção de qualquer
forma livre em uma imagem, dando liberdade ao usuário na identificação dos elementos
72
na imagem. Entretanto, embora através destes objetos seja possível fazer as seleções e
descrições dos elementos da imagem, outros objetos poderiam ser utilizados como, por
exemplo, setas, linhas etc.
4.4.2. Arquitetura Cliente
Como mencionado acima, o ECMAScript permite maior controle dos elementos
gráficos do SVG. Baseando-se nesse conceito, foi construída uma estrutura de classes
para o gerenciamento dinâmico dos elementos gráficos do SVG. Vale ressaltar que esta
estrutura é executada no cliente, uma vez que o SVG é uma linguagem cliente.
A estrutura de classes gerencia todos os elementos gráficos criados pelo usuário
na identificação das regiões da imagem a serem descritas. Assim, para cada um dos
objetos disponibilizados (retângulo, elipse e polígono) foi criada uma classe para o
mapeamento do objeto e uma classe para gerenciar a coleção desses objetos. A Figura
36 ilustra a estrutura de classes do cliente.
Figura 36 – Estrutura de classe do cliente.
73
Como ilustrado na Figura 36, para o gerenciamento dos elementos gráficos do
SVG, foram criadas duas classes. Uma classe que faz o mapeamento do objeto em si, e
outra classe que controle a coleção dos objetos correspondentes.
Assim, para o gerenciamento dos retângulos foram criadas as classes:
RectangleManager e Rectangle. Para o gerenciamento das elipses foram criadas as
classes: EllipseManager e Ellipse. Para o gerenciamento dos polígonos foram criadas as
classes: PolygonManager e Polygon. Para gerenciamento interno dos pontos
(coordenadas), foram criadas as classes: PointManager e Point. E por último, e mais
importante, para o gerenciamento das anotações, foram criadas as classes:
AnnotationManager e Annotation. Essa estrutura de classes permitiu maior dinamismo
na criação e manipulação dos objetos do SVG.
Como ilustrado na Figura 36, tanto as classes de gerenciamento quanto as
classes de mapeamento contêm vários métodos dentro dos quais dois merecem uma
atenção especial, sendo eles: “toXmlString()” e “toSvgElement()”.
O método “toXmlString()” é responsável pelo mapeamento do objeto, ou da
coleção de objetos, para a linguagem XML. Isso porque a manipulação e transferência
de dados XML é mais eficiente. Assim, tanto no cliente, quanto no servidor os
elementos, representados em ECMAScript, são traduzidos e manipulados através de
XML.
O método “toSvgElement()” é responsável pelo mapeamento do objeto da
estrutura de classe, para elemento reconhecido pelo SVG. Em outras palavras, como foi
mencionado, cada objeto do SVG contém um objeto correspondente na estrutura de
classes do cliente, no entanto, esse elemento não é reconhecido pelo documento SVG,
logo, esse método retorna um objeto reconhecido pelo SVG, para ser adicionado no
documento e visualizado no browser.
4.4.3. Arquitetura Servidor
Como mencionado acima, uma estrutura de classes foi criada para gerenciar os
elementos gráficos do SVG no cliente. No entanto, quando finalizado o processo de
anotação das imagens, faz-se necessário uma estrutura de classes no servidor que dê
suporte ao gerenciamento das operações de armazenamento e carregamento tanto das
imagens, quanto das anotações de cada imagem.
74
Assim, uma estrutura de classes para gerenciamento destes objetos, do lado do
servidor, foi criada com o objetivo de maior eficiência na manipulação destes objetos no
servidor. A Figura 37 ilustra a estrutura de classes do servidor.
Figura 37 – Estrutura de classe do servidor.
Como ilustrado na Figura 37, para o gerenciamento das imagens e anotações,
foram criadas três classes. Uma classe que faz o mapeamento do objeto em si, outra
classe que controla a coleção dos objetos e a outra que controla a inserção, alteração e
exclusão das imagens no banco de dados.
Assim, para o gerenciamento das imagens foram criadas as classes:
PhotoManager, PhotoCollection e Photo e para o gerenciamento das anotações foram
criadas
as
classes:
PhotoAnnotationManager,
PhotoAnnotationCollection
e
PhotoAnnotation.
Para o gerenciamento das requisições entre cliente e servidor, ou seja,
transferência de informações em modo assíncrono, foi criado a classe AjaxAnnotation.
Esta classe implementa dois métodos que são responsáveis pelo envio das informações
sobre imagens e anotações entre o cliente e servidor, ou vice-versa. Esses métodos são:
“DoSave()” e “DoUpdate()” . O método “DoSave()” é responsável por enviar
informações para a criação das anotações quando uma imagem ainda não possua
75
anotações. O método “DoUpdate()” é responsável por enviar informações para
atualização das anotações existentes em uma imagem.
Essa estrutura de classes permitiu maior flexibilidade na criação e manipulação
das imagens e anotações no servidor.
4.4.4. Banco de Dados
Como citado anteriormente, todas as imagens e anotações são guardadas em uma base
de dados para posterior recuperação. Assim, foi criada uma estrutura de banco de dados
que permitisse suporte ao esquema proposto, de fazer anotações sobre imagens.
As estruturas de classes criadas manipulam os dados obtidos de uma base de
dados. Do lado do cliente, a estrutura de classes permite a manipulação dos objetos e é
capaz de criar e recriar os objetos a partir de suas informações base. Do lado do
servidor, a estrutura de classes permite o acesso aos dados das imagens e anotações.
Assim, tanto para as imagens, quanto para as anotações, alguns atributos são necessários
para que as imagens e anotações armazenadas na base de dados possam ser recuperadas
novamente. A Figura 38 ilustra o diagrama da base de dados do WebAnnotate.NET.
Figura 38 – Diagrama de base de dados do WebAnnotate.NET.
Como visto na Figura 38, existem duas tabelas para armazenamento das imagens
e anotações. Na tabela “tb_photo” são armazenados os dados das imagens enviadas para
76
o servidor através da seção de “Upload”. Os atributos principais dessa tabela são:
“id_photo” e “stream”. O atributo “id_photo” contém um código criado
automaticamente para cada imagem enviada para o servidor. E o atributo “stream”
contém o conteúdo da imagem, ou seja, contém os dados binários da imagem haja vista
que a imagem não é armazenada em disco. Na tabela “tb_photo_annotation” são
armazenados os dados das anotações das imagens através da área de anotação. Os
atributos relevantes dessa tabela são: “id_photo_annotation”, “id_photo”, “type”,
“points” e “description”. O atributo “id_photo_annotation” contém um código criado
automaticamente para cada anotação de uma imagem. O atributo “id_photo” contém o
código referente à imagem em que está sendo feita a anotação, ou seja, representa o
código da imagem à qual pertence a anotação. O atributo “type” contém o tipo de
elemento gráfico que foi criado nesta anotação, ou seja, se o objeto no qual foi feita a
anotação é um retângulo, elipse ou polígono. O atributo “points” contém as
informações básicas dos objetos especificados no atributo “type” para a reconstrução
dos mesmos, ou seja, como visto na estrutura de classes do cliente, cada objeto contém
informações específicas e necessárias para a criação do elemento gráfico do SVG e
essas informações, denominadas de pontos, são armazenadas para recuperação do objeto
gráfico. E o atributo “description” contém a descrição, ou anotação, feita sobre a região
da imagem.
Portanto, através da estrutura da base de dados, e os dados armazenados, é
possível criar e recriar os objetos gráficos e suas anotações pela interface do
WebAnnotate.NET.
4.4.5. Implementação
4.4.5.1.
SVG e ECMAScript
A integração entre SVG e ECMAScript, como supracitado, trouxe muitas vantagens
quanto à manipulação dos objetos do SVG.
Quando o código do ECMAScript é implementado dentro do documento SVG, a
comunicação entre o SVG e ECMAScript é realizada automaticamente, ou seja, os
objetos do SVG acessam aos métodos do ECMAScript diretamente. Contudo, quando o
77
código do ECMAScript está fora do documento SVG, é necessário criar um mecanismo
para comunicação do SVG e ECMAScript. A Figura 39 ilustra o código necessário para
criação desse mecanismo de comunicação.
Figura 39 – Mecanismo de comunicação entre documento SVG e ECMAScript.
Como ilustrado na Figura 39, para que uma função do documento SVG seja
chamada pelo documento HTML, é necessário fazer uma configuração no objeto
“embed” para sincronizar o documento SVG. Quando o documento HTML é carregado,
é disparado o evento “onload” do elemento “body” que executa a função
“onPageInit()”. A função “onPageInit()” através do elemento “embed” criado e do
elemento “window”, chama a função “passState()” do documento SVG passando o
próprio elemento “embed” como parâmetro. No documento SVG o elemento “embed” é
configurado para que toda vez que for chamada a função “print” no documento HTML,
seja executada a função “onPrint” do documento SVG.
Esse mecanismo é necessário, haja vista que os objetos disponibilizados pela
interface do WebAnnotate.NET são elementos do HTML, e quando disparado o evento
“onclick” fazem uma chamada de função dentro do documento SVG para criação dos
elementos gráficos do SVG. Ou seja, toda vez que um evento “onclick” do mouse for
disparado pelos objetos pré-definidos pela interface, estes fazem a chamada de funções
dentro do documento SVG.
78
4.4.5.2.
Estrutura de classe do cliente
Como mencionado anteriormente, os elementos gráficos do SVG utilizados para
delimitação das regiões das imagens, foram mapeados para uma camada de objetos, no
qual cada objeto é representado por duas classes, uma para mapeamento do objeto do
SVG e outra para gerenciamento das coleções deste objeto, na aplicação. Como citado,
em comum a esses objetos estão duas funções importantes para o sistema, denominadas
de “toXmlString()” e “toSvgElement()”. A Figura 40 ilustra um trecho de código
exemplificando a implementação destas funções para um objeto “Rectangle”.
Figura 40 – Exemplo de codificação das funções “toXmlString()” e “toSvgElement()”.
Como visto na Figura 40, é apresentado um exemplo de criação de um objeto,
em ECMAScript, denominado “Rectangle” cujas propriedades são: “x”, “y”, “width” e
“height”. Este objeto contém as duas funções mencionadas acima, “toXmlString()” e
“toSvgElement()”, onde uma retorna uma string contendo a descrição do elemento em
XML e a outra retorna a instância de um objeto “rect” do SVG.
79
4.4.5.3.
Arquitetura de comunicação
Como mencionado anteriormente, foram criadas duas estruturas de classes. Uma para
gerenciamento dos objetos do cliente e outra para gerenciamento dos objetos do
servidor.
Enquanto a estrutura do cliente gerencia as operações de criação, edição e
visualização das imagens, anotações e elementos gráficos, a estrutura do servidor
gerencia os dados das imagens e anotações diretamente com a base de dados. Logo,
existe um mapeamento tanto do cliente, quanto do servidor para gerenciamentos das
imagens e anotações. Portanto, faz-se necessária a comunicação destas estruturas para
correta execução do sistema.
Essa interligação entre o cliente e o servidor é gerenciada pela tecnologia Ajax,
que permite o intercâmbio de dados de forma transparente ao cliente, reconstruindo
todos os objetos do cliente a partir dos objetos do servidor. A Figura 41 ilustra essa
arquitetura de comunicação.
Figura 41 – Arquitetura de comunicação.
Como visto na Figura 41, do lado do cliente, existem a interface e a estrutura de
classes. A interface disponibiliza as ferramentas para manipulação das imagens e
anotações; e a estrutura de classe gerencia os objetos existentes na interface criados pelo
usuário. Do lado do servidor, existe a estrutura de classes que gerencia os dados das
imagens e anotações e o banco de dados que é o repositório dos dados criados pelo
80
usuário, ou seja, todas as imagens e anotações criadas pelo usuário são armazenadas em
um repositório central.
81
5. Conclusão
Ao final deste trabalho, vários conceitos e técnicas foram esclarecidos de modo a
enriquecer o estudo sobre o campo de anotação de imagens e outros abordados no
decorrer deste trabalho.
Dentre estes, um dos pontos positivos do trabalho foi o estudo sobre a linguagem
SVG. Este estudo proporcionou uma visão geral de como são especificados os
elementos gráficos do SVG. E ainda, foi possível a compreensão da escalabilidade e
portabilidade proporcionada pelo SVG.
Chega-se à conclusão de que a utilização do SVG para a criação dos elementos
gráficos e a qualidade dos seus elementos gráficos faz um diferencial na utilização, na
criação e manipulação destes elementos no ambiente web, isso ocorre porque o SVG é
uma linguagem cliente, logo, todos os objetos são gerenciados no lado do cliente
reduzindo o custo computacional realizado no servidor, deixando este livre para
realização de outras operações.
Outro ponto positivo do trabalho foi o estudo sobre os conceitos básicos de
Recuperação de Imagens. A partir desse estudo, foi possível obter uma visão geral de
como se realiza o processo de recuperação de imagens. Ou seja, quais são os passos
para a recuperação de imagens, quais os atributos são mais importantes no processo de
extração de características e quais as problemáticas mais comuns quanto a etapa de
registro de imagens como, por exemplo, técnicas empregadas para eliminação de
distorção nas imagens. E ainda, e mais importante, foi possível a compreensão da
necessidade da recuperação de imagem diante a dificuldade de descrever os elementos
destas imagens.
Ainda, outro ponto que vale uma ressalva é sobre o conteúdo específico deste
trabalho, a anotação de imagem. Um ponto importante é que só foi possível a
compreensão da verdadeira necessidade da anotação de imagens, após compreender as
82
problemáticas envolvidas no processo recuperação de imagens. Como visto no decorrer
deste trabalho, o processo de recuperação de imagens envolve várias etapas que vão
desde a extração de características até o reconhecimento dos elementos das imagens.
Assim, este processo demanda um alto custo computacional para reconhecimento dos
elementos das imagens, sendo suscetível a erros dado por falhas na aquisição e no
registro das imagens.
Os resultados obtidos a partir da construção da ferramenta denominada
WebAnnotate.NET demonstraram que o processo de anotação de imagens manual é
viável no ambiente web, haja vista a utilização de tecnologias como SVG, que auxiliam
na tarefa de seleção das regiões das imagens a serem descritas. Assim, o processo de
anotação de imagem é um importante passo para a redução dos problemas de
recuperação de imagens. Isso porque, a anotação de imagem manual trabalha sobre a
recuperação de imagens baseado no conteúdo textual, logo, tem-se uma redução do
custo computacional no processo de descrição das imagens.
Ainda, um dos fatores relevantes da construção da ferramenta é a simplicidade.
Todas as estruturas, os objetos e o banco de dados foram construídos para fazer da
ferramenta uma aplicação eficiente e rápida, reduzindo o tempo gasto no retorno dos
dados. Isto é, a construção da ferramenta proposta visou a redução na execução de
instruções internas, do lado do servidor, ao máximo, tendo em vista um retorno mais
rápido das imagens e anotações realizadas pelo usuário, fator relevante dado que esta
ferramenta é voltada para o ambiente web.
Chega-se então à conclusão deste trabalho, de que todo o estudo feito e todas as
informações obtidas proporcionaram, além da construção da ferramenta, uma relevante
experiência no desenvolvimento de ambientes que trabalham, simultaneamente, com
descrição de imagens e a web.
83
6. Referências Bibliográficas
(BUENO, 2001) BUENO, Josiane M. Suporte à Recuperação de Imagens Médicas
Baseada em Conteúdo através de Histogramas Métricos. Disponível em:
<http://www.teses.usp.br/teses/disponiveis/55/55134/tde-02122002091055/publico/tese_final_corrigido.pdf>. Último acesso em 12/11/2005
(BROWN, 1992) BROWN, Lisa Gottesfeld. A Survey of Image Registration
Techniques. Disponível em: <http://portal.acm.org/citation.cfm?id=146374>. Último
acesso em 13/11/2005
(DEITEL et al, 2003a) DEITEL, H. M; DEITEL, P. J; NIETO, T. R. Internet & World Wide
Web, Como Programar. Porto Alegre: Bookman, 2003.
(DEITEL et al, 2003b) DEITEL, H. M; DEITEL, P. J; NIETO, T. R; LIN, T.M; SHADU, P.
XML, Como Programar. Porto Alegre: Bookman, 2003.
(ECMA, 1999) ECMA – Standarzing Information and Communication Systems.
Disponível em: <http://www.ecma-international.org/publications/files/ECMA-ST/Ecma262.pdf>. Último acesso em 11/11/2005
(FLICKNER et al, 1995) FLICKNER, M. Query by Image and Video Content. IEEE
Computer.
(GALUPPO et al, 2004) GALUPPO, Fábio; MATHEUS, Vanclei; SANTOS, Wallace.
Desenvolvendo em C#. Porto Alegre: Bookman, 2004.
(GARRETT, 2005) GARRETT, Jesse James Ajax: A New Approach to Web Applications.
Disponível em
<http://www.adaptivepath.com/publications/essays/archives/000385.php>. Último acesso
em: 01 de julho de 2005
84
(GRAVES, 2003) GRAVES, Mark. Projeto de Banco de Dados com XML. São Paulo:
Pearson Education do Brasil, 2003.
(ONO et al., 1996) ONO, A et al. A flexible content-based image retrieval system
with combined scene description keyword. In: Proceedings of IEEE Int. Conf. on
Multimedia Computing and Systems, pp. 201-208,1996
(PITTS-MOULTIS & KIRK, 2000) PITTS-MOULTIS, Natanya; KIRK, Cheryl. XML Black
Book São Paulo: MAKRON Books, 2000.
(RAMIREZ, 2005) RAMIREZ, Luiz. Modelo Matricial versus Vetorial. Disponível
em: <http://luis.ramirez.vilabol.uol.com.br/modeloImagem.html>. Último acesso em
07/11/2005
(RICARTE, 2001) RICARTE, Ivan Luiz Marques. Introdução a Orientação a
Objetos. Disponível em:
<http://www.dca.fee.unicamp.br/courses/POOCPP/node3.html>. Último acesso em
11/11/2005
(RINTALA, 2000) RINTALA, Juha. Document Object Model. Disponível em:
<http://mia.ece.uic.edu/~papers/www/multimediastandards/dom.pdf >. Último acesso
em 23/10/2005
(RODDEN, 1999) Rodden, K. How do people organize their photographs? In BCS IRSG
21st Ann. Colloq. on Info. Retrieval Research, 1999.
(RUI et al, 1999) RUI, Yong; HUANG, Thomas S.; CHANG, Shih_Fu. Image
Retrieval: Past, Present and Future. International Symposium on Multimedia
Information Processing. Disponível em: <http://citeseer.ist.psu.edu/192987.html>.
Último acesso em 11/11/2005
(SHNEIDERMAN && KANG, 2000) SHNEIDERMAN ,B; KANG, H. Direct
Annotation: A Drag-and-Drop Strategy for Labeling Photos. In:Proc. International
Conference Information Visualisation (IV2000). London, England.
(SILVA, 2003) SILVA, Marcelino Pereira dos Santos. Mineração de Dados em
Banco de Dados. Disponível em:
<http://www.de9.ime.eb.br/~intec/Data%20Mining/Artigos%20de%20Suporte/Minerac
ao%20em%20Imagens.pdf>. Último acesso em 15/11/2005
(W3C, 2003) W3C - World Wide Web Consortium. Disponível em:
<http://www.w3.org>. Último acesso em 21/10/2005
(W3C, 2003a) W3C - World Wide Web Consortium. Scalable Vector Graphics.
Disponível em: <http://www.w3.org/graphics/svg/>. Último acesso em 21/10/2005
85
(W3C, 2003b) W3C - World Wide Web Consortium. Document Object Model.
Disponível em: <http://www.w3.org/dom/>. Último acesso em 21/10/2005
(W3SCHOOLS, 2005) W3Schools Online Web Tutorials. Document Object Model.
Disponível em: <http://www.w3schools.com/dom/ >. Último acesso em 23/10/2005
(WATSON et al, 2002) WATSON, Karli et al. Beginning C# - Programando. São Paulo:
Pearson Education, 2002.
(WATT et al., 2002) WATT, Andrew et al. SVG – Unleashed. Indiana - EUA: SAMS
Publishing, 2002.
(WIKIPEDIA, 2000) Wikipedia – Desenho Vetorial. Disponível em:
<http://pt.wikipedia.org/wiki/Desenho_vetorial>. Último acesso em 07/11/2005
(ZITOVA & FLUSSER, 2003) ZITOVA, Barbara; FLUSSER, Jan. Image
Registration Methos: A Survey. Disponível em:
<http://library.utia.cas.cz/prace/20030125.pdf>. Último acesso em 13/11/2005