Instituto Federal Cincia, Educao e Tecnologia de Pernambuco IFPE

Campus Igarassu
06 e 07 de Abril de 2016

PROTTIPO DE UM SISTEMA DE AUXLIO LOCALIZAO SETORES

NO IFPE CAMPUS RECIFE UTILIZANDO IMAGEM SCALABE VECTOR
GRAPHICS (SVG)
1

DANTAS, Ramide A. S. 1; ANDRADE, Richardson B. S. da12

Docente do Instituto Federal de Educao, Cincia e Tecnologia de Pernambuco Campus Recife - PE.
ramidedantas@recife.ifpe.edu.br
2
Discente do Instituto Federal de Educao, Cincia e Tecnologia de Pernambuco Campus Recife- PE.
rbsa@a.recife.ifpe.edu.br

RESUMO: Este trabalho tem como objetivo auxiliar visitantes, funcionrios e discentes do IFPE Campus
Recife a localizarem setores nas instalaes fsicas. Ser utilizada a tecnologia de imagens vetoriais SVG,
bem como a utilizao de linguagens scripts Client e Server-Side.
Palavras-chave: Imagem; Localizao; Sistema; SVG; Web.
INTRODUO
A motivao principal nasce do problema
de onde visitantes, funcionrios e discentes no
Instituto Federal de Pernambuco (IFPE) do
campus Recife, na tentativa de encontrar em
algum setor, mas que no sabem como chegar.
Seria possvel conhecer a trajetria at o objetivo
solicitado utilizando aplicao web que poderia
disponibilizar o percurso a partir de um ponto de
origem ao ponto de destino e assim o usurio do
sistema poderia atingi-lo de forma prtica e
eficiente e alm do mais extrair os detalhes
adicionais no ponto destino.
Porm, sabe-se que h Application
Programming Interface (API) que facilitam
conhecer a trajetria como, por exemplo, da
Google Maps (GOOGLE, 2015a) que permitem
mapear reas abertas. No entanto, para reas
fechadas, ainda esto em evoluo pela prpria
Google como Google Business Photos
(GOOGLE, 2015b) ou Maps Indoor (GOOGLE,
2015d) em shoppings, estdios de futebol e
aeroportos. O Maps Indoor est em uso no Brasil,
contabilizando apenas 20 estabelecimentos
(GOOGLE, 2015c). H uma grande carncia em
lugares fechados pblicos, como instituies de
ensino, museus ou eventos.
Mesmo com essa evoluo oferecida pela
Google, com utilizao de global positioning
system (GPS), ou de realizar fotografias internas
ou com upload da planta da localizao, a
possibilidade de se construir o mapeamento do
ambiente interno a partir do padro de imagem
Scalar Vector Graphics (SVG).
METODOLOGIA
Desenvolveu-se
no
ambiente
de
desenvolvimento
integrado
Eclipse
ECLIPSE(2015). Interagimos com a ferramenta

de criao de imagem no formato SVG Inkspace

para o mapa INKSPACE(2015). A execuo da
aplicao e debug realizados no navegador
Chrome.
A plataforma para disponibilizar e realizar
o built-in da app web foi a Google App Engine
CLOUDGOOGLE(2015).
RESULTADOS E DISCUSSO
Esta ideia de conhecer a trajetria de ponto
de inicial at ponto final com a utilizao
sustentada no estudo TIAGO( 2011), foi possvel
gerar um mapeamento de uma ambiente fechado
baseado no canvas com JQuery, como no caso
uma biblioteca, tendo o usurio se identificado na
entrada, possvel traar rota do percurso, a partir
de consulta ao um livro, do que usurio precisa
percorrer at da localizao da estante o qual se
encontra.
Por
outro
lado,
em
COELHO&FAGUNDES(2004), utilizou padro
SVG para mapear a instituio como alvo.
De forma semelhante, tem-se o estudo
COELHO(2004) que mostra um mapa no formato
SVG para manipulao dos pontos de origem e
destino, configurao armazenado em XML, para
construir o percurso para calcula o menor
caminho baseado no conceito de algoritmo de
grafos de Dijkstra.
Segundo
FROST,
DAILEY
e
STRAZZULLY(2012) SVG um padro grfico
aberto mantido e solidificado baseado eXtensible
Markping Language (XML) definido pela World
Wide Web Consortium (W3C)
como regra
importante na troca de uma larga variedade de
dados sobre Web e qualquer outro lugar
(W3.ORG, 2015b).
O padro SVG permite a criao de
elementos vetorizados em duas dimenses. Seus

elementos so altamente escalveis e podem ser

transformados dentro do sistema de coordenadas
2D. Possui seu prprio Document Object Model
(DOM), fcil de ler e editar, enquanto permite a
interao complexa e animao (FROST,
DAILEY e STRAZZULLY, 2012).
Nesse sentido, desenvolveu-se uma
soluo para problema de localizao no IFPE do
campus Recife, atravs de uma aplicao web
atravs da arquitetura cliente-servidor com
comunicao no formato XML no modelo de
mapa interno baseado no padro SVG na
plataforma Google App Engine que gera a rota de
de origem at destino.
Nossa representao apresentado na
Figura 1 a seguir:

Figura 2 Edio do Inkspace para criao de

um modelo de mapa interno para IFPE
campus Recife bloco A.
Depois de preenchido os atributos na
imagem SVG, repassamos-a para pgina HTML
como demostrado no Cdigo 1, onde ela receber
as modificaes de interao com JavaScript e
customizao das folhas de estilo do CSS.
<object id="betasvg"
data="bloco_a_terreo.svg"
type="image/svg+xml" width="70%"
height="70%" style="overflow: hidden;
border: 1px solid rgb(0, 0, 255);
float:left">
Your browser doesn't support
SVG</object>

Figura 1 Representao da arquitetura.

Na Figura acima, constata-se a utilizao
dos mtodos para comunicao e armzenamento
e a transferncia do arquivo XML com grafos
criados e converso.
De qualquer modo, os dados obtidos sobre
dos setores foram adquiridos a partir do portal
setores e ramais da prpria instituio
(SCRSE,2015). A localizao se apoiou nas
plantas-baixas cedidas pelo setor de administrao
da prpria instituio. De forma complementar,
realizou uma visita no espao interno do bloco A
trreo para observar detalhes das salas como
numerao e realizar a retiragem de fotos.
Realizou a construo do mapa de forma
manual pela aplicao Inkspace e preencheu com
dados como o nmero das salas, os ramais, a
descrio da sigla Repassaram todos esses
metadados para ser no elemento <g> que agrupa
os elmentos contindo nele como o elemento
<text> representa a sigla e <rect> que significa o
espao ocupado pelo setor. Como se observa na
Figura 2.

Cdigo 1 Embeeding da imagem SVG no

cdigo HTML.
No modo de edio da aplicao, como
demonstrado na Figura 3, utiliza-se a tcnica de
grafos idealizada por Dijkstra que consiste na
criao de vrtices e arestas para formao de um
modelo de roteamento (COELHO, 2004).

Figura 3 Visualizao da aplicao no modo

de edio.
Os pesos das arestas so baseados na
distncia entre uma vrtice e outro quando
interligados, assim atribuindo o custo para
caminho, para que quando efetuado a busca levese em considerao o menor caminho computado,
como mostrado no Cdigo 2.

function dijkstra(ini, destin){

var u;
var ind;
dist[ini] = 0 ;
var u = ini;
var cont = wrapGraphArray.length;
while(cont > 0){
var menor = -1;
for
(var
i
=
0;
i
<
wrapGraphArray.length; i++) {
if(dist[i] >= 0 && visitado[i]
==0){
if(primeiro){
menor = i ;
primeiro = 0;
u = menor;
}else{
if(dist[menor] > dist[i]){
menor = i;
u = menor;
}
}
}
}

Cdigo 2 Funo em Dijkstra em JavaScript.

Assim, ao acessar a interface grfica do

Datastore Viewer Google App Engine, possvel
visualizar como os dados ficam persistidos, na
Figura 4.

Figura 4
Engine

DataStore Viewer Google App

Dessa forma, nota-se o uso do conceito

chave e valor na persitncia dos dados. Um novo
paradigma de modelo de armazenamento.
Assim, uma vez requisitada a pgina web
pelo usurios todas as informaes so listadas
partir da transferncia do XML com os dados dos
grafos para ser adicionados ao elemento do SVG,
como mostrado na Figura 5.

Aps submeter os dados pelo servidor no

formato XML, o mesmo far o processamento e
armazenamento conforme o modelo da
classe/entidade no Cdigo 3.
@PersistenceCapable
public class Graph {
@PrimaryKey
@Persistent(valueStrategy=IdGenerato
rStrategy.IDENTITY)
private String id;
@Persistent
private String cx;
@Persistent
private String cy;
@Persistent
private String x1;
@Persistent
private String y1;
@Persistent
private String x2;
@Persistent
private String y2;
@Persistent
private String type;
@Persistent
private String bloco;
@Persistent
private String peso;

Figura 5 Visualiao da Aplicao.

Em funo disso, o usurio com o
reconhecimento do ponto de entrada, seleciona o
destino e realiza a busca do menor caminho como
segue na Figura 6.

Cdigo 3 Classe Graph.

Aqui observar-se o uso de algumas
annotianos que so disponibilizadas pela
biblioteca de programao da Google App Engine
que facilita a criao da estrutura da entidade no
armazenamento de dados.

Figura 6 Visualiao da aplicao ao gerar

rota a partir do ponto de entrada at o destino.
Como se observar o a busca rota
realizada, tem-se os efeitos sobre os vrtices de

origem e destino realizada e a visiblidade das

arestas alterada.
A aplicao pode ser acessada pelo link
da url: http://goo.gl/i0DmFt .

CONCLUSO
O prottipo do sistema utilizou das
abordagens de operaes sobre imagens vetoriais
escalares para facilitar percurso e localizao dos
setores/departamentos no IFPE campus Recife.
Para trabalhos futuro, orientamos testar com
outros frameworks facilitem o desenvolvimento,
aumentar a complexidade de mais n, em
considerar outros blocos e anderas e realizar
otimizao do tempo de busca e armazenar
melhores rotas j pr-computadas.

REFERNCIAS BIBLIOGRFICAS
CLOUDGOOGLE. Google Cloud Platform App
Engine.
disponvel
em:
<https://cloud.google.com/appengine/>
Acesso
em 19 dez 2015.
COELHO,
Alex;
FAGUNDES,
Fabiano.
Prottipo de um sistema de auxlio
localizao no CEULP/ULBRA utilizando
imagens vetoriais Scalable Vector Graphics. In:
VI ENCONTRO DE ESTUDANTES DE
INFORMTICA DO TOCANTINS, 2004,
Palmas. Anais do VI Encontro de Estudantes de
Informtica do Tocantins. Palmas: 2004.
COELHO, A. Utilizao do Algoritmo de
Dijkstra para Resolver o Problema do
Caminho Mnimo em Mapas Construdos com
o Formato Scalable Vector Graphics. ULBRA.
Palmas. 2004.
ECLIPSE.
Open
Source
Integrated
Development Enviroment - Ambiente de
Desenvolvimento Integrado Aberto. Disponvel
em: <https://eclipse.org>. Acesso em 04 jun 2015.
FROST, J.; DAILEY, D.; STRAZZULLY, D.
Building Web Aplications with Svg. Microsoft.
2012.
INKSPACE. Open Source Professional Quality
Vector Graphics Software. Disponvel em:
<https://inkscape.org> Acesso em 04 jun 2015.
GOOGLE. About Google Maps. 2015.
Disponvel em: <http://www.google.com/maps/
about/>. Acesso em 04 abr 2015.

GOOGLE. Atrai Clientes com o Business View.

2015. Disponvel em: <http:
//www.google.com/maps/about/partners/businessv
iew/>. Acesso em 04 abr 2015.
GOOGLE. Disp. do Indoor Maps. 2015.
Disponvel em: <https://support.google.com/
gmm/answer/1685827/>. Acesso em 04 abr 2015.
GOOGLE. Veja como por dentro com o
Indoor Maps. 2015. Disponvel em:
<http://www.google.com/maps/about/partners/ind
oormaps>. Acesso em 04 abr 2015.
SCRSE. Sistema de Cadastro de Ramais e
Setores.
Disponvel
em:
<http://sistemas.recife.ifpe.edu.br/cadramais/men
uSetorRamais/menuSetorRamais.php>
Acesso em 04 abr 2015.
TIAGO, d. M. Library Mapper. Dissertao
(Mestrado) USP, Universisdade de So Paulo,
2011.
Disponvel
em:
<http://bcc.ime.usp.br/principal/tccs/2012/thiagotoledo/monografia/thiagogtMonografia.pdf>