打印
[ARM入门]

你真的会画时序图吗?不,你不会!

[复制链接]
952|9
手机看帖
扫描二维码
随时随地手机跟帖
跳转到指定楼层
楼主

摘要:WaveDrom是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形,从而进行显示。

WaveDrom可以嵌入到任何网页中;WaveDrom编辑器可在浏览器中运行,也可以安装在系统上,渲染引擎可以嵌入到任何网页中。


使用特权

评论回复
评论
micoccd 2022-6-13 11:03 回复TA
感谢版主,这个非常好用啊。感觉以后不用在用excel画了,太难了。 

相关帖子

沙发
呐咯密密|  楼主 | 2022-6-13 10:19 | 只看该作者
一、WaveDrom功能绘制数字时序图、绘制寄存器图、绘制逻辑电路图。

绘制时序图
绘制寄存器图


绘制逻辑电路图


使用特权

评论回复
板凳
呐咯密密|  楼主 | 2022-6-13 10:21 | 只看该作者
二、WaveDrom的使用
在线编辑器 https://wavedrom.com/editor.html
官网 https://wavedrom.com/
WaveDrom可以在线编辑也可以下载安装,可以在官网首页找到这两个入口。在线编辑方式,版本较新,但需要联网。下载安装方式,版本较官网旧一些,无需联网即可使用。

在编辑器中输入WaveJSON 格式的数字时序图描述,即可实时渲染出相应的数字时序图。aveJSON 格式是十分简单的,主要需要**的是各个符号所对应的波形。



使用特权

评论回复
地板
呐咯密密|  楼主 | 2022-6-13 10:22 | 只看该作者
三、绘制时序图
下面的代码将创建名为“Alfa”的1位信号,该信号随时间改变其状态。
{ "signal" : [{ "name": "Alfa", "wave": "01.zx=ud.23.456789" }] }


加时钟:数字时钟是一种特殊类型的信号。它在每个时间段内变化两次,可以有正负极性。它还可以在工作边缘上有一个可选标记。时钟块可以与其他信号状态混合,以产生时钟选通效应。代码如下:
{ 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' },
]}
以及呈现的图表:

WaveLanes 可以统一在以数组形式表示的命名组中。['组名', {...}, {...}, ...]数组的第一个条目是组的名称,这些组可以嵌套。
{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'},
  ]
]}

使用特权

评论回复
5
呐咯密密|  楼主 | 2022-6-13 10:23 | 只看该作者
四、时序图教程网址:https://wavedrom.com/tutorial.html

里面包含多个示例,可以很好地对WaveDrom进行学习。



使用特权

评论回复
6
呐咯密密|  楼主 | 2022-6-13 10:23 | 只看该作者
五、逻辑电路图教程
网址:https://wavedrom.com/tutorial2.html


这里面讲解了逻辑电路图的绘制示例。

使用特权

评论回复
7
呐咯密密|  楼主 | 2022-6-13 10:25 | 只看该作者
六、Github主页
WaveDrom Github https://github.com/wavedrom/wavedrom


使用特权

评论回复
8
micoccd| | 2022-6-13 11:04 | 只看该作者
确实好用,以前都是用excel画的

使用特权

评论回复
9
datouyuan| | 2022-6-14 14:43 | 只看该作者
标记下。
谢谢楼主分享!!!

使用特权

评论回复
发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则

认证:苏州澜宭自动化科技嵌入式工程师
简介:本人从事磁编码器研发工作,负责开发2500线增量式磁编码器以及17位、23位绝对值式磁编码器,拥有多年嵌入式开发经验,精通STM32、GD32、N32等多种品牌单片机,熟练使用单片机各种外设。

355

主题

2806

帖子

41

粉丝