https://github.com/dcmox/heatmapper
Track mouse movements and generate a heat map
https://github.com/dcmox/heatmapper
canvas heatmap html javascript mouse-tracking typescript
Last synced: 5 months ago
JSON representation
Track mouse movements and generate a heat map
- Host: GitHub
- URL: https://github.com/dcmox/heatmapper
- Owner: dcmox
- License: gpl-3.0
- Created: 2020-01-09T02:17:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-19T23:34:04.000Z (over 5 years ago)
- Last Synced: 2025-04-08T01:42:23.714Z (6 months ago)
- Topics: canvas, heatmap, html, javascript, mouse-tracking, typescript
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 33
- Watchers: 2
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# heatmapper-js
Heatmapper allows you to generate heatmaps based on mouse movements quickly using HTML canvas. The output can be saved as a PNG or stored for later use. This script is meant to run in the browser and has not been made to run server-side as of yet!
## Features
Some supported functions include:
* generateCoordMap - Generates data for your heatmap based on your mouse movements. This function is ran on this demo's page load.
* generateHeatMap - Generates a heatmap based on a coordinate map. This can accept multiple maps and will automatically handle them appropriately.
* getScreenSize - Gets the current viewport size within your browser.
* getScreenSizes - Gets all of the viewport sizes as you adjust the size of your browser window.
* coordMapToJson - Converts the stored coordinates to JSON based on a map ID.
* loadCoordMap/loadCoordMaps - Loads coordinates into the window context for generating a map.
* getCoordMap - Get a current instance of a coord map being stored or generated.
## Usage
You can start recording mouse movements using the following HTML:
```js
generateCoordMap()
```
To render the heatmap on-screen:
```html
Display Heat Map
```
or:
```html
Display Heat Map
```
To store the generated output without rendering it on-screen:
```js
let output = generateHeatMap()
```
The parameters for generateHeatMap are defined in the [heatmapper.ts](heatmapper.ts) file:
```
dest?: string | HTMLElement - target element or query string to render the output to.
dimensions?: IDimensions - object containing width and height or maxWidth and maxHeight
mapIds: string[] = ['default'] - mapIds to render ('default' is the default when using generateCoordMap)
screenSize?: string - the screenSize to use for coordinates, by default it is the browsers current viewport size
```
## Demo
See the [tests/tests.html](tests/test.html) page for a visual demonstration.