https://github.com/stagas/x-plot
A Web Component that plots zoomable and pannable waveforms.
https://github.com/stagas/x-plot
audio plot wave waveform zoom
Last synced: 8 months ago
JSON representation
A Web Component that plots zoomable and pannable waveforms.
- Host: GitHub
- URL: https://github.com/stagas/x-plot
- Owner: stagas
- License: mit
- Created: 2021-11-22T09:47:31.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-01T14:21:23.000Z (over 3 years ago)
- Last Synced: 2025-03-25T11:21:51.850Z (9 months ago)
- Topics: audio, plot, wave, waveform, zoom
- Language: TypeScript
- Homepage:
- Size: 452 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
x-plot 
A Web Component that plots zoomable and pannable waveforms.
npm i x-plot
pnpm add x-plot
yarn add x-plot
## Examples
# multiple
Try it live
#view source example/multiple.ts
```ts
import { PlotElement } from 'x-plot'
customElements.define('x-plot', PlotElement)
document.body.innerHTML = /*html*/ `
`
const plots = document.querySelectorAll('x-plot') as NodeListOf
const rate = 44100
const sine = (i: number, hz: number) =>
Math.sin(hz * (i * (1 / rate)) * Math.PI * 2)
plots[0].data = Array(44100).fill(0).map((_, i) => sine(i, 1))
plots[1].data = Array(44100).fill(0).map((_, i) => sine(i, 10))
plots[2].data = Array(44100).fill(0).map((_, i) => sine(i, 100))
plots[3].data = [1, 0, -1, 0, 1, 0, -1]
```
web 
Try it live
#view source example/web.ts
```ts
import { PlotElement } from 'x-plot'
customElements.define('x-plot', PlotElement)
const plot = new PlotElement()
plot.id = 'demo'
document.body.appendChild(plot)
let n = 0
const sine = (i: number, hz: number) =>
Math.sin(hz * (i * (1 / 1000)) * Math.PI * 2)
const loop = () => {
requestAnimationFrame(loop)
plot.data = Array(1000).fill(0).map(_ => sine(++n, 4))
n += 1000 / 4 / 60 // sampleRate/hz/frameRate to loop video capture every 1 second
}
loop()
```
## API
# PlotElement – Plot. src/x-plot.ts#L30
# constructor()
# new PlotElement()
$ src/work/stagas/sigl/dist/types/sigl.d.ts#L25 Context<PlotElement & JsxContext<PlotElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> # autoResize = false – Autoresize to fit parent element's size. src/x-plot.ts#L40 boolean
background = '#235' src/x-plot.ts#L37 string
color = '#4f4' src/x-plot.ts#L38 string
context src/work/stagas/sigl/dist/types/sigl.d.ts#L26 ContextClass<PlotElement & JsxContext<PlotElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> data – Array-like number data to plot, range -1..+1, 0=center, -1=bottom, +1=top. src/x-plot.ts#L47 ArrayLike<number>
dispatch src/work/stagas/sigl/dist/types/events.d.ts#L4 Dispatch<# (name, detail, init)
get src/x-plot.ts#L52 # height = 60 src/x-plot.ts#L34 number
host src/work/stagas/sigl/dist/types/sigl.d.ts#L24 # lineWidth = 1 src/x-plot.ts#L35 number
offsetX = 0 – Horizontal panning position. src/x-plot.ts#L44 number
onPointerMove src/x-plot.ts#L61 EventHandler<Window, PointerEvent>
onWheel src/x-plot.ts#L62 EventHandler<PlotElement, WheelEvent>
onmounted EventHandler<PlotElement, CustomEvent<any>>
onunmounted EventHandler<PlotElement, CustomEvent<any>>
pixelRatio = window.devicePixelRatio src/x-plot.ts#L36 number
pointer = ... – Pointer data src/x-plot.ts#L56 # pointerDown = false – Pointer down state src/x-plot.ts#L54 boolean
root = ... src/x-plot.ts#L31 ShadowRoot
screen src/x-plot.ts#L48 {
# canvas src/x-plot.ts#L49
HTMLCanvasElement
ctx src/x-plot.ts#L50 CanvasRenderingContext2D
width = 200 src/x-plot.ts#L33 number
zoom = 1 – Zoom scale: 1=no zoom. src/x-plot.ts#L42 number
created(ctx) # ctx
Context<PlotElement & JsxContext<PlotElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> created(ctx) =>
- void
mounted($) src/x-plot.ts#L64 # $
Context<PlotElement & JsxContext<PlotElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> mounted($) =>
- void
on(name) # name
on<K>(name) =>
On<Fn<[ EventHandler<PlotElement, LifecycleEvents & object [K]> ], Off>>
toJSON()
toJSON() =>
Pick<PlotElement, keyof PlotElement>
## Credits
- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework
## Contributing
[Fork](https://github.com/stagas/x-plot/fork) or [edit](https://github.dev/stagas/x-plot) and submit a PR.
All contributions are welcome!
## License
MIT © 2022 [stagas](https://github.com/stagas)