はじめに
VSCodeのプラグインであるWaveform Renderの使用方法をまとめました。
クロック
クロックを作成する方法です。「.」は共通して前のシンボルの繰り返しを表しています。
{ signal: [
{ name: "Highstart", wave: "p....." },
{ name: "Lowstart", wave: "n....." },
{ name: "Posedge", wave: "P....." },
{ name: "Negedge", wave: "N....." },
{ name: "l/h", wave: "lhlhlh"},
{ name: "l/h edge", wave: "LHLHLH"}
]}
波形の表現
波形は下記のようにいくつかの表現が可能です。
{ "signal": [
{ "name": "wave", wave: "0zx=ud23456789" }
]}
ラベル
「data」を追加することで、ラベルを追加することが可能です。
{ "signal": [
{"name": "data", wave: "23456789=",data:["a", "b", "c", "d", "e", "f", "g", "h", "i"]},
]}
セパレータ
「|」（パイプ）を使用することで、セパレータを追加することが可能です。
{ "signal": [
{ name: "clk", wave: "P..|.."},
{ name: "data1",wave: "234|.5"},
]}
グループ化
リストを使用することでグループ化が可能です。
{ "signal": [
{name: 'clk', wave: 'p...'},
['Tx',
['In',
{name: 'ready', wave: '0.1.'},
],
['Out',
{name: 'valid', wave: '1...'},
{name: 'data', wave: '=..='},
],
],
]}
周期、位相の変更
「Period」で整数を与えることで周期が倍になります。また、「Phase」で位相をずらすことが可能です。
{ "signal": [
{ name: "clk1", wave: "P..."},
{ name: "clk2", wave: "P.", period:2},
{ name: "data1", wave: "x2345"},
{ name: "data2", wave: "x2345", phase: 0.5 },
]}
矢印の追加
Nodeを定義して、Nobe間を様々な線で接続することができます。
{ signal: [
{ name: 'Liner1', wave: '01.........', node: '.a'},
{ name: 'Liner2', wave: '0.1........', node: '..b'},
{ name: 'Liner3', wave: '0..1.......', node: '...c'},
{ name: 'Liner4', wave: '0...1......', node: '....d'},
{ name: 'Wave', wave: '0....1.....', node: '.....e'},
{ name: 'Arc1', wave: '0.....1....', node: '......f'},
{ name: 'Arc2', wave: '0......1...', node: '.......g'},
{ name: 'Arrow', wave: '0.......1..', node: '........h'},
{ name: 'Text', wave: '0........1.', node: '.........i'},
{ name: '', wave: '0.........1', node: '..........j'}
],
edge: [
'a-b',
'b|-c',
'c-|d',
'd-|-e',
'e~f',
'f~-g',
'g-~h',
'h->i',
'i-j Text'
]
}
関数の使用
Javascriptで簡単な関数を記述することができます。
(function (max) {
var clock = {"name": "clk", "wave": 'p'}
var cnt = {"name": "data", "wave": '', "data":[]}
for (var i = 0; i < max; i++) {
clock["wave"] += "."
cnt["wave"] += "="
cnt["data"].push(i)
}
return {signal: [
clock,
cnt
]};
})(5)
コンフィグの変更
「hscale」を使用することで、水平方向に表示を拡大することができます。
{ signal: [
{ name: "clk", wave: "p.." },
{ name: "Data", wave: "345", data: ["a", "b", "c"]}
],
config: { hscale: 2 }
}
ヘッダー/フッターの追加
「head」でヘッダー、「foot」でフッターを追加することができます。
「text」で表示したテキスト、「tick」で時間軸、「tock」で半周期の時間軸を表示します。
「every」で何周期に一度時間ラベルを表示するかを設定できます。
{ signal: [
{ name: "clk", wave: "p.." },
{ name: "Data", wave: "345", data: ["a", "b", "c"]}
],
head:{
text:'Waveform Render example',
tick:0,
tock:2,
every:1
},
foot:{
text:'Figure.1',
tick:2,
tock:0,
every:2
}
}
リンク
Hitchhiker's Guide to the WaveDrom
wavedrom.com
コメント