<<O>>  Difference Topic FlowchartPlugin (r1.16 - 27 Jun 2005 - AurelioAHeckert?)
Changed:
<
<

Flowchart Plugin

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

>
>

FlowchartPlugin


Added:
>
>
You can create flowcharts from textual content on the topic.

TOC: No TOC in "TWiki.FlowchartPlugin"
Changed:
<
<

Exemplo

>
>

Example


Include of URL is disabled Fuxograma de Exemplo
Changed:
<
<

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

Stop the mouse above each item and see the tag with the name in a bigger size.
Each item is a link for the text block what was created it and where can exist more information about this step.


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

Como Usar

>
>
The example above was generated by the content of the topic FlowchartPluginExample

Changed:
<
<
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:

>
>
In the text to define the itens of the Flowchart you must to write by this way for each item:


Changed:
<
<

Item do Fluxograma

  • Id: nome_unico
>
>

Item of the Flowchart

  • Id: unic_nome

  • Type: Question
  • Yes: item_A
  • No: item_B
Changed:
<
<
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%.

>
>
To a better example see the FlowchartPlugin Example.

Changed:
<
<
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.
>
>

Syntax Rules


Changed:
<
<
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
>
>
To create and present the flowchart, add the variable %FLOWCHART% ou %FLOWCHART{Parameters}%.

Changed:
<
<

Dicas

>
>
This plugin Plugin collects the content of the text and considers that each heading level two ---++ indicate the beginning of the definition of a new item of the flowchart. To specify the item and the derived action is expected a list of the type * Attribute: Value
Atribute Commentary
Type Type of the flowchart's item. Default: Action
Id Identification for the Goto. It needs to validate with /[_a-zA-Z0-9]*/
Color Color differentiated for the item
Goto Indicates so that item it must follow. Default: Next
Yes The same as Goto, but is obligator for Type: Question
No The same as Goto, but is obligator for Type: Question
The valid types are:
Type Commentary
Start Indicates the beginning of a flowchart. It must be placed in its first item
Action The standard type. It indicates an action
Question Opens a bifurcation in the flow. It compels the definition of attributes Yes e No
End Indicates the end of the flowchart (or part of it)
End-Error Differentiated end for the error case

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:

Parameter Commentary
item-w Width for the flowchart's itens area
item-h Height for the flowchart's itens
area-w Width of the area of the flowchart's itens
area-h Height of the area of the flowchart's itens
percent Percentage of the PNG size presented in relation to the standard of the generated SVG
text-size Size in pixels of the font text
tag-style Style for the img tag

Tips

IDEA! 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.

IDEA! 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.


Deleted:
<
<
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.

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

Plugin Settings


Changed:
<
<

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%.
>
>
Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>%, i.e. %INTERWIKIPLUGIN_SHORTDESCRIPTION%

Changed:
<
<
Os arquivos (SVG, PNG e Map) são gerados quando o tópico contendo %FLOWCHART% é salvo.
>
>
  • One line description, is shown in the TextFormattingRules topic:
    • Set SHORTDESCRIPTION = Bilds a flowchart from information on the topic

Changed:
<
<

Configuração

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

  • Largura padrão do item do fluxograma
>
>
  • Standard width for the flowchart's itens

    • Set ITEM_WIDTH = 140
Changed:
<
<
  • Altura padrão do item do fluxograma
>
>
  • Standard height for the flowchart's itens

    • Set ITEM_HEIGHT = 40
Changed:
<
<
  • Largura padrão da área do item do fluxograma
>
>
  • Standard width for the area of the flowchart's itens

    • Set ITEM_AREA_W = 180
Changed:
<
<
  • Altura padrão da área do item do fluxograma
>
>
  • Standard height of the area of the flowchart's itens

    • Set ITEM_AREA_H = 70
Changed:
<
<
  • Tamanho padrão em pixels do texto
>
>
  • Standard size in pixels of the font text

    • Set TEXT_SIZE = 17
Changed:
<
<
  • Porcentagem padrão do tamanho PNG apresentado em relação ao padrão do SVG gerado
>
>
  • Standard percentage of the PNG size presented in relation to the standard of the generated SVG

    • Set PERCENT_IMG = 70
Changed:
<
<
  • Estilo padrão para a tag img
>
>
  • Standard style for the img tag

    • Set TAG_STYLE = border:1px dotted #505050;
Added:
>
>
  • 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:

Plugin Info

<!-- INI Plugin Info -->

Plugin Author: TWiki:Main.AurelioAHeckert
Plugin Version: 27 Jun 2005 (V1.000)
Change History: <!-- versions below in reverse order --> 
27 Jun 2005: Initial public version 0.8
TWiki Dependency: $TWiki::Plugins::VERSION 1.024
CPAN Dependencies: none
Other Dependencies: ImageMagick
Perl Version: 5.005
License: GPL (GNU General Public License)
TWiki:Plugins/Benchmark: GoodStyle nn%, FormattedSearch nn%, FlowchartPlugin nn%
Plugin Home: http://TWiki.org/cgi-bin/view/Plugins/FlowchartPlugin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/FlowchartPluginDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/FlowchartPluginAppraisal
<!-- FIM Plugin Info -->

Related Topics: TWikiPreferences, TWikiPlugins


-- TWiki:Main.AurelioAHeckert - 17 Jun 2005

Revision r1.15 - 25 Jun 2005 - 16:24 - AurelioAHeckert?
Revision r1.16 - 27 Jun 2005 - 23:25 - AurelioAHeckert?