Wavedrom-时序图神器

最新推荐文章于 2024-06-03 17:00:19 发布
最新推荐文章于 2024-06-03 17:00:19 发布
阅读量1.2k 收藏 12
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44828721/article/details/132910042
版权

文章目录

简介

WaveDrom是基于WaveDrom引擎和WaveJSON格式的数字时序图的实时编辑器，拥有独立的安装包以及vscode插件。WaveDrom是一款Javascript应用程序，它可以用来描述数字时序图，通过自己编写描述的语言实时生成时序图。

1 软件安装

官网地址：WaveDrom - Digital timing diagram everywhere
在线地址：Wavedrom.com

2 绘图示例

2.1、创建一个1位信号

创建一个名为“alfa”的1位信号，该信号会随时间改变其状态

{signal:[
  {name:"alfa",wave:"01.zx=ud.23.456789"}
]}

在这里插入图片描述

2.2、创建数字时钟

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

2.2.1
{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（有箭头）
]  
}

在这里插入图片描述

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

在这里插入图片描述

2.2.3
{signal:[
  {name:"lck0",wave:"phnlPHNL"},
  {name:"lck1",wave:"hxlhLHl."},
  {name:"lck2",wave:"hpHplnLn"},
  {name:"lck3",wave:"nhNhplPl"},
  {name:"lck4",wave:"xlh.L.Hx"}		// x -> 阴影
]  
}

在这里插入图片描述

2.3、时钟和信号混合

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

2.6、周期与相位

“周期”和“相位”参数可用于调整每个WaveLane。

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

在这里插入图片描述

2.7、config{}属性

Config: {.} 属性控制渲染的不同方面。

2.7.1、水平比例（Hscale）

配置: {hscale: #} 属性控制图表的水平比例。用户可以输入任何大于 0 的整数。

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.7.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" }
  ],
 head:{
   text:'Narrow',
 },
 config: {skin:'narrow'}
}

在这里插入图片描述
在这里插入图片描述

2.7.3、头标题/脚标题（head/foot）

head：{…}和foot：{…}属性定义了时序图上方和下方的区域内容。

{ signal: [
  { name: "clk",     wave: "p...." },
  ],
 head:{
   text:'clk',
 }
 }

在这里插入图片描述
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
}
}

在这里插入图片描述

2.7.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}
}

在这里插入图片描述

2.7.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}
}

在这里插入图片描述

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

在这里插入图片描述

2.8、箭头

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

在这里插入图片描述

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

在这里插入图片描述

2.9、嵌入代码块（Some code）

WaveDrom提供了使用代码进行绘图的方式。比如通过使用关键字“function”，构建函数，并在结尾调用，从而进行图像的绘制。

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

在这里插入图片描述

3 图像保存与导出

WaveDrom提供了图像数据的保存以及导出方式，无论是离线版还是在线版，只需要点击右下角的“≡”按钮，即可找到。
分别介绍一下这几个按钮的功能：

按钮功能
Load…读取存储的图形数据文件
Save As…将当前的图形数据文件存储为json
Export SVG…导出矢量图
Export PNG…导出PNG图
Rotate Layout…旋转代码区与绘图区
Load…读取存储的图形数据文件
Proportions修改代码区与绘图区比例
Expand URL拓展网址
WaveDrom Guide打开官方使用指导
on GitHub打开GitHub项目官网
芯片是怎样炼成的
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
画时序图--WaveDrom使用向导
小柚子的博客
11-15 531
每个wavane都有两个必填字段:“name”和“wave”。它也可以有一个可选的标记在工作边缘。时钟的块可以与其他信号状态混合，以创建时钟门控效果。波形可以统一为命名组，命名组以数组的形式表示。数组的第一个条目是组的名称。“wave”字符串中的每个字符代表一个时间周期（时间段）。符号“.”将之前的状态延长一段时间。典型的时序图会有时钟和信号(电线)。下面的代码将创建一个名为“Alfa”的1bit信号，它会随时间改变其状态。“周期”和“相位”参数可以用来调整每个波长。配置:{}属性控制呈现的不同方面。
wavedrom-editor-v2.4.2-win-x64.zip
09-07
时序图绘图工具，wavedrom开源软件，win64最新版本。 通过编写脚本，可以实现任意时序图的绘画。
Wavedrom时序图绘制-资源内含官网spec、命令集锦、例子模型
11-10
Wavedrom漫游指南：包含时序波形图绘制和逻辑电路图生成。
wavedrom
pku_mzj的博客
12-29 514
笔记来源于Hitchhiker's Guide to the WaveDrom 1.从一个简单示例开始 {signal:[ {name:"Alfa",wave:"01.zx=23.456789"} ]} Alfa的每个字符都代表一个时间段，‘.’可以表示状态保持不变。 2.添加时钟 数字时钟是一种特殊类型的信号，每个时间周期可以变化两次并且有正负极性。同时可以选择性的编辑在有效边沿。时钟块还可以和其他信号状态相混合来产生时钟门控的效果。 {signal:[ {name:"pclk
Wavedorm：开源时序图绘图插件
争取早日成为硅农
04-05 3974
WaveDrom是一种用于描述时序图的开源工具和语言。它可以帮助用户以一种简单直观的方式来描述数字信号的时序行为，例如时钟、数据、使能信号等。WaveDrom通常用于硬件描述、数字电路设计、通信协议分析等领域。WaveDrom提供了一种基于JSON格式的描述语言，通过在JSON中定义时序波形的各个方面（如信号名称、波形类型、时序关系等），用户可以生成清晰、易读的时序图形。在WaveDrom中，用户可以描述波形的高低电平、信号的变化时刻、时钟周期等信息，以及信号之间的相对时间关系。
Verilog：【7】超详细WaveDrom教程，时序图绘制利器，看这一篇就够了。
热门推荐
Alex的技术博客
08-14 1万+
超详细WaveDrom教程，时序图绘制利器，看这一篇就够了。
开源波形图绘制工具WaveDromGen
soc小白成长
05-03 3191
WaveDromGen使用python3编写，是一款功能强大的开源波形绘制工具，可以用于绘制数字电路的各种波形。该工具提供了一种简单易用的语言来生成各种波形，使得用户可以轻松地创建自己所需要的波形。WaveDromGen不仅易于使用，而且完全免费，是非常实用的工具。
WaveDrom 时序图编辑器
WillDuo的博客
11-08 600
最近画时序图发现一个非常好用工具wavedrom，该工具优点：免费 ，灵活 ，支持网页在线编辑，脚本语法简单上手快。可以导出高清SVG格式图片。用脑图总结工具用到的关键字。并写了简单示例。
WaveDrom学习笔记
hmc_123的博客
08-03 1392
WaveDrom是基于WaveDrom引擎和WaveJSON格式的数字时序图的实时编辑器，拥有独立的安装包以及vscode插件。不经意间发现esp32的api手册也是使用的wavedromesp32的API手册 在经过一段时间的熟悉后，发现确实比绘图软件手绘时序图效率高。故在此做一个记录。...
超详细WaveDrom教程，时序图绘制利器
最新发布
hzmscut的博客
06-03 196
没想到上一篇发出去，前几个小时竟然基本没人看，是我写得太晦涩了吗，这篇介绍个简单但是相当好用的软件WaveDrom，可以非常方便的绘制，简直是数字人的福音啦！P.S. 照这个速度，也不知道多久能把Basic库中的模块学习完毕哇_(:з)∠)_（已经忘记了是这周第几躺了）。
WaveDrom的使用
qq_45776815的博客
12-11 1337
是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形，从而进行显示。WaveDrom可以嵌入到任何网页中。
wavedrom：数字时序图渲染引擎
02-04
| 介绍 WaveDrom是一个免费和开放源代码的在线数字时序图（波形）渲染引擎，使用javascript，HTML5和SVG将输入文本描述转换为SVG矢量图形。 WaveJSON是格式的应用程序。 WaveJSON的目的是为数字硬件/ IC工程师使用的数字时序图提供一种紧凑的交换格式。 该引擎正在使用皮肤机制来渲染完整图片。 服务器 svg.wavedrom.com ![Alt](https://svg.wavedrom.com/github/<USER>/<REPO>/master/<PATH>/<FILENAME>.json5) ![signal step4](https://sv
wavedrom-edit-v2.9.1-win64-Win32.rar
12-11
wavedrom-edit-v2.9.1-win64-Win32
wavedrom-editor-v2.3.2-win-x64.zip
03-13
学习FPGA的过程中发现了时序图绘制软件wavedrom，但是进入官网下载页时一直加载不出来，尝试了好多遍之后才龟速下载下来。不知道有没有人遇到相同的情况。这是软件安装包，版本见名称，需要者自取。
wavedrom-editor-v2.7.0-win-x64.zip
12-09
是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形，从而进行显示。WaveDrom可以嵌入到任何网页中
wavedrom画时序图
08-09
一款好用的时序图画图软件
UML时序图-登录时序图
05-14
登录时序图.png 是一个展示登录过程的时序图。时序图是一种UML（统一建模语言）图，用于说明对象之间的时序和交互。 在这张时序图中，展示了用户登录系统的过程。首先，用户向系统发送登录请求。系统接收到请求后，...
波形绘制软件WaveDrom
你不懂的语言
01-30 1009
波形绘制软件WaveDrom
wavedrom使用教程
weixin_43274923的博客
03-22 5341
转载：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"} ]} 123 2、第二步：数字时钟 数字时钟是一种特殊类型的信号。它每
wavedrom-editor下载
08-31
Wavedrom-editor是一款用于编辑和生成波形图的工具。要下载Wavedrom-editor，首先需要打开Wavedrom官方网站。在网站上，找到并点击下载页面，然后找到Wavedrom-editor的下载链接。 点击下载链接后，会开始下载Wavedrom-editor的安装文件。下载完成后，可以打开安装文件进行安装。根据安装向导的指示，选择安装路径和其他相关选项。等待安装程序完成即可。 安装完成后，可以在电脑的开始菜单或桌面上找到Wavedrom-editor的快捷方式。双击打开该快捷方式，即可启动Wavedrom-editor。 打开Wavedrom-editor后，可以看到一个用户友好的界面。在该界面上，可以创建新的波形图、打开已有的波形图文件，并进行编辑和保存等操作。 在Wavedrom-editor中，可以通过简单的拖拽和点击操作，添加信号、设置波形的周期、时序关系、颜色和标注等。同时，Wavedrom-editor还提供了丰富的功能和选项，如合并和拆分波形、添加注释、导出为图片和生成代码等。 通过Wavedrom-editor，用户可以轻松地创建和编辑各种类型的波形图，包括时序图、状态图、状态机图等。通过这个工具，可以提高波形图的可视化水平，并方便地与他人分享和合作。 总之，下载和使用Wavedrom-editor是非常简单的，只需要访问官方网站并按照指示进行下载和安装。通过Wavedrom-editor，可以方便地创建、编辑和共享各种波形图，提高工作效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值