From ab4da9bf9406593b348b6145dfbc11031fe060d2 Mon Sep 17 00:00:00 2001
From: Denis Thiessen <mail@denisthiessen.de>
Date: Sat, 18 May 2024 21:36:56 +0200
Subject: [PATCH] feat: Functioning mouse heatmap tracking.

---
 .../webpage_container/StudySite.jsx           | 51 +++++++++++++++++++
 src/core/Constants.jsx                        |  2 +-
 src/index.css                                 |  4 ++
 src/pages/TestPage.jsx                        | 12 +++--
 4 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 src/components/webpage_container/StudySite.jsx

diff --git a/src/components/webpage_container/StudySite.jsx b/src/components/webpage_container/StudySite.jsx
new file mode 100644
index 0000000..e072770
--- /dev/null
+++ b/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();
+}
\ No newline at end of file
diff --git a/src/core/Constants.jsx b/src/core/Constants.jsx
index 39929e7..8181079 100644
--- a/src/core/Constants.jsx
+++ b/src/core/Constants.jsx
@@ -1,2 +1,2 @@
-export const MOUSE_MODE = false;
+export const MOUSE_MODE = true;
 export const HEATMAP_MAX = 999;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 1d4ba57..20bade3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,3 +13,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.heatmap-canvas {
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/src/pages/TestPage.jsx b/src/pages/TestPage.jsx
index 23c58ba..786ec33 100644
--- a/src/pages/TestPage.jsx
+++ b/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>);
     }
 }
\ No newline at end of file