ExperimentBaseAreSameImages.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div>
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. import ExperimentBase from '@/mixins/ExperimentBase'
  8. import { mapGetters } from 'vuex'
  9. import { rand } from '@/functions'
  10. import { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
  11. export default {
  12. name: 'ExperimentBaseAreSameImages',
  13. mixins: [ExperimentBase],
  14. data() {
  15. return {
  16. maxTestCount: null,
  17. testCount: 1,
  18. image1: null,
  19. image2: null
  20. }
  21. },
  22. computed: {
  23. ...mapGetters(['getHostURI'])
  24. },
  25. methods: {
  26. scrollToChoiceButtons() {
  27. const ele = document.querySelector('#choice')
  28. if (ele) ele.scrollIntoView({ behavior: 'smooth' })
  29. },
  30. // Get images links for a test
  31. async getTest(leftQuality, rightQuality) {
  32. const res = await Promise.all([this.getImage(leftQuality), this.getImage(rightQuality)])
  33. const [image1, image2] = res.map(x => {
  34. x.link = `${this.getHostURI}${x.link}`
  35. return x
  36. })
  37. return { image1, image2 }
  38. },
  39. // Get a test with random qualities
  40. getRandomTest() {
  41. return this.getTest(
  42. this.qualities[rand(0, this.qualities.length - 1)],
  43. this.qualities[rand(0, this.qualities.length - 1)]
  44. )
  45. },
  46. // Get a test with random qualities
  47. getReferenceTest() {
  48. // Randomly choose which is the reference image (0 = left, 1 = right)
  49. const isReferenceLeft = rand(0, 1) === 0
  50. // Randomly choose a quality for the other image
  51. const randomQuality = this.qualities[rand(0, this.qualities.length - 1)]
  52. const res = [this.qualities[this.qualities.length - 1], randomQuality]
  53. this.referenceImagePosition = isReferenceLeft ? 'left' : 'right'
  54. const table = isReferenceLeft ? res : res.reverse()
  55. return this.getTest(table[0], table[1])
  56. },
  57. /** An action was triggered, load a new test and save progression
  58. * @param {Boolean} areTheSame Are the images the same
  59. * @param {Function} getTestFn Function to be called to get the next tests
  60. * @param {Function} additionalData Object to concat to log
  61. * @returns {void}
  62. */
  63. async areTheSameAction(areTheSame, getTestFn, additionalData) {
  64. this.loadingMessage = 'Loading new test...'
  65. this.loadingErrorMessage = null
  66. try {
  67. this.testCount++
  68. const obj = Object.assign({
  69. image1: this.image1,
  70. image2: this.image2,
  71. areTheSame,
  72. experimentName: this.experimentName,
  73. sceneName: this.sceneName,
  74. referenceImagePosition: this.referenceImagePosition || undefined
  75. }, additionalData || {})
  76. this.sendMessage({ msgId: experimentMsgId.DATA, msg: obj })
  77. const { image1, image2 } = await getTestFn()
  78. this.image1 = image1
  79. this.image2 = image2
  80. // Experiment end
  81. if (this.testCount > this.maxTestCount) return this.finishExperiment()
  82. }
  83. catch (err) {
  84. console.error('Failed to load new test', err)
  85. this.loadingErrorMessage = 'Failed to load new test. ' + err.message
  86. }
  87. finally {
  88. this.loadingMessage = null
  89. this.saveProgress()
  90. }
  91. },
  92. // Finish an experiment, sending full data to the server
  93. // Don't forget to surcharge this function when using this mixin to add more data
  94. finishExperiment() {
  95. const obj = {
  96. experimentName: this.experimentName,
  97. sceneName: this.sceneName
  98. }
  99. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  100. this.setExperimentDone({ experimentName: this.experimentName, sceneName: this.sceneName, done: true })
  101. this.$router.push(`/experiments/${this.experimentName}/${this.sceneName}/validated`)
  102. }
  103. }
  104. }
  105. </script>