CalibrationMeasurement.vue 6.7 KB

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