wavedrom / zoom Goto Github PK

View Code? Open in Web Editor NEW

43.0 21.0 1.0 22 KB

🔍 Zoomable Waveform viewer for the Web

License: MIT License

JavaScript 67.20% HTML 32.80%

wavedrom

zoom's Introduction

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)

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

<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:

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>

Set the onload event for the HTML body.

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

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

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

Linux

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

OS X

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

Community

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

Contributing

License

See LICENSE.

zoom's People

Contributors

Stargazers

Watchers

Forkers

cmarqu

zoom's Issues

Fast rendering

Timing diagram ( part of #5 ) can be constructed in vector form, but then need to be rendered into pixel accurate form to be useful.

Possible options:

SVG
Canvas
WebGL

Maps or 2D gaming rendering engines can be a good source of inspiration

Smooth scroll

Implementing basic scroll capability controlled by the buttons:

ArrowLeft
ArrowRight
ArrowUp
ArrowDown
Home

Have an issue achieving smooth scroll.

https://github.com/wavedrom/zoom/blob/master/lib/gen-key-handler.js#L17

Markers: magnetic snapping to edges

In order to accurately measure e.g. time differences, creating or moving markers (we should be able to have arbitrarily many) should have magnetic snapping to the nearest signal edge when the cursor is within a few millimeters distance (configurable).

minimap

I'm not sure how well it would work, but maybe some kind of mini-map view to orient myself instead of just relying on the scrollbars. I love minimap views in text editors.

Originally posted by @nturley in #1 (comment)

Input Data Stream

Zoom should accept a stream of data from a simulator.
It should support streaming parser for multiple data dump formats into the internal Data Model [ #13 ]
Parsers can be implemented as plugins

Collect the initial set of requirements

A general task to collect the initial set of ideas, requirements that need to address one or more of initial goals:

Fast enough to render large timing diagrams [#3]
Zoomable & Scrollable enough to see small details and the big picture [#2]
Embeddable so it can be integrated as a component into bigger UI application [#9]
Composable with custom code and behaviors [#6]
Reactive to render required parts of the continuous stream of from simulator [#14]

Bokeh integration

Bokeh is a Python/javascript based data presentation tool.

It allows creation of WEB based interfaces, where data can be pushed from server Python code to client javascript code. I used Bokeh to create an oscilloscope with a Jupyter server running on Red Pitaya.
The client was able to achieve 18fps (frames per second). Unfortunately I was unable to polish the code further then a buggy demo.
In addition to Bokeh running in Jupyter, it also allows the creation of standalone applications, where the entire screen is dedicated to the application. But again, I was unable to get it to work.

If Bokeh supported waveforms, it would be possible to create a web based logic analyzer.
Another application would be a WEB based waveform viewer for the Python based logic analyzer sigrok.

Support for zooming is already part of Bokeh, I see a far zoom-out as the main problem, since it requires a lot of data to be compressed onto a limited screen. If this is not optimized, viewing can become slow.

This is an example I stated from, most other examples I linked to are just source code, this one is active.
https://demo.bokeh.org/sliders

You probably already know EPWave, but this one is not open source.

Zoomable & Scrollable

A timing diagram is 2D rendering with the following axis:

X : representing time
Y : rows representing list of selected signals / bundles

Rows

Each signal row has static height.
All rows are scaled horisontaly to a certain scaling factor.
Number of rows is defined as subset of total number of signals in the datadump.
At any given time USER sees the timing diagram through the rectangular window that can be smaller then full X, Y dimentions.

Zooming & Scrolling

horizontal zooming
horizontal scrolling
vertical scrolling

☯️

☯️ Light on Dark vs. Dark on Light ☯️

Most of the interactive waveform viewers use light lines over dark background.
Datasheets usually prefer black (dark) lines and text on the white (paper) background.
Do we need to support both modes?
Can it be skinnable?

Data model

How timing data should be organized?
Stream data from a source and process chunk by chunk (async)
Import different dump formats (VCD,...)
Dense data storage. Binary form?
How to manage a lot of data
Quick navigation. Render specific time range?

References

Protocol interpretation

Protocol interpretation. I was debugging an issue with communication with an atmel crypto chip over a one-wire protocol and I found a logic analyzer that knew how to interpret the protocol and command set it used. It displayed what commands I was sending to the device and highlighted parts that violated the spec. That would be super neat to have that in simulation.

Originally posted by @nturley in #1 (comment)

Composition

Way to compose zoom with a custom components (plugins)

visual components
custom behaviors

Embedding

Embeddable so it can be integrated as a component into bigger UI application

DOM Type ?

Direct DOM
Virtual DOM (React)
Web Components
~~Shadow DOM~~
Server side

IDE

How to setup project in VSCode

Please give some instructions, how to setup this project in vscode.

Keys and Mouse

Key bindings

Home - 0x24 - Jump to the beginning of the trace
End - 0x23 - Jump to the end of the trace
PageUp - 0x21 - Scroll up (page)
PageDown - 0x22 - Scroll down (page)
ArrowUp - 0x26 - Scroll Up (1 line)
ArrowDown - 0x28 - Scroll Down (1 line)

Mouse events

Wheel (up / down) - Scroll (up / down) ?
Shift + Wheel (up / down) - Scroll (left / right) ?
Ctrl + Wheel (up / down) - Zom in / out around the mouse pointer [ #2 ]
click - sets vertical cursor

View

Zoom view adds subtree into DOM and handles assotiated events.

Here is typical waveform view from GTKWave:

Structure

row annotation (text, lines)
- background (solid color or grid) [ #4 ]
- names for signals, groups, extra space
- value of a signal at the cursor, other attributes
- bundle or group brackets
- selection of multiple rows
- row cursor
- folding control
timing diagram
- background [ #4 ]
- grid
- color lines and rectangles [ #3 ]
- text labels (value at this time)
- event markers
- cursors (vertical lines ?)
scroll bars [ #2 ]

Query, Filter language

A timing diagram produced by a simulator is large and complex database. A user would typically want to see only part of it to understand a "particular behavior". Some typical ways to focus on the case are:

Zoom in - adjust (X-axis) range to see only a specific time interval of interest.
Select, rearrange, filter and group subset of signals (Y-axis) that participate in the behavior.
Selections and cursors can be used to focus on specific areas.
Select names with regular expressions

The Query or Filter language can be used to perform such a selection process. Here are examples of such languages:

Cursor shape

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

???

all-scroll :

Viewfinder

specify signals group/encoding: a way to specify via cli or file(json or similar) how signal must be grouped/showed, and the encoding you want Zoom to show you. I think that have so you can define wish signals to group/encode via a regex rule would be a nice touch.

Originally posted by @wifasoi in #1 (comment)

Labels

When the hierarchical signal name doesn't fit in the box, by default, show the end of the signal name instead of the beginning ("...dparent/parent/sig" instead of "grandparent/paren...")

Originally posted by @nturley in #1 (comment)

wavedrom / zoom Goto Github PK

zoom's Introduction

Introduction

Server

Web usage

HTML pages

impress.js

Blogs & Wikis

Editor

Standalone WaveDromEditor

Windows

Linux

OS X

Community

Contributing

License

zoom's People

Contributors

Stargazers

Watchers

Forkers

zoom's Issues

References

Key bindings

Mouse events

Recommend Projects

Recommend Topics

Recommend Org