Wavedrom

wavedrom

제품 정보

즐겨찾기

프로그래밍 언어

공개 채팅

지원 계획

현재 사용할 수 있는 OSS 플랜이 없습니다.

저장소의 제공자 또는 기여자인 경우 OSS 플랜 추가를 시작할 수 있습니다.

OSS 플랜 추가
OSS용 PieceX가 처음이신가요 여기에서 자세히 알아보세요

이 오픈소스에 대한 플랜을 찾고 있다면 저희에게 문의해 주세요.

전문 공급자와 연락하실 수 있도록 도와드리겠습니다.

제품 세부 정보

:ocean: Digital timing diagram rendering engine

Linux MacOS Windows NPM version PayPal donate button Coverage Status

EDITOR | TUTORIAL

Introduction

WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a 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 is using WaveDromSkin skin mechanism to render a complete picture.

Server

svg.wavedrom.com

![Alt](https://svg.wavedrom.com/github/<USER>/<REPO>/<BRANCH>/<PATH>/<FILENAME>.json5)
![signal step4](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/signal-step4.json5)

signal step4

![reg vl](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/reg-vl.json5)

reg vl

<img src="https://svg.wavedrom.com/{WAVEDROM SOURCE}/>
<img src="https://svg.wavedrom.com/{signal:[{name:'clk',wave:'p......'},{name:'bus',wave:'x.34.5x',data:'head body tail'},{name:'wire',wave:'0.1..0.'}]}"/>

Web usage

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

HTML pages

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

1) Put the following line into your HTML page <header> or <body>:

From a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js" type="text/javascript"></script>

2) Set the onload event for the HTML body.

<body onload="WaveDrom.ProcessAll()">

3) Insert WaveJSON source inside HTML <body> wrapped with the <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>

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

impress.js

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

Blogs & Wikis

ObservableHQ examples: (https://observablehq.com/collection/@drom/wavedrom)

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

MediaWiki integration: (https://github.com/Martoni/mediawiki_wavedrom)

Editor

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

Standalone WaveDromEditor

Windows

  1. Download latest wavedrom-editor-v2.4.2-win-{ia32|x64}.zip release from here: releases
  2. Unzip it into a working directory.
  3. Run the editor: wavedrom-editor.exe

Linux

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

OS X

  1. Download the latest wavedrom-editor-v2.4.2-osx-x64.zip release from here: releases
  2. Unzip
  3. Run

Community

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

Contributing

Contributing

License

See LICENSE.

user-symbol

문의하기

비즈니스 개발자를 위한 최신 정보를 원하십니까? 소스 코드 프로젝트에 대한 PieceX 커뮤니티의 요구사항을 알아보세요. PieceX의 최신 무료 커뮤니티 코드를 빠르게 알려드립니다.