diff --git a/.gitignore b/.gitignore
index cbadebc..da6d62d 100644
--- 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
index ea0aeb0..e420a99 100644
--- 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.
## 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,7 +64,7 @@ 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.
@@ -63,12 +72,14 @@ 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
new file mode 100644
index 0000000..3ed4557
Binary files /dev/null and b/demo/9267.jpg differ
diff --git a/demo/heatmap1.html b/demo/heatmap1.html
index fea449a..e8e4176 100644
--- a/demo/heatmap1.html
+++ b/demo/heatmap1.html
@@ -7,22 +7,24 @@