Parcourir la source

add of explanation during experiment

Jérôme BUISINE il y a 3 ans
Parent
commit
22aec1bf73

+ 6 - 1
src/components/ExperimentBlock.vue

@@ -15,7 +15,7 @@
           </v-layout>
           -->
 
-          <h2>"{{ $route.meta.fullName }}"</h2>
+          <h2 v-if="runExpe === true">"{{ $route.meta.fullName }}"</h2>
           <!-- <h3>{{ sceneName }}</h3> -->
 
           <slot name="header"></slot>
@@ -63,6 +63,11 @@ export default {
       type: String,
       required: false,
       default: null
+    },
+    runExpe: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   }
 }

+ 69 - 7
src/views/Experiments/MatchExtractsWithReference.vue

@@ -1,5 +1,6 @@
 <template>
   <ExperimentBlock
+    :run-expe="runExpe"
     :experiment-name="experimentName"
     :scene-name="sceneName"
     :loading-message="loadingMessage"
@@ -17,7 +18,30 @@
     </template>
 
     <template v-slot:content>
-      <v-flex xs12 sm6 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px', 'margin-right': 20 + 'px' }">
+      <v-flex v-if="explanation === true" xs12 sm12>
+        <div style="margin-top:15%">
+          <p>
+            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.
+            La première image est constitué 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.
+            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).
+          </p>
+
+          <v-btn @click="startExperiment" color="#007acc" large>Commencer l'expérience</v-btn>
+        </div>
+      </v-flex>
+
+      <v-flex v-if="haveBreak === true" xs12 sm12>
+        <div style="margin-top:15%">
+          <p>
+            Nous vous remercions d'avoir participé à cette expérience.
+            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.
+          </p>
+
+          <v-btn @click="startExperiment" color="#007acc" large>Continuer l'expérience</v-btn>
+        </div>
+      </v-flex>
+
+      <v-flex v-if="runExpe === true" xs12 sm6 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px', 'margin-right': 20 + 'px' }">
         <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
           <!-- <v-card-text class="px-0">Experiment image</v-card-text> -->
 
@@ -61,19 +85,22 @@
           </v-container>
         </v-card>
       </v-flex>
-      <v-flex sm6 xs12 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px' }">
+      <v-flex v-if="runExpe === true" sm6 xs12 :style="{ 'max-width': maxWidth + 'px', 'min-width': maxWidth + 'px' }">
         <v-card dark color="primary" :max-width="maxWidth" :min-width="maxWidth">
           <!-- <v-card-text>Reference image</v-card-text> -->
           <v-img v-if="referenceImage" :src="referenceImage" :max-height="maxHeight" :max-width="maxWidth" :min-width="maxWidth" />
         </v-card>
       </v-flex>
       <!-- Experiment validation button -->
-      <v-layout justify-end align-content-end>
+      <v-layout v-if="runExpe === true" justify-end align-content-end>
         <v-text-field
           v-model="comment"
-          label="Add a comment here"
+          label="Ajouter un commentaire ici"
         />
-        <v-btn @click="finishExperiment" color="primary" large right>Finish experiment</v-btn>
+
+        <v-btn @click="userBreak" color="primary" large right>Faire une pause</v-btn>
+
+        <v-btn @click="finishExperiment" color="success" large right>Passser à l'image suivante</v-btn>
       </v-layout>
       <!--/ Experiment validation button -->
     </template>
@@ -81,6 +108,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import ExperimentBlock from '@/components/ExperimentBlock.vue'
 import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
 import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
@@ -96,10 +125,16 @@ export default {
     return {
       referenceImage: null,
       maxWidth: null,
-      maxHeight: null
+      maxHeight: null,
+      launcherURI: null,
+      explanation: false,
+      haveBreak: false,
+      runExpe: false
     }
   },
-
+  computed: {
+    ...mapGetters(['getHostURI'])
+  },
   async mounted() {
     // Load config for this scene to local state
     this.loadConfig()
@@ -107,6 +142,8 @@ export default {
     // Load progress from store into local state
     this.loadProgress()
 
+    this.launcherURI = this.getHostURI + '/launcher/'
+
     let reference = null
 
     // Load scene data from the API
@@ -128,6 +165,31 @@ export default {
     await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
 
     this.saveProgress()
+    this.loadExperimentState()
+  },
+  methods: {
+    startExperiment() {
+      this.explanation = false
+      this.haveBreak = false
+      this.runExpe = true
+    },
+    userBreak() {
+      this.haveBreak = true
+      this.explanation = false
+      this.runExpe = false
+    },
+    loadExperimentState() {
+      this.explanation = false
+      this.haveBreak = false
+      this.runExpe = false
+
+      if (this.sceneName === '50_shades_of_grey') {
+        this.explanation = true
+      }
+      else {
+        this.runExpe = true
+      }
+    }
   }
 }
 </script>