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 (

{getTranslation("hello_world")}

); + var clickFunction = function(){ + SensorLogger.pushToMouseLog(getHeatmapData()); + console.log(SensorLogger.getSensorLog()); + }; + return (

{getTranslation("hello_world")}

); } } \ No newline at end of file