MatchExtractsWithReferenceAll.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  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
  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. @error="extractsRemovedFromServerFallback"
  48. >
  49. <template v-slot:placeholder>
  50. <v-layout fill-height align-center justify-center ma-0>
  51. <v-progress-circular indeterminate color="grey lighten-5" />
  52. </v-layout>
  53. </template>
  54. </v-img>
  55. </v-card>
  56. </v-flex>
  57. </v-layout>
  58. </template>
  59. </v-container>
  60. </v-card>
  61. </v-flex>
  62. <v-flex sm6 xs12 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px' }">
  63. <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
  64. <!-- <v-card-text>Reference image</v-card-text> -->
  65. <v-img v-if="referenceImage" :src="referenceImage" :max-height="maxHeight" :max-width="maxWidth" :min-width="maxWidth" />
  66. </v-card>
  67. </v-flex>
  68. <!-- Experiment validation button -->
  69. <v-layout justify-end align-content-end>
  70. <v-text-field
  71. v-model="comment"
  72. label="Add a comment here"
  73. />
  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. export default {
  85. components: {
  86. ExperimentBlock,
  87. ExtractConfiguration
  88. },
  89. mixins: [ExperimentBaseExtracts],
  90. data() {
  91. return {
  92. referenceImage: null,
  93. maxWidth: null,
  94. maxHeight: null
  95. }
  96. },
  97. async mounted() {
  98. // Load config for this scene to local state
  99. this.loadConfig()
  100. // Load progress from store into local state
  101. this.loadProgress()
  102. let reference = null
  103. // Load scene data from the API
  104. await Promise.all([
  105. this.getImage('max').then(res => (reference = res)).catch(e => console.log(e)),
  106. this.getQualitiesList()
  107. ])
  108. this.referenceImage = reference.link
  109. this.maxWidth = reference.metadata.width
  110. this.maxHeight = reference.metadata.height
  111. // Load the cached configuration in the configurator component
  112. if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
  113. // Load extracts if none were cached
  114. // if (this.extracts.length === 0)
  115. await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
  116. this.saveProgress()
  117. }
  118. }
  119. </script>