Merge pull request #19 from nswamy14/master

Merging master branch changes
nswamy14 · Dec 30, 2023 · 3a3f681 · 3a3f681
2 parents 51c62df + 9c5a9d0
commit 3a3f681
Show file tree

Hide file tree

Showing 19 changed files with 6,953 additions and 4,010 deletions.
diff --git a/.gitignore b/.gitignore
@@ -25,3 +25,5 @@ yarn-error.log*
 
 # Removing Map files
 dist/*.js.map
+
+libs
diff --git a/README.md b/README.md
@@ -4,9 +4,10 @@ Open source javascript module for rendering high performance, large scale heatma
 Visual Heatmap is based on advanced graphical rendering context - WebGL/Shaders. It can render 500,000+ data points with a good framerate.
 
 <p align="center">
-  <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a>
-  <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a>
-   <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a>
+<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap4.png" width=1200> </a>
 </p>
 
 ## Installing
@@ -19,7 +20,7 @@ Download source code from below links
 
 * [visualHeatmap.min.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.min.js)
 * [visualHeatmap.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.js)
-* [visualHeatmap.esm.browser.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.esm.browser.js)
+* [visualHeatmap.esm.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.esm.js)
 
 Visual-Heatmap is written in ES6 Modules. To import use below syntax
 
@@ -31,12 +32,20 @@ import Heatmap from 'visual-heatmap'
 ## VisualHeatmapJs - API
 
 ### visualHeatmap()
-visualHeatmap provides a API to create context **WebGL**. API accepts containerId and config as an input. A layer will be created under the provided Div #containerId.
+visualHeatmap provides a API to create context **WebGL**. API accepts container/containerId and config as an input. A layer will be created under the provided Div #containerId.
 ```Javascript
 let instance = Heatmap('#containerId', {
         size: 30.0,
-        max: 100,
-        blur: 1.0,
+        max: 100,  // if not set, will be derived from data
+        min: 0,  // if not set, will be derived from data
+        intensity: 1.0,
+        background: {
+            url: "path",
+            width: 100, // if not set, naturalWidth of the image will be considered
+            height: 100, // if not set, naturalWidth of the image will be considered
+            x: 0,
+            y: 0
+        },
         gradient: [{
             color: [0, 0, 255, 1.0],
             offset: 0
@@ -55,20 +64,22 @@ let instance = Heatmap('#containerId', {
         }]
     });
 ```
-**ContainerId** CSS Query selector which identifies container.
+**Container/ContainerId** The container div element or a string CSS Query selector which identifies the container.
 
 **Config**
 Object with config properties.
 ```
 {
 size : Radius of the data point, in pixels.
 max : Max data Value for relative gradient computation.
-blur : Blur factor.
+min : Min data Value for relative gradient computation.
+intensity : intensity factor.
 opacity : Opacity factor.
 rotationAngle : Rotation angle.
 translate : translate vector [x, y].
 zoom : Zoom Factor.
 gradient : Color Gradient, array of objects with color value and offset.
+background: To set background of the heatMap
 }
 ```
 
@@ -80,33 +91,44 @@ Accepts an array of data points with 'x', 'y' and 'value'.  [Demo](https://nswam
 Accepts an array of data points with 'x', 'y' and 'value' and a flag to specify to apply existing canvas transformations on the newly added data points.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
-### instance.setMax()
+### instance.setMax(number)
 To set max data value, for relative gradient calculations.
 
-### instance.setTranslate()
+### instance.setMin(number)
+To set min data value, for relative gradient calculations.
+
+### instance.setTranslate([number, number])
 Api to perform translate transformation on the canvas. Accepts array[x, y] as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
-### instance.setZoom()
+### instance.setZoom(number)
 Api to perform zoom transformation on the canvas. Accepts float value as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
-### instance.setRotationAngle()
+### instance.setRotationAngle(number)
 Api to perform rotation transformation on the canvas. Accepts angle in radians.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
-### instance.setSize()
+### instance.setSize(number)
 Api to set point radius. Accepts float value as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
-### instance.setBlur()
-Api to set Blur factor. Accepts float value as an input.
+### instance.setIntensity(number)
+Api to set Intensity factor. Accepts float value as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
-### instance.setOpacity()
+### instance.setOpacity(number)
 Api to set Opacity factor. Accepts float value as an input.
 Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
 
+### instance.setBackgroundImage({ url: , x: , y: , height: , width: })
+Api to set Background image. Accepts Object with { Url, height, width, x, and y} properties as input
+Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap_withImage.html)
+
+### instance.projection({x: , y: })
+Api to get projected co-ordinates relative to the heatmap layer.
+Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
+
 ### instance.clear()
 Api to clear canvas.
 
diff --git a/demo/9267.jpg b/demo/9267.jpg
diff --git a/demo/heatmap1.html b/demo/heatmap1.html
@@ -7,22 +7,24 @@
 <body style="height: 100%">
 
 <div id="canvas" style="height: 100%;width:100%;">
-    <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%">
+    <!-- <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%"> -->
 </div>
+<script type="text/javascript" src="./../dist/visualHeatmap.js"></script>
 <script type="text/javascript" src="./dat.gui.min.js"></script>
 
-<script type="module">
-
-import Heatmap from './../dist/visualHeatmap.esm.browser.js';
-
+<script type="text/javascript">
 let data = [];
-console.log(Heatmap);
-let instance = Heatmap('#canvas', {
-        size: 5.0,
+let instance = visualHeatmap('#canvas', {
+        size: 15.0,
         max: 100,
-        blur: 1.0,
+        intensity: 1.0,
+        backgroundImage: {
+            url: "./world_map_PNG14.png",
+            x: 0,
+            y: 0
+        },
         gradient: [{
-            color: [0, 0, 0, 0.00],
+            color: [0, 0, 0, 0.0],
             offset: 0
         }, {
             color: [0, 0, 255, 0.2],
@@ -41,10 +43,10 @@
 
     var gui = new dat.GUI();
     var Params = function() {
-        this.points = 100000;
-        this.size = 5;
+        this.points = 20000;
+        this.size = 15;
         this.opacity = 1.0;
-        this.blur = 1.0;
+        this.intensity = 1.0;
         this.transalteX = 0;
         this.transalteY = 0;
         this.zoom = 1.0;
@@ -58,14 +60,14 @@
         data = generateData(params.points);
         instance.renderData(data);
     } );
-	gui.add( params, 'size', 1, 100 ).onChange( function () {
+    gui.add( params, 'size', 15, 100 ).onChange( function () {
         instance.setSize(params.size);
     } );
     gui.add( params, 'opacity', 0, 1 ).onChange( function () {
         instance.setOpacity(params.opacity);
     } );
-    gui.add( params, 'blur', 0, 1 ).onChange( function () {
-        instance.setBlur(params.blur);
+    gui.add( params, 'intensity', 0, 1 ).onChange( function () {
+        instance.setIntensity(params.intensity);
     } );
     gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
         instance.setTranslate([params.transalteX, params.transalteY]);
@@ -80,24 +82,26 @@
         instance.setRotationAngle(params.rotationAngle);
     } );
 
-    data = generateData(100000);
+    data = generateData(20000);
     instance.renderData(data);
 
     function generateData (count) {
         var data = [];
-        let val = 50
         for (let i = 0; i < count; i++) {
             let val = Math.random() * 100
             data.push({
                 x: random(0 ,instance.width),
                 y: random(0 ,instance.height),
                 velX: random(-0.5, 0.25),
                 velY: random(-0.5, 0.25),
-                value: val
+                value: val,
+                label: "label_"+ i
             });
         }
         return data;
     }
+
+
 
     function random(min, max) {
         var num = (Math.random() * (max - min)) + min;

diff --git a/demo/heatmap2.html b/demo/heatmap2.html
@@ -7,18 +7,25 @@
 <body style="height: 100%">
 
 <div id="canvas" style="height: 100%;width:100%;background: #000;">
-    <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%">
+    <!-- <img src="world_map_PNG14.png" alt="Smiley face" style="position: absolute; width: 100%; height: 100%"> -->
 </div>
 <script type="text/javascript" src="./dat.gui.min.js"></script>
 
 <script type="module">
 
-import Heatmap from './../dist/visualHeatmap.esm.browser.js';
+import Heatmap from './../dist/visualHeatmap.esm.js';
 
 let data = [];
 let instance = Heatmap('#canvas', {
-        size: 5.0,
+        size: 15.0,
         max: 100,
+        backgroundImage: {
+            url: "./world_map_PNG14.png",
+            // height: 553.5* 2,
+            // width: 864*2,
+            x: 0,
+            y: 0
+        },
         gradient: [{
             color: [0, 0, 0, 0.0],
             offset: 0.0
@@ -35,11 +42,11 @@
     });
 
     var gui = new dat.GUI();
-    var Params = function() {
+    var ParamsCon = function() {
         this.points = 100000;
-        this.size = 5;
+        this.size = 15;
         this.opacity = 1.0;
-        this.blur = 1.0;
+        this.intensity = 1.0;
         this.transalteX = 0;
         this.transalteY = 0;
         this.zoom = 1.0;
@@ -48,15 +55,15 @@
         }
     };
 
-    var params = new Params();
-	gui.add( params, 'size', 1, 100 ).onChange( function () {
+    var params = new ParamsCon();
+	gui.add( params, 'size', 10, 100 ).onChange( function () {
         instance.setSize(params.size);
     } );
     gui.add( params, 'opacity', 0, 1 ).onChange( function () {
         instance.setOpacity(params.opacity);
     } );
-    gui.add( params, 'blur', 0, 1 ).onChange( function () {
-        instance.setBlur(params.blur);
+    gui.add( params, 'intensity', 0, 1 ).onChange( function () {
+        instance.setIntensity(params.intensity);
     } );
     gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
         instance.setTranslate([params.transalteX, params.transalteY]);

diff --git a/demo/heatmap3.html b/demo/heatmap3.html
@@ -12,14 +12,21 @@
 
 <script type="module">
 
-import Heatmap from './../dist/visualHeatmap.esm.browser.js';
+import Heatmap from './../dist/visualHeatmap.esm.js';
 
 let data = [];
 let instance = Heatmap('#canvas', {
         size: 100.0,
         max: 100,
-        blur: 1.0,
+        intensity: 1.0,
         zoom: 1.0,
+        backgroundImage: {
+            url: "./world_map_PNG14.png",
+            // height: 553.5* 2,
+            // width: 864*2,
+            x: 0,
+            y: 0
+        },
         gradient: [{
             color: [255, 255, 255, 0.0],
             offset: 0
@@ -30,7 +37,7 @@
             color: [166, 255, 115, 1.0],
             offset: 0.45
         }, {
-            color: [255, 255, 0, 0.5],
+            color: [255, 255, 0, 1.0],
             offset: 0.75
         }, {
             color: [255, 0, 0, 1.0],
@@ -39,11 +46,11 @@
     });
 
     var gui = new dat.GUI();
-    var Params = function() {
+    var ParamsCon = function() {
         this.points = 10000;
         this.size = 100;
         this.opacity = 1.0;
-        this.blur = 1.0;
+        this.intensity = 1.0;
         this.transalteX = 0;
         this.transalteY = 0;
         this.zoom = 1.0;
@@ -52,15 +59,15 @@
         }
     };
 
-    var params = new Params();
+    var params = new ParamsCon();
 	gui.add( params, 'size', 1, 100 ).onChange( function () {
         instance.setSize(params.size);
     } );
     gui.add( params, 'opacity', 0, 1 ).onChange( function () {
         instance.setOpacity(params.opacity);
     } );
-    gui.add( params, 'blur', 0, 1 ).onChange( function () {
-        instance.setBlur(params.blur);
+    gui.add( params, 'intensity', 0, 1 ).onChange( function () {
+        instance.setIntensity(params.intensity);
     } );
     gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
         instance.setTranslate([params.transalteX, params.transalteY]);
@@ -77,11 +84,10 @@
 
     var dataPush = true;
     document.getElementById('canvas').addEventListener("mousemove", function(e){
-        if (dataPush) {
-            instance.addData([{
+        if (dataPush) {            instance.addData([{
                 x: e.x,
                 y: e.y,
-                value: 20
+                value: 10 +Math.random() * 50
             }], true);
             dataPush = false;
             setTimeout(idleFlag, 20);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,3 +25,5 @@ yarn-error.log*

		# Removing Map files
		dist/*.js.map

		libs