wdWrapper(
{
head: {text: 'Demonstration of pwStyle, pwClass, tlStyle, & tlClass'},
config: { skin: 'professional', wrapSvgInImg: 0, marks: true, hbounds: [1,30],
customStyle: '.vAnnoClass{font-size:7px;text-align:center;opacity:1}' +
'.vLineClass{stroke:#0000ff;stroke-width:0.5px;stroke-opacity:1;stroke-dasharray:2}',
fit2pane: true },
signal: [
wd_.parseTrig({name: "", id: 'cos', wave: ['cos', {repeat: 16, pwClass: 'vLineClass', }]}),
{ node: '...\xc3....\xc4....\xc5' },
{ node: '.......<.\xc6>\xc7\xc8' },
{ name: 'SD_CLK_OUT', wave: '0..1...',
node: '...\xcc...<.\xc0\xc1>\xc2>.<.>..\xcd', id: 'clk' },
{ node: '...E..G\xc9<\xca\xcb>' },
{ node: '.K.L.M........' },
{ name: 'Host DAT Output', wave: 'x=...x=...x=...x',
node: '...R.ST...UV...', id: 'dat',
dlStyle: 'opacity:0.3', data: Array(3).fill('VALID WINDOW') }, //
{},
{ node: '...\xd3....\xd4....\xd5' },
{ node: '.......<.\xd6>\xcf\xd8' },
{ name: 'PPW_SD_CLK_OUT', wave: '0..1...<.>', id: 'pwclk', },
{ node: '...H..I\xd9<\xda\xdb>' },
{},
wd_.parseTrig({name: "", id: 'sin', wave: ['sin', {repeat: 16, pwClass: 'vLineClass'}]}),
// Start overlays
{ overlayOnLane: 'clk', wave: '<1>0', phase: -7, skinStyle: 'stroke:red'},
{ overlayOnLane: 'clk', wave: '<1>0', phase: -7.5, skinStyle: 'stroke:red'},
{ overlayOnLane: 'clk', wave: '<10>', phase: -8, skinStyle: 'stroke:red'},
{ overlayOnLane: 'clk', phase: -9, wave: '0...1..'},
{ overlayOnLane: 'pwclk', node: '...\xdc...<.\xd0\xd1>\xd2>.<.>..\xdd', },
{ overlayOnLane: 'pwclk', phase: -9, wave: '0...1..'},
{ overlayOnLane: 'pwclk',
wave:[ 'pw', { d: 'M 7.575 1 8.575 1 8.725 0 7.725 0 Z', pwStyle: 'stroke:red' },
'pw', { d: 'M 8.075 1 8.225 0', pwStyle: 'stroke:red'},
'pw', { d: 'M 7.5 1 7.575 1 M 8.75 0 9 0', }
]
},
{ overlayOnLane: 'pwclk',
wave:[ 'pw', { d: 'M 7.575 1.5 v -2 L 8.75 -0.5 v 2 z',
pwStyle: 'stroke: none; fill:gray; fill-opacity:0.2'
} ],
},
{ wave: ['pw', {
d: ['m',0,0.5, 'L',4,0.5, 'M',7,0.5, 'L',10,0.5, 'M',13,0.5, 'L',16,0.5,],
pwClass: 'vLineClass', pwStyle: 'stroke:green'
} ],
overlayOnLane: 'clk'
},
{ wave: ['tl', { coords: [16,0.5], text: 'V<sub>t</sub>', tlClass: 'vAnnoClass' } ],
overlayOnLane: 'clk'
},
{ wave: ['tl', { coords: [16,1], text: 'V<sub>OH</sub>', tlClass: 'vAnnoClass', tlStyle: 'opacity:0;' } ], // Create empty white box to line up end point of signals
overlayOnLane: 'clk'},
{ wave: ['tl', { coords: [16,1], text: 'V<sub>OH</sub>', tlClass: 'vAnnoClass', tlStyle: 'opacity:0;' } ], // Create empty white box to line up end point of signals
overlayOnLane: 'pwclk'},
wd_.parseTrig({overlayOnLane: 'sin', phase: -3, wave: ['sin', {repeat: 11, phi: 180, pwClass: 'vLineClass', pwStyle: 'stroke:red;stroke-width:1.5px'}]}),
wd_.parseTrig({overlayOnLane: 'cos', phase: -2.25, wave: ['cos', {repeat: 12, phi:270, pwClass: 'vLineClass', pwStyle: 'stroke:brown;stroke-width:1.5px'}]}),
{ wave: [ 'pw', { d: ['m',0,0.2, 'L',16,0.2, 'M',0,0.8, 'L',16,0.8], pwClass: 'vLineClass', } ],
overlayOnLane: 'dat' },
{ wave: ['tl', { coords: [16,0.25], text: 'V<sub>OL</sub>', tlClass: 'vAnnoClass', } ], overlayOnLane: 'dat' },
{ wave: ['tl', { coords: [16,0.79], text: 'V<sub>OH</sub>', tlClass: 'vAnnoClass', } ], overlayOnLane: 'dat' },
],
edge:[
'\xc3<->\xc5 t<sub>PERIOD</sub>', '\xc6-\xc0', '\xc7-\xca', '\xc2-\xcb',
'\xcc<->\xc0 t<sub>CKMPW</sub>', '\xc2<->\xcd t<sub>CKMPW</sub>',
'\xc6>1<\xc7 t<sub>CKDCD</sub>', '\xca>5<\xcb t<sub>CKDCD</sub>',
'L-\xc3','\xc5-\xcd', 'A<->B t<sub>CKMPW</sub>', 'B<->C t<sub>CKMPW</sub>',
'E<->G t<sub>ODLY</sub>', 'L<->M t<sub>OHLD</sub>', 'G-T', 'M-S', 'X-L', 'Z-C',
'\xd3<->\xd5 t<sub>PERIOD</sub>', '\xd6-\xd0', '\xcf-\xda', '\xd2-\xdb',
'\xdc<->\xd0 t<sub>CKMPW</sub>', '\xd2<->\xdd t<sub>CKMPW</sub>',
'\xd6>1<\xcf t<sub>CKDCD</sub>', '\xda>5<\xdb t<sub>CKDCD</sub>',
'\xd5-\xdd','\xd3-\xdc'
]
}
, 1)
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 = (() => {
wavedrom.waveSkin = window.WaveSkin ;
return (obj,i) => html`${wavedrom.onml.stringify(wavedrom.renderAny(i, obj, wavedrom.waveSkin))}`
})();
wd_.customParse('example',{})
temp = {
// START contents of example.custom.wavedrom.plugin.js
const examplePlugin = {
name: 'example',
exec: function(sig) {
sig['wave'] = [];
sig['wave'].push( 'tl',
{
coords: [0,0.5],
text: ('This is an example of a custom plugin output! Eg. field of Plugin class : nativePWAttrList : ' + wd_.nativePWAttrList.join(':')),
tlStyle: 'text-anchor:start'
} );
return sig ;
}
};
wd_.register(examplePlugin);
// END contents of example.custom.wavedrom.plugin.js
return wd_ ;
}
wd_ = {
// START contents of the file wavedrom.plugins.js
class WaveDromPlugins {
static sinTable ;
static cosTable ;
static nativePWAttrList ;
static plugins ;
constructor() {
this.sinTable = [...Array(Math.ceil(2*Math.PI*1000)).keys()].map( x => Math.sin(x/1000) );
this.cosTable = [...Array(Math.ceil(2*Math.PI*1000)).keys()].map( x => Math.cos(x/1000) );
this.nativePWAttrList = ['d','pwStyle','pwClass'] ;
this.plugins = {};
}
parseTrig (sig) {
let tphase = sig.phase || 0 ;
let tspec = JSON.parse(JSON.stringify(sig.wave)) ; // wave to mod
sig.wave = [] ;
let dspec = tspec[1] ;
let nodspec = (typeof dspec === 'undefined') ;
let dspecamp = (nodspec || (typeof dspec.amp === 'undefined')) ? 1 : dspec.amp ;
let dspecf = (nodspec || (typeof dspec.f === 'undefined') || (dspec.f == 0)) ? 1 : dspec.f ;
let dspecphi = (nodspec || (typeof dspec.phi === 'undefined')) ? 0 : dspec.phi ;
let drepeat = (nodspec || (typeof dspec.repeat === 'undefined')) ? 1 : dspec.repeat ;
let pathArr = [] ;
for (let rn = 0; rn < drepeat; rn++) {
for (let i = 0; i < (1/dspecf); i += 0.001) {
let tblIdx = parseInt((2000 * Math.PI * i * dspecf) + (dspecphi * 1000 * Math.PI * dspecf / 180))
% parseInt(2000 * Math.PI) ;
let scaledVal = (tspec[0] === "sin") ? this.sinTable[tblIdx] :
(tspec[0] === "cos") ? this.cosTable[tblIdx] : 0 ;
// scaledVal is between -1 and +1, but pw coords pre-scaling should be between 0 and 1
// first shift the value to be between -0.5 and 0.5 and then apply the amplitude factor
scaledVal /= 2.00 ;
scaledVal *= dspecamp ;
// shift to center around y = 0.5
scaledVal += 0.5 ;
if ((rn == 0) && (i == 0)) {
pathArr.push('M');
}
pathArr.push((rn / dspecf) + i - tphase);
pathArr.push(scaledVal);
}
}
let pwObj = { 'd' : pathArr };
Object.keys(dspec).forEach( (pwAttr) => {
if (this.nativePWAttrList.includes(pwAttr)) {
pwObj[pwAttr] = dspec[pwAttr];
}
} );
sig.wave = [ 'pw', pwObj ] ;
return sig ;
} // end parseTrig
parseAsync (sig) {
let tspec = JSON.parse(JSON.stringify(sig.wave)) ; // wave to mod
sig.wave = [] ;
if (tspec[0] !== 'async') {
return [];
}
let dspec = tspec[1] ;
let nodspec = (typeof dspec === 'undefined') ;
let dspecSeq = (nodspec || (typeof dspec.seq === 'undefined')) ? '0' : dspec.seq ;
let dspecCTimes = (nodspec || (typeof dspec.cTimes === 'undefined')) ? [0] : dspec.cTimes ;
let dspecRT = (nodspec || (typeof dspec.rTime === 'undefined')) ? 0 : dspec.rTime ;
let dspecFT = (nodspec || (typeof dspec.fTime === 'undefined')) ? 0 : dspec.fTime ;
let dspecSharpZ = (nodspec || (typeof dspec.sharpz === 'undefined')) ? false : dspec.sharpz ;
let pathArr = [] ;
let seqIdx = 0 ;
pathArr.push('M');
let xpos = dspecCTimes[seqIdx];
let ypos = (dspecSeq[seqIdx] === '0') ? 0 : (dspecSeq[seqIdx] === '1') ? 1 :
(dspecSeq[seqIdx] === 'z') ? 0.5 : 0 ;
pathArr.push(xpos);
pathArr.push(ypos);
let prevSig = dspecSeq[seqIdx] ;
for (seqIdx = 1; seqIdx < dspecSeq.length; seqIdx++) {
let nxtSig = dspecSeq[seqIdx];
let nxtCTime = dspecCTimes[seqIdx];
// draw line up to the ctime as x pos, y pos will be from prevSig
pathArr.push('L', nxtCTime, ypos); // 'L' not strictly necessary, but for readability
// nxtXPos will depend on rise or fall time
let nxtXPos = nxtCTime + dspecRT; // assume rise time
let cpX = nxtCTime + (0.4 * dspecRT) ;
ypos = (nxtSig === '0') ? 0 : (nxtSig === '1') ? 1 : (nxtSig === 'z') ? 0.5 : 0;
if (prevSig == '1') { // we need to change to fall time
nxtXPos = nxtCTime + dspecFT;
cpX = nxtCTime + (0.4 * dspecFT) ;
}
if ((nxtSig !== 'z') || (dspecSharpZ === true)) {
pathArr.push('L', nxtXPos, ypos);
} else { // Not a straight transition, but We will need a slow rise or fall
pathArr.push('Q', cpX, ypos, nxtXPos, ypos);
}
prevSig = nxtSig ;
}
// Handle the last dspecCTimes
pathArr.push('H',dspecCTimes[seqIdx]);
let pwObj = { 'd' : pathArr };
Object.keys(dspec).forEach( (pwAttr) => {
if (this.nativePWAttrList.includes(pwAttr)) {
pwObj[pwAttr] = dspec[pwAttr];
}
} );
sig.wave = [ 'pw', pwObj ] ;
return sig ;
} // end parseAsync
register (plugin) {
const {name, exec} = plugin ;
this.plugins[name] = exec ;
}
customParse (parseFunc, sig) {
const func = this.plugins[parseFunc];
return func(sig);
}
}
let wd_ ;
try {
wd_ = new WaveDromPlugins();
}
catch(err) { console.log("Unable to load WaveDromPlugins... " + err); }
// END contents of wavedrom.plugins.js
return wd_ ;
}
wavedrom = (await require(await FileAttachment("wavedrom@1.unpkg.min.js").url()));
(await require(await FileAttachment("professional.js").url())).catch ( () => {} );
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.