wavedrom / datasheet Goto Github PK

View Code? Open in Web Editor NEW

26.0 26.0 6.0 123 KB

datasheet generator

License: MIT License

JavaScript 89.59% HTML 7.26% CSS 3.15%

hacktoberfest

datasheet'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.

datasheet's People

Contributors

Stargazers

Watchers

Forkers

john-k k4zuki drom kongr45gpen jurya haojiangwang

datasheet's Issues

columns

Add two columns for text, with content spanning full page for tables and figures.

break tables

If table does not fit into the page, it need to be broken in 2,3,... whatever needed tables.

Features

Before the brake: need to have some sort of 'continued...' banner.
After the brake on the next page: need to repeat table header.

Solutions

css?
JS?

first / left / right page margins

Need

Specific page margin for fist / left / right pages on print.

Solution

Works in chrome:

@page :left {
  margin: 1in 2in 1in 1in;
}

@page :right {
  margin: 1in 1in 1in 2in;
}

@page :first {
  margin: 1in 1.5in 1in 1.5in;
}

hyphenation

modern browsers support hyphenation.

https://en.wikipedia.org/wiki/Hyphen

https://en.wikipedia.org/wiki/Hyphenation_algorithm

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

hyphens: auto;

browser will do the trick if text has invisible, "soft" hyphen U+00AD (SHY) characters.

Some utility should insert SHY chars into text using specific language dictionary, rules and algorithm.

Example:

https://github.com/mnater/Hyphenopoly

chapter numbering

Need

Automatic chapter, section, table, figure,... numbering

Standards

ISO 2145

Solutions

random datasheet generator

markdown support

if markdown input provided.

Markdown parser: https://marked.js.org

PDF Outline

Understanding the Difference between Bookmarks and the Outline in a PDF

Creating a Table-of-Contents with PDF.js

https://github.com/mozilla/pdf.js/tree/master/examples/node

CreateOptions, addOutline, insertOutline

Tools

{Adoc, TOC.json} -> [] -> html1

html1 -> [] -> PDF1

PDF1 -> [toc.js] -> TOC.json

Parse PDF with pdf.js library https://github.com/mozilla/pdf.js
Measure page numbers for Chapters, Sections.
Number of pages

{PDF1, TOC.json} -> [] -> PDF2

based on printed PDF and TOC.json
parse PDF1 using pdf-lib https://github.com/Hopding/pdf-lib
add headers and footers. page numbers
add Outline using Hopding/pdf-lib#486
save modified PDF2

HTML Outline

TOC in the left panel

https://www.w3.org/TR/css-page-3/

preserve links in PDF

browser can print page into PDF but URL links are usually dead.

At least in chrome. 😞

Is any workaround?
inside SVG?
Are there any browsers that print with links? Safari?
try new chrome, firefox.

Need

Page numbering

calculate page number for every referenceable resource (chapter, table,...)
add page numbers into footer / header #5
update references to specific pages inside text
update TOC #2

Solutions

page breaks

Need

to control page brakes

Solutions

CSS:
JS:
- declarative LaTeX
- Programmatic via the rules?

How To Set Up A Print Style Sheet

notes

Put an explicit note: designation before each note

header & footer

Need

header & footer with HTML, CSS, SVG content.
unique per page

Solutions

table of contents, tables, figures

Table of Contents, TOC, Contents.

Need

Automatically generated table of contents.

Leaders:

Solutions

JS, collecting structure of the document and generating the TOC automatically.

https://css-tricks.com/automatic-table-of-contents/

Releated

List of Figutes
List of Tables

overline in markdown

Overline is popular text attribute in datasheets.

Can be done with CSS:

o {
    text-decoration: overline;
}

<o>WR</o>

missing from markdown CSS

can be added as "combining overline" unicode caracter: ̅

wavedrom support for datasheet

Would like to be able to feed a wavedrom source .json into an .adoc that is rendered as .pdf with datasheet.

try pagedjs

https://www.pagedjs.org/

wavedrom / datasheet Goto Github PK

datasheet's Introduction

Introduction

Server

Web usage

HTML pages

impress.js

Blogs & Wikis

Editor

Standalone WaveDromEditor

Windows

Linux

OS X

Community

Contributing

License

datasheet's People

Contributors

Stargazers

Watchers

Forkers

datasheet's Issues

Features

Solutions

Need

Solution

Need

Standards

Solutions

Tools

{Adoc, TOC.json} -> [] -> html1

html1 -> [] -> PDF1

PDF1 -> [toc.js] -> TOC.json

{PDF1, TOC.json} -> [] -> PDF2

Need

Solutions

Need

Solutions

Need

Solutions

Need

Solutions

Releated

Recommend Projects

Recommend Topics

Recommend Org