|
@@ -22,6 +22,7 @@ export default {
|
|
y: null
|
|
y: null
|
|
},
|
|
},
|
|
extracts: [],
|
|
extracts: [],
|
|
|
|
+ extractsInfos: null,
|
|
|
|
|
|
showHoverBorder: null
|
|
showHoverBorder: null
|
|
}
|
|
}
|
|
@@ -56,6 +57,7 @@ export default {
|
|
this.extractConfig.y = config.y
|
|
this.extractConfig.y = config.y
|
|
const data = await this.getExtracts()
|
|
const data = await this.getExtracts()
|
|
const hostURI = this.getHostURI
|
|
const hostURI = this.getHostURI
|
|
|
|
+ this.extractsInfos = data.info
|
|
this.extracts = data.extracts.map((url, i) => ({
|
|
this.extracts = data.extracts.map((url, i) => ({
|
|
link: hostURI + url,
|
|
link: hostURI + url,
|
|
quality: data.info.image.quality,
|
|
quality: data.info.image.quality,
|
|
@@ -81,12 +83,14 @@ export default {
|
|
|
|
|
|
// An action was triggered, load extracts and save progression
|
|
// An action was triggered, load extracts and save progression
|
|
async extractAction(event, extractObj) {
|
|
async extractAction(event, extractObj) {
|
|
- console.log(event, extractObj)
|
|
|
|
const { index, nextQuality, precQuality, quality } = extractObj
|
|
const { index, nextQuality, precQuality, quality } = extractObj
|
|
|
|
|
|
- let newQuality
|
|
|
|
- if (event.button === 0) newQuality = precQuality // Left click
|
|
|
|
- if (event.button === 2) newQuality = nextQuality // Right click
|
|
|
|
|
|
+ let action, newQuality
|
|
|
|
+ if (event.button === 0) action = 'needLess' // Left click
|
|
|
|
+ if (event.button === 2) action = 'needMore' // Right click
|
|
|
|
+
|
|
|
|
+ if (action === 'needLess') newQuality = precQuality
|
|
|
|
+ if (action === 'needMore') newQuality = nextQuality
|
|
|
|
|
|
// Do not load a new extract if same quality
|
|
// Do not load a new extract if same quality
|
|
if (newQuality === quality) return
|
|
if (newQuality === quality) return
|
|
@@ -94,6 +98,9 @@ export default {
|
|
// Set loading state
|
|
// Set loading state
|
|
this.extracts[index].loading = true
|
|
this.extracts[index].loading = true
|
|
try {
|
|
try {
|
|
|
|
+ const collectedData = this.getClickDataObject(event, extractObj, action)
|
|
|
|
+ this.sendMessage({ msgId: experimentMsgId.DATA, msg: collectedData })
|
|
|
|
+
|
|
// Loading new extract
|
|
// Loading new extract
|
|
const data = await this.getExtracts(newQuality)
|
|
const data = await this.getExtracts(newQuality)
|
|
this.extracts[index].link = this.getHostURI + data.extracts[index]
|
|
this.extracts[index].link = this.getHostURI + data.extracts[index]
|
|
@@ -101,9 +108,6 @@ export default {
|
|
this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
|
|
this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
|
|
this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
|
|
this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
|
|
this.extracts[index].loading = false
|
|
this.extracts[index].loading = false
|
|
-
|
|
|
|
- // Sending event to WebSocket server
|
|
|
|
- // this.sendMessage({ msgId: experimentMsgId.DATA, msg: obj })
|
|
|
|
}
|
|
}
|
|
catch (err) {
|
|
catch (err) {
|
|
// TODO: toast message if fail
|
|
// TODO: toast message if fail
|
|
@@ -115,6 +119,71 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ getClickDataObject(event, extractObj, action) {
|
|
|
|
+ const { index } = extractObj
|
|
|
|
+
|
|
|
|
+ const clientSideData = {
|
|
|
|
+ extractSize: {
|
|
|
|
+ width: event.target.clientWidth,
|
|
|
|
+ height: event.target.clientHeight
|
|
|
|
+ },
|
|
|
|
+ imageSize: {
|
|
|
|
+ width: event.target.clientWidth * this.extractConfig.x,
|
|
|
|
+ height: event.target.clientHeight * this.extractConfig.y
|
|
|
|
+ },
|
|
|
|
+ clickPosition: {
|
|
|
|
+ extract: {
|
|
|
|
+ x: event.offsetX,
|
|
|
|
+ y: event.offsetY
|
|
|
|
+ },
|
|
|
|
+ image: {
|
|
|
|
+ x: event.offsetX + (this.extracts[index].index % this.extractConfig.x) * event.target.clientWidth,
|
|
|
|
+ y: event.offsetY + (Math.floor(this.extracts[index].index / this.extractConfig.x)) * event.target.clientHeight
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const calculatedRealData = {}
|
|
|
|
+ calculatedRealData.extractSize = {
|
|
|
|
+ width: this.extractsInfos.extractsSize.width,
|
|
|
|
+ height: this.extractsInfos.extractsSize.height
|
|
|
|
+ }
|
|
|
|
+ calculatedRealData.imageSize = {
|
|
|
|
+ width: this.extractsInfos.image.metadata.width,
|
|
|
|
+ height: this.extractsInfos.image.metadata.height
|
|
|
|
+ }
|
|
|
|
+ calculatedRealData.clickPosition = {
|
|
|
|
+ extract: {
|
|
|
|
+ x: Math.floor((calculatedRealData.imageSize.width * clientSideData.clickPosition.extract.x) / clientSideData.imageSize.width),
|
|
|
|
+ y: Math.floor((calculatedRealData.imageSize.height * clientSideData.clickPosition.extract.y) / clientSideData.imageSize.height)
|
|
|
|
+ },
|
|
|
|
+ image: {
|
|
|
|
+ x: Math.floor((calculatedRealData.imageSize.width * clientSideData.clickPosition.image.x) / clientSideData.imageSize.width),
|
|
|
|
+ y: Math.floor((calculatedRealData.imageSize.height * clientSideData.clickPosition.image.y) / clientSideData.imageSize.height)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // Sending event to WebSocket server
|
|
|
|
+ const loggedObj = {
|
|
|
|
+ experimentName: this.experimentName,
|
|
|
|
+ sceneName: this.sceneName,
|
|
|
|
+ extractConfig: this.extractConfig,
|
|
|
|
+ clickedExtract: {
|
|
|
|
+ link: this.extracts[index].link,
|
|
|
|
+ quality: this.extracts[index].quality,
|
|
|
|
+ nextQuality: this.extracts[index].nextQuality,
|
|
|
|
+ precQuality: this.extracts[index].precQuality,
|
|
|
|
+ zone: this.extracts[index].zone,
|
|
|
|
+ index: this.extracts[index].index
|
|
|
|
+ },
|
|
|
|
+ action,
|
|
|
|
+ clientSideData,
|
|
|
|
+ calculatedRealData
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return loggedObj
|
|
|
|
+ },
|
|
|
|
+
|
|
// Finish an experiment, sending full data to the server
|
|
// Finish an experiment, sending full data to the server
|
|
// Don't forget to surcharge this function when using this mixin to add more data
|
|
// Don't forget to surcharge this function when using this mixin to add more data
|
|
finishExperiment() {
|
|
finishExperiment() {
|