webgl-plot - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

dist/WbglLine.js

 import { WebglBaseLine } from "./WebglBaseLine";
 export class WebglLine extends WebglBaseLine {
+    //public numPoints: number;
+    //public xy: Float32Array;
+    //public color: ColorRGBA;
+    //public intenisty: number;
+    //public visible: boolean;
+    //public coord: number;
+    /**
+     * Create a new line
+     * @param c :the color of the line
+     * @param numPoints : number of data pints
+     * @example
+     * ```
+     * x= [0,1]
+     * y= [1,2]
+     * line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
+     */
     constructor(c, numPoints) {
@@ -8,3 +24,3 @@ super();
         this.color = c;
-        this.intenisty = 1;
+        this.intensity = 1;
         this.xy = new Float32Array(2 * this.webglNumPoints);
@@ -16,5 +32,15 @@ this.vbuffer = 0;
     }
+    /**
+     *
+     * @param index : the index of the data point
+     * @param x : the horizontal value of the data point
+     */
     setX(index, x) {
         this.xy[index * 2] = x;
     }
+    /**
+     *
+     * @param index : the index of the data point
+     * @param y : the vertical value of the data point
+     */
     setY(index, y) {
@@ -21,0 +47,0 @@ this.xy[index * 2 + 1] = y;

dist/WbglStep.js

@@ -8,3 +8,3 @@ import { WebglBaseLine } from "./WebglBaseLine";
         this.color = c;
-        this.intenisty = 1;
+        this.intensity = 1;
         this.xy = new Float32Array(2 * this.webglNumPoints);
@@ -11,0 +11,0 @@ this.vbuffer = 0;

dist/WebglBaseLine.js

@@ -7,4 +7,5 @@ export class WebglBaseLine {
         this.offsetY = 0;
+        this.loop = false;
     }
 }
 //# sourceMappingURL=WebglBaseLine.js.map

package.json

 {
   "name": "webgl-plot",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "High-performance 2D plotting framework based on native WebGL",
-  "main": "./dist/index",
-  "typings": "./src/index",
+  "main": "./dist/webglplot",
+  "typings": "./src/webglplot",
   "dependencies": {},
   "devDependencies": {
-    "typescript": "^3.7.4"
+    "rollup": "^1.31.1",
+    "typedoc": "^0.16.10",
+    "typescript": "^3.8.2"
   },
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && rollup -c",
+    "doc": "typedoc"
   },
@@ -14,0 +17,0 @@ "repository": {

README.md

 ![Build Action](https://github.com/danchitnis/webgl-plot/workflows/Build/badge.svg "")
 
+## [Live demo 🚀](https://danchitnis.github.io/webgl-plot-examples/)
 
@@ -7,23 +8,68 @@ # webgl-plot
 
- * Simple and efficient 2D WebGL interface
+ * Simple and efficient 2D WebGL framework
  * Using WebGL native line drawing 
- * Using vec2 instead of vec3 to in the vertex shader to decrease the CPU utilization
+ * High update rate which matches the screen refresh rate
  * Full control over the color of each line in each frame
  * No dependencies
- * Works on any browser/platfrom that [supports WebGL](https://caniuse.com/#feat=webgl)
+ * Works on any browser/platform that [supports WebGL](https://caniuse.com/#feat=webgl)
  * Ideal for embedded systems with low resources
  
 
-## What are the use cases?
+## Use cases
 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.
 
 ## Limitations
-cannot change the line width due to the OpenGL implementation of 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 data vector and take a hit on the performance.
+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 data vector and take a hit on the performance.
 
-## Why TypeScript?
-Because it is much more convenient to maintain and scale up. If you are not familiar with TS, then just use the examples as your template.
+## Getting started
+Initialization:
+```javascript
+const canv = document.getElementById("my_canvas");
+const devicePixelRatio = window.devicePixelRatio || 1;
+const numX = Math.round(canv.clientWidth * devicePixelRatio);
+const color = new webglplotBundle.ColorRGBA(Math.random(), Math.random(), Math.random(), 1);
+const line = new webglplotBundle.WebglLine(color, numX);
+const wglp = new webglplotBundle.WebGLplot(canv);
+```
 
-## Getting started
+Add the line to webgl canvas:
+```javascript
+line.linespaceX(-1, 2 / numX);
+wglp.addLine(line);
+```
+
+Configure the requestAnimationFrame call:
+```javascript
+function newFrame() {
+  update();
+  wglp.update();
+  window.requestAnimationFrame(newFrame);
+}
+window.requestAnimationFrame(newFrame);
+```
+
+Add the update function:
+```javascript
+function update() {
+    const freq = 0.001;
+    const amp = 0.5;
+    const noise = 0.1;
+
+    for (let i = 0; i < line.numPoints; i++) {
+        const ySin = Math.sin(Math.PI * i * freq  * Math.PI * 2);
+        const yNoise = Math.random() - 0.5;
+        line.setY(i, ySin * amp + yNoise * noise);
+    }
+}
+```
+
+See this example in [Codepen](https://codepen.io/danchitnis/pen/mdJVEYY) and [JSfiddle](https://jsfiddle.net/danchitnis/mfcw73z2/)
+
+
+## Demos & Examples
 See examples at [webgl-plot-examples](https://github.com/danchitnis/webgl-plot-examples)
 
+## API Documentation
+See [here 📑](https://danchitnis.github.io/webgl-plot/)
+
 ## How to use with embedded systems applications?
@@ -30,0 +76,0 @@ You can use WebUSB, Web Bluetooth, and Serial API. Examples will be provided soon.

src/WbglLine.ts

@@ -7,11 +7,20 @@
 
-   public numPoints: number;
-   public xy: Float32Array;
-   public color: ColorRGBA;
-   public intenisty: number;
-   public visible: boolean;
-   public coord: number;
+   //public numPoints: number;
+   //public xy: Float32Array;
+   //public color: ColorRGBA;
+   //public intenisty: number;
+   //public visible: boolean;
+   //public coord: number;
 
 
-
+   /**
+    * Create a new line
+    * @param c :the color of the line
+    * @param numPoints : number of data pints
+    * @example 
+    * ```
+    * x= [0,1]
+    * y= [1,2]
+    * line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
+    */
    constructor(c: ColorRGBA, numPoints: number) {
@@ -22,3 +31,3 @@ super();
       this.color = c;
-      this.intenisty = 1;
+      this.intensity = 1;
       this.xy = new Float32Array(2 * this.webglNumPoints);
@@ -32,2 +41,7 @@ this.vbuffer = 0;
 
+   /**
+    * 
+    * @param index : the index of the data point 
+    * @param x : the horizontal value of the data point
+    */
    public setX(index: number, x: number): void {
@@ -37,2 +51,7 @@ this.xy[index * 2] = x;
 
+   /**
+    * 
+    * @param index : the index of the data point 
+    * @param y : the vertical value of the data point
+    */
    public setY(index: number, y: number): void {
@@ -39,0 +58,0 @@ this.xy[index * 2 + 1] = y;

src/WbglStep.ts

@@ -15,3 +15,3 @@
       this.color = c;
-      this.intenisty = 1;
+      this.intensity = 1;
       this.xy = new Float32Array(2 * this.webglNumPoints);
@@ -18,0 +18,0 @@ this.vbuffer = 0;

src/WebglBaseLine.ts

@@ -10,3 +10,3 @@ import {ColorRGBA} from "./ColorRGBA";
 
-    public intenisty: number;
+    public intensity: number;
     public visible: boolean;
@@ -24,2 +24,4 @@ public coord: number;
 
+    public loop: boolean;
+
     constructor() {
@@ -30,4 +32,6 @@ this.scaleX = 1;
         this.offsetY = 0;
+
+        this.loop = false;
     }
 
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50349

increased by62.14%

Number of package files

22

increased by10%

Lines of code

990

increased by107.11%

Number of lines in readme file

86

increased by115%

Worsened metrics

Dev dependency count

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes