Creation of new experiment for calibration

experimentConfig.default.js

@@ -120,5 +120,16 @@ export const experiments = {
       whitelist: null,
       blacklist: null
     }
+  },
+  CalibrationMeasurement: {
+    mixins: [mixins.ExperimentBaseExtracts],
+    defaultConfig: {
+      lockConfig: true
+    },
+    scenesConfig: {},
+    availableScenes: {
+      whitelist: ['50_shades_of_grey'],
+      blacklist: null
+    }
   }
 }

src/router/experiments.js

@@ -5,7 +5,8 @@ export default [
     component: () => import('@/views/Experiments/MatchExtractsWithReference'),
     props: true,
     meta: {
-      fullName: 'Match extracts qualities to reference image'
+      fullName: 'Cliquer sur les zones de l\'image de gauche (clic droit de la souris)  afin de la faire correspondre à celle de droite'
+      // fullName: 'Match extracts qualities to reference image'
     }
   },
   {
@@ -61,5 +62,14 @@ export default [
     meta: {
       fullName: 'Check if reconstructed image with one different extract is correct'
     }
+  },
+  {
+    path: '/experiments/CalibrationMeasurement/:sceneName',
+    name: 'CalibrationMeasurement',
+    component: () => import('@/views/Experiments/CalibrationMeasurement'),
+    props: true,
+    meta: {
+      fullName: 'Cliquer sur les zones de l\'image de gauche (clic droit de la souris)  afin de faire correspondre la teinte à celle de droite'
+    }
   }
 ]

src/views/Experiments/CalibrationMeasurement.vue

@@ -0,0 +1,131 @@
+<template>
+  <ExperimentBlock
+    :experiment-name="experimentName"
+    :scene-name="sceneName"
+    :loading-message="loadingMessage"
+    :loading-error-message="loadingErrorMessage"
+  >
+    <template v-slot:header>
+      <!-- Extract configuration -->
+      <extract-configuration
+        v-if="lockConfig === false"
+        @setExtractConfig="setExtractConfig($event, $refs.configurator)"
+        :loading-error-message="loadingErrorMessage"
+        ref="configurator"
+      />
+      <!--/ Extract configuration -->
+    </template>
+
+    <template v-slot:content>
+      <v-flex xs12 sm6>
+        <v-card dark color="primary">
+          <v-card-text class="px-0">Experiment image</v-card-text>
+
+          <v-container class="pa-1">
+            <template v-for="i in extractConfig.y">
+              <v-layout row wrap :key="`row-${i}`">
+                <v-flex
+                  v-for="(anExtract, index) in extracts.slice(extractConfig.x * (i - 1), (extractConfig.x * i))"
+                  :key="`extract-${i}-${extractConfig.x}-${extractConfig.y}-${index}-${anExtract.quality}`"
+                  class="pa-0"
+                >
+                  <v-card flat tile class="d-flex height100">
+                    <div
+                      v-if="anExtract.loading"
+                      class="img-extract-loader"
+                      @click.right.prevent
+                    >
+                      <v-progress-circular
+                        :indeterminate="true"
+                      />
+                    </div>
+                    <v-img
+                      v-else
+                      :src="anExtract.link"
+                      @click.left.prevent="extractAction($event, anExtract)"
+                      @click.right.prevent="extractAction($event, anExtract)"
+                      class="cursor"
+                      :class="{ 'extract-hover-border': showHoverBorder === true }"
+                    >
+                      <template v-slot:placeholder>
+                        <v-layout
+                          fill-height
+                          align-center
+                          justify-center
+                          ma-0
+                        >
+                          <v-progress-circular indeterminate color="grey lighten-5" />
+                        </v-layout>
+                      </template>
+                    </v-img>
+                  </v-card>
+                </v-flex>
+              </v-layout>
+            </template>
+          </v-container>
+        </v-card>
+      </v-flex>
+      <v-flex sm6 xs12>
+        <v-card dark color="primary">
+          <v-card-text>Reference image</v-card-text>
+          <v-img v-if="referenceImage" :src="referenceImage" />
+        </v-card>
+      </v-flex>
+      <!-- Experiment validation button -->
+      <v-layout justify-end align-content-end>
+        <v-btn @click="finishExperiment" color="primary" large right>Finish experiment</v-btn>
+      </v-layout>
+      <!--/ Experiment validation button -->
+    </template>
+  </ExperimentBlock>
+</template>
+
+<script>
+import ExperimentBlock from '@/components/ExperimentBlock.vue'
+import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts'
+import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
+import { API_ROUTES } from '@/functions'
+
+export default {
+  components: {
+    ExperimentBlock,
+    ExtractConfiguration
+  },
+  mixins: [ExperimentBaseExtracts],
+
+  data() {
+    return {
+      referenceImage: null
+    }
+  },
+
+  async mounted() {
+    // Load config for this scene to local state
+    this.loadConfig()
+
+    // Load progress from store into local state
+    this.loadProgress()
+
+    // Load scene data from the API
+    await this.getImage('max').then(res => (this.referenceImage = res.link))
+
+    if (this.qualities == null){
+        const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneName)}`
+        const { data } = await fetch(URI).then(res => res.json())
+        this.qualities = data
+
+        // remove reference
+        this.qualities.pop()
+    }
+
+
+    // Load the cached configuration in the configurator component
+    if (this.lockConfig === false) this.$refs.configurator.setDefaultConfig(this.extractConfig)
+
+    // Load extracts if none were cached
+    if (this.extracts.length === 0) await this.setExtractConfig(this.extractConfig, this.$refs.configurator)
+
+    this.saveProgress()
+  }
+}
+</script>

src/views/Experiments/PercentQualityRandom.vue

@@ -30,7 +30,7 @@
 
       <!-- Quality Slider -->
       <v-flex xs12>
-        <v-subheader class="pl-0">Mark from 0 to 100 how high you think the quality is</v-subheader>
+        <v-subheader class="pl-0">Donner votre score entre 0 et 100</v-subheader>
         <v-slider
           v-model="selectedQuality"
           thumb-label