Skip to content
master
Go to file
Code
This branch is 33 commits ahead, 213 commits behind wavedrom:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
bin
 
 
 
 
css
 
 
doc
 
 
lib
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Build Status NPM version Built with Grunt Analytics PayPal donate button

EDITOR | TUTORIAL

Introduction

WaveDrom is Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert WaveJSON input text description into SVG vector graphics.

WaveJSON is an application of the JSON format. The purpose of WaveJSON is to provide a compact exchange format for digital timing diagrams utilized by digital HW / IC engineers.

The engine using WaveDromSkin skin mechanism to render complete picture.

Screenshot

alt text

Web usage

WaveDrom timing diagrams can be embedded into the web pages, blogs, wikis to be rendered by the most of modern browsers:

alt text 4+ alt text 10+ alt text 5.1+ alt text 12+ alt text 11

HTML pages

There are 3 steps to insert WaveDrom diagrams directly into your page:

  1. Put following line into your HTML page <header> or <body>:
<script src="http://wavedrom.com/skins/default.js" type="text/javascript"></script>
<script src="http://wavedrom.com/wavedrom.min.js" type="text/javascript"></script>

or from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.4.1/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/1.4.1/wavedrom.min.js" type="text/javascript"></script>
  1. Set onload event for HTML body.
<body onload="WaveDrom.ProcessAll()">
  1. Insert WaveJSON source inside HTML <body> wrapped with <script> tag:
<script type="WaveDrom">
{ signal : [
  { name: "clk",  wave: "p......" },
  { name: "bus",  wave: "x.34.5x",   data: "head body tail" },
  { name: "wire", wave: "0.1..0." },
]}
</script>

Script will find all <script type="WaveDrom"> instances and insert timing diagram at that point.

impress.js

(http://wavedrom.com/impress.html)

Blogs & Wikis

Blogger integration: (http://wavedrom.blogspot.com/2011/08/wavedrom-digital-timing-diagram-in-your.html)

Editor

WaveDromEditor is online real-time editor of digital timing diagrams based on WaveDrom engine and WaveJSON format.

Standalone WaveDromEditor

Windows

  1. Download latest wavedrom-editor-v1.4.2-win-{ia32|ia64}.zip release from here: releases
  2. Unzip it into working direactory.
  3. run the editor: WaveDromEditor.exe

Linux

  1. Download latest wavedrom-editor-v1.4.2-linux-{ia32|x64}.tar.gz release from here: releases
  2. unzip-untar the package: tar -xvzf wavedrom-editor-v1.3.0-linux-x64.tar.gz
  3. run the editor: ./WaveDromEditor/linux64/WaveDromEditor

OSX

  1. Download latest wavedrom-editor-v1.4.2-osx-x64.zip release:
  2. unzip
  3. run

Server-side WaveDrom renderer

The directory server contains a script file that runs as a console application when executed with phantomjs. Allows one to render the wavedrom-scripts to a SVG or PNG file.

Community

Please use WaveDrom user group for discussions, questions, ideas, whatever.

License

See LICENSE.

About

🌊 Digital timing diagram rendering engine

Resources

License

Packages

No packages published
You can’t perform that action at this time.