wavedrom使用教程
转载:https://blog.csdn.net/OnlyLove_/article/details/111770771
https://wavedrom.com/tutorial.html
1、第一步:从一个快速示例开始
下面的代码将创建名为“alfa”的1位信号,该信号会随时间改变其状态。
下面展示一些 内联代码片
。
{signal:[{name:"alfa",wave:"01.zx=ud.23.456789"}
]}
- 1
- 2
- 3
2、第二步:数字时钟
数字时钟是一种特殊类型的信号。它每段时间变化两次,可以有正极性或负极性。它也可以在工作边缘有一个可选的标记。时钟块可以与其他信号状态混合以产生时钟门控效果。
{signal:[{name:"plck",wave:"p"}, // p -> 0-1(无箭头){name:"Plck",wave:"P"}, // P -> 0-1(有箭头){name:"nlck",wave:"n"}, // n -> 1-0(无箭头){name:"Nlck",wave:"N"} // N -> 1-0(有箭头)
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
{signal:[{name:"hlck",wave:"h"}, // h -> 1{},{name:"Hlck",wave:"H"}, // H -> 1{},{name:"llck",wave:"l"}, // l -> 0{},{name:"Llck",wave:"L"} // L -> 0
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
{signal:[{name:"lck0",wave:"phnlPHNL"},{},{name:"lck1",wave:"hxlhLHl."},{},{name:"lck2",wave:"hpHplnLn"},{},{name:"lck3",wave:"nhNhplPl"},{},{name:"lck4",wave:"xlh.L.Hx"} // x -> 阴影
]
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3、第三步:合在一起
典型的时序图将有时钟和信号 (wires)。多位信号将尝试从 “数据” 数组中获取标签。
{ signal: [{ name: "clk", wave: "P......" },{ name: "bus", wave: "x.==.=x", data: ["head", "body", "tail", "data"] },{ name: "wire", wave: "0.1..0." }
]}
- 1
- 2
- 3
- 4
- 5
4、第四步:填充符和间隔符
(1) | 竖线表示间隔符,显示为两条曲线。
(2) = 等号为填充符,在下图中填充在data的位置。
{ 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." }
]}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
5、第五步:分组
波道可以联合在以数组形式表示的命名组中。[‘组名’,{.},{.},.]数组的第一个条目是组的名称。可以嵌套组。
{ 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’},
]
]}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
6、第六步:周期与相位
“周期”和“相位”参数可用于调整每个WaveLane。
period:周期
phase:相位
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" }
]}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
7、第七步:config {} 属性
Config: {.} 属性控制渲染的不同方面。
1、Hscale
配置: {hscale: #} 属性控制图表的水平比例。用户可以输入任何大于 0 的整数。
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: { hscale: 1 }
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
hscale = 1(默认)
hscale = 2
hscale = 3
2、skin(布局)
config:{skin:’…’}属性可用于选择WaveDrom皮肤。该属性仅在页面上的第一个时序图内起作用。 WaveDrom编辑器包括两个标准外观:“默认”和“窄”( ‘default’ and ‘narrow’)。
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: {skin:'narrow'}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: {skin:'default'}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
3、head/foot(头/脚)
head:{…}和foot:{…}属性定义了时序图上方和下方的区域内容。
4、tick
tick 添加与垂直标记对齐的时间线标签。
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: {skin:'default'},head:{tick:3}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
5、tock
tock在垂直标记之间添加时间线标签。
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: {skin:'default'},head:{tick:3,tock:0}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: {skin:'default'},head:{tick:3,tock:0},foot:{tick:2,tock:5}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
6、text
text 添加标题/标题文本。
{ signal: [{ name: "clk", wave: "p...." },{ name: "Data", wave: "x345x", data: ["head", "body", "tail"] },{ name: "Request", wave: "01..0" }],config: {skin:'default'},head:{text:'WaveDrom example',tick:3,tock:0},foot:{text:'Figure 100',tick:2,tock:5}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Head/foot 文本具有 SVG 文本的所有属性。标准 SVG tspan 属性可用于修改文本的默认属性。
用于表示 SVG 文本内容的 JsonML 标记语言。可以使用几种预定义的样式并混合使用:
h1 h2 h3 h4 h5 h6 – 预定义字体大小。
muted warning error info success – 字体颜色样式。
其他 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
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
8、第八步:箭头
1、Splines
~ -~
<~> <-~>~> -~> ~->
- 1
- 2
- 3
{ 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']
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2、Sharp lines
- -| -|-
<-> <-|> <-|->-> -|> -|-> |->
- 1
- 2
- 3
{ 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']
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
9、第九步:嵌入代码块
(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)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
wavedrom使用教程相关推荐
- Verilog:【7】超详细WaveDrom教程,时序图绘制利器,看这一篇就够了。
碎碎念: 没想到上一篇发出去,前几个小时竟然基本没人看,是我写得太晦涩了吗,这篇介绍个简单但是相当好用的软件WaveDrom,可以非常方便的绘制时序图,简直是数字人的福音啦! 本文将从安装开始,详细介 ...
- (二)WaveDrom Editor使用教程
专栏:WaveDrom 上一篇:(一)WaveDrom 数字时序图渲染引擎 下一篇:(三)WaveDrom 数字时序图绘制 WaveDrom Editor使用教程 WaveDrom Editor ...
- 对如何使用WaveDrom画波形图的研究(案例分解分析)
目录 背景介绍 工具介绍 案例分析: 案例一 偶分频电路波形图(以10分频电路为例) 奇分频(5分频为例) 案例二 结束语 背景介绍 今天翻网页学习FPGA的相关知识时,无意翻到了一个画波形图的工具, ...
- (一)WaveDrom 数字时序图渲染引擎
专栏:WaveDrom 下一篇:(二)WaveDrom Editor使用教程 WaveDrom 数字时序图渲染引擎 1. WaveDrom介绍 WaveDrom官网 https://wavedrom. ...
- WaveDrom画时序波形
WaveDrom画时序波形 WaveDrom introduction 例子 WaveDrom introduction WaveDrom draws your Timing Diagram or W ...
- 使用Docker搭建svn服务器教程
使用Docker搭建svn服务器教程 svn简介 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很 ...
- mysql修改校对集_MySQL 教程之校对集问题
本篇文章主要给大家介绍mysql中的校对集问题,希望对需要的朋友有所帮助! 推荐参考教程:<mysql教程> 校对集问题 校对集,其实就是数据的比较方式. 校对集,共有三种,分别为:_bi ...
- mysql备份psb文件怎么打开_Navicat for MySQL 数据备份教程
原标题:Navicat for MySQL 数据备份教程 一个安全和可靠的服务器与定期运行备份有密切的关系,因为错误有可能随时发生,由攻击.硬件故障.人为错误.电力中断等都会照成数据丢失.备份功能为防 ...
- php rabbmq教程_RabbitMQ+PHP 教程一(Hello World)
介绍 RabbitMQ是一个消息代理器:它接受和转发消息.你可以把它当作一个邮局:当你把邮件放在信箱里时,你可以肯定邮差先生最终会把邮件送到你的收件人那里.在这个比喻中,RabbitMQ就是这里的邮箱 ...
最新文章
- 从JavaScript数组中获取随机项[重复]
- 打开AD组策略编辑器提示“strings区段项目太长被截断”的解决
- Linux系统的进程管理
- HDU1257 最少拦截系统(下降自序列个数)
- Mysql数据库的使用总结之ERROR 1146 (42S02)
- 干货!Java字节码增强探秘
- highlight js 为博客增加代码着色
- 团队作业8——测试与发布(Beta阶段)
- stylus导入时 报错These relative modules were not found
- (Z) Linux与BSD之间的10个不同之处
- php导出数据库的指定表数据,MYSQL教程mysql数据库导出指定表数据的方法
- ricky java photos_【Melee】Ricky blog updates and new photos
- 谷歌Chrome:将逐步阻止浏览器不安全下载内容
- 【华为云技术分享】云图说 | 华为云AnyStack on BMS解决方案:助力线下虚拟化业务迁移上云
- 【IDE】我的花里胡哨VS
- 【渗透测试案例】——Web前端的SQL注入是怎么回事?
- 汉明码---存储器校验(简单易懂详解)
- Windows版本Apache+php的Xhprof应用__[2]
- Java面试题,208道
- 搭建redis的步骤
热门文章
- Linux系统下的目录树结构
- 洛谷 P1477 [NOI2008]假面舞会
- layui点击弹出层中按钮,关闭弹出层
- Racket编程指南——20 并行
- 还是关于pdflatex生成的文件复制粘贴出现乱码问题
- oracle锁矩阵,关于Oracle矩阵相乘,等解
- charles的简介、安装、破解及使用教程
- Android Studio 报错提示:Skipped due to earlier error
- java-EasyExcel导出excel设置单元格为文本格式(含代码)
- 【历史上的今天】9 月 13 日:“海盗湾”创始人出生;第一台装载硬盘的超级计算机;《超级马里奥兄弟》发布