WaveDrom的使用

初雪白了头

已于 2022-12-11 09:34:01 修改

阅读量1.5k

点赞数

分类专栏： # WaveDrom 文章标签： javascript 前端 fpga开发

于 2022-12-11 09:33:44 首次发布

本文链接：https://blog.csdn.net/qq_45776815/article/details/128271751

版权

WaveDrom 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

WaveDrom是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形，从而进行显示。WaveDrom可以嵌入到任何网页中。

WaveDrom的获取

WaveDrom 在线编辑器 https://wavedrom.com/editor.html
WaveDrom官网 https://wavedrom.com/
WaveJSON https://github.com/wavedrom/schema/blob/master/WaveJSON.md

也可以选择使用vscode插件

WaveDrom可以在线编辑也可以下载安装，可以在官网首页找到这两个入口。

在线编辑方式，版本较新，但需要联网。
下载安装方式，版本较官网旧一些，无需联网即可使用。

基本语法与语句

"signal" 元素为一组时序波图，每组时序波图必须包含两个域："name"和"wave" ，此外还有"data" 、"period" 、"phase"、"node" 等。

注：在wavedrom中，关键字引号可加可不加不影响

`signal`

主要根对象,值为数组，每个信号波形以value定义：

{ "signal" : [
    value1,
    value2,
    ...
]}

可以使用数组的形式实现信号分组：

{ "signal" : [
    [ "Group 1", value1 ],
    value2,
    ...
]}

还可以使用对象的形式实现单个信号描述：

{ "signal" : [
    [ "Group 1", { signal object 1 }, { signal object 2 } ],
    ...
    {}, <-- gap between signal lanes 作为上下信号见的间隔
    ...
    { signal object 3 },
    ...
]}

具体实例如下：

{signal: [
  //对象形式对单个信号描述
  {name: "clk", wave: 'p.....|...'},
  ["group1",
   		{name: 'req', wave: '0.1..0|1.0'},
   		{name: 'rst',	wave: '01.0|=.x'}],
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'ack', wave: '1.0..|1.'},
  //period相当于分频器，值可为小数
  {name: 'ack1', wave: '1.0..|1.',period:2},
  {name: 'ack2', wave: '1.0..|1.',phase:1},
  {name: 'ack3', wave: '1.0..|1.',node:"abc"},

],
 edge:["a-b t1","b~c t2"],
 
 config:{ hscale :1,skin:'default'}
 
  }

在这里插入图片描述

signal...name

字符串类型，值为信号名称（信号标签）。

signal...wave

字符串类型，值为信号波形。

类型包含：

p - when first in string creates positive edged clock wave
n - when first in string creates negative edged clock wave
P - same as p but with arrow
N - same as n but with arrow
0 - low level
1 - high level
= - value (default color 2)
2 - value with color 2
3 - value with color 3
4 - value with color 4
…
9 - value with color 9
x - undefined value
. - extends previous cycle
z - high-impedance state
u - pull-up (weak 1)
d - pull-down (weak 0)
| - extends previous cycle and draw gap on top of it

signal...data

数组类型，数组内使用字符串表示一段时间内的名称（一段时间上打标签）。

signal...period

number类型，取值为正数，相当于分频器。

signal...phase

number类型，取值为任意数，正值是信号左移（提前），负值使信号右移（延后）。

signal...node

字符串类型，节点特征标记，与data区别。

. - no marker，与wave的.区别
[A-Z] - invisible marker
other - visible marker

edge

与signal...node配合使用，值为字符串数组。

- - move arrow horizontally (x+)
| - move arrow vertically (y+)
~ - makes the curvy shape (x+, y+)
/ - adds diagonal line (x+, y+)
# - indicates the arrow label position
> - 表示箭头

config

hscale

number类型，值为正整数，控制放大，默认值为1，小数会被四舍五入。

skin

似乎是缩小一个时间单位的间隔（一个周期）？

head/foot

对象类型，分别在图上方和底部，包含

tick-添加与垂直标记对齐的时间线标签。

tock -在垂直标记之间添加时间线标签。

text-添加标题/标题文本。

every-控制tick或tock的显示间隔。

JavaScript函数生成波形图

(function (bits, ticks) {
  var i, t, gray, state, data = [], arr = [];
  for (i = 0; i < bits; i++) {
    arr.push({name: i + '', wave: ''});
    state = 1;
    for (t = 0; t < ticks; t++) {
      data.push(t + '');
      gray = (((t >> 1) ^ t) >> i) & 1;
      arr[i].wave += (gray === state) ? '.' : gray + '';
      state = gray;
    }
  }
  arr.unshift('gray');
  return {signal: [
    {name: 'bin', wave: '='.repeat(ticks), data: data}, arr
  ]};
})
(5, 16)