Recording user data in background (mouse, scroll, timing etc.)

[zylemma]

https://stackoverflow.com/questions/7790725/javascript-track-mouse-position Here is a Mouse Position Tracking issue on StackOverflow @jwham92

[zylemma]

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event This is what Nick recommended us to start with. I think definitely this one MouseEvent

[zylemma]

Hi everyone, I'm kind figure out the data recording code here, but I'm not sure how to save these data. Do we save data on the server or locally? @net-art-and-cultures/data-bodies P5.js library is used for data collection.

function setup () {
}
function draw () {
}

const clickPos = []
function mouseClicked() {
  clickPos.push({
      x: mouseX,
      y: mouseY
  })
  const clickData = JSON.stringify(clickPos)
  console.log('click: ' + clickData)
}

const movePos = []
function mouseMoved() {
  movePos.push({
      x: mouseX,
      y: mouseY
  })
  const moveData = JSON.stringify(movePos)
  console.log('move: ' + moveData)
}

const wheelPos = []
function mouseWheel () {
  wheelPos.push({
      x: mouseX,
      y: mouseY
  })
  const wheelData = JSON.stringify(wheelPos)
  console.log('wheel: ' + wheelData)
}

[nbriz]

@zylemma this looks great, i think the answer to ur question is both. i think initially u want to save the data locally to the visitor's browser, but if i remember correctly, i think the idea is that the visitor has the option to click a button on the addon popup window that will allow them to additionally send the locally saved data up to the server so that it can be part of the gallery (if they choose to)

so to start, i'd focus on figuring out how to save the data locally first (we can handle sending it up to the server in a separate task). there are a few different ways to save data locally: cookies, localStorage, indexedDB, etc. if u open ur browsers developer tools (i'm thinking of Firefox specifically) there is a tab called "Storage", there u can see the different forms of local storage. u can use this "Storage Inspector" tab to inspect the data u have stored there, similar to how u can use the "Inspector" tab to inspect the HTML/CSS code of a page, or the JavaScript "Console" tab to check on JavaScript errors of the page. in ur particular case, i'm thinking u'll either want to use localStorage or indexedDB, research those 2 browser APIs && try them out to see which one u think works better in ur case.