MatchExtractsWithReference.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <ExperimentBlock
  3. :run-expe="runExpe"
  4. :experiment-name="experimentName"
  5. :scene-name="sceneName"
  6. :loading-message="loadingMessage"
  7. :loading-error-message="loadingErrorMessage"
  8. >
  9. <template v-slot:header>
  10. <!-- Extract configuration -->
  11. <extract-configuration
  12. v-if="lockConfig === false"
  13. @setExtractConfig="setExtractConfig($event, $refs.configurator)"
  14. :loading-error-message="loadingErrorMessage"
  15. ref="configurator"
  16. />
  17. <!--/ Extract configuration -->
  18. </template>
  19. <template v-slot:content>
  20. <v-flex v-if="explanation === true || disableStart === true" xs12 sm12>
  21. <div style="margin-top:10%">
  22. <p v-if="disableStart === false && calibrationScene === true" style="font-size: 1.4em;">
  23. Vous allez voir des images, l'image de droite constitue toujours l'image de référence. Vous devez régler la qualité de l'image de gauche pour qu'elle soit la plus proche de l'image de droite.
  24. La première image est constituée de carré gris, c'est une partie de calibration. Si vous souhaitez régler votre écran (contraste, luminosité) vous pouvez le faire maintenant mais il vous est demandé de ne plus changer ce réglage au cours de l'expérience.
  25. Vous allez ensuite voir des scènes d'image de synthèse. Vous pouvez arrêter l'expérience quand vous souhaitez (ou faire une pause).
  26. </p>
  27. <p v-if="disableStart === true" style="margin-top:2%; color:orange; font-size: 1.4em;">
  28. <strong>Attention !</strong> L'expérience requiert un écran de taille minimale de <strong>1920 x 1080</strong>.
  29. <br />
  30. <br />
  31. Vous pouvez redimensionner la fenêtre de votre navigateur pour poursuivre l'expérience.
  32. </p>
  33. <p v-if="disableStart === false" style="margin-top:2%; color:#007acc; font-size: 1.4em;">
  34. <strong>La résolution de votre fenêtre de navigateur vous permet d'accéder à l'expérience</strong>.
  35. </p>
  36. <v-btn v-if="disableStart === true" @click="startExperiment" color="#007acc" large disabled>Poursuivre l'expérience</v-btn>
  37. <v-btn v-if="disableStart === false" @click="startExperiment" color="#007acc" large>Poursuivre l'expérience</v-btn>
  38. </div>
  39. </v-flex>
  40. <v-flex v-if="haveHelp === true" xs12 sm12>
  41. <div style="margin-top:10%">
  42. <p style="font-size: 1.4em;">
  43. Cette expérience vous propose le visuel deux images, celle de gauche considérée comme dégradée et celle de gauche, sa référence (image sans dégradation visible).
  44. <br />
  45. Vous devez régler la qualité de l'image de gauche pour qu'elle soit la plus proche de l'image de droite.
  46. </p>
  47. <br />
  48. <br />
  49. <p style="font-size: 1.4em;text-align:left">
  50. Pour cela deux actions vous sont proposées :
  51. <br />
  52. <ul>
  53. <li> <strong>clic droit de la souris :</strong> permet d'améliorer la qualité de l'image à l'endroit où de la dégradation vous est encore visible.</li>
  54. <li> <strong>clic gauche de la souris :</strong> permet de revenir à une qualité inférieure de l'image si l'amélioration apportée n'était pas nécessaire (aucune amélioration visible apportée après clic droit).</li>
  55. </ul>
  56. </p>
  57. <v-btn @click="startExperiment" color="#007acc" large>Continuer l'expérience</v-btn>
  58. </div>
  59. </v-flex>
  60. <v-flex v-if="haveBreak === true" xs12 sm12>
  61. <div style="margin-top:10%">
  62. <p style="font-size: 1.4em;">
  63. Nous vous remercions d'avoir participé à cette expérience.
  64. Elle va nous permettre d'améliorer les calculs d'images. Si vous le souhaitez, vous pouvez revenir sur l'expérience via le <a :href="launcherURI" target="_blank">launcher</a> pour revoir de nouvelles images.
  65. </p>
  66. <v-btn @click="startExperiment" color="#007acc" large>Continuer l'expérience</v-btn>
  67. </div>
  68. <!-- Add of newsletter component -->
  69. <Newsletter />
  70. </v-flex>
  71. <v-flex v-if="runExpe === true" xs12 sm6 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px', 'margin-right': 20 + 'px' }">
  72. <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
  73. <!-- <v-card-text class="px-0">Experiment image</v-card-text> -->
  74. <v-container class="pa-1">
  75. <template v-for="i in extractConfig.y">
  76. <v-layout row wrap :key="`row-${i}`">
  77. <v-flex
  78. v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
  79. :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
  80. class="pa-0"
  81. >
  82. <v-card flat tile class="d-flex height100">
  83. <div
  84. v-if="anExtract.loading"
  85. class="img-extract-loader"
  86. @click.right.prevent
  87. >
  88. <v-progress-circular
  89. :indeterminate="true"
  90. />
  91. </div>
  92. <v-img
  93. v-else
  94. :src="anExtract.link"
  95. @click.left.prevent="extractAction($event, anExtract)"
  96. @click.right.prevent="extractAction($event, anExtract)"
  97. class="cursor"
  98. :class="{ 'extract-hover-border': showHoverBorder === true }"
  99. @error="extractsRemovedFromServerFallback"
  100. >
  101. <template v-slot:placeholder>
  102. <v-layout fill-height align-center justify-center ma-0>
  103. <v-progress-circular indeterminate color="grey lighten-5" />
  104. </v-layout>
  105. </template>
  106. </v-img>
  107. </v-card>
  108. </v-flex>
  109. </v-layout>
  110. </template>
  111. </v-container>
  112. </v-card>
  113. </v-flex>
  114. <v-flex v-if="runExpe === true" sm6 xs12 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px' }">
  115. <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
  116. <!-- <v-card-text>Reference image</v-card-text> -->
  117. <v-img v-if="referenceImage" :src="referenceImage" :max-height="maxHeight" :max-width="maxWidth" :min-width="maxWidth" />
  118. </v-card>
  119. </v-flex>
  120. <!-- Experiment validation button -->
  121. <v-layout v-if="runExpe === true" justify-end align-content-end>
  122. <v-text-field
  123. v-model="comment"
  124. label="Ajouter un commentaire ici"
  125. />
  126. <v-btn @click="userHelp" color="#737373" large right>Besoin d'aide ?</v-btn>
  127. <v-btn @click="userBreak" color="#cc7a00" large right>Arrêter ou faire une pause</v-btn>
  128. <v-btn @click="finishExperiment" color="success" large right>Valider & passer à l'image suivante</v-btn>
  129. </v-layout>
  130. <!--/ Experiment validation button -->
  131. </template>
  132. </ExperimentBlock>
  133. </template>
  134. <script>
  135. import { mapGetters } from 'vuex'
  136. import ExperimentBlock from '@/components/ExperimentBlock.vue'
  137. import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
  138. import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
  139. import Newsletter from '@/components/ExperimentsComponents/Newsletter.vue'
  140. export default {
  141. components: {
  142. ExperimentBlock,
  143. ExtractConfiguration,
  144. Newsletter
  145. },
  146. mixins: [ExperimentBaseExtracts],
  147. data() {
  148. return {
  149. referenceImage: null,
  150. maxWidth: null,
  151. maxHeight: null,
  152. launcherURI: null,
  153. explanation: false,
  154. haveBreak: false,
  155. haveHelp: false,
  156. calibrationScene: false,
  157. runExpe: false,
  158. disableStart: false
  159. }
  160. },
  161. computed: {
  162. ...mapGetters(['getHostURI'])
  163. },
  164. async mounted() {
  165. // Load config for this scene to local state
  166. this.loadConfig()
  167. // Load progress from store into local state
  168. this.loadProgress()
  169. this.launcherURI = this.getHostURI + '/launcher/'
  170. let reference = null
  171. // Load scene data from the API
  172. await Promise.all([
  173. this.getImage('max').then(res => (reference = res)),
  174. this.getQualitiesList()
  175. ])
  176. this.referenceImage = reference.link
  177. this.maxWidth = reference.metadata.width
  178. this.maxHeight = reference.metadata.height
  179. // Load the cached configuration in the configurator component
  180. if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
  181. // Load extracts if none were cached
  182. // if (this.extracts.length === 0)
  183. await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
  184. this.saveProgress()
  185. this.loadExperimentState()
  186. // check window size
  187. this.checkWindow()
  188. window.addEventListener('resize', this.checkWindow)
  189. },
  190. methods: {
  191. startExperiment() {
  192. this.runExpe = true
  193. this.explanation = false
  194. this.haveBreak = false
  195. this.haveHelp = false
  196. },
  197. userBreak() {
  198. this.haveBreak = true
  199. this.explanation = false
  200. this.runExpe = false
  201. this.haveHelp = false
  202. },
  203. userHelp() {
  204. this.haveHelp = true
  205. this.haveBreak = false
  206. this.explanation = false
  207. this.runExpe = false
  208. },
  209. loadExperimentState() {
  210. this.haveHelp = false
  211. this.explanation = false
  212. this.haveBreak = false
  213. this.runExpe = false
  214. if (this.sceneName === '50_shades_of_grey') {
  215. this.explanation = true
  216. this.calibrationScene = true
  217. }
  218. else {
  219. this.runExpe = true
  220. }
  221. },
  222. checkWindow() {
  223. // check window screen size
  224. if (window.innerWidth < 1920 || window.innerHeight < 900) {
  225. this.disableStart = true
  226. this.explanation = true
  227. this.runExpe = false
  228. this.haveBreak = false
  229. this.haveHelp = false
  230. }
  231. else {
  232. this.disableStart = false
  233. }
  234. }
  235. }
  236. }
  237. </script>