feat: Functioning mouse heatmap tracking.

src/components/webpage_container/StudySite.jsx

@@ -0,0 +1,51 @@
+import React, {useEffect} from "react";
+import h337 from "heatmap.js";
+import { MOUSE_MODE, HEATMAP_MAX } from "../../core/Constants";
+
+var heatmapInstance = h337.create({
+    container: document.body,
+    radius: 20
+});
+
+export function StudySite(props) {
+
+    useEffect(() => {
+        heatmapInstance.setDataMax(HEATMAP_MAX);
+          var addData;
+      
+          if(MOUSE_MODE) {
+            const mouseDataFunc = function(ev) {
+              heatmapInstance.addData({
+                x: ev.layerX,
+                y: ev.layerY,
+                value: 1
+              });
+            };
+      
+            addData = mouseDataFunc;
+          } else {
+            const touchDataFunc = function(ev) {
+              heatmapInstance.addData({
+                x: ev.layerX,
+                y: ev.layerY,
+                value: 1
+              });
+            };
+            addData = touchDataFunc;
+          }
+      
+          if(MOUSE_MODE) {
+            document.body.addEventListener("mousemove", addData, false);
+          } else {
+            document.body.addEventListener("touchmove", addData, false);
+            document.body.addEventListener("touchstart", addData, false);
+            document.body.addEventListener("touchend", addData, false);
+          }
+    });
+
+    return (<>{props.children}</>);
+}
+
+export function getHeatmapData() {
+    return heatmapInstance.getData();
+}

src/core/Constants.jsx

@@ -1,2 +1,2 @@
-export const MOUSE_MODE = false;
+export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;

src/index.css

@@ -13,3 +13,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.heatmap-canvas {
+  pointer-events: none;
+}

src/pages/TestPage.jsx

@@ -1,12 +1,18 @@
 import React from "react";
-import InfoPageComponent from "../components/InfoPageComponent";
 import { getTranslation } from "../core/i18n/I18NHandler";
 import WebpageBanner from "../components/webpage_container/WebpageBanner";
 import { SensorLogger } from "../core/log/SensorLogger";
+import { StudySite, getHeatmapData } from "../components/webpage_container/StudySite";
+
+export default class TestPage extends React.Component {
+
 
-export default class TestPage extends InfoPageComponent {
 
     render() {
-        return (<InfoPageComponent><WebpageBanner translationKey="hello_world" /><p>{getTranslation("hello_world")}</p><button onClick={function(){console.log(SensorLogger.getSensorLog())}}>Heeeyyy</button></InfoPageComponent>);
+        var clickFunction = function(){
+            SensorLogger.pushToMouseLog(getHeatmapData());
+            console.log(SensorLogger.getSensorLog());
+        };
+        return (<StudySite><WebpageBanner translationKey="hello_world" /><p onMouseOver={clickFunction}>{getTranslation("hello_world")}</p><button>Teeest</button></StudySite>);
     }
 }