WaveDrom指南

WaveDrom是一个JavaScript应用程序。WaveJSON是一种描述数字时序图的格式。WaveDrom直接在浏览器中呈现图表。元素“信号”是一组微波。每个wavane都有两个必填段:“name”和“wave”。

步骤一、信号

创建一个名为“Alfa”的1位信号，随着时间的推移改变其状态。

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

“wave”字符串中的每个字符代表一个单独的时间段。符号“。”将先前的状态延长一个周期。它看起来是这样的:

步骤二、增加时钟

数字时钟是一种特殊类型的信号。它在每个时间段变化两次，可以有积极的或消极的极性。它也可以在工作边缘有一个可选的标记。时钟的块可以与其他信号状态混合，以创建时钟门控效果。

代码如下:

{ 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' },]}

图：

步骤三、合在一起

典型的时序图会有时钟和信号(线路)。多位信号将尝试从“数据”数组中抓取标签。

{ signal: [{ name: "clk",  wave: "P......" },{ name: "bus",  wave: "x.==.=x", data: ["head", "body", "tail", "data"] },{ name: "wire", wave: "0.1..0." }]}

步骤四、逆电流器和缝隙

{ 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." }]}

步骤五、组合

波形可以以阵列的形式以命名的组来表示。(“组名称”,{…},{…},……数组的第一个条目是组的名称。组可以嵌套。

{ 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'},]]}

步骤六、时期和阶段

“周期”和“相位”参数可以用来调整每个wavane。

DDR读事务

{ 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" }]}

步骤七、配置{}属性

配置:{…}属性控制呈现的不同方面。

hscale

属性控制图表的水平比例。用户可以输入任何大于0的整数。

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

skin

配置:{皮肤:“……'}属性可以用来选择WaveDrom皮肤。该属性只在页面上的第一个计时图中工作。WaveDrom编辑器包括两个标准皮肤:“默认”和“窄”

head/foot

head:{...} 和 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},}

head/ foot 

文本具有SVG文本的所有属性。标准SVG tspan属性可以用来修改文本的默认属性。用于表示SVG文本内容的JsonML标记语言。可以使用和混合几种预定义的样式:

H1 h2 h3 h4 h5 h6——预定义的字体大小。

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

其他SVG tspan属性也可以自由式使用，如下所示。

{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']]},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}}

步骤八、Arrows

Splines

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

{ 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']}

Sharp lines

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

{ 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']}

步骤九、 Some code

(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)

来源WaveDrom Editor工具Guide

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！