Browse Source

Exported configuration to component

rigwild 1 year ago
parent
commit
012b5be81e

+ 79 - 0
src/components/ExperimentsComponents/ExtractConfiguration.vue

@@ -0,0 +1,79 @@
+<template>
+  <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"
+            min="1"
+            max="25"
+          />
+
+          <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"
+            min="1"
+            max="25"
+          />
+
+          <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>
+</template>
+
+<script>
+export default {
+  name: 'ExtractConfiguration',
+  props: {
+    loadingErrorMessage: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // Experiment config sliders
+      experimentConfig: {
+        x: 4,
+        y: 4
+      },
+      // Updated when `setConfig` is called
+      extractConfig: {
+        x: 4,
+        y: 4
+      }
+    }
+  },
+  computed: {
+    isConfigNew() {
+      return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
+    }
+  },
+  methods: {
+    setDefaultConfig(config) {
+      this.experimentConfig.x = config.x
+      this.experimentConfig.y = config.y
+      this.extractConfig.x = this.experimentConfig.x
+      this.extractConfig.y = this.experimentConfig.y
+    },
+    setConfig() {
+      this.extractConfig.x = this.experimentConfig.x
+      this.extractConfig.y = this.experimentConfig.y
+      this.$emit('setConfig', this.experimentConfig)
+    }
+  }
+}
+</script>

+ 3 - 3
src/mixins/ExperimentBase.vue

@@ -22,7 +22,7 @@ export default {
     ...mapGetters(['getHostURI', 'getExperimentProgress'])
   },
   methods: {
-    ...mapActions(['setExperimentProgress']),
+    ...mapActions(['setExperimentProgress', 'sendMessage']),
 
     // Load progress from store into local state
     loadProgress() {
@@ -31,7 +31,7 @@ export default {
 
       const progress = this.getExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName })
       Object.assign(this.$data, progress)
-      console.log('Loaded data from store to local state.', progress)
+      // console.log('Loaded data from store to local state.', progress)
     },
 
     // Save progress from local state into store
@@ -39,7 +39,7 @@ export default {
       if (!this.experimentName || !this.sceneName)
         console.warn('Could not load progress : experimentName and sceneName must be defined')
       this.setExperimentProgress({ experimentName: this.experimentName, sceneName: this.sceneName, data: this.$data })
-      console.log('Saved data from local state to store.', this.$data)
+      // console.log('Saved data from local state to store.', this.$data)
     },
 
     // Load qualities list from the API

+ 5 - 14
src/mixins/ExperimentBaseExtracts.vue

@@ -8,11 +8,6 @@ export default {
   mixins: [ExperimentBase],
   data() {
     return {
-      // Experiment config sliders
-      experimentConfig: {
-        x: 4,
-        y: 4
-      },
       // Updated when `setConfig` is called
       extractConfig: {
         x: 4,
@@ -22,10 +17,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getHostURI']),
-    isConfigNew() {
-      return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
-    }
+    ...mapGetters(['getHostURI'])
   },
   methods: {
     // Load extracts from the API
@@ -44,15 +36,14 @@ export default {
     },
 
     // Config was updated, load extracts and save progression
-    async setConfig() {
-      // Check if the config is the same
-      if (this.extracts.length > 0 && !this.isConfigNew) return
+    async setConfig(config) {
+      if (!config) return
 
       this.loadingMessage = 'Loading configuration extracts...'
       this.loadingErrorMessage = null
       try {
-        this.extractConfig.x = this.experimentConfig.x
-        this.extractConfig.y = this.experimentConfig.y
+        this.extractConfig.x = config.x
+        this.extractConfig.y = config.y
         const data = await this.getExtracts()
         const hostURI = this.getHostURI
         this.extracts = data.extracts.map((url, i) => ({

+ 12 - 41
src/views/Experiments/WithReference.vue

@@ -4,40 +4,9 @@
       <v-layout row wrap>
         <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"
-                    min="1"
-                    max="25"
-                  />
-
-                  <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"
-                    min="1"
-                    max="25"
-                  />
-
-                  <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>
+          <!-- Extract configuration -->
+          <extract-configuration @setConfig="setConfig" :loading-error-message="loadingErrorMessage" ref="configurator" />
+          <!--/ Extract configuration -->
         </v-flex>
         <!-- Loading screen -->
         <loader v-if="loadingMessage" :message="loadingMessage" />
@@ -109,11 +78,13 @@
 import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts.vue'
 import { API_ROUTES } from '@/functions'
 import Loader from '@/components/Loader.vue'
+import ExtractConfiguration from '@/components/ExperimentsComponents/ExtractConfiguration.vue'
 
 export default {
   name: 'ExperimentWithReference',
   components: {
-    Loader
+    Loader,
+    ExtractConfiguration
   },
   mixins: [ExperimentBaseExtracts],
 
@@ -123,20 +94,20 @@ export default {
       referenceImage: null
     }
   },
-  computed: {
-
-  },
 
   async mounted() {
     // Load progress from store into local state
     this.loadProgress()
 
     // Load scene data from the API
-    await this.getReferenceImage()
-    await this.getQualitiesList()
+    await Promise.all([
+      this.getReferenceImage(),
+      this.getQualitiesList()
+    ])
 
     // Get default extracts : min quality, cut config : x = 4, y = 4
-    await this.setConfig()
+    await this.setConfig(this.extractConfig)
+    this.$refs.configurator.setDefaultConfig(this.extractConfig)
     this.saveProgress()
   },
   methods: {