CalibrationMeasurement.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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">
  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
  32. v-if="anExtract.loading"
  33. class="img-extract-loader"
  34. @click.right.prevent
  35. >
  36. <v-progress-circular
  37. :indeterminate="true"
  38. />
  39. </div>
  40. <v-img
  41. v-else
  42. :src="anExtract.link"
  43. @click.left.prevent="extractAction($event, anExtract)"
  44. @click.right.prevent="extractAction($event, anExtract)"
  45. class="cursor"
  46. :class="{ 'extract-hover-border': showHoverBorder === true }"
  47. >
  48. <template v-slot:placeholder>
  49. <v-layout
  50. fill-height
  51. align-center
  52. justify-center
  53. ma-0
  54. >
  55. <v-progress-circular indeterminate color="grey lighten-5" />
  56. </v-layout>
  57. </template>
  58. </v-img>
  59. </v-card>
  60. </v-flex>
  61. </v-layout>
  62. </template>
  63. </v-container>
  64. </v-card>
  65. </v-flex>
  66. <v-flex sm6 xs12>
  67. <v-card dark color="primary">
  68. <v-card-text>Reference image</v-card-text>
  69. <v-img v-if="referenceImage" :src="referenceImage" />
  70. </v-card>
  71. </v-flex>
  72. <!-- Experiment validation button -->
  73. <v-layout justify-end align-content-end>
  74. <v-btn @click="finishExperiment" color="primary" large right>Finish experiment</v-btn>
  75. </v-layout>
  76. <!--/ Experiment validation button -->
  77. </template>
  78. </ExperimentBlock>
  79. </template>
  80. <script>
  81. import ExperimentBlock from '@/components/ExperimentBlock.vue'
  82. import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
  83. import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
  84. import { API_ROUTES } from '@/functions'
  85. export default {
  86. components: {
  87. ExperimentBlock,
  88. ExtractConfiguration
  89. },
  90. mixins: [ExperimentBaseExtracts],
  91. data() {
  92. return {
  93. referenceImage: null
  94. }
  95. },
  96. async mounted() {
  97. // Load config for this scene to local state
  98. this.loadConfig()
  99. // Load progress from store into local state
  100. this.loadProgress()
  101. // Load scene data from the API
  102. await this.getImage('max').then(res => (this.referenceImage = res.link))
  103. if (this.qualities == null){
  104. const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneName)}`
  105. const { data } = await fetch(URI).then(res => res.json())
  106. this.qualities = data
  107. // remove reference
  108. this.qualities.pop()
  109. }
  110. // Load the cached configuration in the configurator component
  111. if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
  112. // Load extracts if none were cached
  113. if (this.extracts.length === 0) await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
  114. this.saveProgress()
  115. }
  116. }
  117. </script>