WaveDrom的使用
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 aspbut with arrow -
N- same asnbut 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 markerother- 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)
