WaveDrom学习笔记

一、前言：

WaveDrom是基于WaveDrom引擎和WaveJSON格式的数字时序图的实时编辑器，拥有独立的安装包以及vscode插件。

不经意间发现esp32的api手册也是使用的wavedrom

esp32的API手册

我仿制的部分波形

在经过一段时间的熟悉后，发现确实比绘图软件手绘时序图效率高。
故在此做一个记录。

二、基本格式

整体由花括号包围，主体是signal字段，在其内部写具体的波形，每行表示一个波形，无波形的空行可直接由“{}”来表示。
波形的基本参数是一个"name"以及一个"wave"字段，用来表示该行波形的名称以及样式。
波形的样式通过字符来描述，如“0、1、H、h、L、l、P、p、N、n、. 、z 、x、d、U、u、D、 d”等，在后面详细介绍。

这是尝试仿制esp32 api说明的前两行波形

{
    signal:[
        {name:"BCLK",wave:"p..dp.dp.dp.dp.dp.dp.",period:0,phase:0},
        {name:"WS",wave:"x0.d0.d1.u",period:0,phase:-0.3}
    ]
}

效果：

三、详细波形标识符说明

通用符号：

"."：重复前一个信号。

1.时钟脉冲：

“p”:起始为高电平的时钟脉冲。

“n”:起始为低电平的时钟脉冲。

“P”:起始为高电平的带箭头时钟脉冲。

“N”:起始为低电平的带箭头时钟脉冲。

建议配合"h" “p” “H” "P"一起使用,而不是“0”“1”，才不会有脉冲起始的小尾巴

2.高低电平

“0”:0电平，有下降下降时间。
“1”:1电平，有上升下降时间。

“h”:high，阶跃信号，无上升下降时间
“l”:low，阶跃信号，无上升下降时间

“H”:High，阶跃信号，带箭头，无上升下降时间
“L”:Low，阶跃信号，带箭头，无上升下降时间

3.缓慢升降信号

“d”:down，缓慢下降，带省略号。

“u”:up，缓慢上升，带省略号。

4.数据信号

“=”：普通无色数据信号

“2”~“9”：带颜色数据信号

数据表示方式：
在信号的"{ }"内，添加上data段： data:"… … … "
例：{name:"DATA",wave:"23456789",data:"2 3 4 5 6 7 8 9"}
表示方法1：用大括号表示字段范围，双引号表示单个数据名称，逗号做分隔。
data:["one","two","three","four"]
表示方法2：用单/双引号表示数据名称，空格作为分隔。
data:"one two three four"
data:'one two three four'
这几种表示方法的效果完全一样。

5.间隔省略信号

“|”:双波浪线来表示信号的断层

也可用"u"/"p"的省略号特性来表示

6.信号的分组

使用方括号将需要的信号括起来，就完成了对需要信号的分组

	signal:[
	        [
	            'Master',
	            {name:"TEST",wave:"p.dp.dp.",period:0,phase:0},
	            {name:"BCLK",wave:"p..dp.dp.dp.dp.dp.dp.",period:0,phase:0}
	        ],
	        [
	            "Slave",{name:"WS",wave:"x0.d0.d1.u",period:0,phase:-0.3}
	        ]
	    ]

7.信号的周期与相位

在信号内添加描述即可规定信号的周期与相位。
period:单位为格，必须大于0.5,按比例扩展X轴。
phase:单位为格，左加右减。

{
    signal:[
        {name:"CLK1",wave:"p........",period:1,phase:0},
        {name:"CLK2",wave:"p........",period:2,phase:0},
        {name:"CLK3",wave:"p........",period:2,phase:-0.5}
    ]
}

8.其他配置

放在signal同一层级下
（1）属性配置
用于整体缩放时间轴比例

（2）头注/脚注

• head:{…} 和 foot:{…} 属性定义时序图上方和下方区域的内容。
• tick- 添加与垂直标记对齐的时间线标签。
• tock- 在垂直标记之间添加时间线标签。
• text-添加标题/标题文本。
• every- 每 N 个周期显示一个tick与tock

其中，头注/脚注的text文本具有 SVG 文本的所有属性。 标准 SVG tspan 属性可用于修改文本的默认属性。 用于表示 SVG 文本内容的 JsonML 标记语言。 可以使用和混合使用几种预定义样式：

h1 h2 h3 h4 h5 h6 – 预定义的字体大小。

静音警告错误信息成功 - 字体颜色样式。

其他 SVG tspan 属性可以在 freestyle 中使用，如下所示。

{
		    signal: [
		                  {name:'clk', wave: 'p.....PPPPp....' },
		                  {name:'dat', wave: 'x....2345x.....', data: 'a b c d' },
		                  {name:'req', wave: '0....1...0.....' }
		            ],
		    head: {
              		text:[
                      		'tspan',
                      		['tspan', {class:'error h1'}, 'error '],
                            ['tspan', {class:'warning h2'}, 'warning '],
                          	['tspan', {class:'info h3'}, 'info '],
		                    ['tspan', {class:'success h4'}, 'success '],
		                    ['tspan', {class:'muted h5'}, 'muted '],
		                    ['tspan', {class:'h6'}, 'h6 '],
		                  	'default ',
                          	['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic']
		                  ],	
              		tick:1
		          },
		     foot: {
               		text:[
               				'tspan',
               				'E=mc',
		                    ['tspan', {dy:'-5'}, '2'],
		                    ['tspan', {dy: '5'}, '. '],
		                    ['tspan', {'font-size':'25'}, 'B '],
		                    ['tspan', {'text-decoration':'overline'},'over '],
		                    ['tspan', {'text-decoration':'underline'},'under '],
		                    ['tspan', {'baseline-shift':'sub'}, 'sub '],
		                    ['tspan', {'baseline-shift':'super'}, 'super ']
		                  ],
                    tock:-5
		           }
		}

9.样条指示线

在信号内用node用字母配置标记，大写的字母标记将不可见；
node: '...M..N'
在信号外用edge配置指示线路径以及名称；
edge: ['a-~b t1']

(1)曲线

~:双弯S形曲线
-~ :凹形单弯C形曲线
~- :凸形单弯C形曲线
<~> :两边带箭头S形曲线
<-~>:两边带箭头凹形C形曲线
<~->:两边带箭头凸形C形曲线
~> :单边带箭头S形曲线
-~> :单边带箭头凹形C形曲线
~-> :单边带箭头凸形C形曲线

	{ 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）直线

-:直拉斜线
-| :先横后竖直角走线
-|- :横竖横直角走线
<-> :两边带箭头直拉斜线
<-|> :两边带箭头先横后竖直角走线
<-|->:两边带箭头横竖横直角走线
-> :单边箭头直拉斜线
-|> :单边箭头先横后竖直角走线
-|-> :单边箭头横竖横直角走线
|-> :单边箭头先竖后横直角走线
+:位于两标记之间，类似尺寸标注线

	{ 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' },
	  {                              node: '...I..J',  phase:0.5 },
	  { name: 'D', wave: '0..1..0',  phase:0.5 }
	  ],
	  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', 'I+J 5 ms'
	  ]
	}

四、结语

本文只相当于在官方教程的基础上进行了自己的理解与实践，官方教程见WaveDrom 漫游指南