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
 
(8 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.
  
Documentação disponível em https://wavedrom.com/
+
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.
  
;Editor: https://wavedrom.com/editor.html
 
;Tutorial: https://wavedrom.com/tutorial.html
 
;Um pdf: https://wavedrom.com/images/SNUG2016_WaveDrom.pdf
 
 
Pode ser usado dentro do VScode em conjunto com o teroHDL.  Os códigos devem estar em comentários --!.
 
 
Exemplo de uso para um somador com overflow.
 
 
<pre>
 
<pre>
 
{signal: [
 
{signal: [
   {name: 'a (4 bits)',    wave: 'x.2.2.2.2.x.', data: ['7','4','0','2']},
+
  {name: 'ENTRADAS'},
   {name: 'b (4 bits)',    wave:  'x.22222222x.', data: ['7','4','0','2','1','7','0','7']},
+
   {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: 'soma (8 bits)',  wave:  'x.22222222x.', data: ['6','3','4','6','1','7','2','1']},
+
  {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: '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.'},
 
]}
 
]}
 
</pre>
 
</pre>
  
O que resulta no seguinte diagrama de tempo:
 
 
{{fig|1|Diagrama de tempo de um somador de 4 bits| WaveDromSomador4bits.png| 600 px | https://wavedrom.com/editor.html}}
 
{{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
 +
 +
<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=
 +
 +
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 '''--!'''.
 +
 +
<syntaxhighlight lang=vhdl>
 +
--! {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.'},
 +
--! ]}
 +
</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.