CalibrationMeasurement.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <ExperimentBlock
  3. :experiment-name="experimentName"
  4. :scene-name="sceneName"
  5. :loading-message="loadingMessage"
  6. :loading-error-message="loadingErrorMessage"
  7. >
  8. <template v-slot:header>
  9. <!-- Extract configuration -->
  10. <extract-configuration
  11. v-if="lockConfig === false"
  12. @setExtractConfig="setExtractConfig($event, $refs.configurator)"
  13. :loading-error-message="loadingErrorMessage"
  14. ref="configurator"
  15. />
  16. <!--/ Extract configuration -->
  17. </template>
  18. <template v-slot:content>
  19. <v-flex xs12 sm6>
  20. <v-card dark color="primary" :max-width="maxWidth">
  21. <v-card-text class="px-0">Experiment image</v-card-text>
  22. <v-container class="pa-1">
  23. <template v-for="i in extractConfig.y">
  24. <v-layout row wrap :key="`row-${i}`">
  25. <v-flex
  26. v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
  27. :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
  28. class="pa-0"
  29. >
  30. <v-card flat tile class="d-flex height100">
  31. <div v-if="anExtract.loading" class="img-extract-loader" @click.right.prevent>
  32. <v-progress-circular :indeterminate="true" />
  33. </div>
  34. <v-img
  35. v-else
  36. :src="anExtract.link"
  37. @click.left.prevent="extractAction($event, anExtract)"
  38. @click.right.prevent="extractAction($event, anExtract)"
  39. class="cursor"
  40. :class="{ 'extract-hover-border': showHoverBorder === true }"
  41. >
  42. <template v-slot:placeholder>
  43. <v-layout fill-height align-center justify-center ma-0>
  44. <v-progress-circular indeterminate color="grey lighten-5" />
  45. </v-layout>
  46. </template>
  47. </v-img>
  48. </v-card>
  49. </v-flex>
  50. </v-layout>
  51. </template>
  52. </v-container>
  53. </v-card>
  54. </v-flex>
  55. <v-flex sm6 xs12>
  56. <v-card dark color="primary" :max-width="maxWidth">
  57. <v-card-text>Reference image</v-card-text>
  58. <v-container v-if="referenceExtracts" class="pa-1">
  59. <template v-for="i in extractConfig.y">
  60. <v-layout row wrap :key="`row-${i}`">
  61. <v-flex
  62. v-for="(anExtract, index) in referenceExtracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
  63. :key="`reference-extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
  64. class="pa-0"
  65. >
  66. <v-card flat tile class="d-flex height100">
  67. <v-img :src="anExtract.link">
  68. <template v-slot:placeholder>
  69. <v-layout fill-height align-center justify-center ma-0>
  70. <v-progress-circular indeterminate color="grey lighten-5" />
  71. </v-layout>
  72. </template>
  73. </v-img>
  74. </v-card>
  75. </v-flex>
  76. </v-layout>
  77. </template>
  78. </v-container>
  79. </v-card>
  80. </v-flex>
  81. <!-- Experiment validation button -->
  82. <v-layout justify-end align-content-end>
  83. <v-text-field
  84. v-model="comment"
  85. label="Add a comment here"
  86. />
  87. <v-btn @click="finishExperiment" color="primary" large right>Finish experiment</v-btn>
  88. </v-layout>
  89. <!--/ Experiment validation button -->
  90. </template>
  91. </ExperimentBlock>
  92. </template>
  93. <script>
  94. import ExperimentBlock from '@/components/ExperimentBlock.vue'
  95. import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
  96. import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
  97. import { API_ROUTES, shuffleArray } from '@/functions'
  98. export default {
  99. components: {
  100. ExperimentBlock,
  101. ExtractConfiguration
  102. },
  103. mixins: [ExperimentBaseExtracts],
  104. data() {
  105. return {
  106. referenceExtracts: null,
  107. extractsIndices: null,
  108. maxWidth: null,
  109. maxHeight: null
  110. }
  111. },
  112. async mounted() {
  113. // Load config for this scene to local state
  114. this.loadConfig()
  115. // Load progress from store into local state
  116. this.loadProgress()
  117. let reference = null
  118. // Load scene data from the API
  119. if (this.qualities === null) {
  120. const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(
  121. this.sceneName
  122. )}`
  123. const { data } = await fetch(URI).then(res => res.json())
  124. this.qualities = data
  125. // remove reference
  126. this.qualities.pop()
  127. }
  128. // get reference size of image
  129. await Promise.all([
  130. this.getImage('max').then(res => (reference = res))
  131. ])
  132. this.maxWidth = reference.metadata.width
  133. this.maxHeight = reference.metadata.height
  134. // Load the cached configuration in the configurator component
  135. if (this.lockConfig === false)
  136. this.$refs.configurator.setDefaultConfig(this.extractConfig)
  137. // Load extracts if none were cached
  138. if (this.extracts.length === 0)
  139. await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
  140. // if no cache let random shuffle extract zone
  141. if (this.extractsIndices === null) {
  142. let indices = [
  143. ...Array(this.extractConfig.x * this.extractConfig.y).keys()
  144. ]
  145. this.extractsIndices = shuffleArray(indices)
  146. // get extract for reference image
  147. const data = await this.getExtracts('max')
  148. this.referenceExtracts = data.extracts.map((url, i) => ({
  149. link: url,
  150. quality: data.info.image.quality,
  151. zone: i + 1,
  152. index: i
  153. }))
  154. // reorder extracts following random indices
  155. let referenceExtractsRandom = []
  156. let extractsRandom = []
  157. for (const [i, index] of this.extractsIndices.entries()) {
  158. referenceExtractsRandom.push(this.referenceExtracts[index])
  159. extractsRandom.push(this.extracts[index])
  160. extractsRandom[i].index = i
  161. }
  162. this.referenceExtracts = referenceExtractsRandom
  163. this.extracts = extractsRandom
  164. }
  165. this.saveProgress()
  166. }
  167. }
  168. </script>