波形图绘制软件WaveDrom

本文

主要介绍一款波形图绘制软件WaveDrom,它可以通过代码形式来实现波形图的绘制。

版本 说明
0.1 初版发布

背景

  • WaveDrom 2.3.2

什么是WaveDrom

WaveDromEditor是基于WaveDrom引擎和WaveJSON格式的数字时序图的在线编辑器,可以在网页上实时编辑来生成波形。当然也可以下载单独的WaveDromEditor应用,在Windows、Linux等系统离线编辑。

  • WaveDrom官网,官网上有四个选项: Tutorial(教程), Editor(在线编辑器), Source(源码,一般也不会去看),Twitter(推特,社交平台,一般也不会去看),下方还有一个Download editor(下载编辑器),可以选择Linux和windows,下载后可离线编辑。

基本使用

{signal: [
  {name: 'clk',  wave: 'p.....|...'},
  {name: 'clk1', wave: 'p..P..|...', period: 2   },
  {name: 'clk4', wave: 'n..N..|...', phase: -1 },
  {name: 'dat',  wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'req',  wave: '0.1..0|1.0'},
  {},
  {name: 'ack',  wave: '1.....|01.'}
]}
  • 这是生成时序波形的代码的基本结构,首先所有的语法都要在一个大括号{}里。signal关键词表示需要生成一系列波形,在后跟的中括号里编辑多组信号,每个信号的描述都应该写在大括号{}里,并用逗号隔开。
  • name关键词指明波形的名字,wave关键词是波形的核心,决定了波形的基本样式。
  • 小写p表示以上升沿开始生成一个周期的时钟,大写P在小写p的基础上增加了箭头,更加直观的反映了时钟沿(小写n和大写N代表的含义类似)。
  • 小数点.表示重复前一个字符,例如p…相当于pppp。
  • 另外还有01xz=23456789等字符,分别代表不同的波形,其中01xz代表四个信号状态,=代表bus,23456789代表bus且不同颜色显示(2为白色)。
  • 如果需要,可以增加选项period和phase,他们分别代表了周期和相位偏移。period表示周期的倍数,默认值为1,phase表示相位的偏移,默认值为0,如果是正数则向左偏移,负数则向右偏移。
  • 一个空的大括号{}里不加任何的关键词,表示“空一行”,你可以使用空的大括号将波形隔开,便于分组。
  • 选项data说明其数据内容,data的内容和wave里的=按照书写顺序一一对应。需要注意的一点是,=.中的小数点虽然重复了上一个字符,但和==表示的含义不同,=.表示两个周期的数据相同,而==表示两个不同的数据。
  • |竖线表示间隔符,显示为两条曲线。

配置选项

{   signal: [
        { name:"clk",     wave: "p...." },
        { name:"Data",    wave: "x345x", data: ["a", "b", "c"] },
        { name:"Request", wave: "01..0" }
        ],
    config: { hscale: 2 },
    head:   { text: "WaveDrom example",   tick: 0 },
    foot:   { text: "Figure 100",   tock: 9 }
}
  • 关键词config里可以指定hscale的值为以0.5为倍数且大于0的数值,用来改变一个周期的宽度。当hscale为2时,波形看起来比原来更宽敞了。
  • 关键词head可以在波形上方添加标题,也可以在波形上方添加数字标签。选项text的值为标题内容,选项tick的值value表示从value开始在周期节点添加数字标签。
  • 关键词foot可以在波形下方添加标题,也可以在波形下方添加数字标签。选项tock的值value表示从value开始在每个周期中间位置添加数字标签。

信号分组

{ 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'},
  ]
]}
  • 可以使用[‘setname’ … ],来对信号进行分组,且可以嵌套。

箭头与连线

{ 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.1010...1......', node: '..e.f...' },
{ node: '..x.z' }
],

edge: [
'a~b t1', 'b-~c t2', 'c-~>d t3', 'd~>e',
'e-x', 'f-z', 'x<->z 3 ms',
]}
  • node关键词:声明节点,位置与波形描述对应
  • ~:S线连接;-~上弧线连接;~-下弧线连接。(可以为连线命名)
  • :箭头指向右节点;<>:双向箭头。

  • -:直线,箭头含义相同。可以只定义node而不描述波形,以“‘e-x’, ‘f-z’, ‘x<->z 3 ms’,”形式可以描述一段波形区间。

文章原创,可能存在部分错误,欢迎指正,联系邮箱 cao_arvin@163.com。