FlowchartPlugin

Example

Item of the Flowchart

• Id: unic_nome

Syntax Rules

To control the beginning and end of of valid headings for the construction of the Flowchart use %FLOWCHART_START% and %FLOWCHART_STOP%.

If a name is excessively big for the space of the item a line break can be made with %FLOWCHART_BR%, that does not intervene with the text of the page, only in the flowchart.

To personalize a flowchart, is enough to add parametros to the variable: %FLOWCHART{Parameters}%
The valid parametros are:

Tips

The web bowsers normally make cache of the web page and of the elements contained in that (images, animações, sounds...). It is possible that after to save the modification in the definition of the flowchart you do not see the effect of the modification in the image. In this case click "Reload" in your web browser.

Some flowcharts can become so complex and will be difficult to follow its lines. In this case, increase the area of itens, giving a bigger space between them. eg: %FLOWCHART{ area-w="220" area-h="100" }%

Construction of the Flowchart and Plugin's Working Way

1. The blocks initialized by a heading level two ---++ are read as definition of item of the Flowchart (as the TWiki:Plugins.SlideShowPlugin).
2. A SVG is created with this information and is annexed in the topic. This SVG file can be had access by %ATTACHURL%/flowchart_%TOPIC%.svg.
3. A PNG is generated with the ImageMagick and reduced, so that the image has a good anti-aliasing, that it is not obtained in the direct conversion. The PNG is annexed in the topic and can be had access by %ATTACHURL%/flowchart_%TOPIC%.png (use this advantage to separate the flowchart's image of the definition topic when it is interesting).
4. Is created a map for the image linking the itens of the flowchart whith the origin of its information, where can exist more information for implementation. %ATTACHURL%/flowchartMapImg_%TOPIC%.txt (use to map the image out off the topic where the flowchart was generated too)
   %INCLUDE{"%PUBURL%/Web/FlowchartTopic/flowchartMapImg_FlowchartTopic.txt"}%
<img src="%PUBURL%/Web/FlowchartTopic/flowchart_FlowchartTopic.png" usemap="flowchart_FlowchartTopic" alt="Flowchart" border="0" />
5. The content of the map file and one image tag presenting the PNG are placed in the place of variable %FLOWCHART%.

The files (SVG, PNG and Map) are generated when the topic contend %FLOWCHART% is saved.

Plugin Settings

• One line description, is shown in the TextFormattingRules topic:
  • Set SHORTDESCRIPTION = Bilds a flowchart from information on the topic

• Standard width for the flowchart's itens

• Standard height for the flowchart's itens

• Standard width for the area of the flowchart's itens

• Standard height of the area of the flowchart's itens

• Standard size in pixels of the font text

• Standard percentage of the PNG size presented in relation to the standard of the generated SVG

• Standard style for the img tag

• Debug plugin: (See output in data/debug.txt)
  • Set DEBUG = 0

Plugin Installation Instructions

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running.

• Download the ZIP file from the Plugin web (see below)
• Unzip FlowchartPlugin.zip in your twiki installation directory. Content:

  File:	Description:
  data/TWiki/FlowchartPlugin.txt	Plugin topic
  data/TWiki/FlowchartPlugin.txt,v	Plugin topic repository
  data/TWiki/FlowchartPluginExample.txt
  data/TWiki/FlowchartPluginExample.txt,v
  lib/TWiki/Plugins/FlowchartPlugin.pm	Plugin Perl module
  pub/TWiki/FlowchartPluginExample/flowchart_FlowchartPluginExample.png
  pub/TWiki/FlowchartPluginExample/flowchart_FlowchartPluginExample.svg
  pub/TWiki/FlowchartPluginExample/flowchartMapImg_FlowchartPluginExample.txt

• Install the ImageMagick
• Test if the installation was successful:
  • See the FlowchartPluginExample

Plugin Info

<!-- INI Plugin Info -->

Related Topics: TWikiPreferences, TWikiPlugins

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" }%

Dicas

• 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.
• 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" }%

Exemplo

Como Usar

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

Exemplo de uso:

---++ Item do Fluxograma
   * Id: nome_unico
   * Type: Question
   * Yes: item_A
   * No: item_B

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:

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%.

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;

Fim Tronco 1

• Id: Fim1

• Yes: Lennon_canta
• #Yes: Fim1
• No: Next

Questão 5

• Type: Question

Questão 7

Questão 9

Fim Tronco 2 %FLOWCHART_BR%

• 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.

• O conteudo do arquivo de mapa e uma tag de imagem apresentando o PNG são colocados no lugar da varável %FLOWCHART%.

• Yes: tronco1
• No: tronco2

Início do %FLOWCHART_BR% Tronco 1

• Id: tronco1
• Color: 70B070

Bli...

• Yes: tronco1

Questão 4

• Yes: Next
• No: Quest6

Bla bla bla...

• No: Lennon_canta

Fim Tranco 1

• Type: End

"Imagine all %FLOWCHART_BR% the people..."

• Id: Lennon_canta
• Goto: tronco1

Início do %FLOWCHART_BR% Tronco 2

• Id: tronco2
• Color: E0B040

Blo...

Questão 3

• Type: Question
• Yes: Next
• No: erro

Questão 5

• Yes: Next
• No: tronco2

Faz algo

Questão 7

• Type: Question
• Yes: fim

ERRO Sei lá... %FLOWCHART_BR%

• Id: erro
• Type: End-Error

Fim Tranco 2 %FLOWCHART_BR%

• Id: fim
• Type: End

Flowchart Plugin

• 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.
• Um SVG é criado com essa informação e anexado ao tópico.
• 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.
• É 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.
• O conteudo do arquivo de mapa e uma tag de imagem apresentando o PNG são colocados no lugar da varável %FLUXOGRAMA%.

• A imagem não deve ser recriada a cada visita, mas apenas quando o tópico for salvo.
• Colocar opções de tamanho (imagem, itens do fluxograma) para serem alteradas pelo usuário.
• Colocar limitadores para definir a área válida de conteúdo para criar o Fluxograma

Início do%FLOWCHART_BR%Fluxograma

Nome "longo" com%FLOWCHART_BR%quebra de linha

ERRO %FLOWCHART_BR%WikiWord e <nop>

Início do Fluxograma

Nome Repetido

Nome Repetido

• No: Quest4

Questão 1.5

• Id: Quest1_5
• Type: Question
• Yes: Next
• No: Quest2

Questão 5

• Id: Quest5
• Type: Question
• Yes: End
• No: Next

Questão 6

• Id: Quest6
• Type: Question
• Yes: Next
• No: Quest3

Questão 4

• Id: Quest4

Inicio do Fluxograma

Questão 1

• Id: Quest1

• No: passoA

Nome longo com%FLUXOGRAMA_BR%quebra de linha

Questão 2

• Id: Quest2

• Yes: Quest1
• No: Next
• Color: 60B040

Questão 3

• Id: Quest3
• Type: Question
• Yes: Quest1
• No: Next

ERRO Bli

Questão 3

• Id: passoA
• Type: Question
• Yes: Quest3
• No: Next

• Gero um PNG com o ImageMagick. Feito
• Crio um mapa para a imagem lincando os itens do fluxograma a origem da sua informação onde podem existir mais dados para implementação. não implementado

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

• Pego os blocos iniciados por título de segundo nível ---+, como o plugin de slides. Feito
• Crio um SVG com essa informação. %ICO_OBRA% em andamento
• Gero um PNG com o ImageMagick. Já testado, não implementado
• Crio um mapa para a imagem lincando os itens do fluxograma a origem da sua informação onde podem existir mais dados para implementação.

• No: tem_certesa

• Id: instala
• Goto: End
• Color: 60B040

Tem certesa?

• Id: tem_certesa
• Type: Question
• Yes: fim_triste
• No: eba

Eba!

• Id: eba
• Goto: instala

Fim aaaaaaa...

• Type: End-Error
• Id: fim_triste

Escolhe a %FLUXOGRAMA_BR% Interface

Fluxograma Plugin

• Set SHORTDESCRIPTION = Monta fluxograma a partir de info do tópico

Teste:

%FLUXOGRAMA%

Recebe CAI Info

• Type: Start

Escolhe a Interface

Deseja Instalar Bli?

• Type: Question
• Yes: Next
• No: End

Instala Bli

Fim

• Type: End
• Id: End

-- AurelioAHeckert^? - 17 Jun 2005