Interface


= Interface =

Neste capitulo será detalhado a interface que o **GRAFO** provem ao seu usuário,
como menus, botões, opções, configurações e tudo que possa sofrer a interação do usuário. A expansão
desta interface, com a criação de novos plugins, será abordada nos capítulos 4 e 5.

 A interface do grafo, 
figura 3.1, possui quatro divisões básicas. São elas:

 + **Menus**
 
Oferece ao usuário a acesso operações de entrada e saída, edição, manipulação de //grafos//, vértices e arestas,
execução de algoritmos e configurações do ambiente do **GRAFO**. Destacado em amarelo na figura 3.1.

 + **Barra de ferramentas**
 
Contem alguns botões de atalhos para operações básicas de entrada e saída e botões para interação em
algoritmos com suporte a //passo a passo//. Destacado em vermelho na figura 3.1.

 + **Área de trabalho**
 
Área onde o usuário desenha e interage com o seu //grafo//. Como a inclusão e exclusão de vértices
e arestas, edição de propriedades como rótulos e pesos entre outros. Também e a área em que 
o usuário vê o resultado da ação de um algoritmo em um //grafo//. Como destaque de vértice
e arestas, a inclusão e exclusão de componentes, a alterações de layout e outros ações
sofridas pelo //grafo// da área de trabalho.  Destacado em azul na figura 3.1.
 
 + **Barra de status**
 
Exibe instruções e informações ao usuário e também o resultado de algoritmos.
Destacado em verde na figura 3.1.

[images/03-Interface-00-Window.png]

(figura 3.1)


== Menus ==

Os menus do **GRAFO** são divididos em cinco categorias: //File//, //Edit//, //Graph//,
//Algorithms// e //Options//. Estas por sua vez estão subdivididas de maneira a conter
operações correlatas.


=== File ===

Esta opção de menu, figura 3.2, contém as operações de entrada e saída para o **GRAFO**.

[images/03-Interface-01-File.png]

(figura 3.2)

- **New**
 
Limpa as estruturas internas e a área de trabalho preparando o ambiente para uma nova 
edição. O programa não pede confirmação para essa operação caso algum //grafo// 
esteja em edição este será perdido. Se um arquivo estiver aberto a sua edição
também será encerrada.

- **Open**
 
Abre um //grafo// previamente salvo. Figura 3.3. O **GRAFO** trabalha com dois tipos de 
arquivos de entrada: 

 + //Grafo format (.gr)// - Formato Nativo
 + //GraphViz format (.dot)// - Formato do GraphViz

[images/03-Interface-01-File-02-Open.png]

(figura 3.3)

Para maiores detalhes sobre o formato de arquivo GraphViz visite o site (http://www.graphviz.org/).
 
- **Save**
  
Salva o //grafo// em edição. Figura 3.4. O **GRAFO** trabalha com três tipos de arquivo
saída:

 + //Grafo format (.gr)// - Formato Nativo
 + //GraphViz format (.dot)// - Formato do GraphViz
 + //PostScript format (.ps)// - Formato PostScript 
  
[images/03-Interface-01-File-03-Save.png]

(figura 3.4)
  
- **Save As**
 
Salva o arquivo previamente carregado com um novo nome. O diálogo é o mesmo da 
opção //save//.

- **About**
 
Exibe o nome dos autores do **GRAFO** e as informações de copyright. Figura 3.5.

[images/03-Interface-01-File-05-About.png]

(figura 3.5)
 
- **Exit**
 
Sai do **GRAFO**. O programa não pede confirmação para esta operação caso algum 
//grafo// esteja em edição ele será perdido.


=== Edit ===

Esta opção de menu contem as operações para construção de um //grafo// e a edição de atributos e propriedades. Figura 3.6.

[images/03-Interface-02-Edit.png]

(figura 3.6)

- **Do nothing - N**
 
Encerra qualquer operação de edição que esteja ocorrendo.
 
- **Insert vertex - V**

Insere um vertice na posição do cursor quando o botão esquerdo do 
mouse é pressionado. Os vértices inseridos são numerados de 0 até N.
 
- **Move vertex - M**
 
Move o vértice selecionado ao movimentar o mouse com o botão esquerdo pressionado
sobre ele. Ao soltar o botão o vértice permanecerá no local escolhido.
 
- **Remove vertex - R**
 
Exclui o vértice selecionado ao pressionar com o botão esquerdo do mouse sobre ele.
Os números dos vértices são rearranjados de forma que não fiquem espaços entre as
numerações. Os //Ids - Identificadores// dados aos vértices continuam os mesmos. Vide opção //Edit vertex//.
 
- **Edit vertex - D**
 
Edita as propriedades do vértice selecionado ao pressionar com o botão esquerdo 
do mouse sobre ele. A figura 3.7 mostra o diálogo de edição de vértices.

As propriedades disponíveis são:

 + //Id// - Número único que identifica o vértice (Não editável)
 + //Label// - Rótulo dado ao vértice
 + //Weight// - Peso deste vértice
 + //Color// - Cor que ele será impresso na tela
 
- **Insert edge - E**
 
Insere uma aresta entre os vértices ao pressionar com o botão esquerdo do mouse
primeiramente em um vértice e em seguida em um segundo vértice. Em um //Digrafo//
a ordem que os vértices são selecionados é importante, pois determinam o sentido do arco.
 
- **Remove edge - X**
 
Remove uma aresta entre dois vértices ao pressionar com o botão esquerdo do mouse
primeiramente em um vértice e em seguida em um segundo vértice.

- **Edit edge - G**
 
Edita as propriedades de uma aresta entre dois vértices ao pressionar com o botão 
esquerdo do mouse primeiramente em um vértice e em seguida em um segundo vértice. 
A figura 3.8 mostra o diálogo de edição de arestas.
A figura 3.9 traz um //grafo// de exemplo onde foram utilizados atributos para vértices e arestas.

As propriedades disponíveis são:

 + //Id// - Par ordenado único que identifica a aresta (Não editável)
 + //Label// - Rótulo dado a aresta
 + //Weight// - Peso desta aresta
 + //Color// - Cor que ela será impressa na tela

| [images/03-Interface-02-Edit-05-EditVertex.png] | [images/03-Interface-02-Edit-08-EditEdge.png]
| (figura 3.7)                                    | (figura 3.8)                                  
         
- **Show control points**
 
Exibe os pontos de controle de uma aresta. Com eles é possível desenhar arestas
curvas. Para isso após ativar os pontos de controle deve-se selecionar a
opção //Move vertex// e em seguida pressionar o botão esquerdo do mouse arrastando os pontos 
de controle até formar a curva desejada. A figura 3.10 mostra um //grafo// com
arestas curvas geradas utilizando os //control points//. É importante ressaltar
que a curvatura das arestas não são salvas pelo grafo. Ao abrir um (.gr) o 
grafo exibirá sempre arestas retas.

| [images/03-Interface-02-Edit-Exemplo-01-EditEdgesVertex.png] | [images/03-Interface-02-Edit-Exemplo-02-ControlPoints.png] 
| (figura 3.9)                                                 | (figura 3.10)


=== Graph ===

Esta opção de menu oferece manipulações sobre o //grafo// já construído através do menu //Edit//.
Também traz um //wizard// para geração de novos //grafos// e opções para redesenhar //grafo// em
edição com um novo layout. A figura 3.11 traz o menu de opções.

[images/03-Interface-03-Graph.png]

(figura 3.11)

==== Reset Graph - Ctrl+R ====
 
Limpa as estruturas internas e a área de trabalho preparando o ambiente do **GRAFO** para uma nova 
edição.
  
==== Reset marked edges - Ctrl+E ====
 
Limpa as arestas destacadas. 
Como exemplo temos a figura 3.13 quando executado o //Reset marked edges// sobre o grafo da figura 3.12.

==== Reset marked vertices - Ctrl+V ====
 
Limpa os vertices destacados. 
Como exemplo temos a figura 3.14 quando executado o //Resete marked vertices// sobre o grafo da figura 3.13.

| [images/03-Interface-03-Graph-Exemplo-01-VerticesArestasDestacados.png] | [images/03-Interface-03-Graph-Exemplo-02-VerticesDestacados.png] | [images/03-Interface-03-Graph-Exemplo-03-SemDestaque.png]
| (figura 3.12)                                                           | (figura 3.13)                                                    | (figura 3.14)


==== Vertex label ====
 
Exibe os vértices nomeados de acordo com a opção selecionada. Figura 3.15. Nas 
figuras 3.9 e 3.10 foram utilizadas a opção de exibição de //label// ou rótulos nos vértices.
Estes vértices representam as cidades //Londrina//, //Curitiba//, //Cascavel//.
 
 - //None// - Não exibe label para o vértice
 - //Index// - Exibe o indice para o vértice
 - //Id// - Exibe o identificador do vértice
 - //Label// - Exibe o nome dado ao vértice
 - //Weight// - Exibe o peso do vértice
 - //Color// - Exibe o número da cor do vértice
  
  
==== Edge label ====
 
Exibe as arestas nomeadas de acordo com a opção selecionada. Figura 3.16.
Nas figuras 3.9 e 3.10 foram utilizadas a opção de exibição de //label// ou rótulos nas arestas.
Estas arestas representam nomes de rodovias, //PR-487//, //PR-548// e //PR-878//, que ligam
as cidades.

 - //None// - Não exibe nome para a aresta
 - //Index// - Exibe o índice para a aresta
 - //Id// - Exibe o identificador da aresta
 - //Label// - Exibe o nome dado a aresta
 - //Weight// - Exibe o peso da aresta
 - //Color// - Exibe o número da cor da aresta

| [images/03-Interface-03-Graph-04-VertexLabel.png] | [images/03-Interface-03-Graph-05-EdgeLabel.png]
| (figura 3.15)                                     | (figura 3.16)

  
==== Generate Graph ====
 
Gera //grafos// pré determinados de acordo com um conjunto de parâmetros informados. A figura 3.17 mostra
o menu de opções.
  
[images/03-Interface-03-Graph-06-GenerateGraph.png]

(figura 3.17)
    
- **Complete Graph - Shift+K**
  
Gera um //grafo completo// de acordo com o número de vértices informados. A figura 3.18
mostra o dialogo de parâmetros. Como exemplo de execução temos a figura 3.23 que é um //grafo// completo de 5 vértices.
  	
[images/03-Interface-03-Graph-06-GenerateGraph-01-CompleteGraph.png]

(figura 3.18)
  	
 - Parâmetros:
  
  + //Number of vertices// - Número de vértices
	  	    
  
- **Bipartite complete graph - Shift+B**
  
Gera um //grafo bipartite// de acordo com o número de vértices informados 
para o grupo 1 e grupo 2. A figura 3.19 mostra o dialogo de parâmetros.
Como exemplo de execução temos a figura 3.24 que é um //grafo bipartite// 
com 5 vértices no grupo 1 e 2 vértices no grupo 2.
  	
[images/03-Interface-03-Graph-06-GenerateGraph-02-BipartiteCompleteGraph.png]

(figura 3.19)
  	
 - Parâmetros:
  
  + //Number of vertices of group 1// - Número de vertices do grupo 1
  + //Number of vertices of group 2// - Número de vertices do grupo 2


- **Random graph - Shift+Z**
  
Gera um //grafo// aleatório de acordo com o número de vértices informados 
e a probabilidade de existência de uma aresta entre eles. A figura 3.20 mostra
o dialogo de parâmetros. Como exemplo de execução temos a figura 3.25 que é um
//grafo// gerado de maneira aleatória com 6 vértices e uma probabilidade 
de existência de aresta de 20%.
  	
[images/03-Interface-03-Graph-06-GenerateGraph-03-RandomGraph.png]

(figura 3.20)
  	
 - Parâmetros:
  
  + //Number of vertices// - Número de vértices
  + //Edge probability// - Probabilidade de uma aresta

   
- **Regular graph - Shift+R**
  
Gera um //grafo// regular de acordo com o número de vértices e grau informados. 
A figura 3.21 mostra o dialogo de parâmetros.  A opção de //grafo// regular está
presente no menu, porem a geração não foi implementada. 
No capítulo7 será abordado a possibilidade de conclusão desta opção.
Como exemplo de //grafo// regular vide a figura 2.4 do capítulo 2. 

[images/03-Interface-03-Graph-06-GenerateGraph-04-RegularGraph.png]

(figura 3.21)
    
 - Parâmetros:
  
  + //Number of Vertices// - Número de vértices
  + //Vertex degree// - Grau do vértice
         
- **Star graph - Shift+S**
  
Gera um //grafo estrela// de acordo com o número de vértices informados. 
A figura 3.22 mostra o dialogo de parâmetros. Como exemplo de execução temos a figura
3.26 que é um //grafo estrela// com 25 vértices.
  	
[images/03-Interface-03-Graph-06-GenerateGraph-05-StarGraph.png]

(figura 3.22)
  	
 - Parâmetros:
  
  + //Number of vertices// - Número de vértices


| [images/03-Interface-03-Graph-06-GenerateGraph-01-CompleteGraph-Exemplo.png] | [images/03-Interface-03-Graph-06-GenerateGraph-02-BipartiteCompleteGraph-Exemplo.png]
| (figura 3.23)                                                                | (figura 3.24)
| [images/03-Interface-03-Graph-06-GenerateGraph-03-RandomGraph-Exemplo.png]   | [images/03-Interface-03-Graph-06-GenerateGraph-05-StarGraph-Exemplo.png]
| (figura 3.25)                                                                | (figura 3.26)

  
   
==== Redraw graph ====
  
Redesenha o //grafo// em um novo //layout// porem mantendo inalterado 
o seu conjunto de vértices e arestas.
   
- **Fit to windows - Shift+W**
   
Redesenha o //grafo// fazendo que ele ocupe o espaço máximo disponível na 
área de trabalho.
    
- **As circle - Shift+C**
   
Redesenha o //grafo// em circulo. Com exemplo temos o //grafo// em árvore da
figura 3.27 redesenhado em circulo na figura 3.28.
       
| [images/03-Interface-03-Graph-RedrawGraph-AsCircle-Arvore-Exemplo.png] | [images/03-Interface-03-Graph-RedrawGraph-AsCircle-Circulo-Exemplo.png]
| (figura 3.27)                                                          | (figura 3.28)
     
- **Using neato - Shift+N**
   
Redesenha o grafo utilizando o //neato//. 

Vale observar que o //grafo// não está sendo corretamente redesenhado quando utilizado o //neato// e o //dot//. 
No capítulo 6 serão abordadas as possibilidades de manutenções nesta funcionalidade.
Para informações sobre o //netao// e o //dot// visite o site (http://www.graphviz.org/).    
   
- **Using dot - Shift+D**
   
Redesenha o grafo utilizando o //dot//.
  
   
==== Toggle graph/digraph - T ====
  
Altera o tipo do //grafo// entre Grafo e Digrafo. Esta opção está desabilitada no menu por não estar implementada.
No capítulo 6 será abordada a possibilidade de finalização ao suporte a digrafos.


=== Algorithms ===

Esta opção de menu, figura 3.29, exibe o elenco de algoritmos disponíveis para utilização no **GRAFO**. 
Os algoritmos estão distribuídos nas categorias de //Teste//, //Resultado//, //Passo a Passo//, //Transformação// e //Busca//.
O **GRAFO** possui algoritmos nativos ou fornecidos através de plugins. Os algoritmos 
disponibilizados através de plugins são uma expansão da interface e estão destacados com ícone de plug
( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] ).

[images/03-Interface-04-Algorithms.png]

(figura 3.29)

- **Test algorithms**

Este menu é destinado a algoritmos que efetuam algum teste sobre o grafo da área
de trabalho. Como por exemplo verificar se ele é //cordal// ou não, se ele é conexo
ou se possui um //caminho de Euler//. Também neste menu estão dispostos dois algoritmos
de testes da interface de plugins que são o //Hello World!// e o //Get some parameters//.
A construção destes dois plugins serão detalhadas no capítulo 4.

 - **Chordal**
  
Retorna à //barra de status// se o //grafo// é ou não cordal.
  
 - **Hello World!** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Ilustra a utilização da //Barra de status// escrevendo "Hello World!".

 - **Get some parameters** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
  Ilustra a utilização de entrada de parâmetros para plugins. Solicita que o usuário
informe através de dialogos dados dos tipos //inteiro//, //double// e //string//. Em seguida imprime
a entrada dada na //barra de status//. 

 - **Conectivity** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Retorna à //barra de status// se o //grafo// é conexo.
  
 - **Euler Graph** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Retorna à //barra de status// se o //grafo// possui ou não um //caminho de Euler//.
  
  
- **Result algorithms**

Neste menu estão agrupados algoritmos que podem ser utilizados para análise do resultado
de //grafos// gerados por outros algoritmos. Como por exemplo
destacar a árvore de busca de //grafo// ou analisar quantos componentes conexos ele possuí.
Neste menu também estão presentes o os plugins //Highest Degree// e //Some Edge//
que terão as suas construções detalhadas no capítulo 4.

 - **Span, Tree**
  
Executa o algoritmo //Span, Tree// no //grafo// destacando a sua árvore de busca.
  
 - **Conected Components** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Retorna quantos componentes conexos existem no //grafo//.
  
 - **Highest Degree** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Destaca o vértice de maior grau de um //grafo//.
  
 - **Some Edge** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Destaca a aresta entre o vértice de maior grau e o de menor grau adjacente a ele.
  
- **Algorithms step by step**

Agrupados neste menu estão os algoritmos com suporte a //passo a passo//.
A utilização destes algoritmos serão detalhada no capítulo 5 bem como a construção 
do plugin //Select odd//.

 - **Depth First**
  
Executa o algoritmo //Depth First// no modo passo a passo.

 - **Select odd** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Destaca todos os vértices ímpares de um //grafo// e todas as arestas que conectam
dois vértices ímpares.  

  
- **Tranformations**

Agrupados neste menu estão os algoritmos que realizam transformações físicas 
nos //grafos// da área de trabalho ou criam novos //grafos// com determinadas
características. Como por exemplo transformar um //grafo// em //cordal// ou
gerar um //grafo de Paley//. Também está presente o algoritmo //Generate Star Graph//
que é utilizado no capitulo 4 para exemplificar a criação de vértices e arestas
através de um plugin.

 - **Line**
  
Executa o algoritmo //Line// em um //grafo//.
  
 - **Complement**
  
Retorna o //grafo// de complemento.
  
 - **Generate Star Graph** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
 
Cria um //grafo estrela// com o número de arestas solicitadas.
  
 - **Generate Paley Graph** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Cria um //grafo de Paley// com o número de arestas solicitadas.
  
 - **Chordalize a Graph** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Transforma um //grafo// não cordal em cordal.
  
 - **Delaunary triangulation** - ( [images/03-Interface-04-Algorithms-00-plugin-Icone.png] )
  
Executa o algoritmo de //triangulação Delaunary// em um //grafo//.
  
- **Search algorithms**

Este menu é destinado aos algoritmos de busca em grafos como por exemplo o algoritmo
de busca em profundidade //Depth First//.

 - **Depth First**
  
Executa o algoritmo //Depth First// em um //grafo// destacando a árvore e os vértices buscados.


=== Options === 

Este menu agrupa as preferências do usuário, configurações, informações sobre plugins e modo de visualização 


[images/03-Interface-05-Options.png]

(figura 3.30)

- **Preferences... - Ctrl+P**
 - **GraphViz Configuration**
  
Exibe as opções de configuração do //GraphViz// no **GRAFO**. Figura 3.31.
Ao clicar em //Choose...// abre o dialogo de seleção de arquivo.

[images/03-Interface-05-Options-01-Preferences-01-GraphVizConfiguration.png]

(figura 3.31)
    
 - Opções:
     
  + //Neato path// - Caminho completo para o programa neato
  + //Dot path// - Caminho completo para o programa dot
         
 - **Default paths**
  
Exibe as opções de configuração dos caminhos utilizados pelo **GRAFO**. Figura 3.32.

[images/03-Interface-05-Options-01-Preferences-02-DefaultPaths.png]

(figura 3.32)
    
 - Opções:
     
  + //Plugins path// - Caminho completo da localização dos plugins (//.so//)
  + //Datadir path// - Caminho padrão para os diálogos //Open//, //Save// e //Save as//
   
 - **Default view mode**
  
Padrão gráfico para a renderização da área de trabalho. Figura 3.33.
  
[images/03-Interface-05-Options-01-Preferences-03-DefaultViewMode.png]

(figura 3.33)
    
 - Opções:  
  
  + //Opengl (gtkgl area)// - Utilizando OpenGL
  + //Gtk (gtk drawing area)// - Utilizando GTK
   
- **Plugins info... - Ctrl+I**
 
 - **Plugins files info**
  
[images/03-Interface-05-Options-02-PluginsInfo-01-FileInfo.png]

(figura 3.34)

 - Colunas:
  
  + //File// - Informa o nome e caminho das bibliotecas dinâmicas dos plugins //(.so)//
  + //Status// - Informa se o plugin foi ou não carregado corretamente
   
 - **Plugins functions info**
  
[images/03-Interface-05-Options-02-PluginsInfo-01-FunctionsInfo.png]

(figura 3.35)

 - Colunas:
   
  + //Function// - Informa as funções disponíves em cada plugin
  + //In file// - Informa o nome e caminho das bibliotecas dinâmicas dos plugins //(.so)//
  + //Status// - Informa se o plugin foi ou não carregado corretamente
      
- **View mode**
  
  Altera o modo de renderização da área de trabalho entre //OpenGL// e //GTK//.
Contudo ao entrar no **GRAFO** o modo configurado como padrão será restaurado. 

 - Opções:  
   
  + //Opengl - Shift+O// - Utilizando OpenGL
  + //Gtk drawing area Shift+G// - Utilizando GTK
 

== Barra de Ferramentas ==

A //barra de ferramentas//, figura 3.36, traz os comandos básicos de entrada e saída e opções para
a manipulação dos algoritmos //passo a passo//. A utilização dos botões do //passo a passo//
serão detalhadas no capitulo 5.

[images/03-Interface-06-ToolBar.png]

(figura 3.36)

 - **New**
 
 Atalho para o menu //New//.
 
 - **Open**
 
  Atalho para o menu //Open//.
 
 - **Save**
 
  Atalho para o menu //Save//.
  
 - **Save As**
 
  Atalho para o menu //Save As//.
  
 - **First Step**
 
  Retorna ao primeiro passo gravado. 
 
 - **Prev Step**

  Retorna ao passo anterior. 
 
 - **Execute**
 
  Inicia a execução passo a passo em modo automático. 
 
 - **Next Step**

  Avança para o próximo passo.  
 
 - **Last Step**
 
  Avança para o último passo gravado. 
  
  
  
== Área de trabalho ==  
 
É na área de trabalho que o usuário edita os seus //grafos//, recebe o resultado
de execução dos algoritmos como o destaque de vértices e arestas e a criação
e exclusão de componentes do //grafo//.
 
== Barra de Status ==

A //barra de status// serve como canal de comunicação entre o **GRAFO** e o usuário. É nela
que o **GRAFO** dá instruções, mostra resultados e interage de forma escrita com o usuário.
Como por exemplo a figura 3.37 onde o usuário é instruído a clicar na área de trabalho
para criar um vértice. Na figura 3.38 o usuário é instruído a clicar em um vértice
e arrasta-lo para que este seja movido. E na figura 3.39 o usuário é informado que 
o //grafo// por ele escolhido não é //cordal//.

[images/03-Interface-07-BarraStatus-Exemplo-01.png]

(figura 3.37)

[images/03-Interface-07-BarraStatus-Exemplo-02.png]

(figura 3.38)

[images/03-Interface-07-BarraStatus-Exemplo-03.png]

(figura 3.39)



