2d:null 2e:["$","title",null,{"children":"Hitchhiker 的 WaveDrom 指南 | ExplorerLog | Observable"}] 33:[] 31:{"id":"5a4de964f35b21b7","slug":"hitchhiker-wavedrom","title":"Hitchhiker 的 WaveDrom 指南","thumbnail":"09fb7db40494416788ae00c58326f8694d6aa6435fcb76723dd71e82c4574706","access_level":"public","create_time":"$D2019-07-03T02:56:33.606Z","update_time":"$D2020-09-22T02:31:45.325Z","view_time":null,"first_public_time":"$D2019-07-03T03:38:52.046Z","has_unpublished_edits":null,"fork":{"id":"a75ef34bc9ccd5ca","slug":"wavedrom","title":"Hitchhiker's Guide to the WaveDrom","owner":{"id":"7b1c5b66fd9285b7","login":"drom","name":"Aliaksei Chapyzhenka"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8a5c500c8eecbc2e","login":"pygc","name":"ExplorerLog","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":"starter_2024"},"version":253,"publish_version":253,"role":null,"authored":false,"authors":[{"type":"individual","id":"51aa609763d92d01","login":"pygc","name":"ExplorerLog","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":null}],"members":[{"type":"individual","id":"51aa609763d92d01","login":"pygc","name":"ExplorerLog","avatar_url":"https://avatars-next.observableusercontent.com/a2034439cf44a563da383de835ee021f6b6b0fe384e6da3aac36176d6f7b8a0a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Hitchhiker 的 WaveDrom 指南","cells":[{"id":0,"value":"md`\n# Hitchhiker 的 WaveDrom 指南\n\n[WaveDrom](https://wavedrom.com) 是一款 JavaScript 应用。\n\nWaveJSON 是一种描述数字时序图的格式。\n\nWaveDrom 可以直接在浏览器中呈现图表。\n\n元素 \\`signal\\` 是 WaveLanes 的一个数组。\n\n每个 WaveLane 都有两个字段：\\`name\\` 与 \\`wave\\`。\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`\n## 第 1 步信号\n\n让我们以一个小例子开始。\n\n下面的代码将创建一个名为 \\`\"Alfa\"\\` 的 1 位信号，它随时间改变其状态。\n\n\\`\\`\\`js\n{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }\n\\`\\`\\`\n\n\\`\"wave\"\\` 字符串中的每个字符代表一个时钟周期。\n\n符号 \\`\".\"\\` 将先前的状态再延长一个周期。\n\n它看起来是这样的：\n\n${wd(\n{ signal: [{ name: 'Alfa', wave: '01.zx=ud.23.45' }] }\n)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"md`\n## 第 2 步添加时钟\n\n数字时钟信号是一种特别类型的信号。\n\n每个周期它可以改变两次，并且有正负极性。\n\n它还有一个在工作边沿上添加符号的可选功能。\n\n时钟的块可以与其他信号状态混合以产生时钟门控效果。\n\n他的代码看起来是这样的：\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"wd({ signal: [\n { name: 'pclk', wave: 'p.......' },\n { name: 'Pclk', wave: 'P.......' },\n { name: 'nclk', wave: 'n.......' },\n { name: 'Nclk', wave: 'N.......' },\n {},\n { name: 'clk0', wave: 'phnlPHNL' },\n { name: 'clk1', wave: 'xhlhLHl.' },\n { name: 'clk2', wave: 'hpHplnLn' },\n { name: 'clk3', wave: 'nhNhplPl' },\n { name: 'clk4', wave: 'xlh.L.Hx' },\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`\n## 第 3 步把它们全放一块儿\n\n典型的时序图将具有时钟和信号（线）。多位信号将尝试从 \\`\"name\"\\` 数组中获取标签。\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"wd({ signal: [\n { name: \"clk\", wave: \"P......\" },\n { name: \"bus\", wave: \"x.==.=x\", data: [\"head\", \"body\", \"tail\", \"data\"] },\n { name: \"wire\", wave: \"0.1..0.\" }\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`## 第 4 步间隔与间隙`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"wd({ signal: [\n { name: \"clk\", wave: \"p.....|...\" },\n { name: \"Data\", wave: \"x.345x|=.x\", data: [\"head\", \"body\", \"tail\", \"data\"] },\n { name: \"Request\", wave: \"0.1..0|1.0\" },\n {},\n { name: \"Acknowledge\", wave: \"1.....|01.\" }\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## 第 5 步分组\n\nWaveLanes 可以联合以数组形式表示的已命名组。\n\n\\`\\`\\`js\n['group name', {...}, {...}, ...]\n\\`\\`\\`\n\n数组的第一个元素就是组名。\n\n组支持嵌套。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"wd({ signal: [\n { name: 'clk', wave: 'p..Pp..P'},\n ['Master',\n ['ctrl',\n {name: 'write', wave: '01.0....'},\n {name: 'read', wave: '0...1..0'}\n ],\n { name: 'addr', wave: 'x3.x4..x', data: 'A1 A2'},\n { name: 'wdata', wave: 'x3.x....', data: 'D1' },\n ],\n {},\n ['Slave',\n ['ctrl',\n {name: 'ack', wave: 'x01x0.1x'},\n ],\n { name: 'rdata', wave: 'x.....4x', data: 'Q2'},\n ]\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`\n## 第 6 步周期与相位\n\n每个 WaveLane 都能通过 \\`\"period\"\\` 与 \\`\"phase\"\\` 参数来调节.\n\n### DDR 读处理\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"wd({ signal: [\n { name: \"CK\", wave: \"P.......\", period: 2 },\n { name: \"CMD\", wave: \"x.3x=x4x=x=x=x=x\", data: \"RAS NOP CAS NOP NOP NOP NOP\", phase: 0.5 },\n { name: \"ADDR\", wave: \"x.=x..=x........\", data: \"ROW COL\", phase: 0.5 },\n { name: \"DQS\", wave: \"z.......0.1010z.\" },\n { name: \"DQ\", wave: \"z.........5555z.\", data: \"D0 D1 D2 D3\" }\n]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`\n## 第 7 步 config{} 属性\n\n\\`config: {...}\\` 属性可以控制不同的呈现形式.\n\n### hscale\n\n\\`config: {hscale: #}\\` 属性控制图标的水平尺度，用户可以输入大于 0 的任何值。\n\n### hscale = 1 (默认)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"wd({ signal: [\n { name: \"clk\", wave: \"p....\" },\n { name: \"Data\", wave: \"x345x\", data: [\"head\", \"body\", \"tail\"] },\n { name: \"Request\", wave: \"01..0\" }\n ],\n config: { hscale: 1 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`### hscale = 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"wd({ \"signal\" : [\n { \"name\": \"clk\", \"wave\": \"p....\" },\n { \"name\": \"Data\", \"wave\": \"x345x\", \"data\": [\"head\", \"body\", \"tail\"] },\n { \"name\": \"Request\", \"wave\": \"01..0\" }\n],\n \"config\" : { \"hscale\" : 2 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`### hscale = 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"wd({ \"signal\" : [\n { \"name\": \"clk\", \"wave\": \"p....\" },\n { \"name\": \"Data\", \"wave\": \"x345x\", \"data\": [\"head\", \"body\", \"tail\"] },\n { \"name\": \"Request\", \"wave\": \"01..0\" }\n],\n \"config\" : { \"hscale\" : 3 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`\n### skin\n\n\\`config: {skin: '...'}\\` 属性可以用来选择 WaveDrom 的皮肤。\n\n这个属性仅工作在页面的第一个时序图中。\n\n[WaveDrom Editor](https://wavedrom.com/editor.html) 包含两个标准皮肤： \\`'default'\\` 与 \\`'narrow'\\`\n\n### head/foot\n\n\\`head: {...}\\` and \\`foot: {...}\\` 属性定义时序图之上/之下的内容.\n\n**tick**\n- 添加与垂直标记线对齐的时间轴标签。\n\n**tock**\n- 添加在垂直标记之间的时间轴标签。\n\n**text**\n- 添加标题文字。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"wd({signal: [\n {name:'clk', wave: 'p....' },\n {name:'Data', wave: 'x345x', data: 'a b c' },\n {name:'Request', wave: '01..0' }\n],\n head:{\n text:'WaveDrom example',\n tick:0,\n },\n foot:{\n text:'Figure 100',\n tock:9\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`\n

\nhead/\nfoot 文本具有 SVG 文本的所有属性。标准的 SVG\ntspan 属性可用于修改文本的默认属性。 JsonML 标记语言用于表示SVG文本内容。可以使用和混合使用几种预定义样式：\n\n

\n\\`h1, h2, h3, h4, h5, h6\\` -- 预定义的字体大小。\n\n

\n\\`muted, warning, error, info, success\\` -- 字体颜色样式。\n\n其他 SVG \\`tspan\\` 属性可以在 freestyle 中使用，如下所示。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"wd({signal: [\n {name:'clk', wave: 'p.....PPPPp....' },\n {name:'dat', wave: 'x....2345x.....', data: 'a b c d' },\n {name:'req', wave: '0....1...0.....' }\n],\nhead: {text:\n ['tspan',\n ['tspan', {class:'error h1'}, 'error '],\n ['tspan', {class:'warning h2'}, 'warning '],\n ['tspan', {class:'info h3'}, 'info '],\n ['tspan', {class:'success h4'}, 'success '],\n ['tspan', {class:'muted h5'}, 'muted '],\n ['tspan', {class:'h6'}, 'h6 '],\n 'default ',\n ['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic']\n ]\n},\nfoot: {text:\n ['tspan', 'E=mc',\n ['tspan', {dy:'-5'}, '2'],\n ['tspan', {dy: '5'}, '. '],\n ['tspan', {'font-size':'25'}, 'B '],\n ['tspan', {'text-decoration':'overline'},'over '],\n ['tspan', {'text-decoration':'underline'},'under '],\n ['tspan', {'baseline-shift':'sub'}, 'sub '],\n ['tspan', {'baseline-shift':'super'}, 'super ']\n ],tock:-5\n}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`\n

第 8 步箭头

\n\n

曲线

\n\n

\n ~    -~\n<~>  <-~>\n ~>   -~>  ~->\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"wd({ signal: [\n { name: 'A', wave: '01........0....', node: '.a........j' },\n { name: 'B', wave: '0.1.......0.1..', node: '..b.......i' },\n { name: 'C', wave: '0..1....0...1..', node: '...c....h..' },\n { name: 'D', wave: '0...1..0.....1.', node: '....d..g...' },\n { name: 'E', wave: '0....10.......1', node: '.....ef....' }\n ],\n edge: [\n 'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',\n 'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`\n

折线

\n\n

\n -   -|   -|-\n<-> <-|> <-|->\n ->  -|>  -|->  |->\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"wd({ signal: [\n { name: 'A', wave: '01..0..', node: '.a..e..' },\n { name: 'B', wave: '0.1..0.', node: '..b..d.', phase:0.5 },\n { name: 'C', wave: '0..1..0', node: '...c..f' },\n { node: '...g..h' }\n ],\n edge: [\n 'b-|a t1', 'a-|c t2', 'b-|-c t3', 'c-|->e t4', 'e-|>f more text',\n 'e|->d t6', 'c-g', 'f-h', 'g<->h 3 ms'\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`\n## 第 9 步一些例子\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"wd((function (bits, ticks) {\n var i, t, gray, state, data = [], arr = [];\n for (i = 0; i < bits; i++) {\n arr.push({name: i + '', wave: ''});\n state = 1;\n for (t = 0; t < ticks; t++) {\n data.push(t + '');\n gray = (((t >> 1) ^ t) >> i) & 1;\n arr[i].wave += (gray === state) ? '.' : gray + '';\n state = gray;\n }\n }\n arr.unshift('gray');\n return {signal: [\n {name: 'bin', wave: '='.repeat(ticks), data: data}, arr\n ]};\n})(5, 16))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## 附录`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"wd = (() => {\n let i = 0;\n return obj => html`${wavedrom.onml.stringify(wavedrom.renderAny(i++, obj, wavedrom.waveSkin))}`\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"wavedrom = require('wavedrom@2.1.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"html` \n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"

第 8 步 箭头

曲线

折线

第 8 步箭头