Repository files navigation

multi-line high-performance 2D plotting library using native WebGL. The advantages are:

• Simple and efficient 2D WebGL library
• Using WebGL native line drawing
• High update rate which matches the screen's refresh rate
• Works for both dynamic and static data
• Full control over the color of each line in each frame
• No dependencies
• Works on any browser/platform thatsupports WebGL
• Compatible withOffScreenCanvas andWebWorkers for offloading cpu time from the main thread
• Ideal for embedded systems with low resources or large datasets

Dynamic: When plotting real-time multiple waveforms are required. For example, software-based oscilloscopes, Arduino, microcontrollers, FPGA user interfaces. This framework also can be used in combination with ElectronJS.

Static: Enables rapid pan and zoom capability for inspecting very large datasets. See thestatic example

cannot change the line width due to the OpenGL implementation of a line. The OpenGL specification only guarantees a minimum of a single pixel line width. There are other solutions to increase the line width however they substantially increase the size of the data vector and take a hit on the performance. Top performance (refresh rate, memory, etc) is the top priority for this library.

Create an HTML canvas with an appropriate width or height:

<div><canvasstyle="width: 100%;"id="my_canvas"></canvas></div>

Import WebGL-Plot library using ES6 modules:

importWebGLplot,{WebglLine,ColorRGBA}from"webgl-plot";

Prepare the canvas

constcanvas=document.getElementById("my_canvas");constdevicePixelRatio=window.devicePixelRatio||1;canvas.width=canvas.clientWidth*devicePixelRatio;canvas.height=canvas.clientHeight*devicePixelRatio;

Initialization:

constnumX=canvas.width;constcolor=newColorRGBA(Math.random(),Math.random(),Math.random(),1);constline=newWebglLine(color,numX);constwglp=newWebGLplot(canvas);

Add the line to webgl canvas:

line.lineSpaceX(-1,2/numX);wglp.addLine(line);

Configure the requestAnimationFrame call:

functionnewFrame(){update();wglp.update();requestAnimationFrame(newFrame);}requestAnimationFrame(newFrame);

Add the update function:

functionupdate(){constfreq=0.001;constamp=0.5;constnoise=0.1;for(leti=0;i<line.numPoints;i++){constySin=Math.sin(Math.PI*i*freq*Math.PI*2);constyNoise=Math.random()-0.5;line.setY(i,ySin*amp+yNoise*noise);}}

See examples based on vanilla JS atwebgl-plot-examples

See examples based onReact

SeeSPAD Simulation which use WebGL-Plot as an oscilloscope display

For a basic React example see here:

React website is under development...

https://webgl-plot-react.vercel.app/ ⚛

To use WebGL-Plot as a JS pre-bundled package first import the following in your HTML file:

<scriptsrc="https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.umd.min.js"></script>

See examples on how to use this bundle inCodepen andJSfiddle

For ES6 module and direct browser import use:

<scripttype="module"src="your-code.js"></script>

and in your-code.js:

importWebGLplot,{WebglLine,ColorRGBA,}from"https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.esm.min.js";

Thanks toTimDaub for testing the ES6 module.

Notice that this method is only recommended for test and small codes.

Seehere 📑

You can use WebUSB, Web Bluetooth, and Serial API. You can useComPort for a basic implementation of Serial API

npm inpm run build

MIT