Draw timing diagrams in javascript with wavedrom

Wavedrom is a fantastic way to mock up a timing diagram. A timing diagram shows a sequence of how several signals change with time. Usually the signals are wire-line, meaning that they are electrical signals flowing through a wire. They are usually used to represent wire-line protocols such as SPI, I2C etc.

The changes are represented by single letter markers showing the state of the signal at a step in the plot. Example is a high to low transition represented as ‘pl’ among other signal changes. It is useful in describing a system of signals and may help one gain insight as to the time-relationship between signals. A tutorial may be found here.

The image below is of a timing diagram I previously constructed and associated code below:

timing_diagram

{signal:
[
{name: 'Column shift SRCLK', wave:'l.p|p.|p.|p.|p.|p.|p.|p.|l...'},
{name: 'Column data SER', wave:'x5..5..5..5..5..5..5..5..x...', data: ['ROW 0','ROW 1','ROW 2','ROW 3','ROW 4','ROW 5','ROW 6','ROW 7']},
{name: 'Column latch RCK', wave:'l.....pl.pl.pl.pl.pl.pl.pl.pl',},
{name: 'Row clock RCLK', wave:'l....pl.pl.pl.pl.pl.pl.pl.pl.',},
{name: 'Row reset RST', wave:'L...........................p'},
],
config: { hscale: 1 },
head:{text:'LED matrix timestep control',},
foot:{text:''},
}

 

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s