Skip to topic | Skip to bottom
Home
 
TWiki
TWiki.FlowchartPluginr1.15 - 25 Jun 2005 - 16:24 - AurelioAHeckert?topic end

Start of topic | Skip to actions

Flowchart Plugin

Crie fluxogramas a partir de conteúdo textual do tópico.

Exemplo

Include of URL is disabled Fuxograma de Exemplo
Pare o mouse sobre cada item e veja a etiqueta com o nome em tamanho maior.
Cada item também é um link para o bloco de texto que o criou e onde podem existir mais detalhes sobre o passo.

The Based SVG
O exemplo acima foi gerado pelo conteúdo do tópico FlowchartPluginExample

Como Usar

Para criar e apresentar o fluxograma adicione a variável %FLOWCHART% ou %FLOWCHART{Parametros}%.

O plugin coleta o conteúdo do texto e considera que cada título de segundo nível ---++ indica o início da definição de um novo item do fluxograma. Para especificar o item e a ação derivada espera-se uma lista do tipo * Atributo: Valor

Atributos Comentário
Type tipo da unidade do fluxograma. Padrão: Action
Id Identificador para o Goto. Precisa validar com /[_a-zA-Z0-9]*/
Color Cor diferenciada para o item
Goto Indica para que item o fluxo deve seguir. Padrão: Next
Yes O mesmo que Goto, mas é obrigatório para Type: Question
No O mesmo que Goto, mas é obrigatório para Type: Question
Os tipos validos são:
Type Comentário
Start Indica o inicio de um fluxograma. Deve ser colocado no seu primeiro item
Action O tipo padrão. Apenas indica uma ação
Question Abre uma bifurcação no fluxo. Obriga a definição dos atributos Yes e No
End Indica o fim do fluxograma (ou parte dele)
End-Error Fim diferenciado para o caso de erro

Exemplo de uso:

---++ Item do Fluxograma
   * Id: nome_unico
   * Type: Question
   * Yes: item_A
   * No: item_B
Para um exemplo mais completo, veja: FlowchartPluginExample

Para controlar o início e fim de de títulos válidos para a construção do Fluxograma use %FLOWCHART_START% e %FLOWCHART_STOP%.

Se um nome for grande demais para o espaço do item a quebra de linha pode ser feita com %FLOWCHART_BR%, que não interfere no texto da página, apenas no fluxograma.

Para personalizar um fluxograma, basta adicionar parametros a variável: %FLOWCHART{Parametros}%
Os parametros válidos são:

Parameter Comentário
item-w Largura do item do fluxograma
item-h Altura do item do fluxograma
area-w Largura da área do item do fluxograma
area-h Altura da área do item do fluxograma
percent Porcentagem do tamanho PNG apresentado em relação ao padrão do SVG gerado
text-size Tamanho em pixels do texto
tag-style Estilo para a tag img

Dicas

IDEA! Os navegadores normalmente fazem cache da página web e dos elementos contidos nela (imagens, animações, sons...). É possível que após salvar a modificação na definição do fluxograma você não veja o efeito da modificação na imagem. Nesse caso clique "Atualizar" no seu navegador web.

IDEA! Alguns fluxogramas podem se tornar demasiadamente complexos e será difícil acompanhar suas linhas. Nesse caso aumente a área dos itens, dando assim maior espaçamento entre eles. eg: %FLOWCHART{ area-w="220" area-h="100" }%

Construção do Fluxograma e funcionamento do plugin

  1. Os blocos iniciados por título de segundo nível ---++ são lidos como definição de item do Fluxograma (como o plugin de slides).
  2. Um SVG é criado com essa informação e anexado ao tópico. Esse arquivo SVG pode ser acessado por %ATTACHURL%/flowchart_%TOPIC%.svg.
  3. Um PNG é gerado com o ImageMagick e redusido, para que a imagem tenha uma boa suavização de serrilhado, que não se consegue na conversão direta. O PNG é anexado ao tópico e pode ser acessado por %ATTACHURL%/flowchart_%TOPIC%.png (aproveite isto para separar a imagem do fluxograma do tópico de definição quando for interesante).
  4. É criado um mapa para a imagem lincando os itens do fluxograma a origem da sua informação onde podem existir mais dados para implementação. Um arquivo txt com o mapa é anexado ao tópico e pode ser acessado por %ATTACHURL%/flowchartMapImg_%TOPIC%.txt (use para mapear a imagem mesmo fora do tópico onde o fluxograma foi gerado).
    %INCLUDE{"%PUBURL%/Web/TopicoDoFluxograma/flowchartMapImg_TopicoDoFluxograma.txt"}%
    <img src="%PUBURL%/Web/TopicoDoFluxograma/flowchart_TopicoDoFluxograma.png" usemap="flowchart_TopicoDoFluxograma" alt="Fuxograma" border="0" />
  5. O conteudo do arquivo de mapa e uma tag de imagem apresentando o PNG são colocados no lugar da varável %FLOWCHART%.

Os arquivos (SVG, PNG e Map) são gerados quando o tópico contendo %FLOWCHART% é salvo.

Configuração

  • Set SHORTDESCRIPTION = Monta fluxograma a partir de informação do tópico

  • Largura padrão do item do fluxograma
    • Set ITEM_WIDTH = 140
  • Altura padrão do item do fluxograma
    • Set ITEM_HEIGHT = 40
  • Largura padrão da área do item do fluxograma
    • Set ITEM_AREA_W = 180
  • Altura padrão da área do item do fluxograma
    • Set ITEM_AREA_H = 70
  • Tamanho padrão em pixels do texto
    • Set TEXT_SIZE = 17
  • Porcentagem padrão do tamanho PNG apresentado em relação ao padrão do SVG gerado
    • Set PERCENT_IMG = 70
  • Estilo padrão para a tag img
    • Set TAG_STYLE = border:1px dotted #505050;

-- TWiki:Main.AurelioAHeckert - 17 Jun 2005
to top


TWiki.FlowchartPlugin moved from TWiki.FluxogramaPlugin on 22 Jun 2005 - 18:46 by AurelioAHeckert? - put it back
You are here: TWiki > FlowchartPlugin

to top

All content is Copyright © 1999-2021 by, and the property of, the contributing authors.
Questions, comments, or concerns? Contact GNHLUG
Legal Notice (includes Terms of Service)