From 13d6443b10f1f6896c26a48826f782214e708e65 Mon Sep 17 00:00:00 2001
From: Thales Lima Oliveira <thaleslima.ufu@gmail.com>
Date: Sat, 1 Aug 2020 19:01:45 -0300
Subject: Text bug fix and documentation update

New fancy [PSP-UFU website](https://thales1330.github.io/PSP/) and [changelog](https://thales1330.github.io/PSP/blog) using [docusaurus](https://v2.docusaurus.io/);
Text element performance improved for OpenGL render;
Major text bug on copy fixed
---
 docusaurus/docs/cadTools.md      | 20 ++++++++++----------
 docusaurus/docs/controlEditor.md |  2 +-
 docusaurus/docs/graphViewer.md   | 37 ++++++++++++++++++++++++++++++++++++-
 docusaurus/docs/heatmap.md       | 35 ++++++++++++++++++++++++++++++++++-
 docusaurus/docs/powerEditor.md   |  4 ++--
 docusaurus/docs/tabularReport.md | 14 +++++++++++++-
 docusaurus/docs/text.md          | 13 ++++++++++++-
 7 files changed, 108 insertions(+), 17 deletions(-)

(limited to 'docusaurus/docs')

diff --git a/docusaurus/docs/cadTools.md b/docusaurus/docs/cadTools.md
index c741ba8..e26737b 100644
--- a/docusaurus/docs/cadTools.md
+++ b/docusaurus/docs/cadTools.md
@@ -31,7 +31,7 @@ Mantendo pressionado a tecla Control (Ctrl) do teclado pode-se manter seleções
 
 Para desmarcar todos os objetos basta clicar em uma área sem objetos.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/select.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/select.webm")} type="video/webm" />
 </video>
@@ -41,7 +41,7 @@ Um elemento poderá ser movido para qualquer local por meio da ação *drag-and-
 
 Ao habilitar o “modo mover”, movendo todos os componentes selecionados à medida que a posição do mouse é alterada. Para desabilitar esse modo basta pressionar a tecla Escape do teclado.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/move.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/move.webm")} type="video/webm" />
 </video>
@@ -55,7 +55,7 @@ O menu de contexto somente será exibido se o elemento estiver selecionado.
 
 Ao utilizar essa ferramenta os objetos irão girar 45º a partir do seu ponto de origem. Para atingir a angulação pretendida basta repetir o processo de rotação.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/rotate.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/rotate.webm")} type="video/webm" />
 </video>
@@ -67,7 +67,7 @@ A ferramenta arrastar possibilita mover todo o circuito **preservando as posiç
 
 Para sair do “modo arrastar” basta pressionar a tecla Escape do teclado.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/drag.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/drag.webm")} type="video/webm" />
 </video>
@@ -75,7 +75,7 @@ Para sair do “modo arrastar” basta pressionar a tecla Escape do teclado.
 ### Zoom
 O zoom será aplicado ao utilizar o **scroll do mouse** para mais ou menos zoom. A ferramenta zoom irá aproximar ou distanciar o circuito a partir da posição do ponteiro do mouse na tela para encontrar objetos ou destaca-los.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/zoom.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/zoom.webm")} type="video/webm" />
 </video>
@@ -83,7 +83,7 @@ O zoom será aplicado ao utilizar o **scroll do mouse** para mais ou menos zoom.
 ### Encaixar
 A ferramenta encaixar irá mover o circuito e aplicar o zoom necessário para que todos os componentes da rede sejam exibidos na tela. Esta ferramenta pode ser acessada através do submenu “Ferramentas” ou pela combinação de teclas “Shift + F”.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/fit.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/fit.webm")} type="video/webm" />
 </video>
@@ -93,7 +93,7 @@ Duas ferramentas importantes durante o processo de criação da rede elétrica d
 
 Para copiar basta selecionar os elementos que se deseja duplicar e acessar a ferramenta no submenu “Ferramentas” ou pressionando a combinação das teclas “Ctrl + C”, então os dados do circuito serão copiados para a área de transferência. Ao copiar um circuito ele poderá ser colado no mesmo projeto ou em um projeto distinto, utilizando o mesmo submenu ou pressionando a combinação das teclas “Ctrl + V”.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/copyPaste.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/copyPaste.webm")} type="video/webm" />
 </video>
@@ -101,7 +101,7 @@ Para copiar basta selecionar os elementos que se deseja duplicar e acessar a fer
 ### Excluir
 Qualquer objeto poderá ser excluído do projeto por meio da ferramenta deletar, presente no menu Ribbon, pela tecla de atalho Delete ou pelo acesso ao menu de contexto clicando com o botão direito sobre o elemento selecionado.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/delete.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/delete.webm")} type="video/webm" />
 </video>
@@ -120,7 +120,7 @@ Após a sua inserção, novos nós podem ser anexados pelo menu de contexto aces
 
 Assim como nos barramentos, a alteração da posição dos nós é obtida clicando e arrastando o *pickbox* exibido ao posicionar o ponteiro do mouse sobre esse elemento selecionado.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/graphicPropsChange.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/graphicPropsChange.webm")} type="video/webm" />
 </video>
@@ -138,7 +138,7 @@ No caso de desconexão, o elemento será automaticamente removido da simulação
 Ao reconectar o elemento ao circuito, deve-se **atentar para estado do seu "disjuntor"**, indicado por um quadrado próximo ao seu nó de conexão. Um elemento reconectado volta ao circuito com seu disjuntor aberto (<Highlight color="#ff1919">vermelho</Highlight>), sendo necessário clicar sobre o mesmo a fim de inserir o elemento no circuito.
 :::
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= {useBaseUrl("videos/disconnect.mp4")} type="video/mp4" />
   <source src= {useBaseUrl("videos/disconnect.webm")} type="video/webm" />
 </video>
\ No newline at end of file
diff --git a/docusaurus/docs/controlEditor.md b/docusaurus/docs/controlEditor.md
index c27ac87..6be6e71 100644
--- a/docusaurus/docs/controlEditor.md
+++ b/docusaurus/docs/controlEditor.md
@@ -30,7 +30,7 @@ Uma vez que o usuário clicar no ícone desejado, o elemento de controle acompan
 
 As ferramentas de manipulação e navegação, como arrastar, mover e excluir são [herdadas](cadTools) do [editor de elementos de potência](powerEditor), possuindo comportamento idêntico. A **edição dos dados** dos componentes inseridos também é realizada com **duplo clique** sobre o elemento inserido, exibindo um formulário de edição de dados.
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= "/PSP/videos/timelapseControlEditor.mp4" type="video/mp4" />
   <source src= "/PSP/videos/timelapseControlEditor.webm" type="video/webm" />
 </video>
diff --git a/docusaurus/docs/graphViewer.md b/docusaurus/docs/graphViewer.md
index 5498f9a..952e252 100644
--- a/docusaurus/docs/graphViewer.md
+++ b/docusaurus/docs/graphViewer.md
@@ -5,4 +5,39 @@ sidebar_label: Visualizador de Gráficos
 ---
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-<link rel="stylesheet" href={useBaseUrl("katex/katex.min.css")} />
\ No newline at end of file
+<link rel="stylesheet" href={useBaseUrl("katex/katex.min.css")} />
+
+Para exibição dos resultados originados dos cálculos de [estabilidade](stability) e [varredura de frequências](harmonics), desenvolveu-se um visualizador de gráficos, como mostra a figura abaixo:
+
+<div><center><img src={useBaseUrl("images/graphViewer.png")} alt="Visualizador de gráficos do PSP-UFU" title="Visualizador de gráficos do PSP-UFU" /></center></div>
+
+## Criação, manipulação e navegação de curvas
+Tal visualizador utiliza a biblioteca [wxMathPlot](https://wxmathplot.sourceforge.io/), e permite ao usuário imprimir todas as curvas no tempo originadas dos resultados de [estabilidade](stability) e [varredura de frequências](harmonics), acessados em dados hierárquicos em forma de árvore, identificados pelo tipo e nome do elemento de potência, além do tipo de curva.
+
+:::info Informação
+As curvas podem ser plotadas com **clique duplo** sobre ela ou ao selecionar a caixa "Plotar" nas propriedades do traço.
+:::
+
+Os gráficos impressos podem ser caracterizados pela edição de suas propriedades do traço, ou seja, pode-se alterar a cor, espessura e tipo de traço (seis tipos disponíveis). Por padrão o eixo vertical é o tempo (em estabilidade) ou frequência (varredura de frequências), porém o usuário pode alterar para qualquer curva disponível.
+
+Várias propriedades gerais do gráfico podem ser editadas: título do gráfico, rótulos dos eixos x e y, margens e limites inferiores e superiores de ambos os eixos.
+
+O menu **Visualização** permite a inserção de exibição de legenda, linhas de grade e coordenadas do ponteiro do mouse (utilizada para destacar pontos na curva), além da possibilidade de alternar o tema de impressão entre escuro e claro, facilitando a visualização ou exportação do gráfico.
+
+No menu **Arquivo**, pode-se salvar o gráfico na forma de imagem (*.png*, *.jpg* ou *.bmp*) ou enviá-lo diretamente para a área de transferência. No mesmo menu também é permitido a exportação no formato *[CSV (Comma-separated Values)](https://en.wikipedia.org/wiki/Comma-separated_values)*, o qual poderá ser utilizado em outros visualizadores de gráficos, como o Excel ou o [gnuplot](http://www.gnuplot.info/).
+
+A área de plotagem permite a navegação utilizando ferramentas de zoom, por área de seleção e comandos de mouse, e arrasto das curvas impressas.
+
+:::tip Dica
+Ao clicar com o botão direito sobre a área de plotagem as opções de manipulação são exibidas por meio de um menu de contexto.
+:::
+
+Os seguintes **comandos de mouse** são utilizados para navegação das curvas:
+
+|Comando|Ação|
+|-------|----|
+|Botão esquerdo pressionado + Selecionar área|Seleciona a área de zoom|
+|Botão direito pressionado + Mover mouse|Arrasta a curva|
+|Roda do mouse|Arrasto vertical|
+|Roda do mouse + Shift|Arrasto horizontal|
+|Roda do mouse + Ctrl|Mais/menos zoom|
\ No newline at end of file
diff --git a/docusaurus/docs/heatmap.md b/docusaurus/docs/heatmap.md
index 30ea55f..a16995c 100644
--- a/docusaurus/docs/heatmap.md
+++ b/docusaurus/docs/heatmap.md
@@ -5,4 +5,37 @@ sidebar_label: Mapa de Tensão
 ---
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-<link rel="stylesheet" href={useBaseUrl("katex/katex.min.css")} />
\ No newline at end of file
+<link rel="stylesheet" href={useBaseUrl("katex/katex.min.css")} />
+
+A ferramenta Mapa de Tensão utiliza o concento de [mapa de calor](https://en.wikipedia.org/wiki/Heat_map) para exibir os valores de tensão de todas as barras do sistema por meio de cores.
+
+<video autoPlay loop muted playsInline controls>
+  <source src= {useBaseUrl("videos/heatmap.mp4")} type="video/mp4" />
+  <source src= {useBaseUrl("videos/heatmap.webm")} type="video/webm" />
+</video>
+
+:::tip Dica
+Essa ferramenta é útil para identificação de barras com sub e sobretensões no sistema de potência, assim como o efeito da inserção / remoção de elementos do sistema.
+:::
+
+A legenda que correlaciona os valores do módulo da tensão com as cores são exibidas à esquerda da área de trabalho.
+
+## Habilitando a ferramenta Mapa de Tensão
+
+A ferramenta pode ser habilitada ou desabilitada no [submenu Ribbon **Ferramentas**](mainScreen#menu-ribbon) clicando no botão **Mapa de tensão** ou pela tecla de atalho "Ctrl + Shift + H".
+
+As configurações da ferramenta podem ser também acessadas no [submenu Ribbon **Ferramentas**](mainScreen#menu-ribbon) clicando no botão **Configurações do projeto**
+
+<div><center><img src={useBaseUrl("images/heatmapForm.png")} alt="Configurações da ferramenta Mapa de Tensão" title="Configurações da ferramenta Mapa de Tensão" /></center></div>
+
+:::info Informação
+Na versão atual do programa, somente as opções do mapa de tensão são exibidas nas configurações de projeto.
+:::
+
+Os limites superiores e inferiores, em $p.u.$ são editados nesse formulário.
+
+Alternativamente, o programa pode calcular automaticamente os limites. Nesse caso, o limite superior será a maior tensão do circuito e o limite inferior será a menor tensão do circuito.
+
+:::warning Cuidado!
+O cálculo automático dos limites pode prejudicar a identificação de barras com sub e sobretensões no sistema.
+:::
\ No newline at end of file
diff --git a/docusaurus/docs/powerEditor.md b/docusaurus/docs/powerEditor.md
index d47fef2..f7dc3d1 100644
--- a/docusaurus/docs/powerEditor.md
+++ b/docusaurus/docs/powerEditor.md
@@ -49,7 +49,7 @@ Sempre que são inseridos novos elementos, um formulário de dados é exibido e
 O primeiro elemento que a ser inserido no projeto **deve** ser um barramento. Os demais elementos elétricos devem ser conectados em uma ou mais barras.
 :::
 
-Além dos elementos de potência pode-se inserir os elementos de *texto vinculado*, os quais estão associados a uma grandeza que se deseja vizualizar diretamente na [Área de Trabalho](mainScreen#área-de-trabalho).
+Além dos elementos de potência pode-se inserir os elementos de *[texto vinculado](text)*, os quais estão associados a uma grandeza que se deseja vizualizar diretamente na [Área de Trabalho](mainScreen#área-de-trabalho).
 
 :::warning Cuidado!
 Ao inserir um barramento, a mesma irá acompanhar o ponteiro do mouse até que você clique na posição desejada. Para os demais elementos **deve-se clicar em uma mais barras** para exibir o elemento inserido.
@@ -57,7 +57,7 @@ Ao inserir um barramento, a mesma irá acompanhar o ponteiro do mouse até que v
 **Sempre fique atento às instruções da [Barra de Status](mainScreen#barra-de-status).**
 :::
 
-<video autoPlay loop muted controls>
+<video autoPlay loop muted playsInline controls>
   <source src= "/PSP/videos/timelapseBuild.mp4" type="video/mp4" />
 </video>
 
diff --git a/docusaurus/docs/tabularReport.md b/docusaurus/docs/tabularReport.md
index b59ad78..abef142 100644
--- a/docusaurus/docs/tabularReport.md
+++ b/docusaurus/docs/tabularReport.md
@@ -5,4 +5,16 @@ sidebar_label: Relatórios Tabulares
 ---
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
-<link rel="stylesheet" href={useBaseUrl("katex/katex.min.css")} />
\ No newline at end of file
+<link rel="stylesheet" href={useBaseUrl("katex/katex.min.css")} />
+
+Para visualização de todos os resultados dos cálculos de [fluxo de carga](powerFlow) e [curto-circuito](fault), desenvolveu-se um visualizador de relatórios tabulares:
+
+<div><center><img src={useBaseUrl("images/tabReport.png")} alt="Visualizador de dados tabulados no PSP-UFU" title="Visualizador de dados tabulados no PSP-UFU" /></center></div>
+
+Tal visualizador pode ser acessado no [submenu Ribbon](mainScreen#menu-ribbon) **Ferramentas** e então no botão **Relatório de dados**, sendo exibido o formulário organizado em abas.
+
+As grandezas de alguns dados desse relatório podem ser modificadas, sendo selecionadas no cabeçalho da tabela, como mostra a figura acima.
+
+:::tip Dica
+Os valores podem ser exportados para editores de texto e tabelas externos, selecionando e copiando (Ctrl+C) para a área de transferência.
+:::
\ No newline at end of file
diff --git a/docusaurus/docs/text.md b/docusaurus/docs/text.md
index 0e89104..54079a4 100644
--- a/docusaurus/docs/text.md
+++ b/docusaurus/docs/text.md
@@ -20,7 +20,18 @@ Outra aplicação importante é a atualização de seu valor ao aplicar a “sol
 Também pode-se utilizar os resultados apresentados por esses elementos juntamente com o diagrama unifilar na criação de relatórios do projeto.
 :::
 
-<div><center><img src={useBaseUrl("images/textExp.png")} alt="Exemplo de elemento de texto no PSP-UFU" title="Exemplo de elemento de texto no PSP-UFU" /></center></div>
+<div><center><img src={useBaseUrl("images/textExp.png")} alt="Exemplo do elemento de texto no PSP-UFU" title="Exemplo de elemento de texto no PSP-UFU" /></center></div>
+
+## Inserindo elementos de texto no PSP-UFU
+Por meio do submenu **Ferramentas** pode-se inserir os elementos de texto, como é apresentado na imagem abaixo.
+
+<div><center><img src={useBaseUrl("images/addTextElement.svg")} alt="Adicionar elementos de texto" title="Adicionar elementos de texto" /></center></div>
+
+Ao selecionar o botão "Texto" ou utilizar a **tecla de atalho "A"**, o usuário deve clicar na posição desejada da [área de trabalho](powerEditor). Com isso, será adicionado um elemento temporário com o valor "Texto". Para parametrizar esse elemento clique duas vezes sobre ele.
+
+:::caution Atenção
+O elemento de texto, assim como os [elementos de controle](controlEditor) não exibem automaticamente o formulário de edição de dados ao inseri-lo pela primeira vez.
+:::
 
 ## Formulário de edição de dados do elemento de texto
 A figura abaixo apresenta o formulário de edição de dados desse componente gráfico.
-- 
cgit