10.时序图绘制软件WaveDorm的使用

时序图绘制软件WaveDorm的使用

参考路径：

Hitchhiker 的 WaveDrom 指南

github链接

 

信号的定义

首先，从官方的参考开始分析。
       官方的第一个例子如下。代码是这样的。

{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }

获得的结果呢，是这样的。

 

我们可以据此呢，得到一些答案。

绘制成如下的表格。一个符号代表的是一个周期。

时钟的定义

还是官方的例子。

代码是这样的。

wd({ signal: [

  { name: 'pclk', wave: 'p.......' },

  { name: 'Pclk', wave: 'P.......' },

  { name: 'nclk', wave: 'n.......' },

  { name: 'Nclk', wave: 'N.......' },

  {},

  { name: 'clk0', wave: 'phnlPHNL' },

  { name: 'clk1', wave: 'xhlhLHl.' },

  { name: 'clk2', wave: 'hpHplnLn' },

  { name: 'clk3', wave: 'nhNhplPl' },

  { name: 'clk4', wave: 'xlh.L.Hx' },

]})

具体的波形却是这样的。

也很能说明问题，具体可以总结如下。

注意，l、L、h、H半个周期占用了一个时钟周期的时间。

数据标签

将上面两者，结合起来，可以得到不错的效果，这里增加一个功能，就是给相应的数据增加标签，采用“data”关键字，一个“data”中的字符与一个数据符号相对应。包括等号与大于1的数字。

代码是这样的。

{ signal: [

  { name: "clk",  wave: "P......." },

  { name: "bus",  wave: "x.==.==x", data: ["head", "<o>body</o>", "tail", "data"] },

  { name: "wire", wave: "0.1..0.." }

]}

得到的结果是这样的。

还可以增加低电平的表示，采用的是<o>与</o>搭配的方式实现的。

 

间隔与间隙

 

使用“|”起到增加间隔，或者说间隙的作用。

代码如下。

{ signal: [

  { name: "clk",         wave: "p.....|..." },

  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },

  { name: "Request",     wave: "0.1..0|1.0" },

  {},

  { name: "Acknowledge", wave: "1.....|01." }

]}

 

结果如下。

 

周期和相位

 

周期使用的是“period”关键字，相位使用的是“phase”关键字。

代码如下。

{ signal: [

  { name: "CK",   wave: "P.......",                                              period: 2  },

  { name: "CMD",  wave: "x.3x=x4x=x=x=x=x", data: "RAS NOP CAS NOP NOP NOP NOP", phase: 0.5 },

  { name: "ADDR", wave: "x.=x..=x........", data: "ROW COL",                     phase: 0.5 },

  { name: "DQS",  wave: "z.......0.1010z." },

  { name: "DQ",   wave: "z.........5555z.", data: "D0 D1 D2 D3" }

]}

结果如下。

标题和末尾

head/foot

head: {...} and foot: {...} 属性定义时序图之上/之下的内容.

tick

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

tock

• 添加在垂直标记之间的时间轴标签。

text

• 添加标题文字。

对应的代码如下。

{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

 },

}

      还有一些其他的可以参考官方的guide document。