|
@@ -106,8 +106,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters, mapActions } from 'vuex'
|
|
|
-import { API_ROUTES, findNearestUpper, findNearestLower } from '@/functions'
|
|
|
+import ExperimentBaseExtracts from '@/mixins/ExperimentBaseExtracts.vue'
|
|
|
+import { API_ROUTES } from '@/functions'
|
|
|
import Loader from '@/components/Loader.vue'
|
|
|
|
|
|
export default {
|
|
@@ -115,131 +115,39 @@ export default {
|
|
|
components: {
|
|
|
Loader
|
|
|
},
|
|
|
- props: {
|
|
|
- sceneId: {
|
|
|
- type: String,
|
|
|
- required: true
|
|
|
- }
|
|
|
- },
|
|
|
+ mixins: [ExperimentBaseExtracts],
|
|
|
+
|
|
|
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: []
|
|
|
+ experimentName: 'ExperimentWithReference',
|
|
|
+ referenceImage: null
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['getHostURI']),
|
|
|
- isConfigNew() {
|
|
|
- return this.extractConfig.x !== this.experimentConfig.x || this.extractConfig.y !== this.experimentConfig.y
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
|
|
|
async mounted() {
|
|
|
+ // Load progress from store into local state
|
|
|
+ this.loadProgress()
|
|
|
+
|
|
|
+ // Load scene data from the API
|
|
|
await this.getReferenceImage()
|
|
|
await this.getQualitiesList()
|
|
|
|
|
|
// Get default extracts : min quality, cut config : x = 4, y = 4
|
|
|
await this.setConfig()
|
|
|
+ this.saveProgress()
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapActions([]),
|
|
|
-
|
|
|
+ // Load the reference image from the API
|
|
|
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
|
|
|
- },
|
|
|
+ if (this.referenceImage) return
|
|
|
|
|
|
- async getQualitiesList() {
|
|
|
- const URI = `${this.getHostURI}${API_ROUTES.listSceneQualities(this.sceneId)}`
|
|
|
+ const URI = `${this.getHostURI}${API_ROUTES.getImage(this.sceneName, 'max')}`
|
|
|
const { data } = await fetch(URI).then(res => res.json())
|
|
|
- this.qualities = data
|
|
|
- },
|
|
|
-
|
|
|
- async getExtracts(quality = 'max') {
|
|
|
- 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, i) => ({
|
|
|
- link: hostURI + url,
|
|
|
- quality: data.info.image.quality,
|
|
|
- zone: i + 1,
|
|
|
- index: i,
|
|
|
- nextQuality: findNearestUpper(data.info.image.quality, this.qualities),
|
|
|
- precQuality: findNearestLower(data.info.image.quality, this.qualities),
|
|
|
- loading: false
|
|
|
- }))
|
|
|
- }
|
|
|
- catch (err) {
|
|
|
- console.error('Failed to load new configuration', err)
|
|
|
- this.loadingErrorMessage = 'Failed to load new configuration. ' + err.message
|
|
|
- }
|
|
|
- this.loadingMessage = null
|
|
|
- },
|
|
|
-
|
|
|
- async extractAction(event, extractObj) {
|
|
|
- console.log(event, extractObj)
|
|
|
- const { index, nextQuality, precQuality, quality } = extractObj
|
|
|
-
|
|
|
- let newQuality
|
|
|
- if (event.button === 0) newQuality = precQuality // Left click
|
|
|
- if (event.button === 2) newQuality = nextQuality // Right click
|
|
|
-
|
|
|
- // Do not load a new extract if same quality
|
|
|
- if (newQuality === quality) return
|
|
|
-
|
|
|
- // Set loading state
|
|
|
- this.extracts[index].loading = true
|
|
|
- try {
|
|
|
- // Loading new extract
|
|
|
- const data = await this.getExtracts(newQuality)
|
|
|
- this.extracts[index].link = this.getHostURI + data.extracts[index]
|
|
|
- this.extracts[index].quality = data.info.image.quality
|
|
|
- this.extracts[index].nextQuality = findNearestUpper(data.info.image.quality, this.qualities)
|
|
|
- this.extracts[index].precQuality = findNearestLower(data.info.image.quality, this.qualities)
|
|
|
- this.extracts[index].loading = false
|
|
|
- }
|
|
|
- catch (err) {
|
|
|
- // TODO: toast message if fail
|
|
|
- console.error('Failed to load extract', err)
|
|
|
- }
|
|
|
- finally {
|
|
|
- this.extracts[index].loading = false
|
|
|
- }
|
|
|
+ this.referenceImage = this.getHostURI + data.link
|
|
|
+ this.saveProgress()
|
|
|
}
|
|
|
}
|
|
|
}
|