ExperimentBaseAreSameImages.vue 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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 { EXPERIMENT as experimentMsgId } from '@/../config.messagesId'
  10. export default {
  11. name: 'ExperimentBaseAreSameImages',
  12. mixins: [ExperimentBase],
  13. data() {
  14. return {
  15. maxTestCount: null,
  16. testCount: 1,
  17. image1: null,
  18. image2: null
  19. }
  20. },
  21. computed: {
  22. ...mapGetters(['getHostURI'])
  23. },
  24. methods: {
  25. scrollToChoiceButtons() {
  26. const ele = document.querySelector('#choice')
  27. if (ele) ele.scrollIntoView({ behavior: 'smooth' })
  28. },
  29. // Get images links for a test
  30. async getTest(leftQuality, rightQuality) {
  31. const [image1, image2] = await Promise.all([this.getImage(leftQuality), this.getImage(rightQuality)])
  32. return { image1, image2 }
  33. },
  34. /** An action was triggered, load a new test and save progression
  35. * @param {Boolean} areTheSame Are the images the same
  36. * @param {Function} getTestFn Function to be called to get the next tests
  37. * @param {Function} additionalData Object to concat to log
  38. * @returns {void}
  39. */
  40. async areTheSameAction(areTheSame, getTestFn, additionalData) {
  41. this.loadingMessage = 'Loading new test...'
  42. this.loadingErrorMessage = null
  43. try {
  44. this.testCount++
  45. const obj = Object.assign({
  46. image1: this.image1,
  47. image2: this.image2,
  48. areTheSame,
  49. experimentName: this.experimentName,
  50. sceneName: this.sceneName,
  51. referenceImagePosition: this.referenceImagePosition || undefined
  52. }, additionalData || {})
  53. this.sendMessage({ msgId: experimentMsgId.DATA, msg: obj })
  54. // Experiment end
  55. if (this.testCount > this.maxTestCount) return this.finishExperiment()
  56. const { image1, image2 } = await getTestFn()
  57. this.image1 = image1
  58. this.image2 = image2
  59. }
  60. catch (err) {
  61. console.error('Failed to load new test', err)
  62. this.loadingErrorMessage = 'Failed to load new test. ' + err.message
  63. }
  64. finally {
  65. this.loadingMessage = null
  66. this.saveProgress()
  67. }
  68. },
  69. // Finish an experiment, sending full data to the server
  70. // Don't forget to surcharge this function when using this mixin to add more data
  71. finishExperiment() {
  72. const obj = {
  73. experimentName: this.experimentName,
  74. sceneName: this.sceneName
  75. }
  76. this.sendMessage({ msgId: experimentMsgId.VALIDATED, msg: obj })
  77. this.setExperimentFinished()
  78. this.$router.push(`/experiments/${this.experimentName}/${this.sceneName}/validated`)
  79. }
  80. }
  81. }
  82. </script>