Public
Edited
Jan 1, 2024
1 fork
wdWrapper(
{
config: { skin:'professional', fit2pane: 1, hbounds: [1,11.5],
customStyle:
//'.amiRed{stroke:red}' +
//'.lane_label{fill:black}' +
''
},
head: {//tick:-1,
text: ['tspan',{},'Alternate Mark Inversion (AMI) Bipolar Waveform',
['tspan',{x:0, dy: 20, 'font-size': '0.8em'}, 'Demonstrating pwClass, pwStyle, skinClass, and skinStyle']
]},
signal: [
{},
{name: 'Clock', wave: '0p' + '.'.repeat(10),
//skinStyle: 'stroke:red'
},
{},
{name: 'Data', id: 'data', wave: 'lhlhl.h..l.hl', skinClass: 'amiRed'},
{},
{name: 'AMI', id: 'ami', wave: [
'pw',
{ d: 'M 0 0.5 H 12',
// pwStyle: 'opacity:0.1'
}
]}, // this is the mid-line
{},
// javascript code can be used to generate signal lanes
// here, we are feeding the wave from the data lane to a function
// that automatically places multiple text labels right below that lane
((str)=>{
let retwave = [];
let comps = str.split('');
let infchar = 'x';
for (let idx = 0; idx < comps.length; idx++) {
retwave.push('tl');
infchar = comps[idx] === 'h' ? '1' : comps[idx] === 'l' ? '0' : infchar ; // . will extend prev val
retwave.push({coords: [(idx + 0.5),-0.5], text: infchar});
}
return {overlayOnLane: 'data', wave: retwave} ;
})('lhlhl.h..l.hl'),
// we can have a parseBipolar plugin to generate this, in which case
// this would be the primary lane, and the mid-line would become the overlay
{overlayOnLane: 'ami', wave: [
'pw',
{ d: 'M 0 0.5 h 1 v 0.5 h 1 v -0.5 h 1 v -0.5 h 1 v 0.5 h 1 h 1 v 0.5 h 1 v -1 h 1 v 1 h 1 v -0.5 h 1 h 1 v -0.5 h 1',
pwClass: 'amiRed'
}
]},
]
}
, 2) // second image on page
wdWrapper(
{
config: { skin: 'professional', hscale: 2, marks: true, fit2pane: true,
customStyle:
// '.arc_path{stroke-dasharray:1}' +
// '.group_path{stroke:red}' +
// '.arc_label{fill:#ff00ff}'+
// '.group_label{fill:#0000ff;font-size:12px}' +
// '.customRedEdge{stroke:red}' +
// '.gmarks{stroke:#000000;stroke-width:1;stroke-dasharray:6}' +
// '.muted{fill:red;opacity:0.8}' +
// 'text{font-family:monospace}' +
// '.data_label{font-family:Helvetica}' +
// '.customRedArrow{fill:red}' +
'',
wrapSvgInImg:0 },
head: { tick: 0,
text: 'Custom Protocol for Client - Memory Arbiter (dram) Communication' },
foot: { tock: 0.5,
text: 'WaveDrom Timing Diagram Components' },
signal: [
{name: 'gclk_client', wave: 'p......|...',},
{},
{},
[
['tspan',{'fill': '#0041c4', 'font-size': '11pt'},'Request Bus'],
{name: '[client]_dram_req_vld_p1', wave: '1101010<.|..>...',
id: 'rqvld',
overrideSkin: 'professional_srf'},
{name: 'dram_[client]_req_cdt', wave: '0...110<.|..>101',},
{name: 'dram_[client]_req_ack', wave: '0....10<.|..>.11',},
{name: '[client]_dram_req_write', wave: 'x10x0x0<x|..>...',},
{name: '[client]_dram_req_addr', wave: 'x==x=x=<x|..>...',
data: ["A0(W)","A1(R)","A2(R)","A3(R)"]},
{name: '[client]_dram_req_bcnt_m1', wave: 'x==x=x=<x|..>...',
data: ["23","19","255","127"]},
],
{},
{},
[
['tspan',{'fill': '#0041c4', 'font-size': '11pt'},'Write Channel'],
[
'write data',
{name: '[client]_dram_wdata_vld_p1[3:0]', wave: '=.==..|....',
data: ['0','N','0'], id: 'wvld'},
{name: '[client]_dram_wdata[255:0]', wave: 'x..=x.|....',
data: ['data'], node: '....g......'},
],
{node: '....e..f...', },
[
'credits return',
{name: 'dram_[client]_wdata_credits_vld_p1',
wave: '0.....|10..', node: '.......h...'},
{name: 'dram_[client]_wdata_credits_m1', wave: 'x.....|.=x.', data: ['credits']},
],
],
{},
{},
[
['tspan',{'fill': '#0041c4', 'font-size': '11pt'},'Read Channel'],
{name: 'dram_[client]_rdata_vld_p1', wave: '0.10..|....', node: '....A..B...'},
{name: 'dram_[client]_rdata', wave: 'x..=x.|....', data: ['data'], node: '....C......'},{},
{name: '[client]_dram_rdata_credit_vld_p1', wave: '0.....|10..', node: '.......D...'},
{name: '[client]_dram_rdata_credits_m1', wave: 'x.....|.=x.', data: ['credits']},
],
{},
{overlayOnLane: 'wvld', wave: ['tl', { text: '4-bit One-Hot Signal', coords: [2.5625,2.25]}]},
],
edge: [
'A-C', 'B-D', 'A<->B not specified', 'e-g', 'f-h', 'e<->f not specified',
'[rqvld-1:0]+5+[rqvld-1:2.0625] Back-to-Back Requests',
'[wvld-1:2.5625]->[wvld:2.5625,0][customRedEdge][customRedArrow]',
],
}
,1) // first image on the page
wdWrapper({config: {marks: false}, signal: [ {name: "Evaluating WaveDrom 24.01"} ]} ,0)
wdWrapper = (() => {
wavedrom.waveSkin = window.WaveSkin ;
return (obj,i) => {
const actSVG = wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin));
const parser = new DOMParser();
const actSVGForImg = parser.parseFromString(actSVG,'image/svg+xml').firstChild;
let ser = new XMLSerializer();
let imgt = document.createElement('img');
const svgAsImgString = encodeURIComponent(ser.serializeToString(actSVGForImg));
imgt.src = `data:image/svg+xml;utf8,${svgAsImgString}` ;
imgt.style = 'width:100%;height:100%;' ;
return imgt ;
}
})();
wd = (() => {
let i = 0 ;
wavedrom.waveSkin = window.WaveSkin ;
return (obj) => html`${wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin))}`
})();
wavedrom = (await require(await FileAttachment("wavedrom.unpkg.min.js").url()));
(await require(await FileAttachment("professional_srf.js").url())).catch ( () => {} );
(await require(await FileAttachment("professional.js").url())).catch ( () => {} );
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
