WithReference.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div>
  3. <v-container grid-list-md text-xs-center fluid>
  4. <v-layout row wrap>
  5. <v-flex xs12>
  6. <h1>Experiment with reference</h1>
  7. <!-- Extract configuration -->
  8. <extract-configuration @setConfig="setConfig" :loading-error-message="loadingErrorMessage" ref="configurator" />
  9. <!--/ Extract configuration -->
  10. </v-flex>
  11. <!-- Loading screen -->
  12. <loader v-if="loadingMessage" :message="loadingMessage" />
  13. <!--/ Loading screen -->
  14. <!-- Experiment -->
  15. <template v-else-if="!loadingErrorMessage">
  16. <v-flex xs12 sm6>
  17. <v-card dark color="primary">
  18. <v-card-text class="px-0">Experiment image</v-card-text>
  19. <v-container class="pa-1">
  20. <template v-for="i in extractConfig.x">
  21. <v-layout row wrap :key="`row-${i}`">
  22. <v-flex
  23. v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
  24. :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
  25. class="pa-0"
  26. >
  27. <v-card flat tile class="d-flex height100">
  28. <div
  29. v-if="anExtract.loading"
  30. class="img-loader"
  31. @click.right.prevent
  32. >
  33. <v-progress-circular
  34. :indeterminate="true"
  35. />
  36. </div>
  37. <v-img
  38. v-else
  39. :src="anExtract.link"
  40. @click.left.prevent="extractAction($event, anExtract)"
  41. @click.right.prevent="extractAction($event, anExtract)"
  42. class="cursor extract"
  43. >
  44. <template v-slot:placeholder>
  45. <v-layout
  46. fill-height
  47. align-center
  48. justify-center
  49. ma-0
  50. >
  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>
  63. <v-card dark color="primary">
  64. <v-card-text>Reference image</v-card-text>
  65. <v-img v-if="referenceImage" :src="referenceImage" />
  66. </v-card>
  67. </v-flex>
  68. </template>
  69. <!--/ Experiment -->
  70. </v-layout>
  71. </v-container>
  72. </div>
  73. </template>
  74. <script>
  75. import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts.vue'
  76. import { API_ROUTES } from '@/functions'
  77. import Loader from '@/components/Loader.vue'
  78. import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
  79. export default {
  80. name: 'ExperimentWithReference',
  81. components: {
  82. Loader,
  83. ExtractConfiguration
  84. },
  85. mixins: [ExperimentBaseExtracts],
  86. data() {
  87. return {
  88. experimentName: 'ExperimentWithReference',
  89. referenceImage: null
  90. }
  91. },
  92. async mounted() {
  93. // Load progress from store into local state
  94. this.loadProgress()
  95. // Load scene data from the API
  96. await Promise.all([
  97. this.getReferenceImage(),
  98. this.getQualitiesList()
  99. ])
  100. // Get default extracts : min quality, cut config : x = 4, y = 4
  101. await this.setConfig(this.extractConfig)
  102. this.$refs.configurator.setDefaultConfig(this.extractConfig)
  103. this.saveProgress()
  104. },
  105. methods: {
  106. // Load the reference image from the API
  107. async getReferenceImage() {
  108. if (this.referenceImage) return
  109. const URI = `${this.getHostURI}${API_ROUTES.getImage(this.sceneName, 'max')}`
  110. const { data } = await fetch(URI).then(res => res.json())
  111. this.referenceImage = this.getHostURI + data.link
  112. this.saveProgress()
  113. }
  114. }
  115. }
  116. </script>
  117. <style scoped>
  118. .height100 {
  119. height: 100%;
  120. }
  121. .img-loader {
  122. height: 100%;
  123. width: 0px;
  124. display: flex;
  125. justify-content: center;
  126. align-items: center;
  127. }
  128. .cursor {
  129. cursor: pointer;
  130. }
  131. .extract:hover {
  132. z-index: 999999;
  133. outline: 2px #f4f4f4 solid;
  134. }
  135. </style>