PROTÓTIPO DE UM SISTEMA DE AUXÍLIO À LOCALIZAÇÃO NO CEULP/ULBRA UTILIZANDO IMAGENS VETORIAIS SCALABLE VECTOR GRAPHICS

Transcrição

1 PROTÓTIPO DE UM SISTEMA DE AUXÍLIO À LOCALIZAÇÃO NO CEULP/ULBRA UTILIZANDO IMAGENS VETORIAIS SCALABLE VECTOR GRAPHICS Alex Coelho 1, Fabiano Fagundes 2 1 Acadêmicos do Curso de Sistemas de Informação Centro Universitário Luterano de Palmas (CEULP-ULBRA) Palmas TO Brasil 2 Professor do Curso de Sistemas de Informação Centro Universitário Luterano de Palmas (CEULP-ULBRA) Palmas TO Brasil {alexcoelho,fagundes}@ulbra-to.br Abstract. This work presents an tool to help visitors, students, users and teachers of CEULP/ULBRA to find sectors and departments on phisical space of Palmas Lutheran Universitary Center, as well to access the campus. Futhermore, the system will provide statistics data about all realized queries, that will be stored on a data base. To this tasks this work porposes the utilization of SVG vector images and script-client/server-side script languages. Resumo. Este trabalho tem como objetivo auxiliar visitantes, alunos, usuários, professores e funcionários do CEULP/ULBRA a localizarem setores e departamentos nas instalações físicas do Centro Universitário Luterano de Palmas, bem como chegar ao campus. Além disto, o sistema fornecerá estatísticas sobre as consultas ao mapa, que serão armazenadas em um banco de dados. Para tanto será utilizada a tecnologia de imagens vetoriais SVG, bem como a utilização de linguagens scripts Client e Server-Side. 1. Introdução O trabalho aqui proposto consiste na criação de imagens SVG (Scalable Vector Graphics) para auxílio à localização de visitantes, funcionários, acadêmicos e professores nas instalações do CEULP/ULBRA, bem como um auxílio à localização da instituição em um mapa da cidade de Palmas. Entende-se por mapa ou planta virtual tudo aquilo que a partir de algum dispositivo eletrônico demonstre algo ou alguma coisa de forma coesa e esclarecedora a quem for repassada a informação visual; estes, por sua vez, também são conhecidos como sistemas de informação geográfica (RAWAT et al, 2001). Com o surgimento de tecnologias de baixo custo, de computadores de alta capacidade e da internet, cada vez mais recursos são focados na criação de mapas e plantas virtuais. Estes mapas muitas vezes estão disponíveis na internet e são de fácil acesso. Isso fez com que a computação colaborasse expressivamente para o surgimento de diferentes tecnologias que contribuem para a interação entre o homem e o computador.

2 Mapas e plantas virtuais geralmente são desenvolvidos em formatos gráficos utilizados para criação ou manipulação de imagens. Neste contexto, imagens vetoriais possuem vantagens sobre outros formatos como, por exemplo, a utilização de atributos ou coordenadas x e y, o que caracteriza uma imagem vetorial 2D (PEARLMAN & HOUSE, 2003). 2. Padrões Gráficos As imagens disponíveis na Web se enquadram em três tipos de padrões gráficos: bitmap, vetoriais e 3D. Dentre estes serão citados os padrões mais comuns na Web, nas próximas seções. O padrão 3D não será abordado neste trabalho Imagens Bitmap Os formatos de imagens mais encontrados na Web, como GIF, JPG e PNG consistem em bitmaps, também chamados rasters graphics (EISENBERG, 2003). Um bitmap consiste basicamente em uma coleção de pixels picture element que é a unidade de medida da quantidade de pontos que o olho humano pode distinguir em uma imagem (o que corresponde a uma matriz de 3000 X 3000) (PÁDUA, 2000). A Figura 1 apresenta uma visão do que consiste uma imagem formada por pixels. No caso dos formatos citados, utiliza-se a representação dos pixels através de bits, acrescidos de algoritmos de compressão dos arquivos. Figura 1 Imagem que utiliza mapas de bits. A Figura 1 na curva em destaque apresenta pequenos quadrados que consistem nos pixels da imagem. Cada pixel consiste na representação de informações sobre as cores. Um pixel pode representar um número n de cores. Este número é determinado pela quantidade de bits suportado pela imagem, o que se chama de profundidade de bits. Numa imagem que suporta n bits, cada pixel pode representar 2 n cores. Imagens bitmap possuem diversas limitações e problemas, dentre estes se pode citar a relação direta entre tamanho do arquivo e a qualidade da imagem (quanto maior a qualidade, maior o arquivo). Uma alternativa para a utilização de imagens do tipo bitmap são os desenhos vetoriais, descritos na próxima seção Desenhos Vetoriais Desenhos vetoriais, como o próprio nome sugere, trabalham com a utilização de matrizes e fórmulas matemáticas. Eles permitem o armazenamento de figuras sinteticamente em formatos muito mais compactos que os arquivos de imagens bitmap (PÁDUA, 2000).

3 Dada a importância que os vetores da geometria têm na descrição computacional dos desenhos esses arquivos são também chamados de arquivos vetoriais (PÁDUA, 2000). Estes podem ser redimensionados de forma a preservar a qualidade na apresentação das imagens que seguem este padrão. Outra característica importante é a utilização dos eixos x e y para tratamento das coordenadas da imagem. Imagens vetoriais são descritas como instruções para criação de imagens, enquanto imagens bitmap são pontos de cor (pixels) em lugares específicos (DAVID, 2003). Desenhos vetoriais são compostos por primitivas gráficas que podem ser descritas de forma algébrica através de funções. Estas primitivas estão divididas em primitivas lineares e não lineares. As primitivas mais comuns em desenhos vetoriais são: retângulo, círculo, linha, polígono, elipse. Comparando a Figura 1 com a Figura 2, nota-se a que a curva em destaque é apresentada de forma mais linear, sem as falhas, como as provocadas pela apresentação dos pixels apresentadas na Figura 1. Figura 2 Imagem que utiliza vetores. Imagens vetoriais trabalham sobre uma matriz semelhante à idéia de mapa de bits das imagens bitmap, porém as imagens vetoriais não guardam o valor pixel, mas sim sua localização nesta matriz e outros atributos como: x, y, cor, transparência, estilo entre outros. Desta forma, a imagem ao ser redimensionada não tem sua qualidade afetada, como ocorre com o exemplo da Figura 1. Se comparadas representações de uma mesma figura, os arquivos vetoriais apresentam as seguintes vantagens em relação aos arquivos bitmap (PÁDUA, 2003): tamanho é geralmente muito menor; precisão no redimensionamento; o processamento é feito de forma mais fácil e eficiente. Entretanto, existem problemas com a apresentação de desenhos vetoriais que devem ser levados em consideração (PÁDUA, 2003): inadequação para representar imagens naturais; dependentes dos programas para autoria e apresentação; tempo de apresentação é proporcional a complexidade do desenho. 3. Formatos Vetoriais Esforços para criação de formatos baseados em vetores existem desde 1993, começando com o SVF (Simple Vector Format). As próximas seções apresentam os formatos vetoriais mais utilizados na Web.

4 3.1. SWF (Shockwave Flash) O SWF, mais conhecido como o formato Flash, é atualmente o formato mais difundido para desenvolvimento de imagens vetoriais para Web. (JACOBSON & JACOBSON, 2001). No Flash foi adotado o ActionScript com a adoção do padrão ECMA-262 como base para a definição da linguagem. O formato SWF foi originalmente projetado com os seguintes objetivos (OPENSWF, 2004): exposição: desenvolvido para apresentações de animações e ferramentas interativas; extensibilidade: pode ser evoluído com novas características e ferramentas além de manter a compatibilidade com versões mais antigas; rede: os arquivos são comprimidos de forma a serem renderizados incrementalmente; simplicidade: o formato é simples, arquivos pequenos e portáveis; independência: os arquivos podem ser apresentados sem nenhuma dependência; velocidade: desenvolvido para que seus arquivos fossem apresentados de forma veloz. Os arquivos SWF são binários. Em sua composição, o cabeçalho contém algumas informações que são divididas em campos, seguindo a estrutura: os três primeiros campos do cabeçalho representam a assinatura do formato; o quarto campo especifica a versão; o quinto, o tamanho do arquivo; o sexto, o tamanho dos frames no arquivo; o sétimo, a taxa de apresentação dos frames por segundo; e o oitavo campo representa o número total de frames no arquivo (OPENSWF, 2004). O formato SWF trabalha com a idéia de tags, contudo estas não podem ser alteradas ou manuseadas de forma simples. Um exemplo de tag Flash é apresentado na Figura 3. taglen 10: tagplaceobject2 flags 1 depth 26 tag 1 pos matrix hex [ a_fixed b_fixed] = [ ] [ c_fixed d_fixed] [ ] [tx_fixed ty_fixed] [000010a ] Figura 3 Tag de um arquivo SWF Uma das técnicas empregadas no SWF é o reuso de elementos, realizando somente referências a estes elementos. O SWF suporta uma variedade de técnicas da compressão, sendo que o som é comprimido em vários níveis da compressão de ADPCM (Adaptive Differentiel Pulse Code Modulation) 3.2. PDF (Portable Document Format) O PDF é um formato de imagens vetoriais desenvolvido originalmente para digitalização e editoração eletrônica. Não projetado primeiramente para Web, contudo pode ser utilizado com a ajuda dos plugins. É um padrão proprietário da Adobe System Inc. (ADOBEa, 2004) e é fechado. Segundo (ADOBEb, 1998), a maior vantagem do formato PDF relativa à digitalização de documentos está no fato de que o layout original (look and feel) da obra é mantido, ou seja, o texto e imagens são distribuídos exatamente como no original: paginação, títulos, fotografias, gráficos, figuras, funcionando de forma semelhante a uma fotografia cada página de um livro, tudo agrupado em um só arquivo digital. O PDF é projetado basicamente para imagens estáticas sendo possível a utilização de Hyperlinking, além de conter som e vídeo, sendo utilizado também em apresentações multimídia, mas não fornece muitas possibilidades de interação (Neumann & Winter, 2001).

5 Uma vantagem do formato PDF está no fato da existência de recursos que facilitam a navegação nos arquivos como hiperlinks, bookmarks, recursos de zoom e assim por diante, sendo que este formato pode ser trabalhado como imagem, ou como texto possuindo imagens. 4 SVG (Scalable Vector Language) SVG é uma linguagem baseada em XML para a criação de imagens bidimensionais, ou seja, uma imagem vetorial baseada em texto, em que a programação, controle, interação com o usuário e conexão a banco de dados a tornam diferenciada, pois estas possibilidades não estão presentes em outros formatos como JPEG, GIF. O SVG é um subconjunto do XML, que vem ganhando espaço em diversas plataformas de desenvolvimento (PEARLMAN & HOUSE, 2003). Como o SVG é relativamente novo, sua visualização através do browser só é possível com a utilização de um plugin SVG (ADOBEa, 2004). A seguir serão apresentados alguns elementos básicos do SVG. 4.1 Elementos geométricos Os elementos básicos ou primitivos no SVG para a criação da maioria de imagens vetoriais incluem: retângulos, linha, polígonos, círculos e elipse, sendo que a utilização destes, por sua vez, obedece a uma estrutura básica conforme citado anteriormente, que são as marcações. Os elementos básicos da geometria são representados no SVG pelas tags (EISENBERG, 2003): rect, line, polygon, circle, ellipse. O elemento path em particular chama a atenção por sua sintaxe que é relacionada aos comandos como o "moveto", "lineto" e closepath, sendo utilizado para definir caminhos e formas a serem seguidas. Os elementos path podem também ser usado para a geração de gráficos e mapas virtuais (NEUMANN & WINTER, 2001). As cores em elementos SVG são definidos pelo padrão RGB (NEUMANN & WINTER, 2001). Estas são definidas tanto para linha quanto para seu preenchimento sendo utilizado para isto os atributos stroke e fill. Uma das maneiras de definir valores para estes atributos no SVG é o mesmo estilo de definição utilizado no HTML (Hyper Text Markup Language), com dois dígitos hexadecimais correspondendo aos valores para vermelho, verde e azul. Para a definição de cores, fundo, transparência e outros atributos o SVG fornece outra possibilidade que é a utilização de estilos predefinidos em arquivos CSS (Cascading Style Sheet), que é uma folha de estilo para definição de valores e propriedades de estilização para elementos (W3C, 2004), seguindo um de seus diferenciais que é a reutilização de seu código além da utilização de arquivos externos para compor uma imagem (NEUMANN & WINTER, 2001). O elemento text adiciona texto às imagens no SVG e permite disponibilizar todos os atributos comuns a editores de texto como: fonte, tamanho, orientação e etc. Uma ponto interessante do elemento text é a possibilidade de alinhar o texto ao longo de um trajeto fazendo uso de um elemento path para determinar este caminho. A declaração de outros formatos de imagens dentro de um arquivo SVG é possível e é realizada por meio da utilização da tag image, na qual é feita uma referência para o

6 endereço da imagem que se quer acrescentar, sendo que a utilização de outros formatos de imagem no conteúdo de uma imagem SVG não são convertidas para outro formato. O SVG possui o elemento animate que integra todos os atributos necessários para que a animação ocorra. O elemento animate segue a definição de valores a atributos sendo que os principais são: início da apresentação (geralmente relativo a um evento), a duração da animação, taxa de repetição, origem e destino (NEUMANN & WINTER, 2001). O elemento g ou group, como o próprio nome sugere, é utilizado para agrupar outros elementos, sendo muito útil na reutilização de código no SVG, além de uma melhor organização dos elementos de uma imagem. Existe ainda o elemento symbol, que é uma opção para a utilização do elemento group, e a principal característica que os diferencia é que o elemento symbol pode fazer utilização de atributos como o viewbox e o preserveraspectratio, e sua declaração deve sempre estar presente dentro de um elemento defs (EISENBERG, 2003). O defs define que os elementos nele contidos não sejam apresentados. Além disso, define os elementos de forma a serem reutilizáveis após a visualização da imagem, mesmo não sendo apresentados em uma primeira exibição. Estes elementos podem ser reutilizados com a declaração do elemento use. 4.2 SVG e linguagens scripts O SVG, por possuir características de texto e ao mesmo tempo dinâmico, possibilita uma maior interação com o usuário. Logo, surge mais uma vez a capacidade do XML, que possibilita a inserção de código script em seu corpo. Os scripts desempenham o papel de intermediador entre a imagem e o usuário, além de abrir um leque de possibilidades ASP (Active Server Pages) O ASP fornece um ambiente para programação por scripts do lado do servidor (serverside). Os scripts em ASP são componentes que utilizam a tecnologia COM (Componente Object Model). Estes scripts possibilitam a criação de páginas Web dinâmicas, interativas e de alta performance, (MITCHEL, 2000) (JONES, 2001). Permite a incorporação de objetos criados em qualquer linguagem, através da tecnologia ActiveX ADO (Activex Database Objects) O ADO é um conjunto de objetos e classes criadas pela Microsoft (MICROSOFTb, 2003), que foram implementados com o intuito de facilitar a criação, acesso, manipulação e comunicação a bases de dados. Alguns objetos deste tipo, criados anteriormente, eram demasiadamente limitados no que diz respeito à manipulação dos dados de tipos diferentes. 5. Implementação O trabalho consistiu na criação de imagens SVG para estruturação de um ambiente gráfico de auxílio à localização de visitantes, funcionários, acadêmicos e professores nas instalações do CEULP/ULBRA, em que, em sua implementação foram utilizados

7 elementos básicos SVG criados através de tags, ou da utilização de linguagens scripts, como por exemplo, na criação de animações. Deve ser mencionado que todas as telas (imagens), formulários, gráficos e relatórios contidos no sistema foram totalmente desenvolvidos utilizando o formato SVG, sendo que a utilização de objetos HTML (Hyper Text Markup Language) somente ocorreu para garantir uma interface mais amigável facilitando a interação dos usuários conforme é demonstrado na Figura 4. Para a modelagem do sistema foi adotado a UML (Unified Modeling Language) que é uma notação para modelagem de sistemas, utilizando conceitos orientados a objetos (LARMAN, 2000). A UML foi usada para a realização da análise e levantamento dos requisitos funcionais e não funcionais alem da construção de um modelo conceitual. Assim depois de concluída a modelagem adotou-se a idéia de trabalhar enfatizando dois tipos de usuário: usuário comum, que poderia visualizar animações e consultar localidades no mapa virtual que eram apresentadas através de animações e mensagens; funcionário, sendo disponibilizadas informações referentes a viagens realizadas e gráficos comparativos, no qual podem ser aplicadas técnicas de análise. Figura 4 Tela de apresentação do sistema de auxílio. Feito isto, a idéia geral do sistema se fundamentou na utilização do mapa da instituição em que, de alguma forma, o usuário interagisse com o sistema. Para isso foi adotado além do formato SVG a linguagem script ECMAScript, que realizava todas as transformações, animações e interações solicitadas pelo usuário durante a utilização do sistema. A Figura 54 demonstra o mapa disponibilizado ao usuário pelo sistema, em que, este deveria seleciona a origem e o destino de sua consulta, tendo como resultado uma animação demonstrando o caminho de sua origem ao destino selecionado.

8 (a) Figura 5 Mapa da instituição em SVG, interatividade utilizando ECMAScript e efeito de zoom. (b) Com isto, foi possível disponibilizar além de animações, outros efeitos como a utilização do recurso de zoom. Este por sua vez era acionado após o usuário ao clicar sobre um botão que disponibilizava o efeito, que era apresentado com a ocorrência do evento de mouse sobre o mapa conforme como é apresentado na Figura 4b, em que um usuário realiza o evento sobre um dos prédios existentes no mapa. Desta maneira, todas as interações do usuário são registradas em um banco de dados, e estes disponibilizados a funcionários devidamente cadastrados, utilizando para isto uma das características texto do SVG que provê a possibilidade de conexões a banco de dados em uma imagem SVG utilizando ADO e a linguagem ASP, sendo um dos diferenciais do sistema. Figura 6 Área administrativa do sistema, tela e gráficos SVG em tempo real. A linguagem ASP se mostrou muito útil na criação dos gráficos, além de registrar os dados das viagens no banco de dados, sendo que, a criação dos gráficos no sistema ocorre de forma dinâmica, no qual o ASP oferece componentes para criação de imagens SVG dinamicamente

9 processadas pelo servidor. Em contrapartida o ASP se mostrou inadequado, quanto ao registro das viagens no banco, pois ao serem escolhidos os pontos a serem visitados os sistemas devia registrar estas viagens, porém como o ASP é uma linguagem processada seqüencialmente, a cada processamento da página eram registrados dados inconsistentes. A solução deste problema foi a utilização de frames na página que a cada interação com o usuário e quando ocorria a necessidade de se registrar dados, estes frames era processados. Em sua maioria todas as telas do protótipo utilizavam a tag defs, que como descrito anteriormente, não apresenta os dados ou elementos existentes em seu contexto, porém só apresentada quando requisitado. Assim através do ECMAScript a imagem já carregada, porém não apresentada, era disponibilizada no momento que fosse requisitada. Parte do código que implementa está idéia esta presente na Figura 7. <defs> </defs> <rect id= Tela 3 x="-2" y="-1" width="503" height="500" style="fill:rgb(255,255,255);stroke:rgb(255,255,255);strokewidth:1;opacity:0.63"/> <path id="biblioteca" d="m L L L L " style="fill:none;stroke:rgb(0,0,0);strokewidth:1;visibility:hidden"/> Figura 7 Elementos criados na imagem dentro do contexto da tag defs. A maioria dos problemas encontrados ocorreram na manipulação dos elementos SVG através da ECMAScript, como por exemplo, a criação da tag animatemotion, que ao ser criada, necessitava que se determina-se o instante em que a animação se iniciava, e que sempre assumia o valor inicial o processamento da imagem, de maneira que a animação já ocorria apesar de não estar visível. Outro ponto a ser mencionado, foi a implementação dinâmica de novos elementos ou mesmo alteração de atributos em elementos do sistema, utilizando a linguagem ECMAScript, sendo que em sua maioria as imagens eram criadas e alteradas desta maneira, como demonstrado na Figura 8. 1 if(origem == "Entrada B"){ 2 rect = svgdoc.getelementbyid('rectb'); 3 rect.getstyle().setproperty('visibility', 'visible'); 4 animate = svgdocument.createelement("animatemotion"); 5 animate.setattribute("path", "M C M L "); 7 animate.setattribute('begin', 'LabinI.click'); 8 animate.setattribute("dur", "25s"); 9 animate.setattribute("repeatcount", "indefinite"); 10 rect.appendchild(animate); 11 svgdocument.documentelement.appendchild(rect); 12} Figura 8 Criação e alteração de elementos da imagem através de scripts O código apresentado na Figura 8, linha 2 demonstra a utilização de um dos métodos que possibilitaram a manipulação de elementos no decorrer do sistema, no qual através do método getelementid, em que era passado como parâmetro o id do elemento existente na imagem a ser manipulado. De maneira geral, o grande segredo da implementação estava na

10 manipulação dos atributos identificadores de cada elemento da imagem, sendo alterados e manipulados como mencionado no restante do código da Figura Considerações Finais A utilização de imagens é muito freqüente na Web, já que é uma forma de se conseguir, além de interação, a atenção dos usuários, sendo uma forma mais elegante de se apresentar informações. Com o constante crescimento da capacidade computacional, as imagens apresentam-se muitas vezes obsoletas e ultrapassadas. Assim, tem-se na linguagem SVG uma ferramenta interessante e com um grande potencial a ser explorado. O SVG, além de ser um padrão aberto e gratuito, apresenta mais clareza quanto ao seu código, além de uma manipulação e reutilização. Seu formato texto é um dos diferenciais, o que torna o formato SVG mais leve e compacto. A utilização de scripts, além da interação com banco de dados, consiste em um leque de possibilidades para desenvolvedores. Outra vantagem que deve ser mencionada é a possibilidade que motores de busca processem textos contidos nas imagens SVG, o que é claramente uma herança de seu formato texto. O SVG é um formato relativamente novo, sendo que documentações a respeito do assunto ainda são muito vagas. Outra desvantagem do formato e a utilização de plugins para a visualização das imagens, porém estudos para introdução deste em browsers, estão em fase adiantada. Em contraste com a economia de tamanho dos arquivos criados utilizando SVG, está o processamento deste. Ferramentas especificas para a criação de autorias SVG são muito falhas e passam por um período de aperfeiçoamento devido a idade do formato. 8. Referências (EISENBERG, 2003) EISENBERG, J. DAVID. "SVG Essentials. Producing Scalable Vector Graphics with XML", Publish by O Reilly & Associates, Unites States of America, (RAWAT et al, 2001) RAWAT, P.S. LEMMENS, R.R. & SAMEER S. GML based model of Indian NSDE format for Geo SpatialData Interoperability, Department of Space, Govt. of India, India 2001 (MICROSOFTb, 2004) Microsfot Corporation. ActiveX Database Objects (ADO). Disponível em < Acessado em 15 de março de (JONES, 2001) JONES, A. RUSSELL Dominando ASP 3 - a Bíblia : Tradução: Griesi Ariovaldo Torlello, João Eduardo Nóbrega, Oliveira, Lucyanna Rocha De E Rosa, Maria Lúcia G.L. São Paulo: Makron Books, (MITCHEL & ATKISON, 2000) MITCHEL, S. e ATKISON, J. Aprenda em 21 dias Active Server Pages 3.0 Rio de Janeiro: Campus, (NEUMANN & WINTER, 2001) NEUMAN, A. e WINTER, A.M. TIME FOR SVG TOWARDS HIGH QUALITY INTERACTIVE WEB MAPS, 20th Internationals Cartographic Congress, Beijing, 2001.

11 (W3Cb, 1998) W3C World Wide Web Consortium. Scalable Vector Graphics (SVG). Disponível em < Acessado em 08 de março de (ADOBEa, 2004) Adobe Systems Incorporated. Formato PDF. Disponível em < Acessado em 02 de junho de (ADOBEb, 2004) Adobe Systems Incorporated. Plugin para visualização do SVG. Disponível em < Acessado em 21 de março de (OPENSWF, 2004) OpenSWF.ORG. SWF File Format Specification Disponível em < >. Acessado em 22 de abril de (JACOBSON & JACOBSON, 2003) JACOBSON, D. e JACOBSON, J. Flash Mx e Xml: Guia do Web Designer. São Paulo : MAKRON Books, (KELNER & FRERY, 2004) KELNER, J., FRERY, A.C Realidade Virutal e Multimídia Conceitos sobre imagens e o formato JPEG Universidade Federal de Pernambuco Disponível em < Acessado em 02 de junho de 2004.