Experiment template

src/App.vue

@@ -116,6 +116,7 @@ export default {
         await fn()
       }
       catch (err) {
+        console.error(err)
         this.loadingErrorMessage = err.message
         return
       }
@@ -137,7 +138,7 @@ export default {
 
 <style scoped>
 .reset-button {
-  position: absolute;
+  position: fixed;
   right: 0;
   bottom: 0;
   z-index: 999;

src/components/HostConfig.vue

@@ -79,6 +79,10 @@ export default {
     }
   },
 
+  mounted() {
+    this.$router.push('/')
+  },
+
   methods: {
     ...mapActions(['setHostConfig']),
     reset() {
@@ -97,8 +101,8 @@ export default {
         await this.setHostConfig(this.config)
       }
       catch (err) {
-        this.configErrorMessage = err.message
         console.error(err)
+        this.configErrorMessage = err.message
         return
       }
       finally {

src/components/ResetAppButton.vue

@@ -115,8 +115,8 @@ export default {
         this.showDialog = false
       }
       catch (err) {
-        console.error('Error while resetting the app', err)
-        this.$refs.toast.show('Error while resetting the app. ' + err.message, 'error', 10000)
+        console.error('Failed to reset the app', err)
+        this.$refs.toast.show('Failed to reset the app. ' + err.message, 'error', 10000)
       }
       this.$router.push('/')
     }

src/functions.js

@@ -4,12 +4,12 @@ export const API_ROUTES = {
 
   listScenes: () => `${API_PREFIX}/listScenes`,
 
-  listSceneQualities: sceneName => `${API_PREFIX}/listSceneQualities?sceneName=${new URLSearchParams({ sceneName })}`,
+  listSceneQualities: sceneName => `${API_PREFIX}/listSceneQualities?${new URLSearchParams({ sceneName })}`,
 
   getImage: (sceneName, imageQuality, nearestQuality = false) => `${API_PREFIX}/getImage?${new URLSearchParams({ sceneName, imageQuality, nearestQuality })}`,
 
   getImageExtracts: (sceneName, imageQuality, horizontalExtractCount, verticalExtractCount, nearestQuality = false) =>
-    `${API_PREFIX}/getImage?${new URLSearchParams({
+    `${API_PREFIX}/getImageExtracts?${new URLSearchParams({
       sceneName,
       imageQuality,
       horizontalExtractCount,

src/views/Experiments/WithReference.vue

@@ -2,43 +2,191 @@
   <div>
     <v-container grid-list-md text-xs-center fluid>
       <v-layout row wrap>
-        <v-flex xs6>
-          <v-card dark color="primary">
-            <v-card-text class="px-0">Experience image</v-card-text>
-            <v-img src="https://diran.univ-littoral.fr/api/images/Appart1opt02/appartAopt_00900.png" />
-          </v-card>
-        </v-flex>
-        <v-flex xs6>
-          <v-card dark color="primary">
-            <v-card-text>Reference image</v-card-text>
-            <v-img src="https://diran.univ-littoral.fr/api/images/Appart1opt02/appartAopt_00900.png" />
+        <v-flex xs12>
+          <h1>Experiment with reference</h1>
+          <v-card dark>
+            <v-container grid-list-sm fluid>
+              <v-layout row wrap>
+                <v-flex
+                  xs12
+                >
+                  <h1>Configuration</h1>
+                  <v-card-text class="px-0">Extracts per line (horizontal)</v-card-text>
+                  <v-slider
+                    v-model="experimentConfig.x"
+                    always-dirty
+                    persistent-hint
+                    thumb-label="always"
+                  />
+
+                  <v-card-text class="px-0">Extracts per row (vertical)</v-card-text>
+                  <v-slider
+                    v-model="experimentConfig.y"
+                    always-dirty
+                    persistent-hint
+                    thumb-label="always"
+                  />
+
+                  <v-btn @click="setConfig" :disabled="!isConfigNew">Confirm</v-btn>
+
+                  <v-alert v-if="loadingErrorMessage" :value="true" type="error" v-text="loadingErrorMessage" />
+                </v-flex>
+              </v-layout>
+            </v-container>
           </v-card>
         </v-flex>
+        <!-- Loading screen -->
+        <loader v-if="loadingMessage" :message="loadingMessage" />
+        <!--/ Loading screen -->
+
+        <!-- Experiment -->
+        <template v-else-if="!loadingErrorMessage">
+          <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.x">
+                  <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">
+                        <v-img
+                          :src="anExtract.link"
+                        >
+                          <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>
+        </template>
+      <!--/ Experiment -->
       </v-layout>
     </v-container>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import { API_ROUTES } from '@/functions'
+import Loader from '@/components/Loader.vue'
 
 export default {
   name: 'ExperimentWithReference',
+  components: {
+    Loader
+  },
   props: {
     sceneId: {
       type: String,
       required: true
     }
   },
+  data() {
+    return {
+      referenceImage: null,
+      qualities: null,
+
+      experimentConfig: { // Experiment config sliders
+        x: 8,
+        y: 4,
+        error: null
+      },
+      extractConfig: { // Updated when `setConfig` is called
+        x: 8,
+        y: 4
+      },
+      loadingMessage: null,
+      loadingErrorMessage: null,
+      extracts: []
+    }
+  },
   computed: {
+    ...mapGetters(['getHostURI']),
+    isConfigNew() {
+      return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
+    }
   },
+
   async mounted() {
-    await this.getExtracts()
+    await this.getReferenceImage()
+    await this.getQualitiesList()
+
+    // Get default extracts : min quality, cut config : x = 4, y = 4
+    await this.setConfig()
   },
   methods: {
-    async getExtracts() {
-      const scenes = await fetch(`${this.getHostURI}${API_ROUTES.getImage()}`).then(res => res.json())
+    ...mapActions([]),
+
+    async getReferenceImage() {
+      const URI = `${this.getHostURI}${API_ROUTES.getImage(this.sceneId, 'max')}`
+      const { data } = await fetch(URI).then(res => res.json())
+      this.referenceImage = this.getHostURI + data.link
+    },
+
+    async getQualitiesList() {
+      const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneId)}`
+      const { data } = await fetch(URI).then(res => res.json())
+      this.qualities = data
+    },
+
+    async getExtracts(quality = 'min') {
+      const URI = `${this.getHostURI}${API_ROUTES.getImageExtracts(this.sceneId, quality, this.extractConfig.x, this.extractConfig.y)}`
+      const { data } = await fetch(URI)
+        .then(async res => {
+          res.json = await res.json()
+          return res
+        })
+        .then(res => {
+          if (!res.ok) throw new Error(res.json.message + res.json.data ? `\n${res.json.data}` : '')
+          return res.json
+        })
+      return data
+    },
+
+    async setConfig() {
+      // Check if the config is the same
+      if (this.extracts.length > 0 && !this.isConfigNew) return
+
+      this.loadingMessage = 'Loading configuration extracts...'
+      this.loadingErrorMessage = null
+      try {
+        this.extractConfig.x = this.experimentConfig.x
+        this.extractConfig.y = this.experimentConfig.y
+        const data = await this.getExtracts()
+        const hostURI = this.getHostURI
+        this.extracts = data.extracts.map(url => ({
+          link: hostURI + url,
+          quality: data.info.image.quality
+        }))
+      }
+      catch (err) {
+        console.error('Failed to load new configuration', err)
+        this.loadingErrorMessage = 'Failed to load new configuration. ' + err.message
+      }
+      this.loadingMessage = null
     }
   }
 }