WaveDrom 使用指南

WaveDrom 使用指南

简介

    WaveDrom是一款 JavaScript 应用程序。WaveJSON 结构框架使用 WaveDrom 渲染引擎来描述时序图。结构框架的格式基于JSON 语法并带有一些保留关键字和结构限制。WaveDrom可以在线编辑也可以下载安装https://wavedrom.com/ 。
     "signal" 元素为一组时序波图，每组时序波图必须包含两个域："name"和"wave" ，此外还有"data" 、"period" 、"phase"、"node" 等。

基本语法和语句

    "signal" 是主要根对象(the main root object)，每个信号波图以信号值value定义。

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

    例1：创建一个随时间变化名为“Alfa”的信号

{ signal: [{ name: "Alfa", wave: "01.zx=ud.23.456789" }] }

Alfa

    信号以组的形式（ array type）存在时，被定义为信号组。信号组的标签类型为字符型，即信号组名，位于信号组第一个位置。信号组可以嵌套。

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

    信号对象定义为：

{ "signal" : [
    [ "Group 1", { signal object 1 }, { signal object 2 } ],
    ...
    {}, <-- 信号波间的间隔
    ...
    { signal object 3 },
    ...
]}

    例2：

{ signal: [
  {    name: 'clk',   wave: 'p..Pp..P'},
  ['Master',
    ['ctrl',
      {name: 'write', wave: '01.0....'},
      {name: 'read',  wave: '0...1..0'}
    ],
    {  name: 'addr',  wave: 'x3.x4..x', data: 'A1 A2'},
    {  name: 'wdata', wave: 'x3.x....', data: 'D1'   },
  ],
  {},
  ['Slave',
    ['ctrl',
      {name: 'ack',   wave: 'x01x0.1x'},
    ],
    {  name: 'rdata', wave: 'x.....4x', data: 'Q2'},
  ]
]}

信号组

    信号名定义为：

{ "signal" : [
    { "name" : "My Signal" }
]}

    信号波定义以及类型：

{ "signal" : [
    { "wave" : "x.01.=.." }
]}

• p - 在字符串中排在第一个位置产生一个上升沿时钟波
• n - 在字符串中排在第一个位置产生一个下降沿时钟波
• P - 与 p 类似并带有上升沿箭头符号
• N - 与 as n 类似并带有下降沿箭头符号
• 0 - 低电平
• 1 - 高电平
• = - 总线数据信号
• 2 - 总线数据信号，与=颜色相同为无色
• 3 - 总线数据信号，有颜色
• ......
• 9 - 总线数据信号，有颜色
• x - 未定态
• . - 延续上一个周期
• z - 高阻态
• u - 上拉 (weak 1)
• d - 下拉 (weak 0)
• | - 延续上一个周期，并在其上绘制间隙

    信号数据是有效的数据信号进行标注。可以使用此字段标记总线数据信号,定义为：

{ "signal" : [
    { "data" : ["A", "B", "C"] }
]}

    例3：

{ signal: [
 {  name: 'addr',  wave: 'x3.x4..x', data: 'A1 A2'},
 {  name: 'wdata', wave: 'x3.x....', data: 'D1'   },
]}

数据信号标注

    信号变化节点标记定义为：

{ "signal" : [
    { "name" : "My Signal", "node" : "...a...b..C..." }
]}

• . - 无标记
• [A-Z] - 隐藏表记符号
• other - 可见标记符号

    例4：

{signal: [
  {name:'kl', wave: '01.0u1d',node:'.a.bc.d' },
 ]
}

    信号周期和相位，周期值为自然数；相位值为正数时，信号向前移，相位值为负数时，信号向后移（延时）

    例5：

{ signal: [
  { name: "signal", wave: '0101..0.10' },
  { name: "signal-0.5", wave: '0101..0.10', phase:-0.5 },
  { name: "signal+0.5", wave: '0101..0.10', phase:0.5 },
  {},
  { name: "clk", wave: 'N.........' },
  { name: "clk/2", wave: 'N....' , period: 2 },
]}

信号周期和相位

    波图输出配置（The config{} property） config:{...} 控制不同格式的渲染方式。

1.缩放

config:{hscale:#} 控制图标的输出缩放，缩放值大于0

    例6：

{ signal: [
  { name: "clk",     wave: "p...." },
  { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
  { name: "Request", wave: "01..0" }
  ],
  config: { hscale: 1 }
}

hscale

2.表头和表尾

head:{...}和 foot:{...} 定义了时序图上方和下方的内容。

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

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

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

    例7：

{signal: [
  {name:'clk',         wave: 'p....' },
  {name:'Data',        wave: 'x345x', data: 'a b c' },
  {name:'Request',     wave: '01..0' }
],
 head:{
   text:'WaveDrom example',
   tick:0,
 },
 foot:{
   text:'Figure 100',
   tock:9
 },
}

head、foot

    箭头标记
1.曲线标记

~ -~
<~> <-~>
~> -~> ~->

    例8：

{ signal: [
  { name: 'A', wave: '01........0....',  node: '.a........j' },
  { name: 'B', wave: '0.1.......0.1..',  node: '..b.......i' },
  { name: 'C', wave: '0..1....0...1..',  node: '...c....h..' },
  { name: 'D', wave: '0...1..0.....1.',  node: '....d..g...' },
  { name: 'E', wave: '0....10.......1',  node: '.....ef....' }
  ],
  edge: [
    'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',
    'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'
  ]
}

2.直线标记

- -| -|-
<-> <-|> <-|->
-> -|> -|-> |->

    例9：

{ signal: [
  { name: 'A', wave: '01..0..',  node: '.a..e..' },
  { name: 'B', wave: '0.1..0.',  node: '..b..d.', phase:0.5 },
  { name: 'C', wave: '0..1..0',  node: '...c..f' },
  {                              node: '...g..h' }
  ],
  edge: [
    'b-|a t1', 'a-|c t2', 'b-|-c t3', 'c-|->e t4', 'e-|>f more text',
    'e|->d t6', 'c-g', 'f-h', 'g<->h 3 ms'
  ]
}

    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)