Mudanças entre as edições de "Uso do WaveDrom para gerar diagramas de tempo"

De MediaWiki do Campus São José
Ir para navegação Ir para pesquisar
 
(5 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
[https://wavedrom.com/ WaveDrom] é um aplicativo JavaScript, que renderiza os diagramas de tempo diretamente no [https://wavedrom.com/editor.html | navegador]. O formato de descrição adotado é um JSON modificado '''WaveJSON''', no qual a descrição de cada sinal digital é feito usando elemento '''signal''' O elemento "sinal" no qual se descreve em uma matriz de '''WaveLanes''' os sinais. Cada WaveLane possui um campo obrigatório: '''wave''', e podem ser acrescentados os campos '''name''' e '''data'''. A documentação digital está disponível no [https://wavedrom.com/tutorial.html | Hitchhiker's Guide to the WaveDrom]. Também existe um bom documento digital que ilustra todo o processo [https://wavedrom.com/images/SNUG2016_WaveDrom.pdf | WaveDrom: Rendering Beautiful Waveforms from Plain Text] Chapyzhenka, A. Probell, J.
+
[https://wavedrom.com/ WaveDrom] é um aplicativo JavaScript, que renderiza os diagramas de tempo diretamente no [https://wavedrom.com/editor.html navegador]. O formato de descrição adotado é um JSON modificado '''WaveJSON''', no qual a descrição de cada sinal digital é feito usando elemento '''signal''' O elemento "sinal" no qual se descreve em uma matriz de '''WaveLanes''' os sinais. Cada WaveLane possui um campo obrigatório: '''wave''', e podem ser acrescentados os campos '''name''' e '''data'''. A documentação digital está disponível no [https://wavedrom.com/tutorial.html Hitchhiker's Guide to the WaveDrom]. Também existe um bom documento digital que ilustra todo o processo [https://wavedrom.com/images/SNUG2016_WaveDrom.pdf WaveDrom: Rendering Beautiful Waveforms from Plain Text] Chapyzhenka, A. Probell, J.
  
 
Exemplo de uso do WaveDrom para a geração do diagrama de tempo de um somador e subtrator.  Os valores com ''overflow'' e ''underflow'' estão sinalizados em vermelho e no bit de erro.
 
Exemplo de uso do WaveDrom para a geração do diagrama de tempo de um somador e subtrator.  Os valores com ''overflow'' e ''underflow'' estão sinalizados em vermelho e no bit de erro.
 +
 
<pre>
 
<pre>
 
{signal: [
 
{signal: [
Linha 18: Linha 19:
 
</pre>
 
</pre>
  
 +
{{fig|1|Diagrama de tempo de um somador de 4 bits| WaveDromSomador4bits.png| 600 px | https://wavedrom.com/editor.html}}
 +
 +
 +
Outros campos que podem ser utilizados são: config, head, foot, text, node, edge, period, phase
  
{{fig|1|Diagrama de tempo de um somador de 4 bits| WaveDromSomador4bits.png| 600 px | https://wavedrom.com/editor.html}}
+
<pre>
 +
{signal: [
 +
  ['Entradas',
 +
  {name: 'a (3 bits)',    wave: 'x.2.2.2.2.x.', data: ['7','4','0','2']},
 +
  {name: 'b (3 bits)',    wave:  'x.22222222x.', data: ['7','4','0','2','1','7','0','7']},
 +
  ],
 +
  {},
 +
  ['Saidas', 
 +
  ['Somador',
 +
  {name: 'soma (6 bits)',  wave:  'x.99222229x.', data: ['6','3','4','6','1','7','2','1'] },
 +
  {name: 'erro overflow',  wave:  'x.1.0....1x.'}
 +
  ],
 +
  {},
 +
  ['Subtrator',
 +
  {name: 'subtração (6 bits)',  wave:  'x.22229929x.', data: ['0','3','4','2','7','1','2','3']},
 +
  {name: 'erro underflow',  wave:  'x.0...1.01x.'}
 +
  ],
 +
  ],
 +
  ],
 +
  config: { hscale: 1.5 },
 +
  head:{
 +
  text:'Figura 1 - Somador e Subtrator de 3 bits  ',
 +
  },
 +
  foot:{
 +
  text:'Nota: Diagrama de tempo gerado com WaveDrom',
 +
  },
 +
  }
 +
</pre>
  
 
=Uso dentro dos comentários do TerosHDL=
 
=Uso dentro dos comentários do TerosHDL=
Linha 25: Linha 57:
 
O WaveDrom pode ser usado dentro do VScode em conjunto com o plugin teroHDL para documentar os sistemas digitais desenvolvidos.  Neste caso os códigos '''WaveJSON''' devem estar em comentários '''--!'''.
 
O WaveDrom pode ser usado dentro do VScode em conjunto com o plugin teroHDL para documentar os sistemas digitais desenvolvidos.  Neste caso os códigos '''WaveJSON''' devem estar em comentários '''--!'''.
  
<pre>
+
<syntaxhighlight lang=vhdl>
 
--! {signal: [
 
--! {signal: [
 
--!  {name: 'ENTRADAS'},
 
--!  {name: 'ENTRADAS'},
Linha 39: Linha 71:
 
--!  {name: 'erro underflow',    wave:  'x.0...1.01x.'},
 
--!  {name: 'erro underflow',    wave:  'x.0...1.01x.'},
 
--! ]}
 
--! ]}
</pre>
+
</syntaxhighlight>
 +
 
 +
==Plugin para wiki==
 +
Existe um plugin para a [https://www.dokuwiki.org/plugin:wavedrom DokuWiki], mas nada disponível para a mediawiki. Um rascunho está disponível em https://github.com/Martoni/mediawiki_wavedrom.
 +
 
 +
==Outras possibilidades de uso==
 +
Ver usos em '''HTML pages''', '''Standalone WaveDromEditor''' em https://github.com/wavedrom/wavedrom/blob/trunk/README.md.

Edição atual tal como às 18h44min de 2 de junho de 2022

WaveDrom é um aplicativo JavaScript, que renderiza os diagramas de tempo diretamente no navegador. O formato de descrição adotado é um JSON modificado WaveJSON, no qual a descrição de cada sinal digital é feito usando elemento signal O elemento "sinal" no qual se descreve em uma matriz de WaveLanes os sinais. Cada WaveLane possui um campo obrigatório: wave, e podem ser acrescentados os campos name e data. A documentação digital está disponível no Hitchhiker's Guide to the WaveDrom. Também existe um bom documento digital que ilustra todo o processo WaveDrom: Rendering Beautiful Waveforms from Plain Text Chapyzhenka, A. Probell, J.

Exemplo de uso do WaveDrom para a geração do diagrama de tempo de um somador e subtrator. Os valores com overflow e underflow estão sinalizados em vermelho e no bit de erro.

{signal: [
  {name: 'ENTRADAS'},
  {name: 'a (3 bits)',     wave: 'x.2.2.2.2.x.', data: ['7','4','0','2']},
  {name: 'b (3 bits)',     wave:  'x.22222222x.', data: ['7','4','0','2','1','7','0','7']},
  {},
  {name: 'SOMADOR'},
  {name: 'soma (6 bits)',   wave:  'x.99222229x.', data: ['6','3','4','6','1','7','2','1']},
  {name: 'erro overflow',   wave:  'x.1.0....1x.'},
  {},
  {name: 'SUBTRATOR'},
  {name: 'subtração (6 bits)',   wave:  'x.22229929x.', data: ['0','3','4','2','7','1','2','3']},
  {name: 'erro underflow',   wave:  'x.0...1.01x.'},
]}

Figura 1 - Diagrama de tempo de um somador de 4 bits
WaveDromSomador4bits.png
Fonte: https://wavedrom.com/editor.html.


Outros campos que podem ser utilizados são: config, head, foot, text, node, edge, period, phase

{signal: [
  ['Entradas',
  {name: 'a (3 bits)',     wave: 'x.2.2.2.2.x.', data: ['7','4','0','2']},
  {name: 'b (3 bits)',     wave:  'x.22222222x.', data: ['7','4','0','2','1','7','0','7']},
  ], 
  {}, 
  ['Saidas',   
  ['Somador',
  {name: 'soma (6 bits)',   wave:  'x.99222229x.', data: ['6','3','4','6','1','7','2','1'] },
   {name: 'erro overflow',   wave:  'x.1.0....1x.'}
  ],
  {},
  ['Subtrator',
  {name: 'subtração (6 bits)',   wave:  'x.22229929x.', data: ['0','3','4','2','7','1','2','3']},
  {name: 'erro underflow',   wave:  'x.0...1.01x.'}
  ],
  ],
  ],
  config: { hscale: 1.5 },
  head:{
   text:'Figura 1 - Somador e Subtrator de 3 bits  ',
   },
  foot:{
   text:'Nota: Diagrama de tempo gerado com WaveDrom',
   },
   }

Uso dentro dos comentários do TerosHDL

O WaveDrom pode ser usado dentro do VScode em conjunto com o plugin teroHDL para documentar os sistemas digitais desenvolvidos. Neste caso os códigos WaveJSON devem estar em comentários --!.

--! {signal: [
--!   {name: 'ENTRADAS'},
--!   {name: 'a (3 bits)',         wave:  'x.2.2.2.2.x.', data: ['7','4','0','2']},
--!   {name: 'b (3 bits)',         wave:  'x.22222222x.', data: ['7','4','0','2','1','7','0','7']},
--!   {},
--!   {name: 'SOMADOR'},
--!   {name: 'soma (6 bits)',      wave:  'x.99222229x.', data: ['6','3','4','6','1','7','2','1']},
--!   {name: 'erro overflow',      wave:  'x.1.0....1x.'},
--!   {},
--!   {name: 'SUBTRATOR'},
--!   {name: 'subtração (6 bits)', wave:  'x.22229929x.', data: ['0','3','4','2','7','1','2','3']},
--!   {name: 'erro underflow',     wave:  'x.0...1.01x.'},
--! ]}

Plugin para wiki

Existe um plugin para a DokuWiki, mas nada disponível para a mediawiki. Um rascunho está disponível em https://github.com/Martoni/mediawiki_wavedrom.

Outras possibilidades de uso

Ver usos em HTML pages, Standalone WaveDromEditor em https://github.com/wavedrom/wavedrom/blob/trunk/README.md.