Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 13 days ago
JSON representation

A Web Component that plots zoomable and pannable waveforms.

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  
} & __module & {
  #  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  #  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)        
          
          #  name        
        

        Event | Narrow<K, string>
                
      #  detail        #  init        
        

        CustomEventInit<any>
                
        
      

      <K, E>(name, detail, init)   =>  
      

        any
      

        
>        #  get      src/x-plot.ts#L52  
    

    #  (i)        
          
          #  i        
        

        number
                
        
      

      (i)   =>  
      

        number
      

        
        #  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  #  onmounted        #  onunmounted        #  pixelRatio   =   window.devicePixelRatio    src/x-plot.ts#L36  
    

    number
            
#  pointer   =   ...   – Pointer data  src/x-plot.ts#L56  
    

    {
    

      #  id   =   -1      
      

      number
              
    #  x   =   0      
      

      number
              
    #  y   =   0      
      

      number
              
    }        
#  pointerDown   =   false   – Pointer down state  src/x-plot.ts#L54  
    

    boolean
            
#  root   =   ...    src/x-plot.ts#L31  
    

    ShadowRoot
            
#  screen      src/x-plot.ts#L48  #  width   =   200    src/x-plot.ts#L33  
    

    number
            
#  zoom   =   1   – Zoom scale: 1=no zoom.  src/x-plot.ts#L42  
    

    number
            
#  created(ctx)          
created(ctx)   =>  
    void
    #  mounted($)      src/x-plot.ts#L64    
mounted($)   =>  
    void
    #  on(name)        
        
        #  name        
      
    

    on<K>(name)   =>  
    

      

      On<Fn<[  EventHandler<PlotElement, LifecycleEvents & object  [K]>  ], Off>>
        
#  toJSON()        



## 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)